一、Array 对象

  Array 对象用于在变量中存储多个值；数组是一种具有相同类型值的集合，它的每一个值称为数组的一个元素。数组用于在内存中存储大量相同类型的数据，可以通过数组的名称和下标来访问数组中的元素。

二、数组属性

三、Array对象方法

具体用法：

1、concat() 的使用

   用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

语法： var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数：
  |---valueN 可选，将数组和/或值连接成新数组。详情请参阅下文描述；

返回值：
  |---新的Array实例。

  合并三个数组的值

   var arr1 = ["A", "B"];
   var arr2 = ["a", "b", "c"];
   var arr3 = ["Aa"];
   var arr4 = t1.concat(t2,t3);
结果：
       arr4 = ["A", "B", "a", "b", "c", "Aa"]

2、conpyWithin() 的使用

  浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

语法：arr.copyWithin(target[, start[, end]])

参数：
  |--- target：复制序列开始的位置（即，原数据保留的元素位置），负数target 将从末尾开始计算，如果 target 大于等于 arr.length，将会不发生拷贝；
  |--- start：复制元素的起始位置。如果是负数，start 将从末尾开始计算，如果 start 被忽略，将会从0开始复制；
  |--- end：复制元素的结束位置，将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数，将从末尾开始计算，如果 end 被忽略，将会一直复制至数组结尾；

返回值：
  |--- 改变后的数组。

实例：Array.conpyWithin()

  let numbers = [1, 2, 3, 4, 5];

  numbers.copyWithin(-2);
  // [1, 2, 3, 1, 2]

  numbers.copyWithin(0, 3);
  // [4, 5, 3, 4, 5]

  numbers.copyWithin(0, 3, 4);
  // [4, 2, 3, 4, 5]

  numbers.copyWithin(-2, -3, -1);
  // [1, 2, 3, 3, 4]

3、entries() 的使用

  从数组 arr 创建一个可迭代对象， 该对象包含了数组的键值对

语法：arr.entries()

返回值：
  |--- 一个新的 Array迭代器对象。Array Iterato是对象，它的原型（proto:Array Iterator）上有一个next 方法，可用用于遍历迭代器取得原数组的[key,value]。

实例1：Array.entries()

  var array1 = ['a', 'b', 'c'];
  var iterator1 = array1.entries();
  console.log(iterator1.next().value);
  //  [0, "a"]
  console.log(iterator1.next().value);
  //  [1， "b"]

实例2：iterator.next()

  var arr = ["a", "b", "c"];
  var iterator = arr.entries();
  console.log(iterator.next());

  /*{value: Array(2), done: false}
          done:false
          value:(2) [0, "a"]
           __proto__: Object
  */
  // iterator.next()返回一个对象，对于有元素的数组，
  // 是next{ value: Array(2), done: false }；
  // next.done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是false，
  // 直到迭代器结束done才是true。
  // next.value是一个["key","value"]的数组，是返回的迭代器中的元素值。

实例3：iterator.next方法运行

  var arr = ["a", "b", "c"];
  var iter = arr.entries();
  var a = [];

  // for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
  for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比数组的长度大
      var tem = iter.next();             // 每次迭代时更新next
      console.log(tem.done);             // 这里可以看到更新后的done都是false
      if(tem.done !== true){             // 遍历迭代器结束done才是true
          console.log(tem.value);
          a[i]=tem.value;
      }
  }
      
  console.log(a);                         // 遍历完毕，输出next.value的数组

结果：
  false
  [0, "a"]
  false
  [1, "b"]
  false
  [2, "c"]
  true
  (3) [Array(2), Array(2), Array(2)]
  0: (2) [0, "a"]
  1: (2) [1, "b"]
  2: (2) [2, "c"]
    length: 3
  __proto__: Array(0)

实例4：二维数组按行排序

function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);

/*(4) [Array(2), Array(5), Array(5), Array(4)]
    0:(2) [1, 34]
    1:(5) [2, 3, 44, 234, 456]
    2:(5) [1, 4, 5, 6, 4567]
    3:(4) [1, 23, 34, 78]
    length:4
    __proto__:Array(0)
*/

实例5：使用 for…of 循环

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]

4、every() 的使用

   测试一个数组内的所有元素是否都能通过某个指定函数的测试，返回一个布尔值；
 注意：若收到一个空数组，此方法在一切情况下都会返回 true

语法：arr.every(callback[, thisArg])

参数：
  |---callback：用来测试每个元素的函数，它可以接收三个参数：
     |--- currentValue： 用于测试的当前值；
     |--- index： 可选，用于测试的当前值的索引；
     |--- array： 可选，调用 every 的当前数组；
  |---thisArg：执行 callback 时使用的 this 值；

返回值：
  |---如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

说明：
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

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

