Array.from()
Array.from()
用于将类似数组的对象
(array-like object)和可遍历(iterable)的对象
(包括 ES6 新增的数据结构 Set 和 Map)转为真正的数组
//函数内部的arguments对象
function f(){
return Array.from(arguments)
}
f('1',[2,3,4],5); // ["1", Array(3), 5]
//类似数组的对象是 DOM 操作返回的 NodeList 集合
let ps = document.querySelectorAll('p');
Array.from(ps)
//字符串和 Set 结构都具有 Iterator 接口
let str = 'hello'
Array.from(str) // ['h','e','l','l','o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
Array.of()
Array.of()
方法用于将一组值,转换为数组。
Array.of(1,2,3,4,5); // [1,2,3,4,5]
Array.of
基本上可以用来替代Array()
或new Array()
,并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of
总是返回参数值组成的数组。如果没有参数
,就返回一个空数组
。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
扩展运算符
扩展运算符
(spread)是三个点...
功能是把数组或类数组对象展开成一系列用逗号隔开的值
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
function foo(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1, 2, 3];
foo(...arr); // 1 2 3
注意
只有函数调用
时,扩展运算符才可以放在圆括号
中,否则会报错。
(...[1, 2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1 2
rest运算符
也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
function fn(a, ...args) {
console.log(a);
console.log(args);
}
fn(1, 2, 3, 4);
// 1
// [ 2, 3, 4 ]
扩展运算符的应用
1.复制数组
var arr1 = [1,2,3];
//写法1
var arr2 = [...arr1]; // [1,2,3]
//写法2
var [...arr2] = arr1; // [1,2,3]
2.合并数组
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = [...arr1, ...arr2]; // [1,2,3,4,5]
3.与解构赋值结合生成数组
var [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
var [...butLast, last] = [1, 2, 3, 4, 5];
// 报错
var [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
4.把字符串转数组
let str = [...'hello']; // ['h','e','l','l','o']
5.Iterator 接口的对象转数组
let oSet = new Set(['a', 'b']);
console.log([...oSet])// ['a', 'b']
如果对没有 Iterator 接口的对象,使用扩展运算符,将会报错。
let obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
find()
find()
找出数组中符合条件的第一个元素。find方法的回调函数
可以接受三个参数,依次为当前的值
、当前的位置
和原数组
。
var arr = [1,2,3,4,5,6]
arr.find(function(value,index,arr){
return value > 5
})
// 6
若所有元素都不符合条件,find( )函数就会返回undefined
var arr = [1,2,3,4,5,6]
arr.find(function(value){
return value > 9
})
// undefined
findIndex()
findIndex()
返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件
,则返回-1
。
var arr = [1,2,3,4,5,6]
arr.findIndex(function(value){
return value > 2
})
// 2
var arr = [1,2,3,4,5,6]
arr.findIndex(function(value){
return value > 10
})
// -1
fill()
fill()
用指定的值,填充到数组,第一个参数是填充内容,第二、三个参数指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 3)
// ['a', 7, 7]
entries()
entries()
对数组的键值对进行遍历,返回一个遍历器,可以用for…of对其进行遍历。entries()是对键值对的遍历。
for(let [i,v] of [1,2,3].entries()){
console.log(i,v)
// 键 值
// 0 1
// 1 2
// 2 3
}
keys()
keys()
对数组的索引键进行遍历,返回一个遍历器。keys()是对键名的遍历。
for(let i of [1,2,3].keys()){
console.log(i)
// 键
// 0
// 1
// 2
}
values()
values()
对数组的元素进行遍历,返回一个遍历器。values()是对键值的遍历。
for(let i of [1,2,3].values()){
console.log(i)
// 值
// 1
// 2
// 3
}
includes()
includes()
判断是否包含某一元素,返回true或false,第二个参数表示判断的起始位置,也可以是负数,表示从右数过来第几个,但是不改变判断搜索的方向,搜索方向还是从左到右。
var arr = [1,2,3,"a","b","c"]
arr.includes(1); // true
arr.includes(1,-2); // false
更多内容详细请看-----阮一峰的es6入门