解构赋值

• ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

数组解构

变量与数组中的元素个数一致

let ary=[1,3,5];
let [a,b,c]=ary;

• 设置默认值

let [x,y,z=10]=[1,2,3]; // 数组中有，则覆盖，没有则保持默认值。 只有数组中的值为undefined时，变量才使用默认值。

变量多于数组中元素个数

let ary =[1,3,5];
let [a,b,c,d,e]=ary;// d,e 为undefined

变量少于数组中元素个数

let [a,b]=[1,3,5]; //a:1,b:3

• 省略赋值

let [,,a]=[1,3,5]; //a=5

• 不定参数赋值(使用扩展运算符)

let [a,b,...c]=[1,3,5,7,9]; //a:1 b:2 c:[5,7,9]

对象解构

• 允许使用变量的名字匹配对象的属性

变量与对象属性个数一致

变量名与属性名一致的写法

• 变量的顺序可以与属性顺序不一样

let person={name:"Nick",age:18};
let {age,name}=person;
// 等同于
let {name,age}=person;
// 等同于
let {name:name,age:age}={name:"Nick",age:18};
//等同于
let age,name;
({name,age}={name:"Nick",age:18});

• 赋默认值

let {name,age=100}={name:"Nick",age:18};
// 情况与数组的解构一样

• 嵌套数组

//此处的friends中的元素名是变量
let {name,age,friends:[f1,f2,f3]}={name:"Nick",age:18,friends:["Tony","Jack","Lisa"]}; 
console.log(name,age,f1,f2,f3);

变量名与属性名可以不一致的写法

let person={name:"Nick",age:18};
let {name:windowName,age:windowAge}=person;// 匹配person。name---->赋值于windowName

其他数据类型的解构

// 数组的解构赋值形式，将字符串转为类数组（类似数组的对象，被转换的对象必须有一个length属性）
let [x,y]="123";
let [x,y]=1; // 1 is not iterable 不可迭代。。

// 对象的解构赋值形式 将等号右边的转为对象
let {a}=1; 
console.log(a);//undefined

函数参数的解构赋值

// 参数是数组
function getA([a,b,c,..d]){
    console.log(a,b,c,d);
}
getA([1,2,3,4,5]);// a:1,b:2,c:3,d:[4,5]


// 参数是对象 并赋默认值
function getB({name,age=18}){
    console.log(name,age);
}
getB({name:"Nick"});// 输出：Nick 18
getB(); // 报错
// 赋默认值的两种情况
function getA1({name="Nick",age=18}={}){
    console.log(name,age);
}
getA1(); // Nikc 18
getA1({}); // Nick 18

function getA2({name,age}={name:"Nick",age:18}){
    console.log(name,age);
}
getA2();// Nick 18
gerA2({});//unddefined nundefined

箭头函数

• es6中新增的定义函数的方式,用来简化函数定义。
• ()=>{}
• const fn=()=>{};

省略大括号的情况

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

function sum(num1,num2){
    return num1+num2;
}
// 等同于
const sum=(num1,num2)=>{
    return num1+num2;
}
// 等同于
const sum=(num1,num2)=>num1+num2;

省略小括号

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

function fn(v){
    return v;
}
const fn=v=>{
    return v;
}
// 等同于
const fn=v=>v;
console.log(fn(1));// 1

this关键字

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

const obj={name:"Nick"};
function fn(){
    console.log(this); 
    return()=>{
        console.log(this);
    }
}
const newFn=fn.call(obj);
newFn();
// 输出的两个this都是 obj
//call、apply、bind不改变this的指向。?????

function fn(){
    console.log(this); 
    return()=>{
        console.log(this);
    }
}
let ret =fn();// window
ret();// window

var age=100；// ES6中，使用let声明的变量不是window的属性
let obj={
    age:20,
    say:()=>{
        alert(this.age);
    }
}
obj.say();// 100 this指向箭头函数定义位置上下文的this，obj（对象）不能产生作用域，即不能产生this

箭头函数没有arguments

let fn=()=>{console.log(arguments);}; //
fn(); // is not defined


// 可以这样,使用扩展运算符
let fn1=(...args)=>{console.log(args);};
fn1(1,2,3,4);

箭头函数不可以用作构造函数，不可以使用new操作符。

let F=()=>{};
console.log(new F); // F is not a constructor