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 = {"100px",height:"200px"}
var obj = {background:"red",lineHeight:"30px"}
var newObj = {...obj,...obj1}
console.log(newObj)    //   {"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函数
    
原文地址:https://www.cnblogs.com/class1/p/11179375.html