JS 数组详解【编程笔记】

• 1. 什么是数组

• 2. JS 数组定义

• 3. JS 数组的 length

• 4. JS 数组的遍历

• 5. JS 数组元素操作

1. 什么是数组

数组是一种将多个数据存储在单个变量名下的优雅方式

数组是一组数据的集合，其中每个数据被称作数组的元素，在数组中可以存放任意数据类型的数据

特别注意: JS 中并没有数组这个数据类型，JS 中的数组也是对象，通过 typeof 关键字可证明这个结论

2. JS 数组定义

创建数组的三种方式

// 隐式创建，又称为字面量创建var arr = ['html', 'css', 'js']// 直接实例化var arr = new Array()var arr = new Array('react', 'vue')// 指定数组长度var arr = new Array(3)

3. JS 数组的 length

数组对象有一个 length 属性，即数组中元素的个数，这个属性是可以修改的。若将 length 属性修改为小于当前数组元素个数，则造成数据丢失；若将 length 属性设置为 0，即可清空数组

const arr = ['html', 'css', 'js', 'vue']arr.length = 2console.log(arr) //['html', 'css']arr.length = 0console.log(arr) //[]

字符串对象也有 length 属性，但是它不能被修改，严格模式下会直接报错，非严格模式下不报错，但也不会修改成功

// 开启严格模式// 'use strict'let str = 'liang'// 修改字符串的 length 属性无效// 在严格模式下会抛出异常,后面代码不再执行str.length = 3console.log(str, str.length) // liang 5

4. JS 数组的遍历

普通遍历

const arr = ['html', 'css', 'js', 'vue']// for 循环语句for (let index = 0; index < arr.length; index++) {    console.log(index, arr[index]);}// 数组方法 forEacharr.forEach(item => {    console.log(item)})// for...of 循环语句for (const item of arr) {    console.log(item);}

数组方法 array.map() 循环处理数组中的每个元素，返回一个处理后的新数组，它不会修改原数组

const arr = [70, 62, 91, 57]const res = arr.map(item => item += 3)console.log(res);//[73, 65, 94, 60]

数组方法 array.reduce() 可以用于统计多维数组中某个字段的和

const arr = [    { name: '语文', score: 80 },    { name: '数学', score: 90 },    { name: '英语', score: 70 }]// res = 0 + 80 + 90 + 70 = 240const res = arr.reduce((total, item) => total += item.score, 0)

数组方法 array.filter() 用于过滤数组

const arr = [    { name: '语文', score: 80 },    { name: '数学', score: 90 },    { name: '英语', score: 70 },    { name: '物理', score: 60 },]// 只留下满足 score >= 80 的元素,不会修改原数组const res = arr.filter(item => item.score >= 80)

数组方法 array.every() 用于检测数组所有元素是否都满足指定条件

const arr = [    { name: '语文', score: 80 },    { name: '数学', score: 90 },    { name: '英语', score: 75 },]// 所有 score 都大于 70 才返回true// 需要特别注意的是当 arr 为空数组时也返回 trueconst bool = arr.every(item => item.score > 70)

数组方法 array.some() 用于检测数组中是否有元素满足指定条件

const arr = [    { name: '语文', score: 80 },    { name: '数学', score: 90 },    { name: '英语', score: 75 },]// 存在 score 大于 75 时, 停止遍历并返回 true// 当 arr 为空数组时, 返回 falseconst bool = arr.some(item => item.score > 75)

数组方法 array.find() 用于获取数组中满足指定条件的第一个元素的值

数组方法 array.findIndex() 用于获取数组中满足指定条件的第一个元素的值的索引

const arr = [    { name: '语文', score: 75 },    { name: '数学', score: 82 },    { name: '英语', score: 60 }]const res = arr.find(item => item.score > 80) // { name: '数学', score: 75 }const index = arr.findIndex(item => item.score > 80) // 1

5. JS 数组元素操作

数组方法在项目中的使用频率非常高，列举出最常用的一些方法

let arr = ['html']// 往数组尾部追加元素arr.push('css')// 往数组头部追加元素arr.unshift('vue')