ECMAScript6(ES6)标准之数组Array扩展方法
来源:互联网 发布:get music软件 编辑:程序博客网 时间:2024/05/17 13:44
ES6对于数组又扩展了很多方法
包括静态方法和原型链上添加的方法
让我们可以更方便的操作数组
静态方法
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;}));// 30console.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)); //trueconsole.log(arr.includes('a')); //trueconsole.log(arr.includes(true)); //trueconsole.log(arr.includes(null)); //trueconsole.log(arr.includes(NaN)); //trueconsole.log(arr.includes(undefined)); //falseconsole.log(arr.includes()); //false
这个方法甚至连NaN都可以检测到
但是我们ES5中的indexOf()是不可以的
let arr = [1, 'a', true, null, NaN];console.log(arr.indexOf(1)); //0console.log(arr.indexOf('a')); //1console.log(arr.indexOf(true)); //2console.log(arr.indexOf(null)); //3console.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 2for(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] ]
==主页传送门==
- ECMAScript6(ES6)标准之数组Array扩展方法
- ECMAScript6(ES6)标准之对象Object扩展方法及新特性
- ECMAScript6(ES6)标准之函数扩展特性箭头函数、Rest参数及展开操作符
- ECMAScript6标准数组的扩展
- ECMAScript6(ES6)标准之class类的定义、继承及静态方法
- ECMAScript6(ES6)标准之解构赋值语法及应用
- ECMAScript5(ES5)标准中扩展的数组Array方法
- ES6之数组(array)
- ECMAScript6(ES6)标准之let、const关键字与块级作用域
- ES6---数组array新增方法
- ECMAScript6-学习笔记(数组的扩展)
- ES6-数组的扩展-Array.from()
- ES6-数组的扩展-Array.of()
- 《ES6标准入门》:数组的扩展
- [Wondgirl]ECMAScript6(ES6)(六)数值的扩展
- ECMAScript6笔记:数组的扩展
- ECMAScript6(6):数组的扩展
- es6数组扩展(五)
- 该做什么?该怎么做?如何为自己的人生负责
- 高性能Mysql主从架构的复制原理及配置详解
- python中用Beautifulsoup提取集搜客网站的信息
- 数据结构-C++实现(一):数组链表
- jenkins迁移job插件 job-import插件
- ECMAScript6(ES6)标准之数组Array扩展方法
- 如何在Ubuntu系统下安装使用LaTeX
- 缓和曲线05五次抛物线
- springMVC源码分析--AbstractHandlerMapping(二)
- 三个怪兽和三个和尚过河java版
- 网页设计
- mysql主从复制配置
- JDK1.8中JConsoleContext源码
- Mysql批量删除数据库