[TOC] #### 1. 什么是数组 --- 数组是一种将多个数据存储在单个变量名下的优雅方式 数组是一组数据的集合，其中每个数据被称作数组的元素，在数组中可以存放任意数据类型的数据 特别注意: JS 中并没有数组这个数据类型，JS 中的数组也是对象，通过 typeof 关键字可证明这个结论 #### 2. JS 数组定义 --- 创建数组的三种方式 ```javascript // 隐式创建，又称为字面量创建 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，即可清空数组 ```javascript const arr = ['html', 'css', 'js', 'vue'] arr.length = 2 console.log(arr) //['html', 'css'] arr.length = 0 console.log(arr) //[] ``` 字符串对象也有 length 属性，但是它不能被修改，严格模式下会直接报错，非严格模式下不报错，但也不会修改成功 ```javascript // 开启严格模式 // 'use strict' let str = 'liang' // 修改字符串的 length 属性无效 // 在严格模式下会抛出异常,后面代码不再执行 str.length = 3 console.log(str, str.length) // liang 5 ``` #### 4. JS 数组遍历 --- ##### 普通遍历 ```javascript const arr = ['html', 'css', 'js', 'vue'] // for 循环语句 for (let index = 0; index < arr.length; index++) { console.log(index, arr[index]); } // 数组方法 forEach arr.forEach(item => { console.log(item) }) // for...of 循环语句 for (const item of arr) { console.log(item); } ``` ##### array.map() 适用于需要 **对数组进行重新组装，生成新数组** 的场景 循环处理数组中的每个元素，返回一个处理后的新数组，它不会修改原数组 ```javascript // 所有数组元素加 3 再返回 const arr = [70, 62, 91, 57] const res = arr.map(item => item += 3) console.log(res) // [73, 65, 94, 60] // 提取数组对象中的 id，并且组装为一个新数组返回 const user = [ { id: 1, name: 'html' }, { id: 2, name: 'vue' }, { id: 3, name: 'react' }, ] const ids = user.map(item => item.id) console.log(ids) // [1, 2, 3] ``` ##### array.reduce() 数组方法 `array.reduce()` 可以用于统计多维数组中某个字段的和 ```javascript const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 70 } ] // res = 0 + 80 + 90 + 70 = 240 const res = arr.reduce((total, item) => total += item.score, 0) ``` ##### array.filter() 数组方法 `array.filter()` 用于过滤数组 ```javascript 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() 数组方法 `array.every()` 用于检测数组所有元素是否都满足指定条件 ```javascript const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 75 }, ] // 所有 score 都大于 70 才返回true // 需要特别注意的是当 arr 为空数组时也返回 true const bool = arr.every(item => item.score > 70) ``` ##### array.some() 数组方法 `array.some()` 用于检测数组中是否有元素满足指定条件 ```javascript const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 75 }, ] // 存在 score 大于 75 时, 停止遍历并返回 true // 当 arr 为空数组时, 返回 false const bool = arr.some(item => item.score > 75) ``` ##### array.find() 数组方法 `array.find()` 用于获取数组中满足指定条件的第一个元素的值 数组方法 `array.findIndex()` 用于获取数组中满足指定条件的第一个元素的值的索引 ```javascript 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 数组元素操作 --- 数组方法在项目中的使用频率非常高，列举出最常用的一些方法 ```javascript let arr = ['html'] // 往数组尾部追加元素 arr.push('css') // 往数组头部追加元素 arr.unshift('vue') ```