ES6——基础入门【箭头函数与this指向-默认值参数-扩展剩余运算符】

貌似ES6中最广为流传的就是它的箭头函数了吧，也难怪，ES6中箭头函数使用方法不仅简便，而且还颇有几分美感且逻辑清晰，箭头函数更是频繁使用在Vue以及React框架中。当然，接下来的这几个ES6语法糖都是非常常用的 😆

目录

一.带参数的默认值函数

二.剩余运算与扩展运算

扩展运算案例（合并数组）：

三.箭头函数

四.箭头函数案例

五.运用箭头函数来完成闭包函数的简化

 六. 箭头函数书写高阶函数

七.箭头函数注意事项——this也想找对象

1.this与arguments

2.箭头函数的new实例化对象

---

一.带参数的默认值函数

什么是带参数的默认值函数？我们知道ES5中我们在调用函数时，如果没有给到形参所对应的实参，那么一般会使用逻辑或来定义一个默认值，不让它出现NaN的情况

function getAdd(x,y){
    x = x || 1;
    y = y || 2;
    return x * y;
}
    // 这里我们故意不给实参
    console.log(getAdd());
    //打印值为2
    //如果不给默认值的话，会打印出NaN

以上是ES5的做法，ES6更加简便些：

function getAdd(x = 10,y = 10){
    return x + y;
}
console.log(getAdd());
//打印出20

//如果只给一个实参呢？
function getAdd(x = 10,y = 10){
    return x + y;
}
console.log(getAdd(90));
//打印出100

ES6其实就是直接在定义形参的时候一并将默认值给到了形参，当我们调用函数时没有给到实参的话，那么就会使用默认值

我们默认值还可以是一个函数

function getVal(val = 5){
    return val * 10;
}

//在getAdd()函数中调用getVal()封装函数
function getAdd(x,y = getVal(10)){
    return x * y;
}
console.log(getAdd(10));

//打印1000

---

二.剩余运算与扩展运算

那一定要先说说剩余运算符（...）

剩余参数，就是在剩余运算符之后跟上一个自定义具名参数，来表示获取到的所有的实参

也叫做rest参数，是ES6用来取代arguments的，下面的this指向篇会有代码演示代替ES5的arguments

const getUser = (...inf) => console.log(inf);
getUser('user', 'username', 'userheight');

// [ 'user', 'username', 'userheight' ]

我们 可以看到打印出了一个数组，数组中有传进去的所有实参，那我们不得不想到ES5中的arguments，它也可以当不确定有多少个参数传进来的时候，来获取所有的参数

那它们有什么区别呢？除了简单易用，还有这么一个区别：我们ES5中的arguments属性获取到的所有参数是以一种伪数组的形式存储，但是通过我们ES6剩余参数的演示，我们不难发现剩余参数是以一种真实的数组来存储获取到的所有数据

以上运算我们称为剩余运算，一般用在形参上

扩展运算和剩余运算的逻辑相背

剩余运算是把多个独立的参数或者说数据合并到一个数组中

而扩展运算是将一个数组分隔，并将各个项作为分离的参数或者说是数据传给函数

扩展运算很简单理解：

扩展运算和剩余运算很像，但是却不一样，我们发现剩余运算放到了函数的形参中，而扩展运算符则是在实参中进行调用，将数组转换为用逗号分隔开来的实参序列

//通过剩余运算的阐述，我们知道...arr代表的是一串数据或者一个数组
//那我们怎么操作才能将它分开呢？

//我们在刚入门JS时，一定做过求最大数最小数，那我们可不可以让计算机把数组拆分开来，然后进行比较呢？

//可以
let arr = [20,100,666];
Math.max(...arr);
Math.min(...arr);

扩展运算案例（合并数组）：

const arrone = ['giao','我giao','你giao'];
const arrtwo = ['你好','你在学习吗','你在学习ES6吗']; 

const arr = [...arrone,...arrtwo];
console.log(arr);

---

三.箭头函数

