ES6新增特性

ES6:  ECMA 第六次改版

 

块级作用域：

  凡是被{ }包裹住的代码都是块级作用域，除了对象

      特点：会造成一个暂时性死区

 

 新增声明变量的两种方式：

let: 

   a. 不能重复被定义

   b.没有变量声明提升

   c.有块级作用域的用法，可以在块级作用域里做个保留

  

const：

    a.定义一个常量，不允许被修改

    b.没有变量声明提升

    c.声明了不能不允许不赋值

    d.支持块级作用域

 

字符串模板：

   ES6之前

var age = 20;

var str = "<div class = 'box'><span>"+age+"</span></div>"

 

 ES6之后

var age = 20;

var str = `<div class = 'box'><span>${age}</span></div>`

 

var age = "20";

var str = `<div class = 'box'><span>${age.slice(1)}</span></div>`  // 变量可以做很多js操作

 

 

字符串新增api:

includes:

 匹配当前字符是否出现在字符串中，如果存在则返回true,不存在则返回false

var str = "1906"

console.log(str.includes(5)) //false

console.log(str.includes(1)) //true

 

startsWith:

  匹配字符串的第一个字符 如果存在则返回true 不存在返回false

var str="1906"

console.log(str.startsWith(9)) //false

 

endsWith:

匹配字符串的最后一个字符 如果存在则返回true 不存在返回false

var str="1906"

console.log(str.endsWith(9)) //false

 

repeat(n) 重复多少次

var str="1906"

console.log(str.repeat(4) //代表当前这个句话重复4次

 

 

解构赋值：

     按照某种规则，将数据进行拆分

let arr = [10,20,30]

let [a,b] = arr

console.log(a,b)  //10 20

let [,c,d] = arr

console.log(c,d)  //20 30

 

let obj = {a:1,b:2}

let {a,b} = obj

console.log(a,b)  //1 2

 

var obj = {a:10,b:20,info:{name:"张三"}}

var {info:{name:_name}} = obj;

console.log(_name)  //张三

 

 

扩展运算符：

var arr = [10,20,30,40]

fn(...arr)  //将数组的值展开传入fn中

 

var obj = {width:"100px",height:"200px"}

var obj = {background:"red",lineHeight:"30px"}

var newObj = {...obj,...obj1}

console.log(newObj)    //   {width:"100px",height:"200px",background:"red",lineHeight:"30px"}将两个对象值展开合并到一个对象里

 

Symbol:独一无二

 

作用：保护对象的属性和值

          数据保护

 

    Symbol是一个函数,

    也是ES6新增的数据类型，基本数据类型变成6个

   for in 是遍历不出来对象中Symbol的属性

   一般情况下用来做对象的key值

const a = Symbol();

console.log(typeof a)   //Symbol

 

const a = Symbol("a");

const b = Symbol("a");

console.log(a == b)   //false

 

var obj = {}

var mySymbol = Symbol()

obj[mySymbol] =18

obj[Symbol()] =19

obj[Symbol()] =20

obj.a = 10

obj.b = 23

console.log(obj) //{Symbol():18,Symbol():19,Symbol():20,a:10,b:23}

 

//object.keys( ),这个方法可以获取对象身上所有的key值，不包括Symbol,返回值是一个数组

let arr = Object.keys(obj);

console.log(arr);  //["a","b"]

 

//获取Symbol的key值

var arr1 = Object.getOwnPropertySymbols(obj);

console.log(arr1) //[Symbol(),Symbol(),Symbol()]

console.log(obj[arr1[0]]) //18

 

对象新增方法

 

对象的简写：

let a = 10;

let obj = {

 //a=a;  

   a, //key与value值相同的情况下 ，可以写一个值

 // show:function(){}

  show(){}  //方法简写

}

 

Object.is( )  用来判断两个对象的索引是否指向同一索引地址

let obj = {a:10,b:20}

let obj1 = obj

let obj2 = {a:10,b:20}

console.log(Object.is(obj,obj1)) //true

console.log(Object.is(obj,obj2)) //false

 

Object.assign( )  合并对象

  参数1：需要合并的对象

  参数2：被合并的对象

  参数3：被合并的对象

    ......

返回值是一个新的对象

var obj = {a:10,b:13}

var obj1 = {c:131,d:23}

var newObject = Object.assign(obj,obj1)

console.log(newObj) //{a:10,b:13,c:131,d:23}

 

数组新增方法：

 

Array.of:将一组数值转换成数组

             返回值是一个数组

let arr = Array.of(1,2,3,4)

console.log(arr)  //[1,2,3,4]

 

includes:查找当前值是否属于当前数组  成功true  失败false

var arr = [12,13,14,111]

console.log(arr.includes(11))  //false

 

Array.from:将一个伪数组转换成纯数组

function fn(){

  console.log(Array.from(arguments))

}

fn(1,2,3,4,5)  //[1,2,3,4,5]

 

console.log(Array.from(arguments) instanceof Array) //true

 

Array.fill( )填充

参数1：需要填充的数据

参数2：（包括）填充开始的下标

参数3：（不包括）结束的下标

var arr = [10,20,30,40]

console.log(arr.fill("a",1,3)) //[10,"a","a",40]

 

Array.find( ) 根据条件找到相对应的值(最近的一个值)

var arr = [10,20,30,40]

var n = arr.find(function(item,index,array)){

  return item>20

}

console.log(n) //30

 

Array.findIndex( ) 根据条件找到相对应值的下标(最近的一个值)

var arr = [10,20,30,40]

var n = arr.findIndex(function(item,index,array)){

  return item>20

}

console.log(n) //2

 

函数参数的扩展   

ES6之前

function fn(a){

        var a = a || 10;  //用户传递参数就用参数，没传参数就是10

        console.log(a);

    }

    fn();   

ES6之后

function fn1(a=10){

        console.log(a);

    }

    fn1();  // 10

    fn1("aaa"); //"aaa"

 

箭头函数:

     简单的来说就是把function 换成了 =>

        var fn = ()=>{

            console.log("111")

        }

        fn();

    语法1:

          var fn = a=>a;

          console.log(fn(2))

          var fn = (a,b)=>a+b;

          不写{}代表的是return

     语法2:

            var fn = ()=>({})

            console.log(fn())

        特点：

            1、箭头函数中没有this的指向，在箭头函数中this的指向会指向离他最近的那个作用域

            2、箭头函数中没有arguments这个参数

            3、不能当做构造函数

            4、箭头函数不能当做generator函数