JavaScript 开发必须掌握技能（二）- 更好的使用数组方法

数组是用于储存多个相同类型数据的集合，JavaScript 开发中数组开发是必须掌握技能，工作学习中没少和数组打交道，所以重中之重必须掌握，以下是数组中常用方法及实例。

数组常用操作

1、创建数组

　　直接定义数组项方法；

　　构造函数new Array('Apple', 'Banana');

　　定义一个空数组，我们在push进想要的数组项。

const fruits = ['Apple', 'Banana']
console.log(fruits);//[ 'Apple', 'Banana' ]
console.log(fruits.length);//3

2、访问（索引到）数组项 通过下标定位到数组项，JavaScript数组的索引为零：数组的第一个元素在index 0，最后一个元素在index等于数组length属性值减去1。但是使用无效的索引号将返回undefined。

console.log(fruits[0]) //Apple
console.log(fruits[fruits.length-1])//Banana

3、遍历数组 Array.forEach(),遍历数组的方法很多，我将在往后的随笔中更新。

fruits.forEach(function(item, index, array) {
    console.log(item, index)
})
// Apple 0
// Banana 1

4、添加数组项

1. 添加到数组的末尾 Array.push()

   fruits.push('Orange')
   console.log(fruits)//[ 'Apple', 'Banana', 'Orange' ]

2. 添加到数组的前面 Array.unshift()

   fruits.unshift('Strawberry')
   console.log(fruits)//[ 'Strawberry', 'Apple', 'Banana', 'Orange' ]

5、移除数组项

1. 移除数组末尾项 Array.pop()

   fruits.pop()
   console.log(fruits)//[ 'Strawberry', 'Apple', 'Banana' ]

2. 移除数组首项 Array.shift()

   fruits.shift()
   console.log(fruits)//[ 'Apple', 'Banana' ]

6、找到数组项的索引 Array.indexOf()

fruits.push('Mango')
let pos = fruits.indexOf('Banana')
console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ]
console.log(pos)//1

7、按索引的位置删除数组项 Array.splice（pos，n）

//Array.splice（pos，n）//pos指定索引的开始位置，一直到数组的结尾，n定义要删除的数组项数目
fruits.splice(pos, 1)
console.log(fruits)//[ 'Apple', 'Mango' ]

8、赋值数组 Array.slice()

fruits.slice()
console.log(fruits)//[ 'Apple', 'Mango' ]

9、数组的其他常用方法

1. Array.reverse() 将数组反转就位（第一个数组元素成为最后一个，最后一个数组元素成为第一个）


   const fruits = ['Apple', 'Banana','Mango']
   console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ]
   fruits.reverse();
   console.log(fruits)//[ 'Mango', 'Banana', 'Apple' ]

2. Array.sort() 方法对数组中的元素进行适当排序

   var numbers = [4, 2, 5, 1, 3];
   numbers.sort(function(a, b) {
       return a - b;
   });
   console.log(numbers);
   // [1, 2, 3, 4, 5]

3. Arrzy.fill()方法将数组中的所有元素更改为静态值，从开始索引（默认0）到结束索引（默认array.length）。它返回修改后的数组

   const array1 = [1, 2, 3, 4];
   
   // fill with 0 from position 2 until position 4
   console.log(array1.fill(0, 2, 4));
   // expected output: [1, 2, 0, 0]
   
   // fill with 5 from position 1
   console.log(array1.fill(5, 1));
   // expected output: [1, 5, 5, 5]
   
   console.log(array1.fill(6));
   // expected output: [6, 6, 6, 6]

4.  Array.concat()  数组合并（返回一个新数组，该数组是与其他数组和/或值连接在一起的该数组） 

   const fruits = ['Apple', 'Banana','Mango']
   const array = ['Strawberry']
   console.log(fruits)//[ 'Apple', 'Banana', 'Mango' ]
   const newArray = fruits.concat(array);
   console.log(newArray)//[ 'Apple', 'Banana', 'Mango', 'Strawberry' ]