实例1：检测所有数组元素的大小

  //检测数组中的所有元素是否都大于 10
  function isBigEnough(currentValue, index, array) {
    return element >= 10;
  }
  [12, 5, 8, 130, 44].every(isBigEnough);   // false
  [12, 54, 18, 130, 44].every(isBigEnough); // true

实例2：使用箭头函数

  [12, 5, 8, 130, 44].every(x => x >= 10); // false
  [12, 54, 18, 130, 44].every(x => x >= 10); // true

5、fill() 的使用

   用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引；

语法：arr.fill(value[, start[, end]])

参数：
  |---value：用来填充数组元素的值；
  |---start：可选，起始索引，默认值为0；
  |---end：可选，终止索引，默认值为 this.length；

返回值：
  |--- 修改后的数组。

实例1:

  [1, 2, 3].fill(4);               // [4, 4, 4]
  [1, 2, 3].fill(4, 1);            // [1, 4, 4]
  [1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
  [1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
  [1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
  [1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
  [1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
  [1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
  Array(3).fill(4);                // [4, 4, 4]
  [].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
  
  // Objects by reference.
  var arr = Array(3).fill({}) // [{}, {}, {}];
  arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

6、filter() 的使用

   filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数：
  |---callback：用来测试每个元素的函数，它可以接收三个参数：
     |--- currentValue：数组中当前正在处理的值；
     |--- index： 可选，正在处理的元素在数组中的索引；
     |--- array： 可选，调用了 filter 的数组本身；
  |---thisArg：可选，执行 callback 时，用于 this 的值；

返回值：
  |---一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

实例1：筛选排除所有较小的值

 function isBigEnough(element) {
      return element >= 10;
  }
 var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
  //  [12, 130, 44]

 //回调函数箭头函数写法
 var filtered2 = [12, 5, 8, 130, 44].filter((element)=> element >= 10);
 //  [12, 130, 44]

实例2：过滤 JSON 中的无效条目

     //使用 filter() 创建具有非零 id 的元素的 json
        var arr = [
            { id: 15 },
            { id: -1 },
            { id: 0 },
            { id: 3 },
            { id: 12.2 },
            { },
            { id: null },
            { id: NaN },
            { id: 'undefined' }
        ];

        var invalidEntries = 0;

        function isNumber(obj) {
            return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
        }

        function filterByID(item) {
            if (isNumber(item.id) && item.id !== 0) {
                return true;
            }
            invalidEntries++;
            return false;
        }

        var arrByID = arr.filter(filterByID);

        console.log('过滤后的数组：\n', arrByID);
        // Filtered Array
        // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

        console.log('无效的条目数 = ', invalidEntries);
        // 无效的条目数  = 5
/*******************************************************************************************/
   //用箭头函数简化代码，如下
        var invalidEntries2 = 0;
        var arrByID2 = arr.filter((item) =>
            item.id !== undefined && typeof(item.id ) === 'number' && !isNaN(item.id ) && item.id !== 0 ?
            true : (invalidEntries2++,false)
        );
        console.log('\n过滤后的数组2：\n', arrByID2);
        // Filtered Array
        // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

        console.log('无效的条目数2 = ', invalidEntries2);
        // 无效的条目数  = 5

实例3：在数组中搜索

      //使用 filter() 根据搜索条件来过滤数组内容
        var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

        /**
         * Array filters items based on search criteria (query)
         */
        function filterItems(query) {
            return fruits.filter(function(el) {
                return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
            })
        }
        console.log(filterItems('ap')); // ['apple', 'grapes']
        console.log(filterItems('an')); // ['banana', 'mango', 'orange']

 /*************************************************************************************/
        //箭头函数写法
        const filterItems2 = (query) => {
            return fruits.filter((el) =>
                el.toLowerCase().indexOf(query.toLowerCase()) > -1
            );
        }
        console.log(filterItems2('ap')); // ['apple', 'grapes']
        console.log(filterItems2('an')); // ['banana', 'mango', 'orange']

7、find() 的使用

   find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法：arr.find(callback[, thisArg])

参数：
  |--- callback：在数组每一项上执行的函数，接收 3 个参数：
     |--- currentValue：当前遍历到的元素；
     |--- index： 可选，当前遍历到的索引；
     |--- array： 可选，数组本身；
  |---thisArg：执行回调时用作this 的对象；

返回值：
  |--- 数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

实例1：用对象的属性查找数组里的对象

       var inventory = [
            {name: 'apples', quantity: 2},
            {name: 'bananas', quantity: 0},
            {name: 'cherries', quantity: 5}
        ];

        function findCherries(fruit) {
            return fruit.name === 'cherries';
        }
        console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

/********************************************************************************/
        //箭头函数简化写法
        console.log(inventory.find((fruit)=>fruit.name === 'cherries'));

实例2：寻找数组中的质数

//如何从一个数组中寻找质数（如果找不到质数则返回undefined）
      function isPrime(element, index, array) {
           var start = 2;
           while (start <= Math.sqrt(element)) {
               if (element % start++ < 1) {
                    return false;
               }
            }
            return element > 1;
        }

        console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
        console.log([4, 5, 8, 12].find(isPrime)); // 5
 /*****************************************************************************/
        console.log([4, 5, 8, 12].find((item)=>{
            var st = 2;
            while (st <= Math.sqrt(item)){
                if (item % st++ < 1) {
                    return false;
                }
            }
            return item > 1;
        })); // 5

8、findIndex() 的使用

  findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

语法：arr.findIndex(callback[, thisArg])

参数：
  |--- callback：针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数：
     |--- currentValue：当前的元素；
     |--- index： 当前元素的索引；
     |--- array： 调用findIndex的数组；
  |---thisArg：可选。执行callback时作为this对象的值；

实例1：查找数组中首个质数元素的索引

      //查找数组中素数的元素的索引（如果不存在素数，则返回-1）。
        function isPrime(element, index, array) {
            var start = 2;
            while (start <= Math.sqrt(element)) {
                if (element % start++ < 1) {
                    return false;
                }
            }
            return element > 1;
        }

        console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
        console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

9、flat() 的使用

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

语法：var newArray = arr.flat(depth)

参数：
  |--- depth：可选。指定要提取嵌套数组的结构深度，默认值为 1

返回值：
  |--- 一个包含将数组与子数组中所有元素的新数组。

实例1：扁平化嵌套数组

  var arr1 = [1, 2, [3, 4]];
  arr1.flat(); 
  // [1, 2, 3, 4]

  var arr2 = [1, 2, [3, 4, [5, 6]]];
  arr2.flat();
  // [1, 2, 3, 4, [5, 6]]

  var arr3 = [1, 2, [3, 4, [5, 6]]];
  arr3.flat(2);
  // [1, 2, 3, 4, 5, 6]

  //使用 Infinity 作为深度，展开任意深度的嵌套数组
  arr3.flat(Infinity); 
  // [1, 2, 3, 4, 5, 6]

实例2：扁平化嵌套数组

  //flat() 方法会移除数组中的空项
  var arr4 = [1, 2, , 4, 5];
  arr4.flat();
  // [1, 2, 4, 5]

替代方案
实例3：使用 reduce 与 concat 替代

  var arr = [1, 2, [3, 4]]; 
  console.log(arr.flat()); // [1, 2, 3, 4]

  // 反嵌套一层数组
  var  newArr = arr.reduce((acc, val) => acc.concat(val), []); 
  console.log(newArr); // [1, 2, 3, 4]

  // 或使用 ...
  console.log( [].concat(...arr) );  // [1, 2, 3, 4]

  // 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
  var arr = [1,2,3,[1,2,3,4, [2,3,4]]];

  //使用flat
  console.log(arr.flat(Infinity)); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

  //使用reduce 和 concat
  function flattenDeep(arr) {
      return arr.reduce((acc, val) => Array.isArray(val) ? 
          acc.concat(flattenDeep(val)) : acc.concat(val), []);
  }
  console.log(flattenDeep(arr)); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

10、flatMap() 的使用

   首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 以及 深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些；

语法：var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
      // 返回新数组的元素
     }[, thisArg])

参数：
  |--- callback：可以生成一个新数组中的元素的函数，可以传入三个参数：
     |--- currentValue：当前正在数组中处理的元素；
     |--- index： 可选的。数组中正在处理的当前元素的索引；
     |--- array： 可选的。被调用的 map 数组；
  |---thisArg：可选的。执行 callback 函数时 使用的this 值；

返回值：
  |--- 一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

实例1：Map 与 flatMap

  var arr1 = [1, 2, 3, 4];

  arr1.map(x => [x * 2]); 
  // [[2], [4], [6], [8]]

  arr1.flatMap(x => [x * 2]);
  // [2, 4, 6, 8]

  // 只会将 flatMap 中的函数返回的数组 “压平” 一层
  arr1.flatMap(x => [[x * 2]]);
  // [[2], [4], [6], [8]]

  虽然上面的代码使用 map 和 flatMap 好像都可以，但这只能展示如何使用 flatMap。

  所以，为了更好的展示 flatMap 的作用，下面我们将包含几句话的数组拆分成单个汉字组成的新数组。

  let arr = ["今天天气不错", "", "早上好"]

  arr.map(s => s.split(""))
  // [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]
  
  arr.flatMap(s => s.split(''));
  // ["今", "天", "天", "气", "不", "错", "早", "上", "好"]

等价操作：

  //使用 reduce 与 concat
  var arr1 = [1, 2, 3, 4];

  arr1.flatMap(x => [x * 2]);
  // 等价于
  arr1.reduce((acc, x) => acc.concat([x * 2]), []);
  // [2, 4, 6, 8]

后文，继续......