ECMAScript 6 实用特性

关于ES6

ES6是 JavaScript 语言的下一代标准，提供了有利于开发的新特性

1.变量与常量声明:

let 和 const 命令差别:let定义变量，可以被重新赋值;const定义常量，不能被重新赋值。

let	const
不会变量提升	不会变量提升
有块级作用域(大括号内的变量/常量无法被外部访问)	有块级作用域
不能在同一作用域内重复声明，可以重新赋值	不能在同一作用域内重复声明，无法修改值（成为常量）

2.对象快速赋值

<script>
    let name = "jack";
    let skill = "跳海";
    let sayHi = function(){
        console.log("rose,byebye");
    };

    let person = {
        name,//等同于name:name
        skill,//等同于skill:skill
        sayHi,//等同于sayHi:sayHi
        //方法的简写方式,等同于jump:function(){console.log("rose也一起跳了")}
        jump(){
            console.log("rose也一起跳了");
        }
    };
   
    console.log(person.name);//jack
    console.log(person.skill);//跳海
    person.sayHi();//rose,byebye
    person.jump();//rose也一起跳了
</script>

3.箭头函数(Arrow Function):

Ⅰ.常规函数的定义:

方式1:函数表达式
var fn1 = function(a, b) {
    return a * b
}

方式2:函数式声明
function fn2(a, b) {
    return a * b
}

Ⅱ.ES6箭头函数语法

NO.	语法
1.	将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体
2.	函数体只有只包含一个表达式，连{ ... }和return都可以省略掉
3.	参数只有一个可以省略()

如:
  var fn = function(a,b){
        return a*b;
    }
  console.log( fn(3,4) );//12

可以简写为:
  var fn = (a,b)=>a*b;
  console.log( fn(3,4) );//12

若是参数只有一个可以省略():
  var fn = a=>a*4;
  console.log( fn(3) );//12

注意:
如果要返回一个对象，这么写的话会报错：
// SyntaxError:
x => { foo: x }

应该要改成:
x => ({ foo: x })

箭头函数的作用:

NO.	语法
1.	箭头函数this指向，由上下文确定
2.	函数体只有一个表达式，连{ ... }和return都可以省略掉
3.	参数只有一个可以省略()

4.ES6模板字符串

模板字符串用于字符串拼接，用反引号标识

<script>

     //模板字符串的应用:拼接字符串
          let writer = "baojun";
          //ES5
          let point1 = "前端码农"+writer;
          console.log(point1);//前端码农baojun
          //ES6
          let  point2 = `编程菜鸡${writer}`;
          console.log(point2);//编程菜鸡baojun

</script>

5.扩展运算符:

Ⅰ.从rest参数说起
rest参数就是用'...变量名'的形式替代了函数参数中的arguments对象,它是一个数组

    <script>
        function study (fist, ...rest) {
            console.log(fist);  //欢迎
            console.log(rest);  //["学习", "E", "S", "6"]
        }
        study("欢迎","学习","E","S","6");
        //如果在参数中只传入rest参数的话,它代表的就是将所有arguments对象当成元素的数组
    </script>

Ⅱ.扩展运算符:
其实就是rest参数的逆运算，用'...数组名'将一个数组转为用逗号分隔的参数序列

<script>

     //扩展运算符的运用
       //1.替代数组中的apply方法
       let arr = [1,2,3];
       function test (a,b,c) {
           console.log(a);
       }
       //ES5写法
       test.apply(null,arr);//1
       //ES6写法
       test(...arr)//1



       //2.合并数组
       let arr1 = [1,2];
       let arr2 = [3,4];
       let arr3 = [5,6]
       //ES5写法
       var arr4 = arr1.concat(arr2,arr3);
       console.log(arr4);//[1, 2, 3, 4, 5, 6]
       var arr5 = [...arr1,...arr2,...arr3]
       console.log(arr5);//[1, 2, 3, 4, 5, 6]
        
</script>

6.解构赋值:

可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

<script>
       //解构赋值的应用
          //1.数组的解构赋值
          let [h,i,j] = [1,2,3];
          console.log(h);//1

          //2对象的解构赋值
          let {name,age} = {name:"baojun",age:18};
          console.log(name);//"baojun"
          
          //字符串的解构赋值
          let [a,b,c,d,e] = "hello";
          console.log(a);//"h"
          

</script>

7.ES6数组新方法:

Ⅰ.es6 arr.filter() 数组过滤

NO.	运行步骤
1	创建新数组，不改变原数组
2	输出的是判断为true的数组元素形成的新数组
3	回调函数参数，item(数组元素，必选)、index(元素对应的序列号，可选)、arr(数组本身可选)
4	使用return操作输出，会循环数组每一项，并在回调函数中操作

 <script>
      //es6 filter() 数组过滤

      var arr = [1, 2, 3, 4, 5];
      var newArr = arr.filter(function (item, index) {
          return item > 2 && item < 5; //根据判断为true来遍历循环添加进新数组
      })
      console.log(newArr); //打印新数组: [3, 4]
      console.log(arr); //打印原数组: [1, 2, 3, 4, 5]
</script>

Ⅱ.es6 arr.find() 数组查找

NO.	运行步骤
1	不创建新数组，不改变原数组
2	输出的是一旦判断为true则跳出循环，输出符合条件的数组元素
3	回调函数参数，item(数组元素，必选)、index(元素对应的序列号，可选)、arr(数组本身可选)
4	使用return操作输出，会循环数组每一项，并在回调函数中操作

<script>
      var arr = [1, 2, 3, 4, 5];
      var new2 = arr.find(function (item, index) {
          return item.toString().indexOf(5) > -1; //把当前数组元素转为字符串，则可index()>-1判断是否含有某字符
      })
      console.log(new2) //打印符合条件的元素:5
      console.log(arr); //打印原数组[1, 2, 3, 4, 5]
</script>

本文同步发表在我的个人博客：https://www.lubaojun.com/