JS数组常用方法的使用

1. 栈方法（后进先出）

push()方法：向数组末尾添加一个或更多元素，返回的是数组新的长度。

传递参数数量不定，可以传递 0 到多个，参数之间使用 , 隔开

• 改变了原有数组，不会返回新数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var length = fruits.push("Kiwi");
console.log(length) // 5
console.log(fruits) // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]

pop()方法：向数组中删除数组最后一个元素并且返回该元素。如果数组为空就返回undefined。

不需要传递参数

• 改变了原有数组，不会返回新数组
• 如果数组为空就返回undefined。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var item = fruits.pop();
console.log(item); // "Mango"
console.log(fruits);  //  ["Banana", "Orange", "Apple"]

var fruits = [];
var item = fruits.pop();
console.log(item); // undefined
console.log(fruits);  //  []

2. 队列方法

shift() 方法：把数组的第一个元素从其中删除，并返回第一个元素的值。

不需要传递参数

• 改变了原有数组，不会返回新数组
• 如果数组是空的，则shift() 方法不进行任何操作，返回undefined。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var item = fruits.shift();
console.log(item); // "Banana"
console.log(fruits); // ["Orange", "Apple", "Mango"]

var fruits = [];
var item = fruits.shift();
console.log(item); // undefined
console.log(fruits); // []

unshift()方法：向数组的开头添加一个或更多元素，返回的是数组新的长度。

传递参数数量不定，可以传递 0 到多个，参数之间使用 , 隔开

• 改变了原有数组，不会返回新数组
• 在IE6，IE7下，数据有添加成功，但返回值却是undefined.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var length = fruits.unshift("Lemon","Pineapple");
console.log(length); // 6
console.log(fruits); // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

3. 转换方法

join() 方法：用于把数组中的所有元素转换一个字符串。

• 在转换时，内部的空值和未定义值会去除，但是 分隔符 会保留
• 对于对象会 转换成 [object, object]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango"]
console.log(energy); // "Banana,Orange,Apple,Mango"

特殊元素转化

var fruits = ["Banana", "", 123, NaN, undefined, null, () => { }, { name: 'szx', age: 28 }, []];
var energy = fruits.join();
console.log(energy) // Banana,,123,NaN,,,() => { },[object Object],

4. 重排序方法

sort() 方法：用于对数组的元素进行排序。

sort(sortfunction)：可传递一个参数

• 默认排序顺序为按字母升序。为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到字符串，以确定如何排序。（实质按照首字母ASCII码顺序进行排列，首字母相同比较第二个，依次类推）
• 参数可选，非必需。
• 若传递参数，参数必须是一个函数，且函数须有两个参数。sort() 方法会自动把数组中元素两两传入函数中，根据函数返回值进行排序。如果想让第一个参数应该位于第二个之前则返回一个负数；如果想让第一个参数位于第二个之后则返回一个正数；如果两个参数相等，则保持原有顺序，返回0。（可以自定义排序方法，本质上最终目的还是两个具体的值之间进行比大小）
• 改变了原有数组，不会返回新数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = fruits.sort();
console.log(fruits) // ["Apple", "Banana", "Mango", "Orange"]

var fruits = [
    { name: "Banana", price: 13 },
    { name: "Orange", price: 8 },
    { name: "Apple", price: 20 },
    { name: "Mango", price: 4 }
]
fruits = fruits.sort((val1, val2) => {
    if (val1.price < val2.price) {
        return -1
    } else if (val1.price > val2.price) {
        return 1
    } else {
        return 0
    }
});
console.log(fruits)
// [{ name: "Mango", price: 4 }, { name: "Orange", price: 8 }, { name: "Banana", price: 13 }, { name: "Apple", price: 20 }]

reverse()方法：用于颠倒数组中元素的顺序。

无参数

• 只是将数组中的现有排列顺序进行反向，和元素的值无关
• 改变了原有数组，不会返回新数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits); // ["Mango", "Apple", "Orange", "Banana"]

5. 操作方法

concat() 方法：连接两个或多个数组。

可传递多个参数，

