JS数组基础知识复盘

创建数组

1.使用Array构造函数创建

javascript

复制代码

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)表示法

ini

复制代码

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属性和可索引元素的结构

csharp

复制代码

// 字符串会被拆分为单字符数组 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值在箭头函数中不适用。

javascript

复制代码

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对象转换为数组的写法:

javascript

复制代码

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

数组空位

vbscript

复制代码

// 使用逗号创建空位(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 值代替。

数组索引

less

复制代码

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

数组检测 Array.isArray()

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

javascript

复制代码

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

迭代器方法

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

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

css

复制代码

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的解构可以非常容易地在循环中拆分键/值对

arduino

复制代码

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输出的是数组中每一项的值。

  • javascript

    复制代码

    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

  • arduino

    复制代码

    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.数组对象

  • kotlin

    复制代码

    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 遍历出来的是数组的索引、对象的属性、以及原型链上的属性

原文链接：https://juejin.cn/post/7270854564152410166