ECMAScript6(ES6)标准之数组Array扩展方法
2016-12-19 20:56
741 查看
ES6对于数组又扩展了很多方法
包括静态方法和原型链上添加的方法
让我们可以更方便的操作数组
类数组对象(有length属性的对象)和可遍历对象(ES6新增的Set与Map数据结构)
转化为真正的数组
在ES6之前,要想让类数组对象变成数组
通常做法是调用slice
现在我们可以这么做
如果参数是一个数组,那么会返回一个一模一样的新数组(浅拷贝)
而且这个方法会将数组空位转换为undefined
换句话说,会忽略空位
还要注意拷贝的数组是浅拷贝
这个方法还有一个额外的参数
用于对元素进行处理
类似于ES5的数组方法map
用于将一组值转换为数组
它弥补了使用new Array()构造数组的奇怪行为
比如说填入一个参数
只填写一个参数就会构建一个长度为3的稀疏数组
这不是我们想要的
但Array.of()可以很好的解决这个问题
填什么就构造什么样的数组
不填就返回什么空数组
作用是把这个数组的一部分元素复制到其他位置
这会覆盖原有的元素
返回当前数组
换句话说,这个方法会修改原数组
第一个参数代表从这个位置开始替换
后两个参数代表要拷贝的起始位置和结束为止
同样不包含结束元素,左闭右开
可以使用负值代表倒数
(回调函数的参数依次为元素、索引、数组引用,与ES5数组方法相同)
find()会返回第一个满足条件的元素
findIndex()会返回第一个满足条件的索引
没有找到都会返回-1
这里满足条件意思就是函数参数返回值为true
会修改调用它的数组
这里数组所有的元素都被替换为100
此外还可以指定填充的起始位置和终止位置
返回布尔值
这个方法甚至连NaN都可以检测到
但是我们ES5中的indexOf()是不可以的
由此可见indexOf()内部是用严格等于判断的
我们可以这样来判断NaN
这里注意isNaN()不仅仅是非数返回true
不是数字都会返回true
均返回一个迭代器对象
配合for-of循环可以迭代数组
(这里values()方法我测试的新版本谷歌浏览器不知道为什么还没有实现)
当然我们也可以手动遍历
不过for-of就是用于遍历数组的(用for-in遍历对象)
如果全遍历使用for-of更加方便
类比于ES5的Object.keys/Object.values/Object.entries
==主页传送门==
包括静态方法和原型链上添加的方法
让我们可以更方便的操作数组
静态方法
Array.from()
这个方法可以将类数组对象(有length属性的对象)和可遍历对象(ES6新增的Set与Map数据结构)
转化为真正的数组
在ES6之前,要想让类数组对象变成数组
通常做法是调用slice
let arrLike = { 0: 10, 1: 20, 2: 30, length: 3 }
let arr = Array.prototype.slice.call(arrLike); console.log(arr); //[10, 20, 30]
现在我们可以这么做
let arr = Array.from(arrLike); console.log(arr); //[10, 20, 30]
如果参数是一个数组,那么会返回一个一模一样的新数组(浅拷贝)
而且这个方法会将数组空位转换为undefined
换句话说,会忽略空位
let arr = Array.from([10, , 30]); console.log(arr); //[10, undefined, 30]
还要注意拷贝的数组是浅拷贝
let arr = [10, ['a', 'b'] , 30]; let newArr = Array.from(arr); console.log(newArr); //[10, ['a', 'b'], 30] arr[1].push('c'); console.log(newArr); //[10, ['a', 'b', 'c'], 30]
这个方法还有一个额外的参数
用于对元素进行处理
类似于ES5的数组方法map
let arrLike = { 0: 10, 1: 20, 2: 30, length: 3 }
let arr = Array.from(arrLike,function(x){
return x*x;
});
console.log(arr); //[100, 400, 900]
Array.of()
这个方法很简单用于将一组值转换为数组
它弥补了使用new Array()构造数组的奇怪行为
比如说填入一个参数
let arr = new Array(3); //构建了一个稀疏数组
只填写一个参数就会构建一个长度为3的稀疏数组
这不是我们想要的
但Array.of()可以很好的解决这个问题
let arr1 = Array.of(3); let arr2 = Array.of(1, 2, 3); let arr3 = Array.of(); let arr4 = Array.of(undefined); let arr5 = Array.of(null); console.log(arr1); //[3] console.log(arr2); //[1, 2, 3] console.log(arr3); //[] console.log(arr4); //[undefined] console.log(arr5); //[null]
填什么就构造什么样的数组
不填就返回什么空数组
数组操作
内部拷贝copyWithin()
这是一个原型方法作用是把这个数组的一部分元素复制到其他位置
这会覆盖原有的元素
返回当前数组
换句话说,这个方法会修改原数组
let arr = [1, 2, 3, 4, 5, 6, 7, 8]; arr.copyWithin(1, 5, 8); console.log(arr); //[1, 6, 7, 8, 5, 6, 7, 8]
第一个参数代表从这个位置开始替换
后两个参数代表要拷贝的起始位置和结束为止
同样不包含结束元素,左闭右开
可以使用负值代表倒数
查找find()与findIndex()
这两个原型方法都有一个回调函数作为参数(回调函数的参数依次为元素、索引、数组引用,与ES5数组方法相同)
find()会返回第一个满足条件的元素
findIndex()会返回第一个满足条件的索引
没有找到都会返回-1
这里满足条件意思就是函数参数返回值为true
let arr = [10, 20, 30, 40, 50]; console.log(arr.find(function(value, index, arr){ return value > 25; }));// 30 console.log(arr.findIndex(function(value, index, arr){ return value > 25; }));// 2
填充fill()
这个方法用于填充数组会修改调用它的数组
let arr = [1, 2, 3]; console.log(arr.fill(100)); //[100, 100, 100]
这里数组所有的元素都被替换为100
let arr = new Array(3); console.log(arr.fill(100)); //[100, 100, 100]
此外还可以指定填充的起始位置和终止位置
let arr = [1, 2, 3, 4, 5]; console.log(arr.fill(100, 1, 4)); //[1, 100, 100, 100, 5]
包含includes()
这个方法用于检测数组是否含有某个特定值返回布尔值
let arr = [1, 'a', true, null, NaN]; console.log(arr.includes(1)); //true console.log(arr.includes('a')); //true console.log(arr.includes(true)); //true console.log(arr.includes(null)); //true console.log(arr.includes(NaN)); //true console.log(arr.includes(undefined)); //false console.log(arr.includes()); //false
这个方法甚至连NaN都可以检测到
但是我们ES5中的indexOf()是不可以的
let arr = [1, 'a', true, null, NaN]; console.log(arr.indexOf(1)); //0 console.log(arr.indexOf('a')); //1 console.log(arr.indexOf(true)); //2 console.log(arr.indexOf(null)); //3 console.log(arr.indexOf(NaN)); //-1
由此可见indexOf()内部是用严格等于判断的
我们可以这样来判断NaN
let demo = NaN; console.log(demo + '' === 'NaN'); //true
这里注意isNaN()不仅仅是非数返回true
不是数字都会返回true
数组迭代
keys()、values()与entries()
它们用于迭代数组均返回一个迭代器对象
配合for-of循环可以迭代数组
var arr = ['A', 'B', 'C']; for(let index of arr.keys()){ //遍历索引 console.log(index); }//0 1 2 for(let item of arr.values()){ //遍历元素 console.log(item); }//'A' 'B' 'C' for(let x of arr.entries()){ //遍历索引和元素 console.log(x); }//[0, 'A'] [1, 'B'] [2, 'C'] for(let [index, value] of arr.entries()){ //遍历索引和元素 console.log(index + ': ' + value); }//0: 'A' 1: 'B' 2: 'C'
(这里values()方法我测试的新版本谷歌浏览器不知道为什么还没有实现)
当然我们也可以手动遍历
var arr = ['A', 'B', 'C']; var ite = arr.entries(); console.log(ite.next().value); //[0, 'A'] console.log(ite.next().value); //[1, 'B'] console.log(ite.next().value); //[2, 'C']
不过for-of就是用于遍历数组的(用for-in遍历对象)
如果全遍历使用for-of更加方便
类比于ES5的Object.keys/Object.values/Object.entries
let person = { name: 'payen', sex: 'male', age: 19 } console.log(Object.keys(person));//["name", "sex", "age"] console.log(Object.values(person));//["payen", "male", 19] console.log(Object.entries(person));//[ ["name","payen"], ["sex", "male"], ["age", 19] ]
==主页传送门==
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法