ES6 新增语法

180 阅读2分钟

解构赋值

ES6 中运行从数组中提取值,按照对应位置,对应遍历赋值。对象也可以解构。

例子:将数组中的值提前在赋给变量(数组解构)

const arr = [1, 2, 3]
const [a ,b ,c, d] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined

注意:数组解构允许我们按照一一对应的方式从数组中提取值然后赋值给变量。如果变量没有对应的值会输出 undefined

例子:将对象中属性的值赋给变量(对象解构)

const obj = {
    name: 'ldh',
    age: '18'
}
const {name, age} = obj
console.log(name) //ldh
console.log(age) //18

注意:解构对象变量的名字要和属性的名字一样才行

例子:(对象解构,变量名可以和属性名不一样的方法)

let obj = {
    name: 'ldh',
    age: 15
}
let {name: a, age: b} = obj
console.log(a)
console.log(b)

左侧的属性名和右侧的属性名进行匹配,然后将右面的属性值赋值给左面的属性值(这里左边的属性值就是变量)。

箭头函数

语法:

()=>{}
//通常是要把函数赋给一个变量来使用的
const fn = ()=>{}

例子:

箭头函数的特点:

  • 如果函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号。

例子:

const fn = (a, b) => a + b
//等价于 fn = (a, b) => { return a + b }
console.log(fn(1, 2));

箭头函数的 this

箭头函数不绑定 this 关键字, 箭头函数中的 this ,指向的是函数定义位置上下文的 this 。

例子:

const obj = {
    name: '张三'
}
function fn(){
    console.log(this)
    return () => {
        console.log(this)
    }
}
const resFn = fn.call(obj)()

**注意:箭头函数的值指向了 obj 并没有指向 window ,因为箭头函数的 this 指向是更具上下文决定的,所以这里的 this 就是 fn 里面的 this **

剩余参数

当函数的实参个数大于形参个数时,我们将剩余的实参放在一个数组中。

例子:

function sum(first, ...args){
    console.log(first) //10
    console.log(...args) //20 30
}
sum(10, 20, 30)

例子:我们可以计算两个值得和,或者多个值的和

例子:可以将剩余参数和解构一起使用

const obj = {
    name: '张三',
    age: 30,
    sex: '男',
}

const {...args} = obj
for (let argsKey in args) {
    console.log(args[argsKey])
}