数组中常用的方法
数组中常用的API（Application Programming Interface 应用程序接口)
- 凡是能被外界调用，实现某个功能的都是API
数组可以调取的各种方法.
- 方法的作用.
- 方法的实参.
- 方法的返回值.
- 原始数组是否发生改变.
1. Array.from([value]):把一个类数组集合（或者Set结构），转换为数组.
- 元素集合/节点集合都是类数组.
- arguments也是类数组.
- 我们自己构造的类数组集合.
- ... 只有数组才能调用Array.prototype上的方法，类数组是无法调取这些方法使用的，如果想让其调用，有一个办法就是把其转换为数组.
2.Array.isArray([value]):检测当前的值是否为一个数组，是数组返回true，否则是false.
var allNodes = document.querySelectorAll('*');
console.log(allNodes);
console.log(Array.isArray(allNodes)); //false
var arr = Array.from(allNodes);//把allNodes转化为数组.
console.log(arr);
console.log(Array.isArray(arr)); //true
结果为：
3.push:向数组末尾插入内容, 实参:要插入的内容, 返回值:插入内容后数组最新的长度, 原始数组改变.
var arr = [10, 20, 30];
var res = arr.push('yunduo');
console.log(res, arr); // 4 [10, 20, 30, "yunduo"]
res = arr.push('zxt', 100, function () {}, null);
console.log(res, arr); // 8 [10, 20, 30, "yunduo", "zxt", 100, ƒ[function], null]
结果为：
4.pop:删除数组最后一项的内容, 实参:-- , 返回值:删除的那一项内容, 原始数组改变.
var arr = [10, 20, 30];
var res = arr.pop();
console.log(res, arr); // 30 [10,20]
结果为：
5.unshift:向数组开始的位置插入内容, 实参:-- , 返回值:插入后数组最新的长度 , 原始数组是改变的.
var arr = [10, 20, 30];
var res = arr.unshift('yunduo', 100, 200);
console.log(res, arr); // 6 ['yunduo', 100, 200 , 10, 20, 30]
结果为：
6.shift:删除数组第一项内容, 实参:-- , 返回值:删除的那一项内容, 原始数组改变.
var arr = [10, 20, 30];
var res = arr.shift();
console.log(res, arr); // 10 [20,30]
结果为：
7.splice(n,m):从索引n开始，删除m个元素，把删除的内容以新数组返回，原始数组改变(m不设定，就一直删除到数组末尾).
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.splice(2, 3);
console.log(res, arr); // [30,40,50] [10,20,60]
结果为：
- 若splice(n,m,x,...):从索引n开始删除m个元素，用x及后面传递的值替换删除的内容，返回删除部分内容[数组]，原始数组改变.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.splice(1, 2, 'hello', 'yunduo', 'javascript');
console.log(res, arr); // [20,30] [10,'hello', 'yunduo', 'javascript', 40, 50, 60]
结果为：
- 若splice(n,0,x,...):从索引n开始，一个都不删除，把x插入到索引n的前面，返回一个空数组(没有删除任何内容)，原始数组改变.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.splice(1, 0, 'hello', 'yunduo');
console.log(res, arr); // [] [10, "hello", "yunduo", 20, 30, 40, 50, 60]
结果为：
8.slice(n,m):从索引n开始，找到索引为m处（不包含m），把找到的结果以新数组返回，原始数组不变（数组查找）.
- slice(n):从索引n开始找到数组末尾.
- slice(0):数组浅克隆，把原始数组中的内容原封不动复制一份给新数组.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.slice(2, 4);
console.log(res, arr); // [30, 40] [10, 20, 30, 40, 50, 60]
结果为：
9.concat:实现数组的拼接，参数是拼接的数组/值，返回拼接后的数组，原始数组不变.
var arr1 = [10, 20, 30];
var arr2 = [40, 50, 60];
var res = arr1.concat('yunduo', arr2);
console.log(res); // [10, 20, 30, "yunduo", 40, 50, 60]
结果为：
10.toString:把数组转为字符串（数组中的每一项基于逗号分隔），原始数组不变.
11.join():把数组按照指定分隔符转换为字符串，原始数组不变.
var arr = [10, 20, 30];
console.log(arr.toString(), arr); // "10,20,30" [10, 20, 30]
console.log(arr.join('+')); // "10+20+30"
//数组求和
var total = 0;
for (var i = 0; i < arr.length; i++) {
total += arr[i];
}
console.log(total);
console.log(eval(arr.join('+'))); // eval可以把一个字符串变为JS表达式
结果为：
12.indexOf:查找当前项在数组第一次出现位置的索引，如果数组中没有这一项，返回的是-1.
13.lastIndexOf:查找当前项在数组最后一次出现位置的索引.
var arr = [10, 20, 30, 20, 40];
console.log(arr.indexOf(20)); //1
console.log(arr.lastIndexOf(20)); //3
console.log(arr.indexOf(100)); //-1
//验证数组中是否包含这一项
if (arr.indexOf(100) === -1) {
console.log('数组中不包含这一项');
}
结果为：
14.includes:直接验证数组中是否包含某一项，包含返回true，否则是false.
var arr = [10, 20, 30, 20, 40];
if (!arr.includes(100)) {
console.log('数组中不包含这一项');
}
结果为：
15.reverse:把数组倒过来排列，原始数组是改变的.
var arr = [1, 3, 5, 2, 3, 7];
var res = arr.reverse();
console.log(res, arr); //[7, 3, 2, 5, 3, 1] [7, 3, 2, 5, 3, 1]
结果为：
16.sort:把数组进行排序，原始数组也是改变的，但在两位及两位数以上，sort无法按照数字的大小进行排序，
var arr = [1, 3, 5, 2, 3, 7];
arr.sort();
console.log(arr); //[1, 2, 3, 3, 5, 7]
结果为：
因为sort在两位及两位数以上无法按照数字的大小进行排序，所以在真实项目中sort不是这样来用.
arr = [1, 6, 3, 7, 2, 17, 23, 15];
arr.sort();
console.log(arr); //[1, 15, 17, 2, 23, 3, 6, 7]
//在两位及两位数以上，sort无法按照数字的大小进行排序，
//它是按照unicode编码值进行排序的(先比较第一位，第一位相同再比较第二位...)
结果为：
基于sort在两位及两位数以上无法按照数字的大小进行排序，因此在真实项目中可以这样来用.
var arr = [1, 6, 3, 7, 2, 17, 23, 15];
arr.sort(function (a, b) {
//在sort内部处理的时候，会按照数组的长度，依次遍历数组中的每一项(以及和每一项的后一项)，
//每一次遍历都会把匿名函数触发执行一次，并且把当前遍历的当前项和后一项传递给这个函数.
// a:后一项
// b:当前项
// 如果当前匿名函数返回<=0的值，则让当前项和后一项交换位置(从而实现排序),
// @ a-b 升序
// @ b-a 降序
//return -1; //每次都会交互位置，就会将原来的数组倒过来排列.
return a - b; //
});
console.log(arr); // [1, 2, 3, 6, 7, 15, 17, 23]
结果为：
需求：按照每个人年龄的降序进行排序.
var arr = [ { name: '张三', age: 18 }, { name: '李四', age: 35 }, { name: '王五', age: 25 }];
arr.sort(function (a, b) {
return b.age - a.age;
});
console.log(arr);
结果为：
17.fill:数组填充.
var arr = new Array(10); //创建一个长度为10的数组，但是此时每一项都没有内容.
arr.fill(null); //填充后拥有了每一项，只不过结果为null（拥有每一项之后就可以遍历了）.
console.log(arr);
结果为：
18.flat:数组扁平化，把多维数组降级为一维数组，参数是控制降几个维度，默认降一个维度，
- Infinity是控制直接降为一维数组，原始数组不变.
var arr = [
10,
20,
[
30,
40,
[
50,
60
]
],
[
70,
80,
[
90,
100
]
]
];
var res = arr.flat(Infinity);
console.log(res); //[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
结果为：
19.forEach:迭代/遍历数组中每一项，传递一个回调函数，不支持返回值，原始数组不变.
var arr = [10, 20, 30, 40, 50, 60];
//基于“命令式编程”遍历数组每一项：注重编程的过程（把控每一个步骤）.
for (var i = 0; i < arr.length; i++) {
console.log('当前项:' + arr[i], '索引:' + i);
}
//基于“函数式编程”遍历数组每一项：注重的是结果，不在乎你处理的过程.
arr.forEach(function (item, index) {
//内部会依次遍历数组中的每一项，而且每遍历一项，都会触发回调匿名函数执行,
//并且把当前遍历这一项和索引传递给函数.
//item:当前遍历的这一项
//index:当前遍历这一项的索引
console.log('当前项:' + item, '索引:' + index);
});
结果为：
20.map:和forEach类似，也是依次遍历数组中的每一项，并且通知匿名回调函数执行（把当前项/当前项索引传递给函数），
- 区别是map是支持返回值的，回调函数中返回的结果会替换数组中的当前项（原始数组不变，以新数组返回）.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.map(function (item, index) {
//返回啥相当于把数组当前项替换成啥.
return item * index;
});
console.log(res); // [0, 20, 60, 120, 200, 300]
结果为：
21.filter:遍历数组中的每一项(item和index都有)，在每一次遍历的时候，
- 如果回调函数中返回的是true，则我们把这一项留下，如果返回的是false，则这一项不要了，
- 把最后筛选的结果按照新数组返回，原始数组不变, “数组筛选的办法，把符合条件的筛选出来,”
把数组中为奇数的筛选出来.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.filter(function (item, index) {
//索引是偶数代表第奇数个
//0 2 4
return index % 2 === 0;
});
console.log(res, arr); // [10, 30, 50]
结果为：
22.find:在数组中查找符合条件的这一项,一旦找到符合条件的，则遍历结束.
23.findIndex:查找到符合条件这一项的索引,一旦找到符合条件的，则遍历结束.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.find(function (item, index) {
//一旦找到符合条件的，则遍历结束
return index > 2;
});
console.log(res); // 40
结果为：
24.some:依次遍历数组中的每一项，只要有一项符合我们设定的条件，整体就是true，反之是false.
25.every:是每一项都要符合这个条件，整体才是true.
var arr = [10, 20, 30, 40, 50, 60];
var res = arr.some(function (item, index) {
return item >= 50;
});
console.log(res); //true
res = arr.every(function (item, index) {
return item >= 50;
});
console.log(res); //false
结果为：
