ES6（解构、箭头函数、length、拓展运算符、rest、模板字符串）

目录

变量声明

常量声明

解构赋值

数组的解构

对象的解构

面试题

字符串的解构

数值的解构

布尔值的解构

函数参数的解构

函数的length属性

对象简写

箭头函数

箭头函数的this始终指向函数声明时所在作用域下的 this 的值

箭头函数中arguments不再保存实参，如果想要保存实参，用rest参数

箭头函数不能作为构造函数实例化对象

箭头函数适合与 this 无关的回调，定时器， 数组的方法回调

箭头函数不适合与 this 有关的回调， 事件回调，对象的方法

案例

1、点击 div 2s 后颜色变成粉色

2、从数组中返回偶数的元素

箭头函数的简写

1、如果形参只有一个，则小括号可以省略

2、如果函数体只有一条语句，则花括号可以省略，函数的返回值为该条语句的

执行结果

rest 参数，用在形参

拓展运算符

...拓展运算符解构数组，解构出来的是新数组

...拓展运算符解构对象，解构出来的是新对象

...拓展运算符用到左侧是聚合，用到右侧是展开

  应用

模板字符串（反引号" ` "）

内容中可以直接出现换行符

变量拼接，使用 ${xxx} 形式输出变量

---

变量声明

let：不能重复声明，块级作用域，在变量声明之前使用会报错，不影响作用域链效果

var：可以重复声明，在变量声明之前使用不会报错

案例：点击换色

常量声明

const：一定要赋初始值，一般常量使用大写，常量的值不能修改，块级作用域，

但是对象属性修改和数组元素变化不会出发 const 错误

解构赋值

        ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

数组的解构

// 完全解构 let [a,b,c,d,e] = [1,2,3,4,5]; console.log(a,b,c,d,e);
// 完全解构 let [a,b,c,d] = [1,2,3,[4,5]]; console.log(a,b,c,d);
// 不完全解构 let [a,b,c,[d],e] = [1,2,3,[4,5,6],7]; console.log(a,b,c,d,e);
// 集合解构（拓展运算符） let [a,...b]=[1,2,3,4,5]; console.log(a,b);
// 默认值解构 let [a=1,b=2,c=3] = [4,5,6]; console.log(a,b,c); // 当变量的值为undefined时,默认值生效 let [a=1,b=2,c=3] = [,,]; console.log(a,b,c);
// 默认值解构（默认值为函数） function test(){     console.log('默认值为函数'); } let [a=test()] = [1]; console.log(a); function test(){     console.log('默认值为函数'); } // 当变量的值为undefined时,默认值生效 let [a=test()] = []; console.log(a); 或 function test(){     console.log('默认值为函数');     return 1 } let [a=test()] = []; console.log(a);

对象的解构

        等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

// 变量与属性同名 let {name,age} = {name:'hello',age:'22'}; console.log(name,age);
// 变量与属性不同名，要给变量重命名 let {name:baz} = {name:'hello',age:'22'}; console.log(baz);
// 嵌套解构 let obj = {p:['hello',{y:'world'}]}; // 层层解构，遵循模式匹配原则 let {p:[a,{y}]} =obj; console.log(a,y);
// 默认值解构 let {x:y=3} = {}; console.log(y); let {x:y=3} = {x:4}; console.log(y);

面试题

// 数组的解构 const [a,b,c,...d] = [1,2,3,11,999]; // 对象的解构 const {e,f,f1,g,...h} = {f:4,g:5,i:6,j:7}; console.log(a,b,c,d,e,f1,g,h)

字符串的解构

// 使用数组解构 let [a,b,c] = 'string'; console.log(a,b,c);
// 将字符串转换为数组（字符串解构） let [...str] = 'hello'; console.log(str); // 将字符串转换为数组（Array.from();） let name = 'hello'; let result1 = Array.from(name); console.log(result1); // 将字符串转换为数组（Array.prototype.slice.call(str,0);） let result2 = Array.prototype.slice.call(name,0) console.log(result2);
// 使用对象解构 let {toString,valueOf,length} = 'hello'; console.log(toString,valueOf,length);

数值的解构

// 使用对象解构 let {toString,valueOf} =10; console.log(toString,valueOf);

布尔值的解构

// 使用对象解构 let {toString,valueOf} =true; console.log(toString,valueOf);

函数参数的解构

// 函数参数对象解构 function test({name,age,...a}){     console.log(name,age,a); } test({name:"zhangsan",age:15,gender:'男',weight:'20kg'})
// 函数参数对象默认值解构 function test({ name, age = 15, gender }) {     console.log(name, age, gender); } test({ name: "张三", gender: '男' })
// 函数参数数组解构 function test([a, ...b]) {     console.log(a, b); } test([1, 2, 3, 4]);

函数的length属性

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。通产情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数。

function log(x, y, z) {}; log(1, 2, 3); console.log(log.length);	3
function log(x, y = 'hello', z) {}; log(1, 2, 3); console.log(log.length);	1

对象简写

        ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。

ES5	ES6

箭头函数

箭头函数的this始终指向函数声明时所在作用域下的 this 的值

声明 在 对象 中	let name = 'zhangsan'; let age = 12; let obj = {     name,     age,     sayName() {         return () => {             console.log(this);             // 箭头函数没有this             // this--->obj         }     } }; obj.sayName()();
声明 在 模块 中	let name = 'zhangsan'; let age = 12; let sayName = () => {     console.log(this);     // this--->当前模块 }; let obj = {     name,     age,     sayName() {         // 在对象的函数中调用         return sayName     } }; obj.sayName()();

箭头函数中arguments不再保存实参，如果想要保存实参，用rest参数

let test = (a, b) => {     console.log(a,b,this,arguments); } test(1, 2, 3, 4)
let test = (a, ...b) => {     console.log(a,b); } test(1, 2, 3, 4)

箭头函数不能作为构造函数实例化对象

箭头函数适合与 this 无关的回调，定时器， 数组的方法回调

箭头函数不适合与 this 有关的回调， 事件回调，对象的方法

案例

1、点击 div 2s 后颜色变成粉色

2、从数组中返回偶数的元素

箭头函数的简写

1、如果形参只有一个，则小括号可以省略

2、如果函数体只有一条语句，则花括号可以省略，函数的返回值为该条语句的

执行结果

rest 参数，用在形参

ES5 获取实参的方式：arguments

ES6 引入 rest 参数，用于获取函数的实参，非常适合不定个数参数函数的场景，rest 参数必须要放到参数最后

拓展运算符

...拓展运算符解构数组，解构出来的是新数组

let arr=[1,2,3,4,5]; let [...a]=arr; console.log(a); console.log(a===arr);

...拓展运算符解构对象，解构出来的是新对象

let obj={name:'zhangsan',age:'lisi'}; let {...b}=obj; console.log(b); console.log(b===obj);

...拓展运算符用到左侧是聚合，用到右侧是展开

左边--聚合	右边--展开
如上	let obj = {     name: 'zhangsan',     age: 15 }; // 将obj中的对象进行展开并赋值给obj1 let obj1 = { ...obj }; obj1.gender = '男'; console.log(obj1);

  应用

数组的合并
数组的克隆
将伪数组转为真正的数组

模板字符串（反引号" ` "）

内容中可以直接出现换行符

变量拼接，使用 ${xxx} 形式输出变量