数组常用操作方法

港控/mmm° 2021-07-25 12:18 995阅读 0赞

### 数组常用操作方法 ###

*  一. 定义数组
 *  二. 检测数组
 *  三. 常用方法
 *   *  1. 数组元素拼接为字符串
     *   *  1.1 join(separator) —— 将数组的元素组起一个字符串
         *  1.2 toString() —— 把数组转换为一个字符串，并返回结果
     *  2. forEach() —— 循环数组
     *  3. 添加、删除数组元素
     *   *  3.1 shift() —— 删除原数组第一项，并返回删除元素的值
         *  3.2 pop() —— 删除原数组最后一项，并返回删除元素的值
         *  3.3 unshift() —— 向数组的开头添加一个或多个元素，并返回新的长度
         *  3.4 push() —— 向数组的末尾添加一个或多个元素，并返回新的长度
         *  3.5 splice() —— 从数组中添加/删除元素，然后返回被删除的元素
     *  4. slice(start,end) —— 截取数组，返回从原数组中指定开始下标到结束下标之间的元素组成的新数组
     *  5. concat() —— 连接两个或多个数组
     *  6. 数组排序
     *   *  6.1 reverse() —— 将数组中的元素位置进行颠倒排列
         *  6.2 sort(sortby) —— 按指定的参数对数组进行排序
     *  7. 查询数组元素的下标、值
     *   *  7.1 includes() —— 检测数组中是否包含某个元素
         *  7.2 indexOf() —— 返回某个指定的字符串值在字符串中首次出现的位置
         *  7.3 find() —— 返回通过测试（函数内判断）的数组的第一个元素的值
         *  7.4 findIndex() —— 返回传入一个测试条件（函数）符合条件的数组第一个元素位置下标
     *  8. 数组元素的处理
     *   *  8.1 filter() —— 过滤。返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
         *  8.2 map() —— 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
         *  8.3 reduce() —— 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
     *  9. 检测数组所有元素是否都符合指定条件
     *   *  9.1 every() —— 用于检测数组所有元素是否都符合指定条件（通过函数提供）
         *  9.2 some() —— 方法用于检测数组中的元素是否满足指定条件（函数提供）

# 一. 定义数组 #

1.  简写方式
    
        var arr = [1, 2, 3];
        console.log(arr); // [1, 2, 3]
2.  指定数组
    
        var arr1 = new Array();
        arr1[0] = 1;
        arr1[1] = 2;
        arr1[2] = 3;
        console.log(arr1); // [1, 2, 3]

# 二. 检测数组 #

var arr = [1, 2, 3];
    console.log(Array.isArray(arr)); //true
    console.log(arr instanceof Array); //true
    console.log(arr.constructor === Array); //true

# 三. 常用方法 #