• 参数数据类型不作限制。若类型不是数组，则连接后作为一个数组的元素。
• 不会改变现有的数组，而返回连接后的新数组。

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = "Robin";
var children = hege.concat(stale, kai);
console.log(children); // ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]

splice() 方法：插入、删除或替换数组的元素。

功能强大，增删改都可以

可传递3个参数，splice(start, length, newItem)

• 参数1：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
• 参数2：可选。规定应该删除多少元素。必须是数字，但可以是"0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
• 参数3：可选。要添加到数组的新元素，新元素使用分隔符 , 隔开
• 改变了原有数组，不会返回新数组

插入元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
console.log(fruits); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
// 从下标为2的元素开始，删除0个元素，插入指定新元素

删除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1);
console.log(fruits); // ["Banana", "Orange", "Mango"]
// 从下标为2的元素开始，删除1个元素

替换元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits); // ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]
// 从下标为2的元素开始，先删除1个元素，再插入指定新元素

slice() 方法：从已有的数组中截取选定的元素，组成新的数组返回。

传递两个参数，slice(start, end)

• 参数1：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• 参数2：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var arr1 = fruits.slice(1,3); // ["Orange", "Lemon"]
var arr2 = fruits.slice(2); // ["Lemon", "Apple", "Mango"]
var arr3 = fruits.slice(-5, -2); // ["Banana", "Orange", "Lemon"]

6. 遍历方法

every() 方法：检测数组所有元素是否都符合指定条件（通过函数提供）

传递两个参数：every( function(currentValue, index, arr){ }, thisValue )

• 参数1：必需，且必须是函数。函数还必须有返回值，返回当前元素在函数中自定义判断的结果（直接返回布尔值或者返回结果为布尔值的表达式） 注意不要写成 箭头函数，否则 this 指向 windows

  此函数的参数要求：

  • 参数1：必需，进行条件判断的当前元素，数组中的每个元素都会被依次传入。
  • 参数2：可选，当前元素的索引值。
  • 参数3：可选，当期元素属于的数组对象。

• 参数2：可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”
• 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，如果发现这个元素，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略
• 不会改变现有的数组。

// 判断所有元素是否都小于 30
var ages = [32, 33, 16, 40];
var bool = ages.every(function (item) {
    return item < 30
})
console.log(bool) // false

some()方法：检测数组中的元素是否满足指定条件（通过函数提供）。

传递两个参数：some( function(currentValue, index, arr){ }, thisValue )

• 参数1：必需，且必须是函数。函数还必须有返回值，返回当前元素在函数中自定义判断的结果（直接返回布尔值或者返回结果为布尔值的表达式） 注意不要写成 箭头函数，否则 this 指向 windows

  此函数的参数要求：

  • 参数1：必需，进行条件判断的当前元素，数组中的每个元素都会被依次传入。
  • 参数2：可选，当前元素的索引值。
  • 参数3：可选，当期元素属于的数组对象。

• 参数2：可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”
• 对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 true，如果发现这个元素，some 将返回 true，如果回调函数对每个元素执行后都返回 false ，some 将返回 false。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。
• 不会改变现有的数组。

// 判断是否有元素小于 30
var ages = [32, 33, 16, 40];
var bool = ages.some(function (item) {
    return item < 30
})
console.log(bool) // true

every() 和 some() 类似，every是所有元素都满足条件才返回 true，some 是只要有一个满足条件就返回 true
IE 9 及其以上支持

filter() 方法：在数组中筛选满足条件的元素，组成新数组返回

传递两个参数：filter( function(currentValue, index, arr){ }, thisValue )

• 参数1：必需，且必须是函数。函数还必须有返回值，返回当前元素在函数中自定义过滤条件判断的结果（直接返回布尔值或者返回结果为布尔值的表达式） 注意不要写成 箭头函数，否则 this 指向 windows

  此函数的参数要求：

  • 参数1：必需，进行条件判断的当前元素，数组中的每个元素都会被依次传入。
  • 参数2：可选，当前元素的索引值。
  • 参数3：可选，当期元素属于的数组对象。

