ES6之数组的扩展
一、展开运算符
展开运算符是es6新增语法,可以展开数组,通过展开运算符作为函数参数,可以实现接收不固定个数的参数
function plus(...params) {
console.log(params);
}
plus(1, 2, 3, 4, 5);
大家都知道函数都有arguments对象,他是一个类数组对象,通过展开运算符,可以获得真正的数组
二、 Array.from()
- Array.from将伪数组转换为真正的数组
function add() {
// es5转换
let arr = [].slice.call(arguments);
console.log(arr); //[1, 2, 3]
// es6
let arr = Array.from(arguments);
console.log(arr);//[1, 2, 3]
}
add(1, 2, 3);
- Array.from 还可以接受第二个参数 用来对每个元素进行处理
let arr = [1, 2, 3, 4, 5];
let result = Array.from(arr, (ele) => {
return ele + 1;
});
console.log(result); // [2, 3, 4, 5, 6]
- 可以将字符串,变成数组
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
三、Array.of()
将一组值,转换成数组 主要弥补数组构造函数Array()的不足,参数不同会导致Array()的行为有差异 如:
let a1 = new Array();
let a2 = new Array(3);
let a3 = new Array(3, 11, 8);
console.log(a1); // []
console.log(a2); // [empty × 3]
console.log(a3); //[3,11,8]
var arr = Array.of(5);
console.log(arr); // 5
也可以用Array.of()方法进行拼接字符串,对象,数组
var obj = {};
var arr1 = [];
var username = "zzc";
console.log(Array.of(obj, arr1, username)); // [{…}, Array(0), "zzc"] 会返回新数组
四、copywithin()
修改当前数组 有三个参数,参数为负数表示倒数
第一个参数是从该位置开始替换
第二个参数是从该位置开始读取数据,默认为0
第三个参数是到该位置停止读取数据,默认等于数组长度
let arr = [1, 2, 3, 4, 5];
// arr.copyWithin(0, -2);
// console.log(arr); // [4, 5, 3, 4, 5]
arr.copyWithin(0, 2);
console.log(arr); //[3, 4, 5, 4, 5]
五、entries() keys() values()
返回一个遍历器 可以使用for...of循环进行遍历
// keys 对键名的遍历
// values 对值的遍历
// entries 对键值对的遍历
var arr = ["zzc", "bbb", 1, 2];
console.log(arr.keys());
let it = arr.keys(); //Array Iterator {}
console.log(it.next());//{value: 0, done: false}
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: 3, done: false}
for (let index of arr.keys()) {
console.log(index); //依次获得0,1,2,3 数组成员的下标
}
for (let index of arr.values()) {
console.log(index); //依次获得zzc,bbb,1,2 数组成员的值
}
for (let [index, ele] of arr.entries()) {
console.log(index, ele);
//依次获得 [0, "zzc"],[1, "bbb"],[2, 1],[3, 2] 键值对的形式
}
六、find() ,filter(),fill()
- find() 只返回第一个符合的结果 参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,否则返回undefined
- filter()表示过滤,返回所有符合条件的成员
- fill()填充数组 可以接收第二和第三个参数,用于指定填充的起始位置和结束位置
var arrfind = [1, 2, 3, 4, 5];
var result = arrfind.find((item) => {
// console.log(item);
return item > 2;
});
console.log(result); //3
var arrfind = [1, 2, 3, 4, 5];
var result1 = arrfind.filter((item) => {
return item > 3;
});
console.log(result1); // [4,5]
var arrfind = [1, 2, 3, 4, 5];
// 可以接收第二和第三个参数,用于指定填充的起始位置和结束位置
var arrfill = [1, 2, 3,4 ,5];
// arrfill.fill(7);
// console.log(arrfill); // [7, 7, 7, 7,7]
arrfill.fill(7, 3, 4);
console.log(arrfill); //[1, 2, 3, 7, 5]