解构和箭头函数

数组解构

1.完全解构

let  [a,b,c,d,e] =  [1,2,3,4,5];

  console.log(a,b,c,d,e);

let [a,b,c,d,e] = [1,2,3,[4,5,6],7];

  console.log(a,b,c,d,e);

2.不完全解构

let [a,b,c,[d],e] =  [1,2,3,[4,5,6],7];

  console.log(a,b,c,d,e);

3.集合解构 拓展运算符

let [a,...b] = [1,2,3,4,5];

  console.log(a,b);

4.默认值解构 当没有与变量匹配的值，默认值就生效

let [a=4,b=5,c=6] = [1,2,3];

  console.log(a,b,c);

默认值也可以是函数

  function foo(){

    console.log('我是foo函数');

  }

  let [a=foo()] = [1,2,3];

  console.log(a);

对象解构

右侧对象中的属性要完成解构 左侧变量必须和属性同名

 let {foo,bar} =  {foo:'hello',bar:'world'};

重命名解构

let {foo:baz} = {foo:'hello',bar:'world'};

console.log(baz)

嵌套解构

let obj={p:['hello',{y:"world"}]};

let {p:[a,{y:b}]} = obj;

console.log(a,b);

默认值  给对象变量设置默认值

let {x:y=2} = {x:1};

console.log(y);

小案例：

const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f, f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);//1 2 3 [11,999] undefined  undefined 5 {i:6 j:7}

其他类型解构

1.字符串解构 数组和对象对字符串完成解构

let [a,b,c,d,e] = 'hello';

console.log(a,b,c,d,e);

let [...arr] = 'hello';

console.log(arr);

let {toString,valueOf,length} = 'hello';

console.log(toString,valueOf,length);

2.对数值解构

let  {toString,valueOf} = 10;

console.log(toString,valueOf);

3.对布尔值进行解构

let  {toString,valueOf} = true;

console.log(toString,valueOf);

箭头函数

let foo = (...res)=>{
  //箭头函数内部没有this属性 不再用arguments属性保存实际参数 用rest参数保存实际参数
  console.log(this,arguments,'arguments')
  console.log(res);
}
foo(1,2,3)
// 普通函数有原型对象  箭头函数没有原型对象
 function bar(){}
 console.log(bar.prototype.toString(),foo.prototype);

箭头函数和普通函数区别?

  1.普通函数内部this指向全局对象,对象中方法指向调用者

  2.箭头函数内部没有this属性,this指向声明箭头函数外部作用域的this

  3.普通函数有原型对象,箭头函数没有原型对象

  4.普通函数使用arguments保存实际参数，箭头函数不再使用arguments保存实参，rest参数保存实参

  5.外观上 ()=>{} function(){}

拓展运算符

var arr = [1,2,3,4,5];

let [...res] = arr;

console.log(res,res===arr);