1. 数组类型详解

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：

数组的元素可以通过索引来访问。请注意，索引的起始值为 0 ：

1.1 数组长度

1.2 修改数组元素的值

1.2.1 修改所有元素

        let arr = [1, 2, 3]arr = [4, 5, 6] //  修改所有元素的值 直接赋值一个数组

1.2.2 修改单个元素的值(通过索引赋值)

大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的 Array却不会有任何错误。在编写代码时，不建议直接修改 Array 的大小，访问索引时要确保索引不会越界。

1.3 常用的数组方法

1.3.1 indexOf() & lastIndexOf

1.3.2 slice()

1.3.3 pop() & push()

1.3.4 unshift() & shift()

1.3.5 sort()

1.3.6 reverse()

注意这个方法会改变原数组

1.3.7 splice() 重点

分析splice（）函数源码：

splice（）函数可以直接替换部分数组

          //  把排好序的数组替换掉原来的数据this.listOfSelected.splice(index, count, ...tempList)

1.3.8 concat（）

1.3.9 join（）

1.4 ES6新增数组方法

find()

说明: 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

    const arr = [1, 2, '3', '4']console.log(arr.find(item => {return typeof item === "string" // 3}))

findIndex()

说明: 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

    const arr = [1, 2, '3', '4']console.log(arr.findIndex(item => {return typeof item === "string" // 2}))

fill()

说明: 用新元素替换掉数组内的元素，可以指定替换下标范围。

参数说明:

第一个参数: 需要填充的值
第二个参数: 填充的起始坐标，包括
第三个参数: 填充的终点坐标，不包括 =》[ )

    const arr = [1, 2, '3', '4'];arr.fill('number', 0, 2);alert(arr); // ['number','number','3', '4']

copyWithin()

说明：选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

参数说明:

target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

from()

说明：将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。

    let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3};console.log(Array.from(arrayLike));// ['a','b','c']let str = 'abc';console.log(Array.from(str)) // ['a','b','c']

of()

说明：用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

entries()

说明：返回迭代器：返回键值对

    // 数组let arr = ['a', 'b', 'c'];for (let value of arr.entries()) {console.log(value);//[0,'a'] [1,'b'] [2,'c']}// Setlet set = new Set(['a', 'b', 'c']);for (let value of set.entries()) {console.log(value);//['a','a'] ['b','b'] ['c','c']}// Maplet map = new Map();map.set('aKey', 'a');map.set('bKey', 'b');for (let value of map.entries()) {console.log(value);//['aKey','a'] ['bKey','b']}

values()

说明：返回迭代器：返回键值对的value

    // 数组let arr = ['a', 'b', 'c'];for (let value of arr.values()) {console.log(value);// 'a' 'b'  'c'}// Setlet set = new Set(['a', 'b', 'c']);for (let value of set.values()) {console.log(value);// 'a' 'b' 'c'}// Maplet map = new Map();map.set('aKey', 'a');map.set('bKey', 'b');for (let value of map.values()) {console.log(value);// 'a' 'b'}

keys()

说明：返回迭代器：返回键值对的key

    // 数组let arr = ['a', 'b', 'c'];for (let value of arr.keys()) {console.log(value);// 0 1 2}// Setlet set = new Set(['a', 'b', 'c']);for (let value of set.keys()) {console.log(value);// 'a' 'b' 'c'}// Maplet map = new Map();map.set('aKey', 'a');map.set('bKey', 'b');for (let value of map.keys()) {console.log(value);// 'aKey' 'bKey'}

includes()

判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

    // 数组let arr = ['a', 'b', 'c'];console.log(arr.includes('a')); // trueconsole.log(arr.includes('d')); // false

1.5 多维数组（和Java类似）

JavaScript--数组类型详解相关推荐

JavaScript数组类型详解
大家好,今天我们来分享一下JavaScript数组类型 Array可以包含任何的数据类型打开浏览器: 创建数组: var arr =[1,2,3,4,5,6,7,8,9] undefined 截图: ...
（05）System Verilog 数组类型详解
(05)System Verilog 数组类型详解 1.1 目录 1)目录 2)FPGA简介 3)System Verilog简介 4)System Verilog 数组类型详解 5)结语 1.2 F ...
史上最全JavaScript数组对象详解（二）
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...
js split参数为无效字符_互联网前端开发技术JavaScript字符串类型详解
String类型 String类型包含了三个属性和大量的可用内置方法. String对象属性 String也包含对象的通用方法,比如valueOf().toLocaleString()和toStrin ...
【一篇搞定JS数组】JavaScript数组使用详解
文章目录 JavaScript 数组 Array 1)概述/前言 2)创建数组 (一)Array()构造函数 (二)数组字面量表示法 (三)扩展操作符 (四)工厂方法--Array.of()和Arra ...
【JavaScript—数组】详解js数组一篇文章吃透js-数组
目录前言数组 1.遍历数组 1.遍历 2.数组长度arr. length动态监测数组元素的个数 3.求数组的和以及平均数 4.求数组中的最大值 5.最小值同理 2.如何将数组转化为字符串 3.数组 ...
javaScript函数模块详解
javaScript函数模块详解函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样可以将函数名想象成指针,函数想象成对象注意, ...
视频教程-javascript/jquery全过程详解-Java
javascript/jquery全过程详解资深大数据.java讲师,十年开发经验,曾经任职于北大青鸟.讯腾软件等多家知名教育机构,精通javaweb, 前端技术,J2EE技术体系,熟练使用Spri ...
并发编程-04线程安全性之原子性Atomic包的4种类型详解
文章目录线程安全性文章索引脑图概述原子更新基本类型 Demo AtomicBoolean 场景举例原子更新数组 Demo 原子更新引用类型 Demo 原子更新字段类型使用注意事项: Dem ...

JavaScript--数组类型详解