ES6学习笔记七：数组进阶

前言

此系列文章用于记录小萌新的ES6的学习经历如有什么错误或者不好的地方请各位大佬多多指教

---

一、数组的基本概念

1.1.基本概念与特征

数组是值的有序集合。

• 每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。

数组是无类型的。

• 数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。
• 数组的元素可以是对象或其他数组，从而创建复杂的数据结构。

数组可以是稀疏的。

• 数组元素的索引不一定要连续的，它们之间可以有空缺。
• 每个JavaScript数组都有一个length属性。
• 针对非稀疏数组，该属性就是数组元素的个数。
• 针对稀疏数组，length比实际元素个数要大。

二、数组的基本操作

2.1.创建数组

创建数组有两种方式进行创建：

1. 使用数组字面量进行创建
2. 使用构造函数Array()可以进行创建

代码如下（示例）：

{
  let empty = [];
  let primes = [2, 3, 5, 7, 11];
  let misc = [1.1, true, "a"];

  let a1 = new Array(); //相当于[]
  let a2 = new Array(10);
  let a3 = new Array(1, 2, 3, "四", "五", "六");
}

2.2.读写数组

使用[ ]操作符来访问数组中的一个元素。

• 方括号中是一个返回非负整数值的任意表达式。
• 使用该语法既可以读又可以写数组的一个元素。

代码如下（示例）：

{
  let a = ["world"];
  let value = a[0];
  a[1] = 3.14;
  i = 2;
  a[i] = 3;
  a[i + 1] = 4;
  a[a[i]] = a[0];
  a["10"] = "hi";
  a["ten"] = "hoo";
  a[-2] = -2;
  a[1.11] = 1.11;
  console.log(a);
  /*
  [
   'world',
  3,
  <6 empty items>,
  'hi',
  ten: 'hoo',
  '-2': -2,
  '1.11': 1.11
  ]
  */
}

2.3.数组长度与稀疏数组

length每一个数组都有一个length属性，此属性描述数组中元素的个数

• 设置为一个小于当前长度的非负整数n时，当前数组中那些索引值大于或等于n的元素将从中删除。
• 设置为大于其当前的长度，会在数组尾部创建一系列空的区域。
• 可以用Object.defineProperty()让数组的length属性变成只读的。

代码如下（示例）：

{
  let arr = [1, 2, 3];
  arr.length = 5;
  console.log(arr); //[ 1, 2, 3, <2 empty items> ]
}

稀疏数组

• 包含从0开始的不连续索引的数组。
• 可以用Array()构造函数或简单地指定数组的索引值大于当前的数组长度来创建稀疏数组。

代码如下（示例）：

{
  let a1 = [, , ,];
  let a2 = new Array(4);
  console.log(1 in a1, 1 in a2);//false false
  a1[10] = 100;
  a1[8] = undefined;
  for (let a in a1) {
    console.log(a, a1[a]); //8 undefined  10 100
  }
  console.log(a1); //[ <8 empty items>, undefined, <1 empty item>, 100 ]
}

2.4.数组元素的增加、删除、替换

增加：
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
删除：
pop() 删除数组的最后一个元素并返回删除的元素。
shift() 删除并返回数组的第一个元素。
替换：
array.splice(index,howmany,item1,.....,itemX) 这个方法一共有三个参数首先第一个参数是你需要操作开始元素索引，第二个参数是需要操作的长度，第三个参数是你需要替换的数组。（因此这个方法就可以完成增加，删除，替换的功能）

代码如下（示例）：

{
    let arr = [1, 2, 3];
    arr[arr.length] = 4;
    //push()	向数组的末尾添加一个或更多元素，并返回新的长度。
    arr.push(5);
    //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
    arr.unshift(0);
    console.log(arr); // [ 0, 1, 2, 3, 4, 5 ]

	//使用delete关键字并不能把真正的数组元素删除，只能把数组中元素的值清空
    delete arr[1];
    console.log(arr); //[ 0, <1 empty item>, 2, 3, 4, 5 ]

    //pop尾部删除一个
    arr.pop();
    //开头删除一个
    arr.shift();
    console.log(arr); //[ <1 empty item>, 2, 3, 4]

    //替换
    arr.splice(1, 2, ...[22, 33]);
    console.log(arr); //[ <1 empty item>, 22, 33, 4 ]
    //插入
    arr.splice(1, 0, ...[222, 333]);
    console.log(arr); //[ <1 empty item>, 222, 333, 22, 33, 4 ]
    //删除
    arr.splice(1, 2);
    console.log(arr); //[ <1 empty item>, 22, 33, 4 ]
}

2.5.数组的遍历

遍历的方法大体可分为六种
1.Object.keys() 把数组中的每一个元素的索引和该数组的所有属性名放入一个数组中。
2.Object.values() 把数组中的每一个元素的值和该数组的所有属性值放入一个数组中。
3.for...in... 对数组进行遍历操作遍历出来的是数组每一个元素的索引。（注意：此方法会忽略空位）
4.for...of... 对数组进行遍历操作遍历出来的是数组每一个元素的具体值。（注意：此方法不会忽略空位）
5.fo循环数组length 利用最原始的方法遍历数组的各个元素

代码如下（示例）：

{
    let arr = [1, 2, 3, 4, 5];
    console.log(Object.keys(arr)); //[ '0', '1', '2', '3', '4' ]

    arr.test = "hello";
    console.log(Object.keys(arr)); //[ '0', '1', '2', '3', '4', 'test' ]
    console.log(Object.values(arr)); //[ 1, 2, 3, 4, 5, 'hello' ]
    
    arr[8] = 9;
    // 会忽略空位
    for (let k in arr) {
        console.log(k, arr[k]);
    }
    //不会忽略空位，并且空位的值为undefined
    for (let d of arr) {
        console.log(d++);
    }
    arr[7] = undefined;
    for (let i = 0; i < arr.length; i++) {
        //空位则不包括
        if (i in arr) console.log(arr[i]);
    }
}

---

三、数组的ES6新增的方法

下面是数组的ES6新增的一些方法
使用方法可以查看菜鸟教程连接：Array全部方法。

方法	描述
forEach()	方法从头至尾遍历数组，为每个元素调用指定的函数。
map()	方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。
fliter()	方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的：该函数返回true或false。
every()和some()	方法是数组的逻辑判定：它们对数组元素应用指定的函数进行判定，返回true或false。
reduce()和reduceRight()	方法使用指定的函数将数组元素进行组合，生成单个值。
indexOf()和lastIndexOf()	搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1。

---

总结

本文主要讲述了ES6中的数组进阶方面如果又不好的地方希望大家多多提意见。