5. Array.entries()方法返回一个新Array Iterator对象，该对象包含数组中每个索引的键/值对。

   var a = ['a', 'b', 'c'];
   var iterator = a.entries();
   
   for (let e of iterator) {
     console.log(e);
   }
   // [0, 'a']
   // [1, 'b']
   // [2, 'c'] 

6. Array.find() 方法返回提供的数组中满足条件的第一个元素的值。

   const array1 = [5, 12, 8, 130, 44];
   const found = array1.find(element => element > 10);
   
   console.log(found);//12

7. Array.filter() 数组过滤  Array.filter 是一个十分有用的方法。它通过回调函数过滤原数组，并将过滤后的项作为新数组返回 ）

   //过滤出数组项长度大于6的项
   const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
   function test(words) {
       return words.filter(word => word.length > 6);
   }
   console.log(test(words));//[ 'exuberant', 'destruction', 'present' ]

8. Array.includes() 判断数组中是否包含指定元素   返回值为布尔类型true或者false

   const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
   let limit = words.includes("limit")
   let order = words.includes("order")
   console.log(limit)//true
   console.log(order)//false

9. Array.indexOf() 返回数组中元素等于指定元素的第一个（最小）索引，如果没有则返回-1

   const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
   let present = words.indexOf("limit")
   let order = words.indexOf("order")
   console.log(present)//1
   console.log(order)//-1

10. Array.join() 将数组的所有元素连接到字符串中，数组转字符串。

    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    console.log(words.join(','))//spray,limit,elite,exuberant,destruction,present

11. Array.lastIndexOf() 方法返回可以在数组中找到给定元素的最后一个索引；如果不存在，则返回-1，也可以用作去掉字符串最后一个（字符）逗号操作

    const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
    console.log(animals.lastIndexOf('Dodo'));//3
    console.log(animals.lastIndexOf('Tiger'));//1
    console.log(animals.lastIndexOf('order'));//-1
    
    const comma = "Dodo,Tiger,Penguin,";
    console.log(comma.substring(0,comma.lastIndexOf(',')));//Dodo,Tiger,Penguin

12. Array.slice() 数组截取 方法将数组的一部分的浅表副本返回到新的数组对象中，该对象选自beginto end（end不包括），其中begin和end表示该数组中各项的索引。原始数组将不会被修改

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    console.log(animals.slice(2));//["camel", "duck", "elephant"]
    console.log(animals.slice(2, 4));//["camel", "duck"]
    console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]

13. Array.toString() 方法返回一个表示指定数组及其元素的字符串。

    const array1 = [1, 2, 'a', '1a'];
    console.log(array1.toString());//1,2,a,1a

14. Array.toLocaleString() 返回一个表示数组元素的字符串。元素使用其toLocaleString方法转换为字符串，并且这些字符串由特定于语言环境的字符串分隔（例如，逗号“，”）

    const array1 = [1, 'a', new Date()];
    const localeString = array1.toLocaleString('en', {timeZone: "UTC"});
    
    console.log(localeString);//1,a,2020-4-12 4:49:17 PM

15. Array.every() 方法测试数组中的所有元素是否通过提供的功能实现的测试。它返回一个布尔值。

    //判断数组中是否所有的项的length都大于4 
    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    function test(words) {
        return words.every(word => word.length > 4);
    }
    console.log(test(words));

    // true

16. Array.findIndex() 方法返回满足条件的数组中第一个元素的索引。否则返回表明没有元素通过测试。-1

    const array1 = [5, 12, 8, 130, 44];
    const isLargeNumber = (element) => element > 13;
    
    console.log(array1.findIndex(isLargeNumber));//3

17. Array.keys() 方法返回一个新Array Iterator对象，该对象包含数组中每个索引的键

    const array1 = ['a', 'b', 'c'];
    const iterator = array1.keys();
    
    for (const key of iterator) {
        console.log(key);
    }
    //0
    //1
    //2

