美文网首页
ES6 拓展总结

ES6 拓展总结

作者: 小松Fred | 来源:发表于2018-01-30 13:36 被阅读0次

    ES6除了我们熟知的箭头函数,模板字符串,函数声明等,近期在项目中发先了其他几个好用的新功能,总结一下:

    1 includes()
    类似ES5 中的 indexOf() 。但includes返回的是布尔类型, 而indexOf返回的是数值类型

              let arr = [1,2,3,4]
              arr.includes(2) //true
              arr.indexOf(2) //返回2 的index 1
    

    如果数组中有NaN,你又正好需要判断数组是否有存在NaN,这时你使用indexOf是无法判断的,你必须使用includes这个方法。

              var ary1 = [NaN];
              console.log(ary1.indexOf(NaN))//-1
              console.log(ary1.includes(NaN))//true
    

    当数组的有空的值的时候,includes会认为空的值是undefined,而indexOf不会。

            var ary1 = new Array(3);
            console.log(ary1.indexOf(undefined));//-1
            console.log(ary1.includes(undefined))//true
    

    同时检测字符串的还有startWith 和endsWith() ,和includes()一样, 这三个均可传两个值,第一个是目标匹配的字符串,第二个是开始位置的index,endsWith()的index就是减去这个将搜索文本长度的位置开始正向匹配;

    2 findIndex() 和 find()
    这两个也是用于数组的
    findIndex返回的是Index , find 返回的是value, 同时都是查找到第一个符合的后便返回;

                let targetIndex = out[signTesting.mainfile].findIndex((value, index, arr)=>{
                  return value.pid == v.id
                })
              arr= [1, 5, 10, 15]
              arr.find(function(value, index, arr) {  
              return value > 9; }   //10
              arr.findIndex(function(value,index, arr)}{
              return value > 9}   //2
    

    3 repeat()重复

               x.repeat(3)//xxx,传入num;
    

    4.toFxied(num)这个其实不是ES6的方法,(又称四舍六入五留双)法

              var num = 5.56789;
              var n=num.toFixed(2);//5.57
    

    简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。
    对于精度有其他要求的,可以研究下这个库
    https://github.com/MikeMcl/bignumber.js

    5.Object.is() ,类似于 “===”
    但是 区别如下

                Object.is(+0,-0) //false, 
                +0 === -0//true,    
                Object.is(NaN,NaN)  //true, 
                NaN === NaN false
    
    1. Object.assign(), 对象拷贝(浅拷贝)

              var target = {a:1};
              var source1 = {b:2};
              var source2 = {c:3};
              Object.assign(target,source1,source2);
              console.log(target);//Object {a: 1, b: 2, c: 3}
      

    注意: 对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

    1. 对象遍历 Object.keys(), Object.values(), Object.entries()
      //ES5引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
      //Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
      //Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
    var obj = { foo: "bar", baz: 42 };
    Object.keys(obj)
    // ["foo", "baz"]
    
    var obj = { foo: "bar", baz: 42 };
    Object.values(obj)
    // ["bar", 42]    
    
    
    var obj = { foo: 'bar', baz: 42 };
    Object.entries(obj)
    // [ ["foo", "bar"], ["baz", 42] ]二维数组
    

    6.Array.of()
    Array.of() 基本上可以替代Array()或者new Array()
    Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8]

          Array.of() // []  
          Array.of(3) // [3]  
          Array.of(3, 11, 8) // [3,11,8]  
    
          Array.of(3).length // 1   
          Array.of(undefined) // [undefined]  
          var args = Array.from(arguments,(value)=> value+1)
    

    8.Array.from()
    ES6为Array增加了from函数用来将其他对象转换成数组

    var args = Array.from(arguments);

    9.fill(target, start, end) 和 copyWithin(target, start, end)
    fill() 方法用于将一个固定值替换数组的元素。
    fill(0,1,3) //这三个输分别是 替换值, 开始index, 不包含的结束index;

    copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
    target 必需。复制到指定目标索引位置。
    start 必须。 元素复制的起始位置。
    end 可选 。 元素截止的位置(不包括), 默认length。

    此外, 模板字符串可以嵌套 this is ${ xiao ming's ${name}} ,标签模板;

    相关文章

      网友评论

          本文标题:ES6 拓展总结

          本文链接:https://www.haomeiwen.com/subject/zsziaxtx.html