红宝书

2023-01-12 13:39:54 浏览数 (2)

数组Array的槽位中可以是任意类型的数据,所以可以如下:

代码语言:javascript复制
let array = [12,'yes',{'name':'lisi'}]

可以存在数值、字符串、对象等。

数组的大小也是动态的,随着填入值的增多而增长。

创建数组

有两种创建方式

Array构造函数

代码语言:javascript复制
// 就像新创建一个对象
let array = new Array() 
// 传入数值参数,就是创建指定长度的数组 长度为20的空数组  [empty × 20]
let color = new Array(20)  
// 给构造函数赋值
let array = new Array("red","green","blue")
// 但是想要赋值数值型就出问题了 会被认为是创建指定长度的数组 
let color = new Array(20)
// 但是如果传入两个以上的参数  就可以
let color = new Array(20,40)    

字面量

数组字面量的创建方式更常用

代码语言:javascript复制
let array = [1,3,4]   // [1,2,3]
let dot = [1,2,]     // [1,2]

在使用数组字面量创建数组时并不会调用Array构造函数。

from()

Es6新增 我最常用到from()是将Set(唯一值处理)转为Array的时候。

代码语言:javascript复制
// 1.将字符串拆分成单字符数组
Array.from("Robot")
// 2.Set() 唯一值  
let set = new Set([1,3,4,4,3])
Array.from(set)    // [1, 3, 4]

// 3.`Map`是一组键值对的结构,具有极快的查找速度
let mm = new Map().set(1,2)   // Map(1) {1 => 2}
mm.get(1)                     // 2 通过键找到值
// 转为二位数组
Array.from(mm)                // [[1,2]]   

// 4.浅复制
const a1 = [1,2,3,4]
const a2 = Array.from(a1)
a1 === a2     //false

Array.from()还可以接收第二个可选映射函数参数,用于增强新数组的值

代码语言:javascript复制
const a1 = [1,2,3]
// 将数组每个值变为平方
const a2 = Array.from(a1, x=>x**2)

of

用于将一组参数转为数组

代码语言:javascript复制
Array.of(1,2,3,4)  // [1,2,3,4]

数组空位

代码语言:javascript复制
let a =[,,,,,]
a.length      // 5
cosole.log(a)  //  [empty × 5]  但其实空位是undefined

const bb = [1,,,,5]
for(const p of bb){console.log(p === undefined)}  // false true true true false

map()对于空位

代码语言:javascript复制
bb.map(()=>6)  //  [6, empty × 3, 6]

join() 填充空位

代码语言:javascript复制
bb.join('-')  '1----5'

数组索引

通过下标访问 下标从0开始到length-1结束

代码语言:javascript复制
let colors =['red','green','blue']
colors[0]    // 'red'
// 下标越界会 打印会undefined
colors[3]    // undefined

长度属性

不止是可读的

代码语言:javascript复制
colors.length      // 3
colors.length = 4  // ['red', 'green', 'blue', empty]
colors[3]          // undefined

数组最多可以包含 4 294 967 295 个元素(42亿薇娅很接近了),这对于大多数编程任务应该足够了。

检测数组

instanceof

因为typeof 对于数组 和 对象来说都是 'object'类型。因此有了instanceof的出现。

instanceof的使用局限在只有一个全局执行上下文。如果网页里有多个框架,则可能涉及两个不同的全局执行上下文。

代码语言:javascript复制
let a = [1,2]
a instanceof Array   // true

isArray()

其没有执行上下文的限制,推荐使用

代码语言:javascript复制
let a = [1,3,4]
Array.isArray(a)   // true

迭代器方法

Es6中,Array的原型上暴露了 keys()、values()和entries()。

  • keys() 返回数组索引 的迭代器
  • values() 返回数组元素 的迭代器
  • entries() 返回索引/值对 的迭代器

这些方法都返回迭代器,迭代器我们并看不到具体的内容。所以,需要通过Array.from()将迭代器转为数组实例。

代码语言:javascript复制
const aa = ["foo", "bar", "baz", "qux"];
const aKeys = Array.from(aa.keys());    // [0, 1, 2, 3]
const aValues = Array.from(aa.values());  // ['foo', 'bar', 'baz', 'qux']
const aEntries = Array.from(aa.entries());  // 结果见下图

是一个二维数组

下面这个例子是使用解构才分键/值对。但是个人认为.keys()和.values()就已经分别是拆分好的键 和 值了。

代码语言:javascript复制
for(const [idx,element] of aa.entries()){
    console.log(idx);console.log(element)
}

复制和填充方法

复制方法

copyWithin() 个人认为只需要了解

3是索引对应的也就是5所在位置,它会把5之前的元素复制插入到5的前面,也就是 1,2,3。其他元素会接着5向后添加,但是数组的长度是9,当存满了9个元素之后,其他的也就被踢出数组中了。

并且,这个方法会改变原数组

代码语言:javascript复制
let a = [1,2,3,5,4,6,8,9,7]
a.copyWithin(3)    //   [1, 2, 3, 1, 2, 3, 5, 4, 6] 
a                  //   [1, 2, 3, 1, 2, 3, 5, 4, 6] 

两个参数时

从a中复制 索引 5 开始的内容,插入到索引0开始的位置。我们这里复制的是6,7,8,9一共四个元素,所以被插入索引从0开始到索引是3的位置结束(与其说是插入不如说是替换)。

代码语言:javascript复制
let a = [1,2,3,4,'*',6,7,8,9]
a.copyWithin(0,5)    // [6, 7, 8, 9, '*', 6, 7, 8, 9]

三个参数时

第三个参数就是限制了复制的结束位置

(插入的位置,复制开始位置,复制结束位置不包含这个位置的元素)

代码语言:javascript复制
let a = [1,2,3,4,'*',6,7,8,9]
a.copyWithin(4,0,3)   // (9) [1, 2, 3, 4, 1, 2, 3, 8, 9]

填充方法

fill() 首先,需要数组开辟空间。才可以进行填充

代码语言:javascript复制
let array=[]
array.fill(5)   // []

let array1 = new Array(5)
array1.fill(5)   //  [5, 5, 5, 5, 5]

两个参数 用6填充索引大于3的元素

代码语言:javascript复制
let array= [5, 5, 5, 5, 5]
array.fill(6,3)   // [5, 5, 5, 6, 6]

三个参数 用7填充 索引大于1小于3的元素

代码语言:javascript复制
let array= [5, 5, 5, 5, 5]
array.fill(7,1,3)   //  [5, 7, 7, 5, 5]

0 人点赞