JavaScript高级-----13.ES6之Array扩展方法
1 Array的扩展方法
上述输出结果中没有逗号的原因：逗号被当作是console.log()方法的参数分隔符了
扩展运算符和剩余参数正好相反
剩余参数：将剩余的元素放在一个数组中。
扩展运算符：可以将数组或者对象转为用逗号分割的参数序列
// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
let ary = ["a", "b", "c"];
// ...ary // "a", "b", "c"
console.log(...ary); //a b c
// 相当于
console.log("a", "b", "c"); //a b c
方法1：
// 扩展运算符应用于数组合并
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 // 1, 2, 3
// ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3); //(6) [1, 2, 3, 4, 5, 6]
方法2：
// 合并数组的第二种方法
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
let ary3 = [7, 8, 9];
ary1.push(...ary2, ...ary3);
console.log(ary1); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 利用扩展运算符将伪数组转换为真正的数组
var oDivs = document.getElementsByTagName('div');
console.log(oDivs); //HTMLCollection(6) [div, div, div, div, div, div] 这是一个伪数组
// ...oDivs//将伪数组转换为逗号分割的参数序列
var ary = [...oDivs]; //变成真正的数组
//将伪数组转换为真正的数组之后，就可以调用数组对象中的真正的方法
ary.push('a');
console.log(ary); //(7) [div, div, div, div, div, div, "a"]
Array.from()以伪数组作为第一个参数，返回值是一个真正的数组
var arrayLike = { //这是一个伪数组
"0": "张三",
"1": "李四",
"2": "王五",
"length": 3
}
var ary = Array.from(arrayLike); //ary是一个真正的数组
console.log(ary)
- Array.from()以函数作为第二个参数，对数组中的元素进行加工处理，数组中有多少个元素函数就会被调用多少次
- 函数有一个形参，代表要处理的那个值，只需要将处理的结果返回即可
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary); //(2) [2, 4]
- find()接收一个函数作为参数，这个参数中的函数返回的是bool值，实际上就是查找的条件
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => {//item是数组中的元素；index是数组的索引号
console.log(index);
return item.id == 1;
});
console.log(target);
//0 说明查找符合条件的值就立马返回，不会继续循环
//{id: 1, name: "张三"}
let ary = [10, 20, 50];
let index = ary.findIndex((item, index) => {
console.log(index);
return item > 15;
// console.log(index); 写在return后面则一次都不打印
});
console.log('符合条件的索引是' + index);
//打印结果
//0
//1
//符合条件的索引是1
let ary = ["a", "b", "c"];
let result = ary.includes('a') //true
console.log(result)
result = ary.includes('e') //false
console.log(result)
