ES6新特性七:数组的扩充详解


Posted in Javascript onApril 21, 2017

本文实例讲述了ES6新特性之数组的扩充。分享给大家供大家参考,具体如下:

1. Array.from()

1) Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map,他们都部署了iterator接口,字符串也是)。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike);
console.log(arr1) // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike);
console.log(arr2) // ['a', 'b', 'c']
Array.from('hello')// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

2) 扩展运算符(...)背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。

Array.from({ length: 3 });//扩展运算符就转换不了
// [ undefined, undefined, undefined ]

3) Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

var a = Array.from([1, 2, 3], x => x * x);
console.log(a)
// 等同于
var a1 = Array.from([1, 2, 3]).map(x => x * x);
console.log(a1)
var a2 = Array.from([1, 2, 3], (x) => x * x)
console.log(a2)// [1, 4, 9]
//只要有一个原始的数据结构,你就可以先对它的值进行处理,
// 然后转成规范的数组结构,进而就可以使用数量众多的数组方法。
var a3 = Array.from({ length: 2 }, () => 'jack')
console.log(a3)// ['jack', 'jack']

2. Array.of()

返回参数值组成的数组。如果没有参数,就返回一个空数组,弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

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

3. 数组实例的find() 和 findIndex()

① 数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

var a = [1, 4, -5, 10].find((n) => n < 0)
console.log(a)
//find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

② 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
 return value > 9;
}) // 2

4. 数组实例的fill()

fill方法使用给定值,填充一个数组。数组中已有的元素,会被全部抹去。

['a', 'b', 'c'].fill(7) // [7, 7, 7]
new Array(3).fill(7) // [7, 7, 7]

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置(包左不包右)

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

5. 数组实例的 entries() 、keys() 和values()

ES6提供三个新的方法——entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象. for...of 会自动的调用遍历器的next() .

for (let index of ['a', 'b'].keys()) {
 console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
 console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
 console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

6. 数组实例的includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置。

[1, 2, 3].includes(2);   // true
[1, 2, 3].includes(4);   // false
[1, 2, NaN].includes(NaN); // true

另外,Map和Set数据结构有一个has方法,需要注意与includes区分。

Map结构的has方法,是用来查找键名的:

比如Map.prototype.has(key)WeakMap.prototype.has(key)Reflect.has(target, propertyKey)

Set结构的has方法,是用来查找值的:

比如Set.prototype.has(value)WeakSet.prototype.has(value)

7. 数组的空位

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

Array(3) // [, , ,]

ES6则是明确将空位转为undefined。

console.log(Array.from(['a',,'b']))//[ 'a', undefined, 'b' ]
console.log([...['a',,'b']])// [ "a", undefined, "b" ]
let arr = [, 'a',,];
for (let i of arr) {
  console.log(i);
}//undefined a undefined
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
React中ES5与ES6写法的区别总结
Apr 21 #Javascript
ES6新特性六:promise对象实例详解
Apr 21 #Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 #Javascript
webpack配置的最佳实践分享
Apr 21 #Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 #Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 #Javascript
jQuery+pjax简单示例汇总
Apr 21 #jQuery
You might like
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python处理csv数据的方法
2015/03/11 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python实现扫码工具的示例代码
2020/10/09 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
喜之郎果冻广告词
2014/03/20 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
关于读书的活动方案
2014/08/14 职场文书
学校推普周活动总结
2015/05/07 职场文书
比较几种Redis集群方案
2021/06/21 Redis
基于Go语言构建RESTful API服务
2021/07/25 Golang