箭头函数

简单的“栗子”

let fn = function (parameter) {
    return parameter;
};
----------------------相当于这个↓--------------------------------------
let fn = parameter => parameter;  //Q1

函数传多个参数

  let add = function(a,b){
      return a+b;
    }
--------------------相当于这个↓--------------------------------------
 let add = (a,b)=>{
      return a+b;
    }

如果需要返回的是一个对象

 let fn = ({ name, age }) => ({ name: "洋葱",
      age: 10 })
    var res = fn({
      name: "洋葱",
      age: 10
    })
    console.log(res);//结果：  {name: '洋葱', age: 10}

语法格式

语法格式：
        (形参)=>{
           代码或叫做函数体
        }
//如果函数只有一个表达式和，可以{}和return如上例子Q1，如果函数只有一个形参可以省略()

箭头函数&普通函数>>>对比

箭头函数内部的this是内部作用域，由上下文决定，如果箭头函数被非箭头头函数包裹，this绑定的就是最近一层非箭头函数的this

//普通函数包裹普通函数
 var box = document.getElementById('box');
    box.onclick = function () {
      let fn = function(){
        console.log(this);//this指向window
      }
      fn(); 
      console.log(this);//此处的指向box
    }

//普通函数包裹箭头函数
var box = document.getElementById('box');
    box.onclick = function () {
      let fn = () => {
        console.log(this)//由于箭头函数的this是内部作用域，此处距离箭头函数最近一层的非箭头函数是box
      };
      fn(); //调用
      console.log(this);//此处的指向box
    }

无法改变箭头函数的this指向

  var p = {name:"洋葱"}
  let fn = ()=>console.log(this);//this指向为window，并没有修改成功
  fn.call(p);//~~这里我们修改箭头函数的this指向~~~

箭头函数没有arguments

  var fn2 = (...arr)=>console.log(arr);//Q2：这里的...arr是什么？
    fn2(1,3,5)
    console.log(arguments);//报错：Uncaught ReferenceError: arguments is not defined

不能够通过new关键字调用

   var arrowFuction = () => {};
   var arrowFuction1 = new arrowFuction(); //报错：TypeError: Foo is not a constructor
   console.log(arrowFuction1.prototype);//报错：Uncaught TypeError: arrowFuction is not a constructor
//注意：箭头函数不能通过new关键字调用，所以箭头函数也没有原型，也不能通过 super 来访问原型的属性。

扩展运算符（...某某某）Q2

使用扩展运算符可以是我们的代码更加简洁

数组中的使用

数组的合并

 let arr1 = [1,3,5]
 let arr2 = [2,4,6]
 let arr = [...arr1,...arr2];
 console.log(arr);//结果：[1,3,5,2,4,6]

数组的分割

  let arr=[1,3,5,7,9,11]
  let [a,b,c,...d]=arr//会从数组arr的第4个元素开始截取直至最后一个元素
  console.log(d)//结果：[7,9,11]

拷贝数组

//简单一维数组
const Month = [1, 3, 5, 7];
const copyMonth = [...Month];
console.log(copyMonth); // [ 1, 3, 5, 7 ]

//二维数组(只会对第一层进行深拷贝)
const twdarr=[1,3,5,[2,4,6],7,9];
const copytwdarr = [...twdarr];
copytwarr[1][0] = 0;//将二维数组arr的第二个元素的值改为0
copytwarr[1] = 666;//在二维数组的第二个元素中插入666
copytwarr[5] = 999;//将二维数组的第五个元素改为999
console.log(copytwdarr)//结果是什么呢？自己试试看😉

将伪数组转换为真正的数组

const nodeList = document.querySelectorAll(".box");//所有盒子的节点是个伪数组
const nodeArray = [...nodeList];//将伪数组转为真正对的数组
console.log(nodeList);//__proto__  是NodeList
console.log(nodeArray);//__proto__  是Arry
//这里我们也可以用instanceof来判断是不是一个真正对的数组

对象中的使用

--------------------数组、函数也属于对象的一种，所以在对象中的使用和在数组中使用类似---------------

扩展运算符拷贝对象只会在第一层进行深拷贝，大伙可以用类似数组拷贝的方式验证一下

//拷贝对象
const Preson = {
    name: "洋葱",
    age: 7,
    skill: {
        value: "cry哭",
    },
};
const copyPerson = { ...Person };
console.log(copyPerson); // { name: 洋葱, age: 7, skill: { value: cry哭 } }

函数参数传递

const Mintth = (n1, n2) => n1*n2;//注意这里只有两个参数
console.log(Mintth(...[6, 7])); //42
console.log(Mintth(...[6, 7, 10])); // 猜猜结果是啥？结果是：42

总结

使用箭头函数和扩展运算符可以使代码更加简洁，使用的时候需要多留意一下注意事项。

JS箭头函数和扩展运算符