ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from()、of()等静态方法,也为数组实例添加了find()、findIndex()等方法。下面一起来看一下这些方法的用法。

Array.from()

Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回。例如将dom节点集合转化为数组,以前我们可能都会这样写:

var divs = document.querySelectAll("div");
[].slice.call(divs).forEach(function (node) {
console.log(node);
})

现在我们可以这样写:

var divs = document.querySelectAll("div");
Array.from(divs).forEach(function (node) {
console.log(node);
})

上面两种写法基本上是相同的。

Array.from()也可以将ES6中新增的Set、Map等结构转化为数组:

// 将Set结构转化为数组
Array.from(new Set([1, 2, 3, 4])); // [1, 2, 3, 4] //将Map结构转化为数组
Array.from(new Map(["name", "zlw"])); // ["name", "zlw"]

字符串既是类数组又是可遍历的,所以Array.from()也可将字符串转化为数组:

Array.from("zlw"); // ["z", "l", "w"]

Array.from()还有两个可选参数,完整语法如下:

Array.from(obj, mapFn, thisArg)

mapFn其实就是数组的map方法,对数组的每个元素处理。thisArg是执行环境的上下文。  Array.from(obj, mapFn, thisArg) 等同于 Array.from(obj).map(mapFn, thisArg)。

Array.of()

Array.of()将其参数转化为数组。如:

Array.of(1, 2, 3); // [1, 2, 3]

我们知道用Array构造函数也可以实现同样功能:

Array(1, 2, 3) // [1, 2, 3]

他们的不同之处在于:

Array.of(3); // [3]

Array(3) // [undefined, undefined, undefined] 

当传入一个参数时,Array.of()会返回只有一个元素的数组,而Array()会返回长度为传入参数而元素都为undefined的数组。

Array.prototype.fill()

fill()方法用一个值填充数组给定开始和结束位置之间的的所有值,语法如下:

fill(value, start, end)

参数start、end是填充区间,包含start位置,但不包含end位置。如果省略,则start默认值为0,end默认值为数组长度。如果两个可选参数中有一个是负数,则用数组长度加上该数来确定相应的位置。例:

[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]

Array.prototype.find()与Array.prototype.findIndex()

find()方法返回数组中符合条件的第一个元素,如果没有则返回undefind。语法如下:

array.find(callback, context);

参数包括一个回调函数和一个可选参数(执行环境上下文)。回调函数会遍历数组的所有元素,直到找到符合条件的元素,然后find()方法返回该元素。例:

[1, 2, 3, 4].find(function(el, index, arr) {
return el > 2;
}) // 3 [1, 2, 3, 4].find(function(el, index, arr) {
  return el > 4;
}) // undefined

findIndex()方法与find()方法用法类似,返回的是第一个符合条件的元素的索引,如果没有则返回-1。例:

[1, 2, 3, 4].findIndex(function(el, index, arr) {
return el > 2;
}) // 2 [1, 2, 3, 4].findIndex(function(el, index, arr) {
  return el > 4;
}) // -1

Array.prototype.entries()、Array.prototype.keys与Array.prototype.values()

entries()、keys与values都返回一个数组迭代器对象。例:

var entries = [1, 2, 3].entries();
console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3] var keys = [1, 2, 3].keys();
console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2 var valuess = [1, 2, 3].values();
console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); //

迭代器的next()方法返回的是一个包含value属性与done属性的对象,而value属性是当前遍历位置的值,done属性是一个布尔值,表示遍历是否结束。

我们也可以用for...of来遍历迭代器:

for (let i of entries) {
console.log(i)
} // [0, 1]、[1, 2]、[2, 3]
for (let [index, value] of entries) {
console.log(index, value)
} // 0 1、1 2、2 3 for (let key of keys) {
console.log(key)
} // 0, 1, 2
for (let value of values) {
console.log(value)
} // 1, 2, 3

Array.prototype.copyWithin()

copyWithin()方法语法如下:

arr.copyWithin(target, start, end = this.length)

最后一个参数为可选参数,省略则为数组长度。该方法在数组内复制从start(包含start)位置到end(不包含end)位置的一组元素覆盖到以target为开始位置的地方。例:

[1, 2, 3, 4].copyWithin(0, 1) // [2, 3, 4, 4]

[1, 2, 3, 4].copyWithin(0, 1, 2) // [2, 2, 3, 4]

