javascript数组方法的基本使用（Mhua）

一、影响原始数组的方法

shift

删除数组的第一个元素，返回值为对应删除的元素。

const arr = ["A", "B", "C"];
const res = arr.shift();
console.log(arr); //  ['B', 'C']
console.log(res); // A

pop

删除数组的最后一个元素，返回值为对应删除的元素

const arr = ["A", "B", "C"];
const res = arr.pop();
console.log(arr); //  ['A', 'B']
console.log(res); // C

push

往数组尾部添加元素，返回值为数组长度

const arr = ["A", "B", "C"];
const res = arr.push(1);
console.log(arr); // ['A', 'B', 'C', 1]
console.log(res); // 4  返回数组长度

unshift

往数组头部添加元素，返回值为数组长度

const arr = ["A", "B", "C"];
const res = arr.unshift(1);
console.log(arr); // [1, 'A', 'B', 'C']
console.log(res); // 4  返回数组长度

splice

新增、删除数组元素，返回值为数组。

用法：splice(index, Number, ele)

• index 数组的索引

• Number 删除元素个数 (0 表示不删除任何元素)

• ele 在索引值后新增元素的值。

const arr = ["A", "B", "C"];
const res = arr.splice(0, 1, "hello world"); 
// 这里表示从索引为 0 开始（也就是第一个元素），删除1个元素，并且插入 "hello world"
console.log(arr); // 返回值为 ['A']
console.log(res);  // ['hello world', 'B', 'C']

第三个参数后还可以继续填写，表示插入数组的值。

// 删除第一个元素，并且往数组中插入 "hello1", "hello2", "hello3", "hello4"
arr.splice(0, 1, "hello1", "hello2", "hello3", "hello4") 
// ['hello1', 'hello2', 'hello3', 'hello4', 'B', 'C']
console.log(arr); 

reverse

数组反转，返回值为数组。

const arr = ["A", "B", "C"];
const res = arr.reverse();
console.log(arr); // ['C', 'B', 'A']
console.log(res); // ['C', 'B', 'A']

sort

用于数组元素的排序。直接使用默认是根据 数组元素的第一个元素的来使用。

const arr = [3, 8, 4, 11, 4];
const res = arr.sort();
// 这样使用，是根据数值的第一个数的unicode来比较的。所以11中的1，小于其它数
console.log(arr); //  [11, 3, 4, 4, 8]
console.log(res); //  [11, 3, 4, 4, 8]

sort 方法可传入一个函数，参数分别为 a, b 。a 表示后一个数，b 表示前一个数。 当函数返回值为 true 时，两个数就会进行位置调换。

const arr2 = [3, 12, 55, 6, 3, 4, 5];
arr2.sort((a, b) => {
    return b - a;  
    // a - b  从小到大排序  结果为：[3, 3, 4, 5, 6, 12, 55]。  
    // b - a 从大到小排序 结果为： [55, 12, 6, 5, 4, 3, 3]
});

二、不影响原始数组的方法

every

遍历数组，返回值存在false，则停止遍历，结果值就是为 false。（所有条件都满足时才会返回true）

const arr = [3, 4, 2, 9];
const res1 = arr.every((e) => { 
// 由于第一个元素 3 大于 2 。 return e < 2 所以返回 false ，遍历数组结束，不会继续执行。 该函数只遍历了一次。
    return e < 2;
});
console.log(res1); // false

some

遍历数组，返回只要有一次为true，则停止遍历，结果值就是为true。（只要有一次满足条件，就返回true）

const arr1 = [6, 3, 4, 1];
const res1 = arr1.some((e) => {
    return e < 5;
});
// 数组中 第二个元素 3 < 5 满足条件，所以返回 true
console.log(res1, "-- res1 ---"); // true

filter

用于筛选符合条件的数据

const arr1 = [4, 2, 9, 11];
// 数组中 4，2 都小于 5，这两个数满足条件。
const res1 = arr1.filter((e) => e < 5);
console.log(res1); // [4, 2]

indexOf

匹配元素值，并且返回对应索引。匹配不到，返回 -1

const arr1 = [20, 31, 22];
// 匹配不到元素，则返回 -1
console.log(arr1.indexOf(21)); 
//22是数组的第三个元素，索引是从0开始的，所以返回 2
console.log(arr1.indexOf(22)); 

lastIndexOf

匹配元素，并且返回最后一次匹配到元素的索引值。匹配不到，返回 -1。

const arr1 = [3, 4, 1, 2, 9, 3, 4];
// 第一个3索引为0，第二个3索引为5.
console.log(arr1.lastIndexOf(3));  // 返回值为 5

join

把数组以某种符号拼接为字符串。不传参的话，默认为 逗号。

const arr1 = [2, 9, 1];
console.log(arr1.join(";")); // 2;9;1
console.log(arr1.join()); // 2,9,1  默认值是逗号
console.log(arr1.join("-")); // 2-9-1

toString

把数组转化为字符串，以逗号的形式拼接

const arr1 = [3, 1, 2];
console.log(arr1.toString()); // 3,1,2

concat

往数组添加新的元素，并且返回新的数组，不会影响原数组。

const arr1 = [2, 3, 4];
const res1 = arr1.concat(3, 4, 5);
console.log(arr1); // [2, 3, 4]
console.log(res1); //  [2, 3, 4, 3, 4, 5]
console.log(arr1 == res1); // false

map

遍历数组，根据返回值生成新的数组。

const arr1 = [1, 2, 3];
const arr2 = arr1.map(function (e) {
	return e * 2; // 每个元素值都乘2
});
console.log(arr2); // [2, 4, 6]

reduce

遍历数组，可用来计算数组元素之和。

const arr1 = [1, 2, 3];
// 第一次循环：pre 默认值为 0, next表示数组的第一个元素 1。相加的结果为：total = pre + next = 0 + 1
// 第二次循环：pre 为上一次相加的结果值total，为1。 next表示数组的第二个元素值 2 。相加的结果为：total = pre + next = 1 + 2 = 3
// 第三次循环：pre 为上一次相加的结果值total，为3。next表示数组的第三个元素值 3。相加的结果为：total = pre + next = 3 + 3 = 9
const res1 = arr1.reduce((pre, next) => {
	console.log(pre, next); // 第一次 0 1  第二次 1 2   第三次 3 3
	return pre + next;
}, 0); // 这里的 0 表示 pre 第一相加的默认值。
console.log(res1, "-- res1 --"); // 6  数组[1, 2, 3]三个数相加

slice

用于数组截取。参数1：开始索引（包含），参数2：结束索引（不包含）

const arr1 = ["a", "b", "c", "d", "e"];

// 结果：['b']
console.log(arr1.slice(1, 2)); 

// 结果：['b', 'c', 'd']  截取数组索引从 1-3 的元素
console.log(arr1.slice(1, 4));

// 结果： ['d', 'e']  截取数组最后两个元素
console.log(arr1.slice(-2)); 

// 结果：['c', 'd']  截取倒数第三个（包含） 至 倒数第一个（不包含）的两个元素。
console.log(arr1.slice(-3, -1));