JavaScript数组的常用方法

---

前言

数组是编程开发中最常见的数据类型之一。咱主要介绍js 操作数据 的一些内置方法和

---

一、数组内取值

取值指定位置元素值

根据数组对应指定下标可获取指定位置元素值。

const arr = new Array("js","JavaScript","jQuery");
const first = arr[0] // 因为数组下标是从 0 开始算的
const two = arr[1]
const end = arr[arr.length-1]
console.log(first); // js
console.log(two); // JavaScript
console.log(end); // jQuery

取值最后一位元素值

• JavaScript pop() 删除最后一个元素方法 （慎用， 会改变原数组)

let arr = new Array("js","JavaScript","jQuery");
const end = arr.pop()
console.log(end); // jQuery
console.log(arr); // ["js", "JavaScript"]

• JavaScript slice() 方法，即截取指定范围，返回的是个数组

const arr = new Array("js","JavaScript","jQuery");
const end = arr.slice(-1); // -1 即取值最后一位
console.log(end); // ["jQuery"]
// 如果想取第二位则
const two = arr.slice(1, 2); // 即取值 从下标 1 （包含）开始到下标 2 之前（不含）内容
console.log(two); // ["JavaScript"]

二、改变数组本身的方法

实际改变数组本身的方法基本都是 增或删 的方法会如此

push() 末尾新增N个元素

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

let arr = ['a', 'b', 'c'];
const ele = arr.push('d');
console.log(ele); // 4
console.log(arr); // ['a','b','c','d']

pop() 删除末尾的一个元素

从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined。

let arr = ['a', 'b', 'c', 'd'];
const ele = arr.pop();
console.log(ele); // 'd'
console.log(arr); // ['a','b','c']

shift() 删除首位的一个元素

从数组中删除第一个元素，并返回该元素的值。

let arr = ['a', 'b', 'c', 'd'];
const ele = arr.shift();
console.log(ele); // 'a'
console.log(arr); // ['b''c','d']

unshift() 首位新增N个元素

将一个或多个元素添加到数组的开头，并返回该数组的新长度。

var arr = ['a', 'b', 'c'];
var ele = arr.unshift('d'); // 可传多个参数
console.log(ele); // 4
console.log(arr); // ['d','a','b','c']

splice() 指定位置删除或新增N个元素

splice(start,deleteCount?,item1?) 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容（如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组）。

• start：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
• deleteCount (可选)：整数，表示要移除的数组元素的个数。
• 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
• 如果 deleteCount 被省略了，或者它的值大于等于array.length - start（也就是说，如果它大于或者等于start之后的所有元素的数量），那么start之后数组的所有元素都会被删除。
• 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
• item1, item2, … （可选）：要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2, 0, 'e');
console.log(insertOnce); // []
console.log(arr); // ['a', 'b', 'e', 'c', 'd']
// 从索引 3 的位置开始删除一个元素
var delOnce = arr.splice(3, 1);
console.log(delOnce ); // ['c']
console.log(arr); // ['a', 'b', 'e', 'd']

sort() 给数组排序

对数组的元素进行排序。

let arr = [1, 5, 2, 4, 3];
arr.sort();
arr.sort((a, b) => a - b); // 正序 arr.sort(function(a,b){return a -b})
console.log(arr); // [1,2,3,4,5]
arr.sort((a, b) => b - a); // 倒序 arr.sort(function(a,b){return b-a})
console.log(arr); // [1,2,3,4,5]
// or
let arr1 = [
    {
    
     name: 'Edward', age: 21 },
    {
    
     name: 'Sharpe', age: 37 },
    {
    
     name: 'And', age: 45 },
    {
    
     name: 'The', age: -12 },
    {
    
     name: 'Magnetic', age: 15 },
    {
    
     name: 'Zeros', age: 37 }
];
//依据age排序
arr1.sort(function (a, b) {
    
    
    return (a.age - b.age)
});
console.log(arr1); // [1,2,3,4,5]

reverse() 倒序操作即位置颠倒

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，第二个元素会变成倒数第二个…数组的最后一个元素变成第一个。

var arr = [1, 2, 3, 4, 5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]
console.log(arr); // [5,4,3,2,1]

三、不会改变数组本身的方法

slice() 截取指定范围元素

slice(begin?, end?)返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的深拷贝（包括 begin，不包括end），两个参数都可选,，该方法即截取指定位置内的值。

• begin 可选 提取起始处的索引（从0开始），从该索引开始提取原数组元素
• 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
• 如果省略 begin，则 slice 从索引 0 开始。
• 如果 begin 超出原数组的索引范围，则会返回空数组。
• end 可选 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
• slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
• 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
• 如果 end 被省略，则 slice 会一直提取到原数组末尾。
• 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

const arr = ['a', 'b', 'c', 'd'];
const res = arr.slice(0, 2);
console.log(arr); // ['a', 'b', 'c', 'd']
console.log(res); // ['a', 'b']

concat() 合并N个数组

合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。即使合并前的数组有相同的，也不会去重。

const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['e', 'f']
const arr3 = arr1.concat(arr2);
console.log(arr3 ); // ['a', 'b', 'c', 'd','e','f']

