前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >红宝书 📒 6.2 集合应用类型-array

红宝书 📒 6.2 集合应用类型-array

作者头像
用户4793865
发布2023-01-12 13:39:54
2640
发布2023-01-12 13:39:54
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym

数组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()将迭代器转为数组实例。

image.png
image.png
代码语言: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());  // 结果见下图

是一个二维数组

image.png
image.png

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

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

复制和填充方法

复制方法

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]
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-01-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建数组
    • Array构造函数
      • 字面量
        • from()
          • of
          • 数组空位
          • 数组索引
            • 长度属性
            • 检测数组
              • instanceof
                • isArray()
                • 迭代器方法
                • 复制和填充方法
                  • 复制方法
                  • 填充方法
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档