1、解构赋值
ES6 中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
1.1 数组解构
数组解构允许我们按照一 一对应的关系从数组中提取值,然后将值赋值给变量。
如果解构不成功,变量的值为 undefined 。
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
let ary = [1, 2, 3];
let [a, b, c, d, e] = ary;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 如果解构不成功,变量的值为undefined
console.log(d); // undefined
console.log(e); // undefined
1.2 对象解构
(1)解构赋值
按照一定模式,从数组中或对象中提取值,将提取出来的值赋值给另外的变量。
(2)对象解构
对象解构允许我们使用变量的名字匹配对象的属性,匹配成功,将对象属性的值赋值给变量。
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {
name: 'lisi',
age: 30,
sex: '男'
};
let { name, age, sex } = person;
console.log(name); // lisi
console.log(age); // 30
console.log(sex); // 男
let { name: myName, age: myAge } = person; // myName myAge 属于别名
console.log(myName); // lisi
console.log(myAge); // 30
2、剩余参数
-
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
-
… 表示剩余参数
// 1. 剩余参数语法允许我们将一个不定数量的参数表示为一个数组
// ...表示剩余参数
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
};
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
- 剩余参数和解构配合使用
// 2. 剩余参数和解构配合使用
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1; // 数组解构
console.log(s1); // 张三
console.log(s2); // ["李四", "王五"]
3、箭头函数
ES6 中新增的定义函数的方式。
- 箭头函数是用来简化函数定义语法的
// () => {}
// 1. 箭头函数是用来简化函数定义语法的
const fn = () => {
console.log(123);
}
fn();
- 在箭头函数中,如果函数体中只有一句代码,并且代码的执行结果就是函数的返回值,函数体大括号可以省略
// 2. 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
// const sum = (n1, n2) => {
// return n1 + n2;
// }
const sum = (n1, n2) => n1 + n2;
const result = sum(10, 20);
console.log(result); // 30
- 在箭头函数中,如果形参只有一个,形参外侧的小括号也是可以省略的
// 3. 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
const fn1 = v => alert(v);
fn1(40);
- 箭头函数不绑定 this 关键字,箭头函数中的 this,指向的是函数定义位置的上下文 this
// 4. 箭头函数不绑定this 箭头函数没有自己的this关键字
// 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的上下文this
function fn2() {
console.log(this);
return () => {
console.log(this);
}
};
const obj = { name: 'zhangsan' };
// const resFn = fn2.call(); // this指向 window
// resFn(); // this指向 window
const resFn = fn2.call(obj); // this指向obj { name: 'zhangsan' }
resFn(); // this指向obj { name: 'zhangsan' }
// 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age); // 此时的this指向的是window
}
}
obj.say(); // 100