资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6之数组的扩展

ES6之数组的扩展

Warren / 1534人阅读

摘要：中对字符串函数对象数组等都进行了扩展，感觉目的呢就是完善一下所为外行人诟病的一些伪其实个人觉得不完美的才是真的美，什么东西都无懈可击了就显得不够有趣了。

ES6中对字符串、函数、对象、数组等都进行了扩展，感觉目的呢就是完善一下JS所为外行人诟病的一些伪bug.其实个人觉得不完美的JS才是真的美，什么东西都无懈可击了就显得不够有趣了。好了，接下来又要开始拾人牙慧了...

主要讲解:

扩展运算符...

Array.from()

Array.of()

Array.prototype.find() 和 Array.prototype.findIndex() --常用

1.扩展运算符... 用于将数组转为逗号分隔的参数序列

如: ...[1,2,3] => 1,2,3 --只限一维转换,这种转换只有放进函数中调用才有意义，不能多带带存在

基础用法:
   function plus(x,y){
        return x+y;
    }

    plus(...[3,7]);
    //10
    plus(3,...[7])
    plus(...[3],7)
    //可以灵活的置于函数参数中任意位置，只要根据传进的数据进行解析即可。
    
    //Array原生push方法(可向数组末尾添加一个或多个元素,顺序添加，且不创建新数组，直接修改原数组)
    let arr = [1,2,3];
    arr.push(4,5); //直接传参
    arr // [1,2,3,4,5]

    //使用扩展的方式:传入一个数组，进行拼接
    arr.push(...[6,7,8]);
    arr //[1,2,3,4,5,6,7,8]
    
应用:
    i.数组的浅拷贝
        let arr = [12,34,56];

        let arr2 = [...arr];
        let [...arr3] = arr;
        arr2 // [12,34,56]
        arr3 // [12,34,56]

        arr2 == arr 
        //false

    ii.合并数组
        [...arr,...arr2,...arr3]
        //[12, 34, 56, 12, 34, 56, 12, 34, 56]

    iii.结合解构赋值，生成剩余数组 -- 扩展运算符只能置于参数最后
        let [one,...rest] = [1,2,3,4,5];
        one // 1
        rest // [2,3,4,5]

    iv. 扩展字符串成数组 --感觉这个好像没啥用,"babe".split("")也可以
        [..."babe"]
        //["b", "a", "b", "e"]
        //不过阮老师的书上说扩展运算符的写法可以识别四个字节的Unicode字符
        //有相关需求可以使用这种方式解剖字符串

    v. 实现了Iterator接口的对象均可以使用扩展运算符转化成真正的数组(关于Iterator下次再写)
        
        function convert2Arr(){
          return [...arguments];
        }
        
        let result = convert2Arr(1,2,3,4,5);
        result // [1,2,3,4,5]
2.Array.from()

用于将类数组对象、可遍历的对象转为真正的数组(类数组对象特征:属性为非负整数、存在length属性、length>=0)

//类数组对象
let obj = {
    0:"hello",
    1:"world",
    4:"outof bounds data",
    length:3   //因为length不能动态改变，随意赋值，最后得到的数组长度就是其值
}
Array.from(obj);
// ["hello", "world", undefined]
//根据属性名对应到数组的index,超过length部分舍弃。没有对应的属性，置为undefined


//实现了Iterator接口的数据结构
let str = "babe";
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯，感觉现在JavaScript向着更幸福的方向发展了，条条大路通罗马。


注意:
    Array.from()是一个很不严谨的角色，只要对象含有length属性，且值为正整数就能转
    不保证转出来的东西质量是否符合要求。
    Array.from({user:"babe",length:5})
    // [undefined, undefined, undefined, undefined, undefined]
        
    Array.from()可接收第二个参数，用于对数组的每一项进行处理并返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>{x*x})
    //[undefined, undefined, undefined]  --切记处理函数中一定要返回
        
    Array.from()还可接收第三个参数，这样在处理函数中就可以使用传进去的对象域中的值
    let that = {
        user:"babe"
    }
    let obj = {
        0:"babe",
        1:"zhangsan",
        2:"lisi",
        length:3
    }
    let result = Array.from(obj,(user) =>{
        if(user == that.user){
            return user;
        }

        return 0;
    },that);
    result //["babe", 0, 0]
3.Array.of()

用于将一组值转换为数组，存在的意义是替代以构造函数的形式创建数组，修复数组创建因参数不一致导致表现形式不同的伪bug.

//原始方式
new Array()
// []
new Array(2)
// [empty × 2]
new Array(1,2,3,4,5)
// [1, 2, 3, 4, 5]

//先进改良方式
Array.of();
// []
Array.of(2);
// [2]
Array.of(1,2,3,4,5);
// [1, 2, 3, 4, 5]
4.Array.prototype.find() 和 Array.prototype.findIndex()方法 --常用

find方法用于查找第一条符合要求的数据，找到返回该数据，否则返回undefined; findIndex则用于找到第一条符合要求的数组位置，找到返回index,否则返回-1;----这两个方法都可以使用indexOf替代，只是比indexOf更精细(可以查找NaN所在位置)

let result = [
    {extractId:1,sec:"Fi900"},
    {extractId:2,sec:"Fi901"},
    {extractId:3,sec:"Fi902"},
    {extractId:4,sec:"Fj900"},
    {extractId:5,sec:"Fj901"}
];

result.find(obj => obj.sec == "Fi902")
// {extractId: 3, sec: "Fi902"}
result.findIndex(obj => obj.sec == "Fi902")
// 2

//这个还要记住一个处理函数的接收参数顺序，依次为:当前值、当前位置、原始数组
result.find((val,index,arr)=>{...});
result.findIndex((val,index,arr)=>{});
//此两个方法均可接收第二个参数，传进去一个作用域对象,然后在处理函数中可以使用传入的对象
let scope = {extractId:2};
result.findIndex(item=>item.extractId == scope.extractId,scope);
// 1

今天就先写到这里了(每次都有点虎头蛇尾，介绍的也只是我感兴趣的点，以后尽量全，然后有侧重点)，如果bug请指正Thanks♪(･ω･)ﾉ

GPU云服务器 云服务器 es6字符串扩展 对象的扩展 云计算的扩展 服务器的扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94815.html

相关文章

  • ES6之数组的扩展

    摘要：它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。上面代码中，方法的回调函数可以接受三个参数，依次为当前的值当前的位置和原数组。 数组的扩展 展开运算符 展开运算符（用三个连续的点 ( ... ) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素。 合并数组 展开运算符的一个用途是结合数组。 如果你需要结合多个数组，在...

    paney129 评论0 收藏0

  • ES6入门之对象的扩展

    摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法 在ES6中 允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

    RiverLi 评论0 收藏0

  • ES6入门之对象的扩展

    摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法 在ES6中 允许直接写入变量...

    AWang 评论0 收藏0

  • ES6学习手稿之基本类型扩展

    摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。 前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

    tommego 评论0 收藏0

  • ES6入门之对象的新增方法

    showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。 在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者 两边的值都会转换数据类型，...

    zhou_you 评论0 收藏0

发表评论

登陆后可评论

0条评论

Warren

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<