专栏首页coding个人笔记ES6之数组的扩展

ES6之数组的扩展

ES6在数组方面增加了一些方法和原型属性,有些还是蛮有用的。

扩展运算符:把数组或者类数组转成用逗号隔开的参数:

把类数组转成数组,有限制(类数组就是有长度的变量):

var str = 'wade';console.log([...str]);//["w", "a", "d", "e"]

把数组转成用逗号隔开的参数序列:

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

扩展运算符使用场景很多:

替代apply传参:

Math.max.apply(null, [1, 2, 3])
Math.max(...[1, 2, 3])
Push函数:
var arr = [1, 2, 3];
arr.push(5, 6, 7);
arr.push(...[5, 6, 7]);

大部分都是数组的使用,合并数组、复制数组、与结构结合、函数传参等等。

Array.from:将类数组转换成数组,无限制
console.log(Array.from('wade')); //["w", "a", "d", "e"]
console.log(Array.from( {'0': 'a', '1': 'b', '2': 'c', length: 3})); //["a", "b", "c"]
console.log(Array.from([1, 2, 3])); //[1, 2, 3]
console.log(Array.from({ length: 3 })); //[undefined, undefined, undefined]

Array.from还接受第二个函数参数,对每个元素进行处理返回:

console.log(Array.from('5678', (x) => { 
   return x*2}
)) //[10, 12, 14, 16]

Array.from第三个参数是this,用以this的指向。

Array.of:将值转成数组

这个函数其实就是解决了Array的行为差异:

console.log(Array (3)) //[ , , ,}console.log(Array.of (3)) //[3]

copyWithin方法:改变原数组,接收三个参数,在当前数组内部,将指定位置的成员复制到其他位置(数组函数参数的下标都是包前不包后)

arr.copyWithin(target, start, end)

target(必需):从该位置开始替换数据。如果为负值,表示倒数。

start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。

end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

var arr = [1, 2, 3, 4, 5];arr.copyWithin(0, 3)
console.log(arr);// [4, 5, 3, 4, 5]

find() 和 findIndex():不改变原数组,接收一个函数参数和一个this对象

Find返回第一个符合条件的元素,否则undefined,findIndex返回第一个元素的下标,否则-1

var arr = [1, 0, 9, -5, 12]
var resFind = arr.find((value, index, arr) => { 
   return value > 9;
}, this);
var resFindIndex = arr.findIndex((value, index, arr) => { 
   return value > 9;}, this);
console.log(resFind); //12
console.log(resFindIndex); //4

Fill:填充数组,改变原数组,接收三个参数,第一个是替换元素,第二个是起始位置,第三个是结束位置。

var arr = [1, 0, 9, -5, 12]
arr.fill('a', 1, 3);
console.log(arr); //[1, "a", "a", -5, 12]

entries(),keys() 和 values():返回遍历器对象Interator,配合for of循环,keys是对键名的遍历、values是对键值的遍历、entries是对键名和键值的遍历

var arr = [1, 2, 3]
for(var val of arr.keys()){ 
   console.log(val);
}//0 1 2
for(var val of arr.values()){ 
   console.log(val);
}// 1 2 3
for(var val of arr.entries()){ 
   console.log(val);
}//[0, 1] [1, 2] [2, 3]

includes():返回一个布尔值,表示是否包含某个元素,接收两个个参数,第一个是要查找的元素,第二个是起始位置

var arr = [1, 2, 3, 4, 5]
console.log(arr.includes(4, 2)); //true

flat(),flatMap():返回新数组,不改变原数组。拉平数组,就是把二维、三维数组变成一维数组

flat接收一个参数,拉平几维数组,会跳过空位:

console.log([1, 2, [3, [4, 5]]].flat())// [1, 2, 3, [4, 5]]
console.log([1, 2, [3, [4, 5]]].flat(2));// [1, 2, 3, 4, 5]

flatMap跟map函数一样,需要return

console.log([1, 2, 3].flatMap((val, index, arr) => {
    return val * 2;
}));// [2, 4, 6]

数组空位:数组的空位指,数组的某一个位置没有任何值,比如[,,,]空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值。

ES5 对空位的处理很不一致,大多数情况下会忽略空位。ES6则不跳过空位,转为undefined

console.log(Array.from([1, , 2]));//[1, undefined, 2]

forEach(), filter(), reduce(), every() 和some()都会跳过空位。

map()会跳过空位,但会保留这个值

join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

Array.from()、扩展运算符...、entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

For of也会循环遍历空位,CopyWithin()会连空位一起拷贝,fill也会把空位视为正常位置

数组的组合使用其实很好用,只是平时很少去考虑使用这些提供的方法,要是能把数组的使用都记清楚,对平时开发有很大的便利。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript之数组

    Array在JavaScript里面很常用,讲真的,平时开发除了循环数组和push数组之外,对于数组的其他方法和属性几乎都是用到的时候百度。今天自己整理一些数组...

    wade
  • 数组去重的几个方法

    数组去重很简单,大都运用数组的属性和方法,有很简单的,有复杂的,今天分享几个数组去重的方法。

    wade
  • 阮一峰快速排序

    本打算学一波快速排序,查了查资料,吓一大跳,说阮一峰大神的快排是不对的,以此开始了一大波大神针对这个问题的各种观点。感兴趣的可以看看知乎这篇帖子:

    wade
  • 【ES6基础】Array数组的新方法(上)

    在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法?

    前端达人
  • 小结ES6基本知识点(四):数组的扩展

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

    前端林子
  • 「ES6基础」你需要知道的Array数组新方法(上)

    在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法?

    前端达人
  • es6 数组扩展方法

    1.扩展运算符     含义: 扩展运算符,三个点(...),将一个数组转为用逗号分隔的参数顺序。       例如:         console.log(...

    用户1197315
  • js数组常用方法总结

    最近工作中经常用到数组操作,每次都傻傻不知道怎么用,今天有时间整理了一下,希望对大家有帮助!这些基础的知识,要熟记于心。

    半指温柔乐
  • 如何答一道惊艳面试官的数组去重问题?

    思想: 双重 for 循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个...

    coder_koala
  • Js遍历数组总结

    Array.prototype.forEach() arr.forEach(callback(currentValue [, index [, array]]...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券