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 相关文章推荐
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
小程序实现多个选项卡切换
Jun 19 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 intval的测试代码发现问题
2008/07/27 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
javascript学习之json入门
2016/12/22 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
应付会计岗位职责
2013/12/12 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
开业主持词
2014/03/21 职场文书
入党积极分子个人总结
2015/03/02 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Python安装使用Scrapy框架
2022/04/12 Python