JS数组基础知识复盘创建数组 1.使用Array构造函数创建 2.使用数组字面量(array literal)表示法 3

创建数组

1.使用`Array构造函数`创建

let names = new Array(); // []
let names = new Array(20); // names.length = 20
let names = new Array("Jack","Luca","Hades");

new Array(3);// 创建一个包含3个元素的数组
new Array("Greg"); // 创建一个只包含一个元素,即字符串"Greg"的数组

// new 也可以省略
let names = Array("Greg")

2.使用数组字面量(array literal)表示法

let names =["Jack","Luca","Hades"]
let names = []
let names = [1,2,] // names.length = 2

3. Array构造函数中有两个ES6新增的用于创建数组的静态方法: from()和of()

3.1 `Array.from()` 用于将类数组结构转换为数组实例

三个参数 1.必传类数组对象 2.可选增强方法 3.可选指定this

Array.from的第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个length属性和可索引元素的结构

// 字符串会被拆分为单字符数组
Array.from("Hades"); // ["H","a","d","e","s"]

// 可以使用 from() 将集合和映射转换为一个新数组
const m = new Map().set(1,2).set(3,4)
const s = new Set().add(1).add(2).add(3).add(4)
Array.from(m); // [[1,2],[3,4]]
Array.from(s); // [1,2,3,4]

// 对现有数组执行浅拷贝
const a1 = [1,2,3,4]
const a2 = Array.from(a1)
a1 === a2 // false

// 使用迭代器
const iter = {
   *[Symbol.iterator](){
     yield 1;
     yield 2;
     yield 3;
     yield 4;
   }
}
Array.from(iter); // [1,2,3,4]

// arguments 对象也可以被转换为数组
function getArgsArray(){
    return Array.from(arguments);
}
getArgArray(1,2,3,4); // [1,2,3,4]

// from() 也能转换带有必要属性的自定义对象
const arrayLikeObject = {
    0:1,
    1:2,
    2:3,
    3:4,
    length: 4
}
Array.from(arrayLikeObject); // [1,2,3,4]

// 创建20个空值的数组
Array.from({length:20})

Array.from()还可以接收第二个可选的映射参数。这个函数可以直接增强新数组的值,而无需像调用 Array.from().map()那样先创建一个中间数组。

还可以接收第三个可选参数,用于指定映射函数中this的值。但这个重写的this值在箭头函数中不适用。

const a1 = [1,2,3,4];
const a2 = Array.from(a1, x=>x**2); // [1,4,9,16]
const a3 = Array.from(
    a1, 
    function(x){return x**this.exponent},
    {exponent:2}
); // [1,4,9,16]

3.2 `Array.of()` 用于将一组参数转换为数组实例

这个方法用于替代在 ES6 之前常用的 Array.prototype.slice.call(arguments), 一种异常笨拙将arguments对象转换为数组的写法:

Array.of(1,2,3,4) // [1,2,3,4]
Array.of(undefined) // [undefined]

数组空位

// 使用逗号创建空位(hole)
const options = [,,,,,] // options.length = 5
const options = [1,,,5] 
for (const options of options){
 console.log(option === undefined);
}
// false, true, true,true,false

由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实需要

空位，则可以显式地用 undefined 值代替。

数组索引

// 从 0 开始
let arr = [1,2,3,4]
arr[length-1];// 索引最大值
// 向后新增一个值
arr[length] = 5

数组检测 Array.isArray()

判断一个对象是不是数组?

if (value instanceof Array){} // 只有一个全局执行上下文的情况下,多个上下文可能Array构造函数版本不同

// 推荐做法
if (Array.isArray(value)){}

迭代器方法

在ES6中, Array的原型上暴露了 3个用于检测数组内容的方法

keys() 返回数组索引的迭代器
values() 返回数组元素的迭代器
entries() 返回 [索引, 值]的迭代器, (键值对,数组形式)

const arr = ['foo', 'bar', 'baz', 'qux']
// 因为这些方法都返回迭代器, 所以可以将他们的内容通过Array.from()直接转为数组实例
const arrKeys = Array.from(arr.keys()); // [0,1,2,3]
const arrValues = Array.from(arr.values()); // ['foo', 'bar', 'baz', 'qux']
const arrEntries = Array.from(arr.entries()); //[[0,'foo'],[1,'bar'],[2,'baz'],[3,'qux']]

使用 ES5的解构可以非常容易地在循环中拆分键/值对

const a = ['foo','bar','bas','qux']

for (const [idx, element] of a.entries()){
 console.log("索引:",idx)
 console.log("元素:", element)
}
// 索引: 0
// 元素: foo
// 索引: 1
// 元素: bar
// 索引: 2
// 元素: bas
// 索引: 3
// 元素: qux

for ...of 和 for ... In 的区别

共同点

For in 和 for of 都可以遍历数组

不同点

1.输出: for...in输出的是数组的index下标, for...of输出的是数组中每一项的值。

const arr = [1,2,3,4]
for (const key in arr){
  console.log(key) // 输出 0,1,2,3
}
for (const key of arr) {
  console.log(key) // 1,2,3,4
}

// for of 如何既打印key又打印值呢?
for (let [k,v] of arr.entries()){console.log(`${k}---${v}`)}
// 0---1
// 1---2
// 2---3
// 3---4

2.遍历对象

for...in 可以遍历对象
for...of 不能遍历对象, 只能遍历带有 iterator的接口, 例如Set,Map,String,Array

const obj = {name:"Hades", age: 20}

for (const key in obj) {
 console.log(key) // 输出 name, age
 console.log(obj[key]) // 输出 Hades , 20
}

for (const key of obj) {
  console.log(key); // 报错: Uncaught TypeError: obj is not iterable
}

3.数组对象

const list = [{name:"Hades"},{age: 20}]

for (const val of list) {
 console.log(val); // {name:"Hades"}, {age:20}
 for (const key in val) {
     console.log(val[key]); //输出 "Hades", 20
 }
}

总结

for...in 适合遍历对象

for...of 适合遍历数组(具有迭代器的)

for...in 遍历出来的是数组的索引、对象的属性、以及原型链上的属性

JS数组基础知识复盘