es6-解构与扩展运算符

对象的新语法糖(属性与方法的简写)

• 箭头函数

1. 属性值与属性名相同时
2. 直接将成员变量名作为函数名

let foo = 66;

let o = {             
    foo,              //"foo": foo
    say() {           //say: function() {};
          }
}

函数的新语法

默认参

默认参在不传值以及传入的值是undefined时，会激活默认参

function foo(a, b) {
    console.log((a || 5) + (b || 6));
}
foo()

function foo(a = 1, b = 5) {
    console.log(`a为：${a}, b为：${b}`);
}
//不传值与undefined会激活默认参
foo(99, undefined);

箭头函数

箭头函数后面的表达式的值会被作为返回值传出

let bar = a => a * 6;    //箭头函数后面的表达式的值会被作为返回值传出
console.log(bar(2));

//上下函数等价

let bar = function(a) {
    return a * 6;
}

console.log(bar(2));

箭头函数形参位为多个参或零个参时，用小括号；有多条表达式时，用花括号括起来。

let bar = (a, b) => {
    console.log(a + b);
    return a * b;
}

箭头函数的应用

 setInterval(() => {
     console.log(666);
 }, 1);

箭头函数内部没有内置的this、arguments、super对象

箭头函数不能用new，因为内部没有this

 let o = {
     say: () => {
         console.log(this);
     }
 }

 console.log(o.say());
//window

解构

右边都是要转成对象才能进行解构

不能放不能转化为对象的值(undefined, null)

数组解构

let [a, b, c] = [66, 55, 99];
//a = 66; b = 55; c = 99

let [a, b, c] = [66, 55, 99, 88];
//a = 66; b = 55; c = 99

let [a, [b, c, d]] = [66, [55, 99], 88];
//a = 66; b = 55; c = 99; d = undefined;

let [a, [b, c, d]] = [66, 55, 99, [88]];    //报错，结构不对称

对象的结构

key为匹配模式，value是变量

let {foo: foo} = {foo: 996}
let {foo} = {foo: 996}           //上面的语法糖

let {foo: bar} = {foo: 996}      

扩展运算符

具备遍历器接口的数据结构可以使用扩展运算符

let arr = [1, 2, 3];

console.log(...arr);          //1,2,3
// console.log(1, 2, 3);

扩展运算符的应用(call的实现)

Function.prototype.call1 = function(thisArg) {
    thisArg._fn = this;
   	//Array.form()是将类数组对象转为数组
    thisArg._fn(...Array.from(arguments).slice(1));
    delete thisArg.fn;
}

function f(a, b) {
    console.log(this);
    console.log(a + b);
}

f.call1([99], 55, 66);

剩余参数

剩余参数依赖的是解构和扩展运算符

 function add(a, b, ...args) {
     //剩余参数是一个数组
     console.log(args);
     //[3, 4, 5, 6]
 }

console.log(add(1, 2, 3, 4, 5, 6));

剩余参数的应用（call()、apply()实现）

 Function.prototype.call1 = function(thisArg, ...agrs) {
     thisArg._fn = this;
     thisArg._fn(...agrs);
     delete thisArg._fn;
 }

//因为apply本身传进来的就是数组，只需要在使用时打开数组就行
Function.prototype.apply1 = function(thisArg, arglist) {
    thisArg._fn = this;
    thisArg._fn(...arglist);
    delete thisArg._fn;
}

剩余参数的应用（解决arguments不能用数组进行遍历）

function add() {
    [...arguments].forEach();
}

解构与扩展运算符的应用

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

let {a, b, ...c} = {a: 5, b: 6, c: 7, d: 8}
console.log(c);
/*
{
    c: 7,
    d: 8
}
*/

参数和返回值的解构

function add([a, b]) {
    console.log(a + b);
}

add([5, 3])

function add([a, b]) {
    console.log(a + b);
    return [a**a, b**b];
}

let [res1, res2] = add([2, 3]);
console.log(res1);
console.log(res2);

function move({x, y} = {x: 0, y: 0}) {
    return [x, y];
}

move({x: 3, y: 8}) //[3, 8]
move({x: 3})       //[3, undefined]
move({})           //[undefined, undefined]
move()             //[0, 0]

字符串的解构

let [a, b, c, d, e, f] = "hello"
console.log(a);    //h
console.log(b);    //e
console.log(c);    //l
console.log(d);    //l
console.log(e);    //o
console.log(f);    //undefined