18. Array.values() 方法返回一个新Array Iterator对象，该对象包含数组中每个索引的值。

    const array1 = ['a', 'b', 'c'];
    const iterator = array1.values();
    
    for (const value of iterator) {
      console.log(value);
    }
    //a
    //b
    //c

19. Array.map() 方法创建一个新数组，其中填充了在调用数组中每个元素上调用提供的函数的结果

    const array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    
    console.log(map1);//[ 2, 8, 18, 32 ]

20. Array.reduce() 方法在数组的每个元素上执行reducer函数（由您提供），从而产生单个输出值。

    const array1 = [1, 2, 3, 4];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    
    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));
    // expected output: 10
    
    // 5 + 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer, 5));
    // expected output: 15

21. Array. reduceRight()方法对一个累加器和数组的每个值（从右到左）应用一个函数，以将其减小为单个值。

    const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
      (accumulator, currentValue) => accumulator.concat(currentValue)
    );
    
    console.log(array1);
    // expected output: Array [4, 5, 2, 3, 0, 1]

22. Array.some() 方法测试数组中的至少一个元素是否通过了由提供的功能实现的测试。它返回一个布尔值。

    const array = [1, 2, 3, 4, 5];
    const even = (element) => element % 2 === 0;
    
    console.log(array.some(even));//true

10、总结

　　以上就是本次全部内容，相信看完你会收获颇多，使用起来也会更熟练，很多方法可能不会使用到，但是学无止境，建议去看看 MDN 文档 以寻找更好的方法。

　　下面是记得一次查阅资料时，查到一个网友的总结，挺不错的，感谢分享：

　　数组方法可先选择性使用

1. 假设我们要判断数组中是否包含指定元素时：我们可以使用Array.includes()和Array.indexOf()均可以达到效果，但是可以使用前者代替后者，因为前者返回的是布尔值。
2. 假设我们要通过主键id获取相应详细信息时，那对于返回值只有一项的时候，我们可以使用Array.find()。尽管Array.filter()可以实现，但是有可能符合条件的有多个项，那么程序不会停止还会继续检索所有符合的项。并返回一个新的数组,所以不建议大家使用。
3. 如果我们判断数组中是否包含某一项时我们可以用Array.find()和Array.some()都能实现，看你的需要吧，如果只是判断是否存在，那some()返回布尔类型，建议使用some();

4. 使用 Array.reduce 替代 Array.filter 与 Array.map 的组合，

   事实上说，Array.reduce 不太容易理解。然而，如果我们先使用 Array.filter 过滤原数组，之后（对结果）再调用 Array.map （以获取一个新数组）。这看起似乎有点问题，是我们忽略了什么吗？

   这样做的问题是：我们遍历了两次数组。第一次是过滤原数组以获取一个长度稍短的新数组，第二次遍历（译者注：指 Array.map）是对 Array.filter 的返回的新数组进行加工，再次创造了一个新数组！为得到最终的结果，我们结合使用了两个数组方法。每个方法都有它自己的回调函数，而且供 Array.map 使用的临时数组是由 Array.filter提供的，（一般而言）该数组无法复用。

   为避免如此低效场景的出现，我的建议是使用 Array.reduce 。一样的结果，更好的代码！Array.reduce 允许你将过滤后切加工过的项放进累加器中。累加器可以是需要待递增的数字、待填充的对象、 待拼接的字符串或数组等。

   在上面的例子中，我们使用了 Array.map，（但更）建议使用累加器为待拼接数组的 Array.reduce 。在下面的例子中，根据变量 env 的值，我们会将它加进累加器中或保持累加器不变（即不作任何处理）。

   const characters = [
       { name: 'ironman', env: 'marvel' },
       { name: 'black_widow', env: 'marvel' },
       { name: 'wonder_woman', env: 'dc_comics' },
   ];
   
   console.log(
       characters
           .filter(character => character.env === 'marvel')
           .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
   );
   // [
   //   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
   //   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
   // ]
   
   console.log(
       characters
           .reduce((acc, character) => {
               return character.env === 'marvel'
                   ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
                   : acc;
           }, [])
   )
   // [
   //   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
   //   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
   // ]