ES6学习笔记二(解构赋值、语法糖)

赋值

一、展开语法

1、数组浅拷贝

const arr = [...'ABCDE'];
console.log(arr); // ["A", "B", "C", "D", "E"]const arr1 = [1, 2];
const arr2 = ['a', ...arr1];
const arr3 = [...arr1, ...arr2];
console.log(arr2);  // ['a', 1, 2]
console.log(arr3);  // [1, 2, 'a', 1, 2]

2、对象浅拷贝

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 30};
console.log(obj2);         // {a:1, b:2, c:30}
const obj3 = {b: 20, c: 30};
const obj4 = {...obj2, ...obj3};  // 合并对象
console.log(obj4);         // {a:1, b:20, c:30}

3、函数调用时传参

function sum(x, y, z) {return x + y + z;
}
const data = [1,2,3];
console.log(sum(...data)); // 6

二、剩余语法

1、函数参数

function fn(name, ...args) {console.log(name);  // 基础参数console.log(args);  // 剩下的参数组成的数组
}
fn('ES6');
//  'ES6'
//  []
fn('abcd', 7, 'ES6');
//  "abcd"
//  [7, "ES6"]

解构

一、数组解构

var [a, b] = [10, 20];
console.log(a);   // 10
console.log(b);   // 20//默认值(对未能取的值的变量赋一个默认值)
let [a=3, b=9] = [1];             // a=3 b=9
let [a, b = 1] = [10, ''];        // a=10, b=''
let [a, b = 1] = [10, undefined]; // a=10, b=1
/*在 ES6 中，判断一个数组中是否有值，使用严格相等运算符（===）来进行断，*只有当一个数组成员严格等于 undefined，默认值才会生效。所以第三个 b *使用了默认值。*/let [a = 1] = [null];             // a=null//null==undefined 返回的是 true，null===undefined 返回的是 false。所以数组成员是 null，默认值就不会生效。//交换变量
var a = 1;
var b = 4;
[a, b] = [b, a] // a=4, b=1//选择性获取值
var [a, , , b] = [10, 20, 30, 40];
console.log(a);   // 10
console.log(b);   // 40//剩余参数
var [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a);     // 10
console.log(b);     // 20
console.log(rest);  // [30, 40, 50]

二、对象解构

var obj = { name: 'abcd', age: 7 };
var { name, age } = obj;  // name: abcd, age: 7var {a = 10, b = 5} = {a: 3};                 // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: undefined};   // a = 3, b = 5
var {a = 10, b = 5} = {a: 3, b: null};        // a = 3, b = nullvar {a, c, ...rest} = {a: 1, b: 2, c: 3, d: 4}
console.log(a);     // 1
console.log(c);     // 3
console.log(rest);  // { b: 2, d: 4 }

三、字符串解构

const [a, b, c, d, e] = 'ABCDE';
console.log(a);   // "A"
console.log(b);   // "B"
console.log(c);   // "C"
console.log(d);   // "D"
console.log(e);   // "E"let {length : len} = 'hello';
console.log(len); // 5

欢迎访问我的个人博客

ES6学习笔记二(解构赋值、语法糖)相关推荐

ES6学习（变量解构赋值）
解构赋值含义:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值 1.数组解构赋值右侧必须是一个数组 let [a, b, c] = [1, ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
石川es6课程---6、解构赋值
石川es6课程---6.解构赋值一.总结一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...
ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
ES6学习笔记二新的声明方式和变量的解构赋值！
新的声明方式在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量 ...
第五节：一个令人兴奋的ES6新特性：解构赋值
端午节刚刚过,大家是回家陪家人吃粽子,还是约好朋友一起出去浪了?昨天上了一天班,不知道大家有没有把出去玩耍的心思收回来,准备接下来的学习. 继续学习吧骚年们...... 学完了前4节,今天我给大家带来 ...
vue解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

ES6学习笔记二(解构赋值、语法糖)

赋值

解构

ES6学习笔记二(解构赋值、语法糖)相关推荐

最新文章

热门文章