箭头函数没有自己的this,arguments,super或者是new.target。箭头函数合适那种本来需要匿名函数的地方，并且不能用作构造函数

//ES5:
function(){}

//ES6:
()=>{}

 这样来看好像也看不出来简便到哪里了，我们来简化一段ES5的代码就可以看出来他们的区别了：

//ES5
let data = function(x,y){
    return x + y;
}

console.log(data(10,5));


//ES6简化
let data = (x,y)=> {return x + y};
console.log(data(10,5));

//当有且只有一个形参时，可以省略()
let data = x=> {return x + 1};
console.log(data(10));

//当代码体中只有一条执行语句时，return必须省略：
let data = x => x * x;
console.log(data(10));
//语句的执行结果就是函数返回值

tips：当没有形参时，我们必须要写上（）

const fu =()=> '你好，ES6'

箭头函数适合与this无关的回调，定时器，数组的方法回调等 

箭头函数不适合this有关的回调，事件回调，对象的方法等 

---

四.箭头函数案例

const BOX = document.querySelector('div');
    let flag = 0;
    BOX.addEventListener('click',function(){
        if(flag == 1){
            setTimeout(() => {
            this.style.backgroundColor = 'red';
            flag = 0;
        }, 2000);
        }else{
            setTimeout(() => {
            this.style.backgroundColor = 'blue';
            flag = 1;
        }, 2000);
        }
    });
//点击让盒子在俩秒后变颜色

//列出一个数组中的所有偶数
const arr = [1,5,652,5145,65756,325115,676432,15123,125,41,413,6,346,2536457,56,7];
const ou = arr.filter(item => item % 2 === 0);
console.log(ou);

---

五.运用箭头函数来完成闭包函数的简化

//ES5闭包函数
let fn = (function(){
    return function(){
        console.log("你好,希望你学习ES6很快乐");
    }
})();
fn();


//ES6简化
let fn = (()=>{
    return ()=>{
        console.log("你好,希望你学习ES6很快乐");
    }
})();
fn();

---

 六. 箭头函数书写高阶函数

// ES5写法
function first() {
  return function second(second_prop) {
    return function third(third_prop) {
      return function fourth(fourth_prop) {
        console.log(`${second_prop}--and--${third_prop}--and--${fourth_prop}`);
      };
    };
  };
}

first()('第二')('第三')('第四');

// 第二--and--第三--and--第四

// ES6写法
const first = () => second_prop => third_prop => fourth_prop =>
  console.log(`${second_prop}--and--${third_prop}--and--${fourth_prop}`);
first()('第二')('第三')('第四');
// 第二--and--第三--and--第四

---

七.箭头函数注意事项——this也想找对象

1.this与arguments

在ES6箭头函数中，是没有this指向以及arguments这样查找当前作用作用域对象的属性，因为箭头函数没有function关键词，是查找不到作用域链的

意思就是如果你使用了箭头函数，那么当你在箭头函数中使用this指向的时候，this会依次向上层（父级）查找作用域的this，但是因为箭头函数没有function对象，所以没有查到，那么this继续向上层查找，如果查找到了function对象定义的函数，那么this就指向当前函数作用域链的对象

如果我们全局都使用箭头函数的话，那么this最后找到的当前作用域对象就是window顶级对象

 arguments属性在函数内部是会报错的，所以在ES6中我们并不用arguments

function Test(name, age) {
  const args = arguments;
  console.log(args);
}

Test('Brave-AirPig', 22);

// [Arguments] { '0': 'Brave-AirPig', '1': 22 }

 我就不使用箭头函数做相同的演示了，会报错的

我们如果非要在箭头函数中访问当前作用域对象属性的话，可以使用扩展运算符：

const Test = (...message) => {
  console.log(message);
};

Test('Brave-AirPig', 22);

// [ 'Brave-AirPig', 22 ]

2.箭头函数的new实例化对象

箭头函数不能使用new关键字来实例化对象，因为箭头函数不能做为一个对象