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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
js实现开关灯效果
Mar 30 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
Javascript中暂停功能的实现代码
2007/03/04 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python判断telnet通不通的实例
2019/01/26 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python中的逆序遍历实例
2019/12/25 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
小学学校评估方案
2014/06/08 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
世界遗产的导游词
2015/02/13 职场文书
上甘岭观后感
2015/06/10 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js