ECMAScript学习（二）：Array数组方法

1、Map集合

1.1、格式：

var new_array =  arr.map(function(currentValue[, index[, array]]) {
          // Return element for new_array
}

1.2、返回值说明

The map() method creates a new array with the results of calling a provided function on every element in the calling array.
该方法会返回一个同原数组长度一样的一个新数组，数组中的每一项，就是函数调用后的结果

• 注意： map() 不会对空数组进行检测。
• 注意：map() 不会改变原始数组。

1.3、使用

let arr = [1, 2, 3, 4, 5, 6, 7];
let a = arr.map((item, index,arr) => {
   console.log(arr);//(7) [1, 2, 3, 4, 5, 6, 7]
   return item * 2;
});
console.log(a);//(7) [2, 4, 6, 8, 10, 12, 14]

2、filter函数

2.1、形式

var newArray = arr.filter(function(element[, index[, array]])
[, thisArg])

2.2、返回值说明：

The filter() method creates a new array with all elements that pass the test implemented by the provided function.
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

2.3、实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let a = arr.filter((item, index, arr) => {
   return item > 3;
});
console.log(a);//(4) [4, 5, 6, 7]

3、arr.every

3.1、定义

arr.every(function(element[, index[, array]])[, thisArg])

3.2、返回值说明

The every() method tests whether all elements in the array pass the test implemented by the provided function.
数组中的每一项运行该函数，如果每一项的函数都返回true，则该方法返回真。
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
（1）如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
（2）如果所有元素都满足条件，则返回 true。

• 注意： every() 不会对空数组进行检测。
• 注意： every() 不会改变原始数组。

3.3、实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let a = arr.every(function(item) {
   return item > 1;
});
console.log(a);//false

4、arr.some()

4.1、定义

arr.some(callback[, thisArg])

4.2、返回值

数组中的每一项，运行给定函数，只要有一项返回真，那么就返回真。

• 注意： some() 不会对空数组进行检测。
• 注意： some() 不会改变原始数组。

4.3、实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let a = arr.some(item => item > 6);
console.log(a);//true

5、arr.reduce()

归并函数

5.1、定义

arr.reduce(function[, initialValue])

5.2、返回值说明

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

• reduce() 可以作为一个高阶函数，用于函数的 compose。
• 注意: reduce() 对于空数组是不会执行回调函数的。

5.3、实例

let arr = [1, 2, 3, 4, 5];
let a = arr.reduce(function(prev, item, index, arr) {
  return prev + item;
});
console.log('最终结果是：' + a);//最终结果是：15

let a = arr.reduce(function(prev, item, index, arr) {
    return prev + item;
}, 10);
console.log('最终结果是：' + a);//最终结果是：25

6、arr.filter()

6.1、定义

var newArray = arr.filter(function(element[, index[, array]])[, thisArg])

6.2、返回值说明

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

6.3、实例

数组去重

let arr = [2, 2, 4, 2, 1, 4, 2, 2, 2, 24, 4];
let a = arr.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(a);//(4) [2, 4, 1, 24]

7、arr.sort(sortby)

方法用于对数组的元素进行排序。

• （1）如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

• （2）如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• <1>：若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

• <2>：若 a 等于 b，则返回 0。

• <3>：若 a 大于 b，则返回一个大于 0 的值。

arr.sort((a,b)=>{return a-b}

let arr = [12,14,3,45,56,78,123,1,2,5]
let result = arr.sort((a,b)=>{return a-b})
console.log(result) //(10) [1, 2, 3, 5, 12, 14, 45, 56, 78, 123]

8、forEach循环遍历数组

8.1、形式：

arr.forEach(function (item, index, arr){});

8.2、作用：

遍历数组

8.3、参数说明

（1） 可以接收两个参数，第一个参数是一个函数，就是数组的每一项要运行这个函数。这个函数接收三个参数，分别是：数组中的项，下标，数组本身
（2）第二个参数是一个数组(可有可无)。如果有，前面函数中的this就指向这个数组；如果没有，前面函数的this就指向window。

let arr = [1, 2, 3, 4, 5, 6, 7];
arr.forEach(function(item, index) {
    console.log(item+"============"+index);
    //1============0
    console.log(this);
    //(7) [1, 2, 3, 4, 5, 6, 7]
},arr);

9、for-of循环遍历数组

let a = ['A', 'B', 'C'];
for (let attr of a) {
   console.log(attr);//A B C
}

10、Array.from()

方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

let arr2 = [1,1,2,2,3,3,4,5,75,56]
// let array = new Set(arr2) //(7) [1, 2, 3, 4, 5, 75, 56]
let array = Array.from(new Set(arr2))
console.log(array) //(7) [1, 2, 3, 4, 5, 75, 56]

let ele = document.getElementsByTagName("input")
    console.log(ele) // HTMLCollection(8) [input, input, input, input, input, input, input, input, dept: input, all: input]
    let array = Array.from(ele)
    console.log(array) // (8)[input, input, input, input, input, input, input, input]

11、Array.flat()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

const arr = [2,[3,[4,[5,[9],8],6],6],7]
arr.flat(5)
// (9) [2, 3, 4, 5, 9, 8, 6, 6, 7]

12.数组的空位

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

Array(3) // [, , ,]

13 数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

14 数组实例的 entries()，keys() 和 values()

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

15 数组实例的 fill()

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']