join() 获取指定分隔符字符串，默认 , 分割

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符(默认使用’,'分隔，如果使用""，则所有元素之间都没有任何字符)。

const arr = ['a', 'b', 'c', 'd'];
const str = arr.join("-");
console.log(str); // "a-b-c-d"

forEach() 遍历数组，一般做比较或者每个元素有不同处理逻辑的时候使用

forEach(function(currentValue，index?,array?),thisValue?)对数组的每个元素执行一次给定的函数。currentValue 必选 当前元素的值index 可选 当前元素的索引值array 可选 当前元素属于的数组对象thisValue 可选 执行callback函数时值被用作 this。如果省略或传入null,undefined那么callback函数的this为全局对象}

/**
 * @param {*} element 当前元素值
 * @param {*} index 下标
 * @param {*} array 当前数组
 */
const logArrayElements = (element, index, array) => {
    
    
    console.log('a[' + index + '] = ' + element, array);
}

// 注意索引 2 被跳过了，因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

map() 遍历数组，可修改对应元素值，并返回新的数组

map(function(currentValue，index?,array?),thisValue?)
map() 是怎么运行的呢？实际上对数组的每个元素都遍历一次，同时返回一个新的值。记住一点是返回的这个数据的长度和原始数组长度是一致的。

即创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const kvArray = [{
    
     key: 1, value: 10 },
{
    
     key: 2, value: 20 },
{
    
     key: 3, value: 30 }];

const reformattedArray = kvArray.map(function (obj) {
    
    
    var rObj = {
    
    };
    rObj[obj.key] = obj.value;
    return rObj;
});
console.log(reformattedArray); // [{1: 10}, {2: 20}, {3: 30}]
console.log(kvArray); // 不变

filter() 过滤指定条件元素

filter(function(currentValue,index,arr), thisValue)
创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

即如果 callback 函数返回 true，这个元素将会出现在返回的数组中，如果返回 false 就不会出现在返回数组中

/**
 * 筛选出字符串数组中长度大于6的字符串
 */
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]

every() 判断是否数组内元素均符合指定条件

every(function(currentValue,index,arr), thisValue)测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值，若收到一个空数组，此方法在一切情况下都会返回 true。

/*
 * 检查是否数组中的所有数字都小于40
 */
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // true

some() 判断数组内元素是否有存在指定条件的值

some(function(currentValue,index,arr), thisValue)测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值，如果用一个空数组进行测试，在任何情况下它返回的都是false。

/**
 * 检测数组中是否至少有一个数字大于 18:
 */
const ages = [3, 10, 18, 20];
function checkAdult(age, index, arr) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult))

find() 查找符合指定条件的第一位元素值

find(function(currentValue,index,arr), thisValue)返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

/**
 * 获取数组中第一个大于10的值
 */
const array2 = [5, 12, 8, 130, 44];
const found = array2.find(element => element > 10);
console.log(found); // 12

flat() 数组扁平化处理，可根据入参深度扁平化

flat(depth?) 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

/**
 * depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。
 */
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]

new Set() 结合类数组，可去重

数组去重，new Set()生成，结合 Array.from()静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组

/**
 * 去重
 */
const getReplace = [0, 1, 5, 2, 1, 2, 6, 5, 2, 8];
console.log(new Set(getReplace)); // [0, 1, 5, 2, 6, 8]
console.log(Array.from(new Set(getReplace))); // [0, 1, 5, 2, 6, 8]
Array.prototype.removeDuplicate = function () {
    
    
    return Array.from(new Set(this));
};
console.log([1, 2, 1, 2, 3].removeDuplicate());

reduce() 可返回指定逻辑处理后的数据，例如返回累计或查找指定条件的值

可以直观的返回数组里面指定的一个值或者对象，即可计算对象内某个属性的累计值和查找最大或最小的数据等

const pilots = [
    {
    
    
        id: 10,
        name: "Poe Dameron",
        years: 14,
    },
    {
    
    
        id: 2,
        name: "Temmin 'Snap' Wexley",
        years: 30,
    },
    {
    
    
        id: 41,
        name: "Tallissan Lintra",
        years: 16,
    },
    {
    
    
        id: 99,
        name: "Ello Asty",
        years: 22,
    }
];
const totalYears = pilots.reduce(function (accumulator, pilot) {
    
    //const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);
    return accumulator + pilot.years;
}, 0);

const mostExpPilot = pilots.reduce(function (oldest, pilot) {
    
    
    return (oldest.years || 0) > pilot.years ? oldest : pilot;
}, {
    
    });

---

总结

结合上述描述，即只有在操作数组的增、删、改和顺序修改会导致改变原数组的值。
分别有以下七种方法会改变原数组本身值

• push() 末尾新增N个元素
• pop() 删除末尾的一个元素
• shift() 删除首位的一个元素
• unshift() 首位新增N个元素
• splice() 指定位置删除或新增N个元素
• sort() 给数组排序
• reverse() 倒序操作即位置颠倒

其余方法是根据原数组获取新数组等操作，一般常用的有，查找、截取某段内容、遍历、过滤、去重和累计等操作，具体有以下12种方法

• slice()截取指定范围元素
• concat() 合并N个数组
• join() 获取指定分隔符字符串，默认 , 分割
• forEach() 遍历数组，一般做比较或者每个元素有不同处理逻辑的时候使用
• map() 遍历数组，可修改对应元素值，并返回新的数组
• filter() 过滤指定条件元素
• every() 判断是否数组内元素均符合指定条件
• some() 判断数组内元素是否有存在指定条件的值
• find() 查找符合指定条件的第一位元素值
• flat() 数组扁平化处理，可根据入参深度扁平化
• new Set() 结合类数组，可去重
• reduce() 可返回指定逻辑处理后的数据，例如返回累计或查找指定条件的值