如果start、end参数是负数,则用数组长度加上该参数来确定相应的位置:

[1, 2, 3, 4].copyWithin(0, -2, -1) // [3, 2, 3, 4]

需要注意copyWithin()改变的是数组本身,并返回改变后的数组,而不是返回原数组的副本。

数组推导(array comprehensions)

数组推导就是利用for...of循环基于现有的数组生成新数组。例:

[for (i of [1, 2, 3]) i * i]  // [1, 4, 9]

数组推导允许使用if语句:

// 单个if语句
[for (i of [1, 2, 3]) if (i < 3) i] // [1, 2] //多重if语句
[for (i of [1, 2, 3]) if (i < 3) if (i > 1) i] // [2]

需要注意的是for...of总是写在最前面。

数组推导也允许使用多重for..of循环:

[for (i of [1, 2, 3]) for (j of [4, 5, 6]) i * j] // [4, 5, 6, 8, 10, 12, 12, 15, 18]

数组推导中还可以包含数组推导:

[for (i of [1, 2, 3]) [for (j of [4, 5, 6]) i * j]] // [[4, 5, 6], [8, 10, 12], [12, 15, 18]]

各大浏览器对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/

ES6对数组的扩展的更多相关文章

  1. ES6对数组的扩展(简要总结)

    文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...

  2. ES6 之 数组的扩展

    ES5 检测数组 let arr = [1,2,3,4] Array.isArray(arr) arr instanceof Array 转换方法 arr.toLocaleString() arr.t ...

  3. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  4. 【ES6】数组的扩展

    1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...

  5. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  6. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

  7. ES6的新特性(8)——数组的扩展

    数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

  8. ES6学习(三):数组的扩展

    chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...

  9. Es6学习笔记(7)----数组的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...

随机推荐

  1. Python 基础 高阶函数

    python 把函数作为参数 如果传入abs 作为参数 def add(x,y,y): return f(x) + f(y) add(-5,9,abs) 根据函数的定义,函数执行的代码实际上是. ab ...

  2. echarts 报错问题 is null 或者未定义等问题

    我们在使用echarts的时候会出现is null或者未定义等报错提示,但是却无从下手的情况. 其一,我们是完全按照echarts的官方文档来添加的js文件:其二,在对使用option时候的配置是按照 ...

  3. JQuery传值,接收PrintWriter的int接收不了

    <servlet>中的代码 <JSP中的代码> 很苦恼,我想要,<servlet>中传入的(0),在<jsp>中接收到这个参数,然后进行判断,从而达到判 ...

  4. PL/SQL 报错:动态执行表不可访问,本会话的自动统计被禁止。 在执行菜单里你可以禁止统计,或在v$session,v$sesstat 和vSstatname表里获得选择权限。

    现象: 第一次用PL/SQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错“动态执行表不可访问,本会话的自动统计被禁止.在执行菜单里 ...

  5. hive的分桶

    套话之分桶的定义: 分桶表是对列值取哈希值的方式,将不同数据放到不同文件中存储.对于 hive 中每一个表.分区都可以进一步进行分桶. 列的哈希值除以桶的个数来决定每条数据划分在哪个桶中.(网上其它定 ...

  6. Java学习笔记三十一:Java 包(package)

    Java 包(package) 一:包的作用: 如果我们在使用eclipse等工具创建Java工程的时候,经常会创建包,那么,这个包是什么呢. 为了更好地组织类,Java 提供了包机制,用于区别类名的 ...

  7. ILOVEYOU代码

    代码确实很简单...我是初学者,练手的. /* 文件名: Love.c 描 述: 打印字母和图形 */ #include<stdio.h> #include<windows.h> ...

  8. Asp.net Core Startup Class中是如何获取配置信息的

    默认的网站构建方式 VS2015新建asp.net core项目,项目建立完成后,有两个文件,Program.cs和Startup.cs. public class Program { public ...

  9. yaml中的锚点和引用

    项目引入yaml语言来写配置文件,最近发现利用其锚点&和引用*的功能,可以极大减少配置文件中的重复内容,将相同配置内容收敛到锚点处,修改时,只需要修改锚点处的内容,即可在所有引用处生效. ya ...

  10. gitlab在push代码的时候报错

    一.问题报错 gitlab在执行git pull origin master,拉取代码的时候报如下错误. $ git pull origin master remote: Counting objec ...