2021-08-05

数组：

一、插入删除合并：

1.push/pop:从数组的尾部进行插入/删除

2.unshift/shift:从数组的首部进行插入/删除

（1）arr会立即改变
（2）插入多项用，分隔
（3）删除首、尾项不用写参数
（3）插入返回值：添加后数组的新长度
（4）删除返回值：被删除元素

3.splice(index,howmany,item1…item2)

1.参数：
index:添加或者删除的位置，可以为负数，从结尾出规定位置
howmany:个数
item:添加的项
2.返回值：返回删除的项，若无删除，返回空数组，原数组更新

（1）向数组中删除并添加

 		const arr = [1, 2, 3, 3];
        var res = arr.splice(2, 2, 'x', 'y');
        console.log('arr', arr, res);

解释：从下标为2的位置连续删除两项并插入x，y
结果：

arr:[1,2,x,y];
res:[3,3]

（2）向数组中直接添加

		const arr = [1, 2, 3, 3];
       var res = arr.splice(2, 0, 'x', 'y');
       console.log('arr', arr, res);

解释：从index=2出发删除连续0项，并插入x，y；相当于从下标为2出发连续插入两项
结果：

arr:[1,2,'x','y',3,3];
res:[		]

（3）删除数组中的值

 		const arr = [1, 2, 3, 3];
        var res = arr.splice(2, 2);
        console.log('arr', arr, res);

结果：

arr:[1,2,'x','y',3,3];
res:[		]

4.concat()：合并数组

1.参数：concat(arr1,arr2);
2.返回值：合并后的新数组，原数组不变

二、子数组

4.slice():得到子数组

1.参数：表示截取子数组的范围
（1）slice(a):从下标a开始截取到数组结束
（2）slice(a,b):(a,b]
（3）slice(-a):从下标-a开始截取到数组结尾，注意此时数组结尾处下标为-1
2.返回值：返回截取的子数组，原数组不变

        const arr = [1, 2, 3, 3];
        var res = arr.slice(-2);
        console.log('arr', arr, res);

结果：

arr:[1,2,3,3]
res:[3,3];

三、数组转化

1.join()和split()方法

（1）join():数组—>字符串

（1）参数：join(连接符)/join()：默认逗号分隔
（2）返回值：返回分割好的字符串，原数组不变

        const arr = [1, 2, 3, 3];
        var res = arr.join();
        console.log('arr', arr, res);

结果：

arr：[1,2,3,3];
res:1,2,3,3

（2）split():字符串—>数组

（1）参数：split(拆分符)
注意：
（1）原来连接字符串的符号是什么就写什么，没有就写“”，没有的意思
（2）拆分符记得加’’
（3）一般不省略

   		const str = 'a-b-c-d';
        const res1 = str.split('-');
        console.log( res1);

["a", "b", "c", "d"]

        const str = 'hello';
        const res1 = str.split('');
        console.log(res1);

["h", "e", "l", "l", "o"]

2.tostring():将对象转化为字符串并返回

返回值：转化后的字符串
原数组不变
obj.toString()

[1,2,3,4].tostring();------>1,2,3,4

3.toLocalString()：讲对象转化为本地格式的字符串并返回

四、数组排序

1.reverse()：置反数组

返回值：置反后的数组，原数组更新

const arr = [1, 2, 3, 3];
console.log(arr.reverse(), arr);

arr.reverse():[3,3,2,1]
arr:[3,3,2,1]

2.sort():数组排序

（1）参数：排序函数
（2）返回值：排好序的新数组，原数组更新
（2）排序本质:会调用每个数组项的toString()转型方法，比较得到的字符串确定如何排序

数值升序排序：
[12, 13, 1, 4, 6, 74,].sort(function (a, b) {
            return a - b;
        })

[1, 4, 6, 12, 13, 74]

数值降序排序：
[12, 13, 1, 4, 6, 74,].sort(function (a, b) {
            return b - a;
        })

[74, 13, 12, 6, 4, 1]

		var arr = [12, 13, 1, 4, 6, 74]
        var res = arr.sort(function (a, b) {
            return b - a;
        });
        console.log('arr', arr, res);

arr,res :[74, 13, 12, 6, 4, 1]

函数解释：当前者>后者（形参）交换顺序，返回正数
否则返回负数

五、ES5新增方法

位置方法：indexOf()、 lastIndexOf()、includes（）

1.indexOf()：

参数：indexOf(要查找的值，起始位置的索引)
实现：从数组开头索引0开始往后查找
返回值：直接返回要查找的值的相对于规定其实位置的索引值
没找到的情况下返回-1

2.lastIndexOf：

参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

比较方法：会使用全等操作符，比较查找的值与数组中的每一项
注意：数组中有多个要搜索的值时，返回第一个所在的位置

