简介
介绍： Array 是 一组按顺序把数据存储在单个变量名下的复杂数据类型（对象）
使用场景：遍历数组、求最大值和最小值、存放数据
优点：管理方便，灵活
语法：let arr = [数据1，数据2，……] 或 let arr = new Array(数据1,数据2,……)
创建数组的两种方法：
利用字面量创建数组：
let uname = ['小明','小刚',9,8,5]
利用数组实例化new创建：
let uname = new Array['小明','小刚',9,8,5]
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
- 在数组中，数据的编号也叫==索引或下标==
- 数组可以存储任意类型的数据
注意：
- ==索引号从零开始==
- 数组的字面量是中括号
[]
获取数组中的值
介绍：通过下标取数据
语法：数组名[索引号]
let uname = ['小明','小刚',9,8,5]
console.log(uname[0]) /小明
console.log(uname[1]) /小刚
console.log(uname[3]) / 8
forEach 遍历数组
**介绍：**用于调用数组中的每个元素，并将元素传递给回调函数
语法：数组名.forEach(function(当前元素，索引号){})
**返回值：**无
注意：可以遍历伪数组
使用场景：遍历数组对象
const arr = ['red','green','blue']
arr.forEach(function(item,i){
console.log(item) //red green blue
console.log(i) // 0 1 2
})
map 迭代数组
**介绍：**用于遍历数组，并且处理数组数据
返回值：==return返回的是新数组==
语法：数组名.map(function(当前元素，索引号){})
注意：只能处理==真数组==
**使用场景1：**获取数组中数据
const arr = ['red','blue','green']
arr.map(function(item,i) { 形参的名字可以自定义，不是固定的
console.log(item) 依次打印 数组中的所有数据
console.log(i) 依次打印 数组中所有的索引号
})
**使用场景2：**处理数据
原理：可以挨个把数组里面的数据拿出来操作，然后再放进去
const arr = ['red','blue','green']
const newArr = arr.map(function(item,i) {
return item + '老师' 依次遍历，并且依次给每个数据 + '老师'
})
console.log(newArr) 输出为['red老师','blue老师','green老师']
filter 筛选数组
**介绍：**filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
语法：数组名.filter(function(当前元素，索引号){})
**返回值：**返回筛选后的新数组， 如果没有则返回空数组
注意：只能处理==真数组==
使用场景： 筛选数组符合条件的元素
const arr = [0, 1, 0, 5, 9, 20]
const newArr = arr.filter(function (item, i) {
return item >= 5 筛选大于等于5的数
})
console.log(newArr) // [5,9,20]
every 判断数组中所有值是否都符合条件
介绍：筛选数组中每一个元素，如果都符合返回true，否则false
语法：数组.every(function(当前元素))
**返回值：**布尔值
注意：只能处理==真数组==
**使用场景：**筛选大于等于5的数
const arr = [0, 1, 0, 5, 9, 20]
const newArr = arr.every(function (item) {
return item >= 5 筛选大于等于5的数
})
console.log(newArr) // false
for 筛选数组
筛选数组中大于等于10的元素
let old = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 声明新数组
let news = []
// 遍历数组
for (let i = 0; i < old.length; i++) {
// 找出大于等于10的数
if (old[i] >= 10) {
// 把大于等于10的数添加给新数组
news.push(old[i])
}
}
console.log(news)
some查找数组
**介绍：**测试数组中是不是至少有 1 个元素通过了被提供的函数测试
语法：数组名.some( function(item,i){})
**返回值：**布尔值
const arr = ['pink','green','red']
const bool = arr.some(function(item){
console.log(item) // pink green red
})
终止循环：
const arr = ['pink','green','red']
const bool = arr.some(function(item){
return item === 'pink' // 1.当查找到pink进行终止循环
// if(item==='pink') return true 2.都可以实现终止循环
})
console.log(bool) // true
获取数组的最后一个元素
.at(-1)
**介绍：**通过索引号得到最后一个数组元素
**返回值：**匹配给定索引的数组中的元素。如果找不到指定的索引，则返回undefined。
语法：.at(索引号)
参数： 索引号为负数，表示获取倒数第几个元素
// 获取最后一个元素的id
const arr = [
{ id: 1, brand: '宝马' },
{ id: 4, brand: '奔驰' },
]
console.log(arr.at(-1).id) // 4
length-1：
**介绍：**通过获取数组的长度 - 1，得到数组最后一个元素的索引号
const arr = [1,2,3,4]
console.log(arr[arr.length-1]) // 4
slice(-1)[0]
**介绍：**通过slice方法提取最后一个数组元素
返回值：返回提取后的新数组
语法：slice(从第几个开始提取,从第几个结束提取)
- 参数一：如果为-1，表示从倒数第一个开始提取
- 参数二：如果该参数为负数， 则它表示在原数组中从倒数第几个元素结束抽取。
// 获取最后一个元素的id
const arr = [
{ id: 1, brand: '宝马' },
{ id: 4, brand: '奔驰' },
]
console.log(arr.slice(-1)[0].id) // 4
find 查找数组
介绍：查找数组中符合条件的元素，并返回该数组中符合条件的第一个元素
**返回值：**如果有就返回该元素，没有就返回undefined
语法：数组.find(function(当前元素))
注意：只能处理==真数组==
**使用场景：**查找数据 第一个 元素的属性值为 '王五' 的元素
const arr = [{
name: '张三',
salary: 10000
}, {
name: '王五',
salary: 10000
},{
name: '王五',
salary: 990
},
]
选取数组中 第一个 元素的属性值为 '王五' 的元素
const news = arr.find(function (item) {
return item.name === '王五'
})
console.log(news) / {name: '王五', salary: 10000}
reduce累计器（求和）
**介绍：**返回函数处理的结果，并进行累加
语法：数组.reduce( function(累计值，当前元素，索引号，原数组) {}, 起始值)
理解：
- 累计值：加法器
- 当前元素：数组里的元素
- 起始值：从几开始进行计算
执行过程：
- 如果有起始值，那么==刚开始的累计值 = 起始值==
- 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
- ==每次遍历会把 当前元素 加到 累计值 里面==
- 也就是 累计值 会不停的接收 当前元素的值，并把接收的值加到一起
注意：
- ==他只有两个参数==，剩下的全是 回调函数 里的参数
- 累计器的第二个参数（起始值）可以省略
- ==回调函数里的前两个参数必须写==，后两个可以省略
**使用场景：**求和
const arr = [1,2,3]
数组.reduce(function(累计值，当前元素) {}, 起始值)
----------------------------------------------------
循环次数 取决于起始值，如果有起始值，那么循环次数 = 数组长度，如果没有就 循环次数 = 数组长度 - 1
const newArr = arr.reduce(function(prev,item){
console.log(prev) 输出为 0 1 3
return prev + item
},0)
console.log(newArr) // 6
箭头函数简写
const newArr = arr.reduce((prev,item)=> prev + item ,0) !!!注意如果求和的是数组对象，必须写 0
console.log(newArr) // 6
sort数组排序
**返回值：**排序后的新数组
语法： 数组名.sort((a,b) => a - b ) 或 数组名.sort(function(a,b) { return a - b })
- 从小到大
a - b - 从大到小
b - a
注意：只能处理==真数组==
**使用场景：**请将以下数组按从小到大的顺排列
let arr = [4, 2, 5, 1, 3]
// 1.升序排列写法
arr.sort(function (a, b) {
return a - b
})
console.log(arr) // [1, 2, 3, 4, 5]
// 降序排列写法
arr.sort((a, b) => b - a) 利用箭头函数简写，可以省略大括号和return
console.log(arr) // [5, 4, 3, 2, 1]
join 拼接数组元素
介绍：用于把数组中所有元素转换为一个字符串
const arr = ['red','blue','green']
console.log(arr.join()) 输出为 red,blue,green
console.log(arr.join('')) 输出为 redbluegreen
console.log(arr.join('-')) 输出为 red-blue-green
注意：拼接的话，小括号里必须加引号
from把伪数组转换为真数组
语法：Array.from(伪数组)静态方法
const lis = document.querySelectorAll('li')
const newLis = Array.from(lis)
console.log(newLis)
获取数组的长度
介绍：得到数组数据的个数
语法：数组名.length 或 数组名.push()或 数组名.unshift()
let uname = ['小明','小刚',9,8,5]
console.log(uname.length) / 5
console.log(uname.push()) / 5
新增数组
unshift() 数组==开头添加==元素
介绍：方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法：数组名.unshift(元素1，元素2……)
let arr = ['pink', 'hotpink']
console.log(arr.unshift('deeppink')) // 3
console.log(arr) // [ 'deeppink','pink', 'hotpink']
push()数组==末尾添加==元素
介绍：将一个或多个元素添加到数组末尾，并返回数组新长度
语法：数组名.push(元素1，元素2……)
let arr = ['pink', 'hotpink']
console.log(arr.push('deeppink')) // 3
console.log(arr) // ['pink', 'hotpink', 'deeppink']
只添加一个新值的方法
方法一：（利用数组的索引号添加新值）
<script>
let aar = []
arr[0] = 1 //把1添加到数组里面
console.log(arr[0]) //输出为1
</script>
方法二：（利用数组的长度在==末尾添加==新值）
<script>
let arr = ['pink']
arr[arr.length] = 5 //因为数组的长度值 和 新值的索引号数字一样，所以可以添加新值
console.log(arr);
</script>
删除数组
shift() ==删除开头==数组元素
介绍：从数组中删除第一个元素，并返回删除元素的值
语法：数组名. shift()
let arr = ['pink', 'hotpink']
console.log(arr.shift()) 返回删除的元素 pink
console.log(arr) // ['hotpink']
pop() ==删除末尾==数组元素
介绍：从数组中删除最后一个元素，并返回删除元素的值
语法：数组名.pop()
let arr = ['pink', 'hotpink']
console.log(arr.pop()) 返回删除的元素 hotpink
console.log(arr) // ['pink']
splice() ==删除或添加指定位置的元素==
注意：splice没有返回值
删除一个或多个指定元素：
语法：数组名. splice(从第几个索引号开始删，删除几个元素)
let arr = ['pink', 'hotpink']
arr.splice(1,1) 第二个参数如果省略，则默认从指定的起始位置删除到最后
console.log(arr) // ['pink']
添加一个或多个指定元素：
语法：数组名. splice(从第几个索引号开始添加，0，需要添加的元素)
- 中间的参数写0就可以
let arr = ['pink', 'hotpink']
arr.splice(2,0,'blue') 第二个参数不能省略
console.log(arr) // ['pink', 'hotpink','blue']
修改数组数据
单个修改
重新赋值修改法：
<script>
let arr = ['pink','red','blue']
arr[0] = 47
console.log(arr[0]) //输出为47
</script>
批量修改
拼接字符串修改法：
给每个值后面加上 “老师” 两个字
let arr = ['pink','red','blue']
// 遍历数组
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '老师' /使用拼接字符串方法
}
console.log(arr) /pink老师 red老师 blue老师
注意：
arr[0] === pink他是一个整体，所以**！！！不要 arr[ i + '老师'] 这样写！！！**
小结：
**1.问题：**使用数组有什么好处？
**答：**数组可以保存多个数据
**2.问题：**用字母量创建数组和用new创建数组的区别
字面量：语法更简单，直接，优雅，更高效
new：使用构造函数创建的数组，在JS底层其实已经为我们创建好了，所有我们本质上不写也是可以的