菜鸟教程：[https://www.runoob.com/jsref/jsref-obj-array.html][https_www.runoob.com_jsref_jsref-obj-array.html]  
W3school：[https://www.w3school.com.cn/jsref/jsref\_obj\_array.asp][https_www.w3school.com.cn_jsref_jsref_obj_array.asp]

## 1. 数组元素拼接为字符串 ##

### 1.1 join(separator) —— 将数组的元素组起一个字符串 ###

*  将数组的元素组起一个字符串，元素是通过指定的分隔符进行分隔的。
 *  **语法格式**：`array.join(separator)`  
    separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.join();
    console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
    console.log(res); // 1,2,3,4,5,6,7

### 1.2 toString() —— 把数组转换为一个字符串，并返回结果 ###

*  返回值与没有参数的 join() 方法返回的字符串相同。
 *  **语法格式**：`array.toString(radix)`  
    radix：可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.toString();
    console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
    console.log(res); // 1,2,3,4,5,6,7

## 2. forEach() —— 循环数组 ##

*  `forEach()`方法用于调用数组的每个元素，并将元素传递给回调函数。
 *  `forEach()` 对于空数组是不会执行回调函数的。

var arr = [1, 2, 3, 4, 5, 6, 7];
    arr.forEach((item) => { 
     console.log(item);
    });

## 3. 添加、删除数组元素 ##

### 3.1 shift() —— 删除原数组第一项，并返回删除元素的值 ###

*  如果数组为空则返回 undefined
 *  该方法会改变原数组的长度。
 *  **语法格式**：`array.shift()`

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.shift();
    console.log(arr);// [2, 3, 4, 5, 6, 7]
    console.log(res);// 1

### 3.2 pop() —— 删除原数组最后一项，并返回删除元素的值 ###

*  `pop()` 方法将删除 array 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。
 *  如果数组已经为空，则 `pop()`不改变数组，并返回 undefined 值。
 *  **语法格式**：`array.pop()`

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.pop();
    console.log(arr);// [1, 2, 3, 4, 5, 6]
    console.log(res);// 7

### 3.3 unshift() —— 向数组的开头添加一个或多个元素，并返回新的长度 ###

*  `unshift()` 方法不创建新的创建，而是直接修改原有的数组。
 *  **语法格式**：`array.unshift(newelement1,newelement2,....,newelementX)`  
    newelement1：必需。向数组添加的第一个元素。  
    newelement2：可选。向数组添加的第二个元素。  
    newelementX：可选。可添加若干个元素。

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.unshift(-1, 0);
    console.log(arr);// [-1, 0, 1, 2, 3, 4, 5, 6, 7]
    console.log(res);// 9

### 3.4 push() —— 向数组的末尾添加一个或多个元素，并返回新的长度 ###

*  **语法格式**：`array.push(newelement1,newelement2,....,newelementX)`  
    newelement1：必需。向数组添加的第一个元素。  
    newelement2：可选。向数组添加的第二个元素。  
    newelementX：可选。可添加若干个元素。

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.push(8, 9);
    console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(res);// 9

### 3.5 splice() —— 从数组中添加/删除元素，然后返回被删除的元素 ###

*  **语法格式**：`array.splice(index,howmany,item1,.....,itemX)`  
    index：必需。整数，规定添加/删除元素的位置，使用负数可从数组结尾处规定位置。下标从 0 开始  
    howmany：必需。要删除的元素数量。如果设置为 0，则不会删除元素。  
    item1, …, itemX：可选。向数组添加的新元素。

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.splice(-3, 2, "a", "b", "c");
    console.log(arr); // [1, 2, 3, 4, "a", "b", "c", 7]
    console.log(res); // [5, 6]

## 4. slice(start,end) —— 截取数组，返回从原数组中指定开始下标到结束下标之间的元素组成的新数组 ##

*  **语法格式**：`array.slice(start,end)`  
    start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。  
    end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。（不包含end下标的元素）

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.slice(0, 2);
    console.log(arr);// [1, 2, 3, 4, 5, 6, 7]
    console.log(res);// [1, 2]

## 5. concat() —— 连接两个或多个数组 ##

*  该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
 *  **语法格式**：`array.concat(arrayX,arrayX,......,arrayX)`  
    arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

1.  返回一个新数组，是将参数添加到原数组中构成的
    
        var arr = [1, 2, 3, 4, 5, 6, 7];
        var res = arr.concat(8, 9);
        console.log(arr);// [1, 2, 3, 4, 5, 6, 7]
        console.log(res);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
2.  合并两个或多个数组，并返回合并后的新数组，原数组没有变化
    
        var arr = [1, 2, 3];
        var arr1 = ["a", "b"];
        var arr2 = [4, "c"];
        var res = arr.concat(arr1, arr2);
        console.log(arr); // [1, 2, 3]
        console.log(arr1); // ["a", "b"]
        console.log(arr2); // [4, "c"]
        console.log(res); // [1, 2, 3, "a", "b", 4, "c"]

## 6. 数组排序 ##

### 6.1 reverse() —— 将数组中的元素位置进行颠倒排列 ###

*  该方法会改变原来的数组，而不会创建新的数组。
 *  **语法格式**：`array.reverse()`

var arr = [1, 2, 3, 4, 5, 6, 7];
    var res = arr.reverse();
    console.log(arr); // [7, 6, 5, 4, 3, 2, 1]
    console.log(res); // [7, 6, 5, 4, 3, 2, 1]

### 6.2 sort(sortby) —— 按指定的参数对数组进行排序 ###

*  **语法格式**：`array.sort(sortby)`  
    sortby：可选。规定排序顺序。必须是函数
 *  如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序

1.  无参
    
        var arr1 = ["ba", "ad", "sd", "cd", "fj", "aa"];
        var res1 = arr1.sort();
        console.log(arr1);// ["aa", "ad", "ba", "cd", "fj", "sd"]
        console.log(res1);// ["aa", "ad", "ba", "cd", "fj", "sd"]
2.  有参
    
        var arr = [1, 4, 2, 3, 5, 6, 7];
        function sortNumber(a, b) { 
         return a - b;
        }
        var res = arr.sort(sortNumber);
        console.log(arr);// [1, 2, 3, 4, 5, 6, 7]
        console.log(res);// [1, 2, 3, 4, 5, 6, 7]

## 7. 查询数组元素的下标、值 ##

### 7.1 includes() —— 检测数组中是否包含某个元素 ###

*  如果找到匹配的字符串则返回 true，否则返回 false。
 *  **语法格式**：`array.includes(searchvalue, start)`  
    searchvalue：必需，要查找的字符串。  
    start：可选，设置从那个位置开始查找，默认为 0。

var arr = [10, 12, 9, 8];
    var res = arr.includes(9);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //true

### 7.2 indexOf() —— 返回某个指定的字符串值在字符串中首次出现的位置 ###

*  如果元素不存在，返回-1
 *  **语法格式**：`array.indexOf(searchvalue,fromindex)`  
    searchvalue：必需。规定需检索的字符串值。  
    fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

var arr = [10, 12, 9, 8];
    var res = arr.indexOf(9);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //2

### 7.3 find() —— 返回通过测试（函数内判断）的数组的第一个元素的值 ###

*  `find()` 方法为数组中的每个元素都调用一次函数执行：  
    当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。  
    如果没有符合条件的元素返回 undefined
 *  `find()` 对于空数组，函数是不会执行的。
 *  `find()`并没有改变数组的原始值。
 *  **语法格式**：`array.find(function(currentValue, index, arr),thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue： 可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

var arr = [10, 12, 9, 8];
    function callback(item) { 
     return item > 9;
    }
    var res = arr.find(callback);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //10

### 7.4 findIndex() —— 返回传入一个测试条件（函数）符合条件的数组第一个元素位置下标 ###

*  `findIndex()` 方法为数组中的每个元素都调用一次函数执行：  
    当数组中的元素在测试条件时返回 true 时, `findIndex()`返回符合条件的元素的索引位置，之后的值不会再调用执行函数。  
    如果没有符合条件的元素返回 -1
 *  `findIndex()`对于空数组，函数是不会执行的。
 *  `findIndex()`并没有改变数组的原始值。
 *  **语法格式**：`array.findIndex(function(currentValue, index, arr), thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue：可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

var arr = [10, 12, 9, 8];
    function callback(item) { 
     return item > 9;
    }
    var res = arr.findIndex(callback);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //0

## 8. 数组元素的处理 ##

### 8.1 filter() —— 过滤。返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 ###

*  `filter()` 不会对空数组进行检测。
 *  `filter()` 不会改变原始数组。
 *  **语法格式**：`array.filter(function(currentValue,index,arr), thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
    function callback(item) { 
      return item > 9;
    }
    var res = arr.filter(callback);
    console.log(arr); // [10, 12, 9, 8]
    console.log(res); // [10, 12]

### 8.2 map() —— 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值 ###

*  `map()`方法按照原始数组元素顺序依次处理元素。
 *  `map()`不会对空数组进行检测。
 *  `map()`不会改变原始数组。
 *  **语法格式**：`array.map(function(currentValue,index,arr), thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

var arr = [10, 12, 9, 8];
    function callback(item) { 
     return item * 2;
    }
    var res = arr.map(callback);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //[20, 24, 18, 16]

### 8.3 reduce() —— 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值 ###

*  `reduce()`对于空数组是不会执行回调函数的。
 *  **语法格式**：`array.reduce(function(total, currentValue, currentIndex, arr), initialValue)`  
    total：必需。初始值, 或者计算结束后的返回值。  
    currentValue：必需。当前元素  
    currentIndex：可选。当前元素的索引  
    arr：可选。当前元素所属的数组对象。  
    initialValue：可选。传递给函数的初始值

var arr = [10, 12, 9, 8];
    function gitSum(total, num) { 
     return total + num;
    }
    var res = arr.reduce(gitSum, 0);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //39

## 9. 检测数组所有元素是否都符合指定条件 ##

**`every()`和`some()`的区别：**

*  `every()`方法，遍历数组每一项，若全部为true，则返回true；
 *  `some()`方法，遍历数组的每一项，若其中一项为 true，则返回true；

### 9.1 every() —— 用于检测数组所有元素是否都符合指定条件（通过函数提供） ###

*  `every()` 指定函数检测数组中的所有元素：  
    如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；  
    如果所有元素都满足条件，则返回 true。
 *  `every()`不会对空数组进行检测。
 *  `every()`不会改变原始数组。
 *  **语法格式**：`array.every(function(currentValue,index,arr), thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
    function callback(item) { 
     return item > 5;
    }
    var res = arr.every(callback);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //true

### 9.2 some() —— 方法用于检测数组中的元素是否满足指定条件（函数提供） ###

*  `some()`方法会依次执行数组的每个元素：  
    如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。  
    如果没有满足条件的元素，则返回false。
 *  `some()` 不会对空数组进行检测。
 *  `some()` 不会改变原始数组。
 *  **语法格式**：`array.some(function(currentValue,index,arr),thisValue)`  
    currentValue：必须。当前元素的值  
    index：可选。当前元素的索引值  
    arr：可选。当前元素属于的数组对象  
    thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
    function callback(item) { 
     return item > 9;
    }
    var res = arr.some(callback);
    console.log(arr); //[10, 12, 9, 8]
    console.log(res); //true

[https_www.runoob.com_jsref_jsref-obj-array.html]: https://www.runoob.com/jsref/jsref-obj-array.html
[https_www.w3school.com.cn_jsref_jsref_obj_array.asp]: https://www.w3school.com.cn/jsref/jsref_obj_array.asp