微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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函数     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