3.includes（）方法：判断一个数组是否包含一个指定值，返回布尔值

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5

console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2

console.log(arr.indexOf("5")); //-1

arr.lastIndexOf(4,9)表示从数组arr索值值为9的位置从后向前查找第一个数组项为4。其返回的值为8

迭代方法

参数：
currentValue:数组当前项的值，必须
index:数组当前项的索引，可选
arr:数组对象本身，可选

1.forEach()

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数
array.forEach(function(currentValue,index,arr){ })

返回值：undefined 不可以链式调用
没有办法终止（不能return）或者跳出forEach()循环。除非抛出异常
当数组内引用类型值会改变原数组，数组内为基本类型值不会改变原数组

注意：
若对其原函数在方法中进行操作，可能原函数会改变
forEach()中加return true后不会终止遍历，会把所有项遍历完

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

		var sum = 0;
        var arr = [1, 2, 4, 5, 2, 8];
        var newArr = arr.forEach(function (value, index, array) {
            sum += value;
        });
        console.log(sum);
       console.log(arr); **[1, 2, 4, 5, 2, 8]**

		

let arr = [
            {
                a: 1,
                b: 2
            },
            {
                a: 3,
                b: 4
            }
        ];
        arr.forEach(item => {
            item.a = 5;
        });
        console.log(arr);

2.map()

map()：
指“映射”，对数组中的每一项运行给定函数，

返回值：返回每次函数调用的结果组成的数组。
注意：不对空数据检测

原数组不变

下面代码利用map方法实现数组中每个数求平方。

		var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.map(function (item) {
            return item * item;
        });
        console.log(arr2); //[1, 4, 9, 16, 25]
        console.log(arr);//[1, 2, 3, 4, 5]

3.filter()

filter()：
array.filter(function(currentValue,index,arr){ })
“过滤”功能，数组中的每一项运行给定函数，
返回值：一个新的符合筛选条件的数组
不改变原数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

4.every()

every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

   var ages = [12, 32, 14, 67];
    function checkAdult(age) {
        return age > 18;
    }
    function fun() {
        return ages.every(checkAdult)
    }
    console.log(fun());//false

5.some()

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
注意：some()中遇到return true后会终止遍历，迭代效率高

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

6.reduce()和 reduceRight()

这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

缩小方法

1.reduce()：从数组开始位进行遍历

2.reduceRight()：从数组末尾开始遍历

详细了解reduce
接受一个函数作为累加器，数组中的每个值从左到右开始缩减，最终统计为一个值
注意：reduce()对空数组是不会执行回调的

		let arr = ['e', 'l', 'l', 'o'];
        arr.reduce((accumulator, currentValue, currentIndex, array) => {
            console.log(accumulator, currentValue, currentIndex, array);
            return accumulator + currentValue;
        }, 'h');

h e 0 (4) ["e", "l", "l", "o"]
he l 1 (4) ["e", "l", "l", "o"]
hel l 2 (4) ["e", "l", "l", "o"]
hell o 3 (4) ["e", "l", "l", "o"]

array.reduce(function(accumulator, currentValue, currentIndex, array){ }, initialValue)

它由一个回调函数与一个初始值组成，其中回调函数接受四个参数，我们先解释回调函数形参与initialValue的含义：
1.initialValue [ɪˈnɪʃl] [ˈvæljuː] 初始值

initialValue 表示reduce方法第一次执行时的初始值，是一个可选值。

2.accumulator [əˈkjuːmjəleɪtər] 累加器；积聚者

accumulator 正如翻译的那样，它是 reduce 方法多次执行的累积结果，accumulator 的初始值分两种情况：

若有提供 initialValue 初始值，第一次循环时 accumulator 的值便为 initialValue，后续循环时 accumulator 为上次循环的返回值。

若未提供initialValue，第一次循环时 accumulator 的值为数组第一项arr[0]，后续循环时为上次循环的返回值。

3.currentValue [ˈkɜːrənt] [ˈvæljuː] 当前值

这个应该不难理解，数组循环当前处理的值。currentValue 的初始值也受到initialValue的影响：

若有提供 initialValue 初始值，第一次循环currentValue 的值为数组第一项arr[0]，后续变化随索引递增变化。

若未提供initialValue，第一次循环由于arr[0]成了accumulator 的值，所以currentValue 只能从arr[1]开始，后续变化随索引递增。

4.currentIndex

数组循环当前处理值的索引，currentValue 与 currentIndex是同步变化的。

5.array

当前正在被循环的数组。
应用：数组求和

let total = [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
            console.log(accumulator, currentValue, currentIndex, array);
            return accumulator += currentValue;
        }); 
console.log(total);//10

let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => {
            console.log(accumulator, current);
            return accumulator.includes(current) ? accumulator : accumulator.concat(current);
        }, []);