• 参数2：可选。对象作为回调函数的 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”
• 对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素。
• 只有在回调函数执行前传入的数组元素才有效，在回调函数开始执行后才添加的元素将被忽略，而在回调函数开始执行到最后一个元素这一期间，数组元素被删除或者被更改的，将以回调函数访问到该元素的时间为准，被删除的元素将被忽略。

// 获取小于 35 的元素
var ages = [32, 33, 16, 40];
var arr = ages.filter(function (item) {
    return item < 35
})
console.log(arr);  //[32, 33, 16]

indexOf() 方法：返回某个指定的元素在数组指定范围内首次出现的位置。

传递两个参数：indexOf(item, start)

• 参数1： 必需，进行查找的元素
• 参数2： 可选。开始查找的起始位置，默认为0。合法取值是 -length <= start <= length，且必需为整数。可接受负值，意为从倒数第几个开始
• 搜索是正方向进行的。
• 搜索方向和范围是 start -----> length

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Orange"); // 1
var b = fruits.indexOf("Orange",4); // 5
var c = fruits.indexOf("orange"); // -1

lastIndexOf()方法：返回某个指定的元素在数组指定范围内最后一次出现的位置。

传递两个参数：lastIndexOf(item, start)

• 参数1： 必需，进行查找的元素
• 参数2： 可选。开始查找的起始位置，默认为数组的长度。合法取值是 -length <= start <= length，且必需为整数。可接受负值，意为从倒数第几个开始
• 搜索是反方向进行的。
• 搜索方向和范围是 0 <----- start

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Orange"); // 5
var b = fruits.lastIndexOf("Orange",4); // 1
var c = fruits.lastIndexOf("orange"); // -1

map() 方法：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

传递两个参数 map(function(currentValue, index, arr), thisValue)

• 参数1：必需，回调函数。此函数有三个参数

• 参数1：currentValue，必需。依次传递的当前元素
• 参数2：index，可选，当前元素的索引
• 参数3：arr，可选，当前元素所属的数组对象。

• 参数2：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue ，“this” 的值为 “undefined”
• 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
• 对于空数组是不会执行回调函数的。

// 将数组中的每个元素都 乘以2，得到一个新数组
var fruits = [1, 2, 3, 4, 5, 6];
var arr = fruits.map(function (item) {
    return item * 2
})
console.log(arr); // [2, 4, 6, 8, 10, 12]

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

接受两个参数，reduce(function(total, currentValue, currentIndex, arr), initialValue)

• 参数1：必需，回调函数。此函数有四个参数

• 参数1：total，必需。累加起始值，或者计算结束后的返回值。每进行一次累加后都会更新为累加后的值
• 参数2：currentValue，必需。依次传递的当前元素
• 参数3：currentIndex，可选，当前元素的索引
• 参数4：arr，可选，当前元素所属的数组对象。

• 参数2：可选。传递给函数的初始值，即total的默认值，若不传递，则为第一个元素的值。
• 返回值是累加的结果，不会更改原数组
• 对于空数组是不会执行回调函数的。
• 对于传递的参数在循环累加过程中都已有对应的值，传递参数是根据需要在方法内进行相应的逻辑使用

var nums = [1, 2, 3, 4, 5, 6];
var sum = nums.reduce(function (total, item) {
    return total + item;
}, 30)
console.log(sum) // 51

reduce() 和 reduceRight() 作用相同。
reduce() 是数组中从左向右累加，reduceRight()是从右向左累加

forEach()方法：调用数组的每个元素，并将元素传递给回调函数。

传递两个参数 forEach(function(currentValue, index, arr), thisValue)

• 参数1：必需，回调函数。此函数有三个参数

• 参数1：currentValue，必需。依次传递的当前元素
• 参数2：index，可选，当前元素的索引
• 参数3：arr，可选，当前元素所属的数组对象。

• 参数2：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue ，“this” 的值为 “undefined”
• 没有返回值，只是依次让筛选出每个元素执行同一个操作
• 对于空数组是不会执行回调函数的。

var nums = [1, 2, 3, 4, 5, 6];
var sum = 0;
nums.forEach(function (item) {
    sum += item;
},30)
console.log(sum) // 21