ES6数组解构,对象解构,箭头函数,剩余参数

ES6赋值解构,箭头函数,剩余参数

1.赋值解构

1.1数组解构

数组解构就是按照一一对应的关系从数组中提取值然后将值赋值给变量

let arr = [10,20,30];
let [a,b,c,d] = arr;
console.log(a,b,c,d);//10 20 30 undefined
//a,b,c变量对应有值,变量d没有,为undefined

1.2对象解构

let obj = {
    name:"小明",
    age:18
}
let {name,age} = obj;
console.log(name,age); //小明 18
/********************************************/
let {name:n,age:a} = obj;  //n和a相当于中介
console.log(n,a); //小明 18

注意:

1.解构赋值就是把数据解构分解,然后给变量进行赋值;

2.如果结构不成功,变量跟数值个数不匹配的时候,变量的值为undefined;

3.数组解构用[ ] 包裹,多个变量用逗号隔开,对象解构使用{ } 包裹,多个变量使用逗号隔开;

2.箭头函数

() => { }  //():代表是函数; =>:必要的符号,指向代码块; {}:函数体

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

//旧版
function sum (num1,num2){
    return num1 +num2;
}
//新版
const sum = (num1,num2) => num1+num2;

2.如果形参只有一个,可以省略小括号

//旧版
function fn(a){
    return a;
}
//新版
const fn = a => a;

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

const obj = {
    name: '小明'
}
function fn(){
    console.log(this); //this指向obj对象,调用函数时使用call改变了this的指向
    return ()=>{
        console.log(this);//this指向的是箭头函数定义的位置,这个箭头定义在fn函数内,这个fn指向obj对象,所以这个this也指向obj对象;
    }
}
const fnn = fn.call(obj);
fnn();

注意:

1.箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁;

2.箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题;

4.面试题

var age = 18;
var obj = {
    age : 30,
    study: () => {
        console.log(this.age);//18
    }
}
obj.study();//箭头函数this指向的是被声明的作用域里面.而对象没有作用域,所以箭头函数虽然在对象中被定义,但是this指向的是全局作用域

3.剩余参数

剩余参数就是将一个不定数量的参数表示一个数组,不定参数定义方式,这种方式很方便去声明不知道参数情况下的一个函数;

function sum (first,...ages){
  	console.log(first);//10
    console.log(args); //[20,30,40,50]
}
sum(10,20,30,40,50);

剩余参数和解构配合使用

let arr = [10,20,30];
let [a,...b] = arr;
console.log(a); //10
console.log(b); //[20,30]