数组的拓展

扩展运算符(spread)是三个点(...)

{
       let arr=[1,2,3];
       console.log(...arr);//1 2 3

        //如果拓展运算符后面是一个空数组,那么就什么也不执行
       let a=[];
       console.log([...[],1]);//[1]
}

它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
拓展运算符有些情况下也可以将字符串和伪数组转化为真正的数组,不过外面还得包一层中括号

{
    console.log([...'string']);// ["s", "t", "r", "i", "n", "g"]
    function show(){
          console.log([...arguments]);//[1, 2, 3, 4, 5]
    }
    show(1,2,3,4,5);
}

用途

  • 1合并数组
{
       let arr1=[1,3];
       let arr2=[4,3];
       let arr=[];
       console.log(arr.concat(arr1,arr2));//[1,3,4,3]
       //拓展运算符
       console.log([...arr,...arr1,...arr2]);//[1, 3, 4, 3]
}
  • 2结构赋值
{
       const [a,...arr]=[1,2,3,45,5];
       console.log(a);//1
       console.log(arr);//[2, 3, 45, 5]
       //只能放在参数的最后一位,否则会报错。
       const [a,...arr1]=[1,23];
       console.log(arr1);//报错
}
  • 3扩展运算符还可以将字符串转为真正的数组
{
        console.log([...'hello']);//["h", "e", "l", "l", "o"]
        console.log(...'hello');//h e l l o
        let str=...'hello';//报错
}

at()方法 数组或者字符串可以逆序索引元素

const arr = ['a',1,'vc',8,'dsgf']
const str = 'string'
console.log(arr.at(-1)) //dsgf
console.log(str.at(-2)) //n

Array.from()

{
        const json={
            0:'name',
            1:'age',
             length:2
         };
         console.log(Array.from(json));//["name", "age"]

         function show(){
             console.log(arguments);//[1, 2, 3, 4, callee: function, Symbol(Symbol.iterator): function]
             console.log(Array.from(arguments));//[1, 2, 3, 4]
         }
        show(1,2,3,4);

        console.log(Array.from('hello'));//["h", "e", "l", "l", "o"]
}

可以将伪数组和可遍历的的对象转化为真正的数组,也可以将字符串转化为数组

Array.of()的操作,将完美一下new Array的方法

{
       console.log(Array.of(1,2,3));//[1,2,3]
       console.log(Array.of());//[]
       console.log(new Array(3));//[undefined × 3]
       console.log(Array.of(3));//[3]
}

copyWithin(target,start,end)自己玩自己的方法并且会改变自己,跟splice不同,splice可以添加数组以外的元素

{
      let arr=[1,2,3,4,5,6];
      console.log(arr.copyWithin(1,3,5));//[1,4,5,4,5,6];
      console.log(arr.copyWithin(1,3));//[1,4,5,6,5,6]
      console.log(arr.copyWithin(0,-2,-1));//[5,2,3,4,5,6];
}

第二个console是在注释第一个console的情况下打印出来的,对应的第三个console是在注释第一个和第二个console情况下打印出来的,如果不注释不是这种情况,因为copyWidth()会改变原来的数组

target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒
数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

数组的find()和findIndex()

{
       let arr=[1,2,3,4];
       arr.find((num)=>{
           if (num>2){
               console.log(num);// 3 4
           }
       });
      //find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
      arr.find((value,index,obj)=>{
          if (value>2){
             console.log(value+':'+index+':'+obj);//3:2:1,2,3,4  4:3:1,2,3,4
          }
       });
       //找出数组中第一个大于2的成员。如果没有符合条件的成员,则返回undefined。
       console.log(arr.find((value,index,obj)=>{
             return value>2;
        }));//3
       //返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
       console.log(arr.findIndex((value,index,obj)=>{
           return value>2;
       }));//2
}

findLastfindLastIndex方法 数组或者字符串可以逆序查找元素和index下标

findLast 返回找到的元素,找不到返回undefined
findLastIndex 返回找到的index下标,找不到返回-1

const arr = ['a',1,'vc',8,{name:'张三'},'dsgf']
console.log(arr.findLast(item => item.name === '张三')) // {name: '张三'}
console.log(arr.findLastIndex(item => item === 'dsgf')) // 5

数组的fill()方法

{
       //fill方法使用给定值,填充一个数组。
       let arr=[1,2,3];
       arr.fill(9);
       console.log(arr);//[9,9,9]

        console.log(new Array(3).fill(2));//[2,2,2]
        //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
        console.log(arr.fill(7,1,2));//[1,7,3]
}

数组实例的 entries(),keys() 和 values()

{
      const arr=[1,2,3,4,5];

      for (let index of arr.keys()){
           console.log(index);//0 1 2 3 4
      }
       console.log(Object.keys(arr));// ["0", "1", "2", "3", "4"]

       for (let [index,val] of arr.entries()){
           console.log(index+':'+val);//0:1 1:2 2:3 3:4 4:5
       }

        console.log(Object.values(arr));//[1, 2, 3, 4, 5]
        // for (let val of arr.values()){
        //     console.log(val);//报错 chrome 和 Firefox 不知道为什么
        // }
}

Object.fromEntries 自身可枚举属性的键值对数组转化为对象

let arr=[
  ["name","李四"],
  ["age",18]
]
console.log(Object.fromEntries(arr));//{"name": "李四","age": 18}

fromEntriesentries是相反的,可以相互转化的

let json={"name": "李四","age": 18};
console.log(Object.entries(json));//arr=[["name","李四"],["age",18]];

也可以转化map结构的键值对数组

let map=new Map([["name","张三"],["age",15]])
console.log(Object.fromEntries(map));//{"name": "张三","age": 15}

数组实例的 includes()

{
      let arr=[1,2,3,4,5,NaN];
      console.log(arr.includes(4));//true
      console.log(arr.includes(10))//false

      //该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置
      console.log(arr.includes(5,-4));//true
}

数组的空位

{
       //由于空位的处理规则非常不统一,所以建议避免出现空位。
       console.log(Array.from([,,,]));//[undefined, undefined, undefined]
       console.log(...[1,,2]);//1 undefined 2
       console.log([,'a','b',,].copyWithin(2,0)); // [,"a",,"a"]

        // entries()
        console.log([...[,'a'].entries()]); // [[0,undefined], [1,"a"]]

        // keys()
        console.log([...[,'a'].keys()]); // [0,1]

        // values()
        //console.log([...[,'a'].values()]); // [undefined,"a"]

         // find()
         console.log([,'a'].find(x => true)); // undefined

         // findIndex()
         console.log([,'a'].findIndex(x => true)); // 0
}

ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位,ES6 则是明确将空位转为undefined

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容