ES6知识点总结（八）

ES6知识点总结（八）

数组进阶

基本概念

数组是值的有序集合

• 每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引
• 数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型
• 数组是动态的
  创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间
• 数组元素的索引不一定要连续的，它们之间可以有空缺

length属性：代表数组中元素的个数

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

let arr = [1, 2, 3];
arr.length = 5;
console.log(arr);   //[1, 2, 3, empty × 2]

Object.defineProperty(arr, "length", {
    writable: false,
    configurable: false,
  });
arr.length = 3;
console.log(arr);  //[1, 2, 3, empty × 2]

JavaScript数组是JavaScript对象的特殊形式
数组继承自Array.prototype中的属性

创建数组

1. 数组字面量

let empty = [];
let primes = [2, 3, 5, 7, 11];
let misc = [1.1, true, "a"];
let b = [
  [1, { x: 1, y: 2 }],
  [2, { x: 3, x: 4 }],
];
let count = [1, , 3];

2. 构造函数Array( )

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

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

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.14, 3, "world", empty × 6, "hi", ten: "hoo", -2: -2, 1.11: 1.11]

稀疏数组

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

let a1 = [, , ,];
let a2 = new Array(4);
a1[10] = 100;
a1[8] = undefined;
 for (let a in a1) {
    console.log(a, a1[a]);
  }
//8 undefined
//10 100
for (let b of a1) {
    console.log(b);
  }
// 先输出10次undefined
//100

数组遍历
Object.keys()，返回一个表示给定对象的所有可枚举属性的字符串数组。

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

Object.values(),返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

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"]

for…in 循环和·for…of 循环

arr[8] = 9;
for (let k in arr) {
  console.log(k, arr[k]);
} 
//0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 8 9
// test hello

for (let d of arr) {
  console.log(d);
}
// 1
// 2
// 3
// 4
// 5
// 3 undefined  (3个undefined)
// 9

数组方法

用于数组元素的添加和删除

push( )和pop( )

push()方法在数组的尾部添加一个或多个元素，并返回数组新的长度
pop()方法删除数组的最后一个元素，减小数组长度并返回它删除的值
注意：两个方法都修改并替换原始数组

unshift()和shift()

unshift()，在数组的头部添加一个或多个元素，并将已存在的元素移动到更高索引的位置来获得足够的空间，最后返回数组新的长度
shift()，删除数组的第一个元素并将其返回，然后把所有随后的元素下移一个位置来填补数组头部的空缺

  let arr = [1, 2, 3];
  arr[arr.length] = 4;
  arr.push(5);
  arr.unshift(0);
  console.log(arr);   //[0, 1, 2, 3, 4, 5]

  arr.pop();
  arr.shift();
  console.log(arr);  //[1, 2, 3, 4]

delete
使用delete操作符可以删除数组总某项元素
被删除的元素会从该数组中删除，但是数组的length并不会改变

  delete arr[1];
  console.log(arr);  //[1, empty, 3, 4]

splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注意：该方法会改变原始数组。

  let arr = [1, 2, 3];
  //替换
  arr.splice(1, 2, ...[22, 33]);
  console.log(arr);   //[1, 22, 33]  从索引为1的元素开始替换两个元素
  //插入
  arr.splice(1, 0, ...[222, 333]);
  console.log(arr);   //[1, 222, 333, 22, 33]
  //删除
  arr.splice(1, 2);
  console.log(arr);  //[1, 22, 33]  

join( )
将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。
可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素

let arr = [1, 2, 3, 4, 5];
console.log(arr.join("-"), arr.join());
//1-2-3-4-5    1,2,3,4,5

reverse( )
将数组中的元素颠倒顺序，返回逆序的数组。

let r_arr = arr.reverse();
  console.log(r_arr, arr);
// [5, 4, 3, 2, 1]  [5, 4, 3, 2, 1]

sort( )
将数组中的元素排序并返回排序后的数组。
当不带参数调用sort()时，数组元素以字母表顺序排序(如有必要将临时转化为字符串进行比较)。

let data = [22, 4, 111, 30];
  let sdata = data.sort();
  console.log(data, sdata);
//[111, 22, 30, 4]  [111, 22, 30, 4]

传递一个比较函数。该函数决定了它的两个参数在排好序的数组中的先后顺序。

 sdata = data.sort(function (a, b) {
    return a - b;
  });
  console.log(sdata);
//[4, 22, 30, 111]

concat( )
创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

  let a1 = arr.concat(10, 20);
  let a2 = arr.concat([10, 20]);
  let a3 = arr.concat([10, 20], [30, 40]);
  let a4 = arr.concat([10, [20, 30]]);
  console.log(a1); //[5, 4, 3, 2, 1, 10, 20]
  console.log(a2); //[5, 4, 3, 2, 1, 10, 20]
  console.log(a3);// [5, 4, 3, 2, 1, 10, 20, 30, 40]
  console.log(a4); //[5, 4, 3, 2, 1, 10, Array(2)]
  console.log([...arr, 10, 20]); //[5, 4, 3, 2, 1, 10, 20]

ECMAScript 5定义了9个数组方法来遍历、映射、过滤、检测、简化和搜索数组。

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

ES6新增了7个方法用于对ES5的补充。

• copyWith( )，会在当前数组内部将指定位置的元素复制到其他位置（会覆盖原有元素），返回当前数组

let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, 2, 4), arr);
//[3, 4, 3, 4, 5]  [3, 4, 3, 4, 5]

• find( )和findIndex( )，用户找出第一个符合条件的数组元素（或其索引）

let a = arr.find(function (value, index, arr) {
    return value > 2 && index > 3;
  });
  console.log(a);  //5

• fill(value, start, end )，使用给定值填充一个数组。
  value 必需。填充的值。
  start 可选。开始填充位置。
  end 可选。停止填充位置 (默认为 array.length)

let arr = [1, 2, 3, 4, 5];
arr.fill(100, 1, 3);
console.log(arr);  //[1, 100, 100, 4, 5]

• entries( )、keys( )和values( )，用于遍历数组。
• includes( )，判断数组中是否包含给定的值，与字符串的includes方法类似。

构造函数方法

Array.from( )，用于将两类对象转为真正的数组。

 <body>
    <ul id="list-nums">
      <li>100</li>
      <li>200</li>
      <li>300</li>
    </ul>
    <script>
      let lis = document.querySelectorAll("#list-nums li");
      console.log(lis);   //NodeList(3)
      let items = Array.from(lis, function (item) {
        return item.textContent;
      });
      console.log(items);  //Array(3)0: "100"1: "200"2: "300"length: 3__proto__: Array(0)

    </script>
  </body>

Array.of( )，将一组值转换为数组。

let arr = [1, 2, 3, 4, 5];
let nums = Array.of(...arr, 7, 8, 9);
 console.log(nums);  //[1, 2, 3, 4, 5, 7, 8, 9]