一.Array对象基本介绍
Array 对象 用于在单个的变量中存储多个值，Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。
接下来分别介绍数组中常用的几种对象和方法
二.数组map方法 *****(重点)
特点:
(1)可以循环遍历数组中的每一项。
(2)每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。
(3)匿名函数中的this指向window。
(4)只能遍历数组。
(5)map()会分配内存空间存储新数组并返回
(6)map遍历后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组map方法作用: 映射数组
通俗一点：按照某种映射关系, 把数组的每一个元素给修改了
举例：全场8折: 数组的每一个元素 * 0.8
2. map方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return 新数组的元素
* 如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
* 返回映射之后的新数组
*/
/* let arr = [ 88,90,100,20,50 ]
//完整写法
let res = arr.map( (item,index) => {
return item*0.8
} )
//箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略
大括号(必须省略return)
let res = arr.map( item=>item*0.8 )
console.log( res ) */
/*
1.map作用与场景: 映射数组(将数组每一个元素处理之后, 得到一个新数组)
举例子: 商品打8折(数组中每一个元素都要乘以0.8)
经典场景: 数据驱动渲染dom树(将数组直接渲染到页面)
2.语法特点:
2.1循环执行次数 == 数组长度
2.2回调函数内部return作用
(1)return 新元素值
(2)没有return, 新元素都是undefined
2.3 map本身返回值作用
映射之后的新数组 */
let arr = [34, 23, 4, 5, 6, 7, 67]
// 完整写法
// let res = arr.map((item, index) => {
// return item * 0.8
// })
// 简写
let res = arr.map(item => item * 0.8)
console.log(res)
</script>
</body>
</html>
三.数组filter方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组filter方法作用: 筛选数组
* 应用场景: 筛选数组,将符合条件的元素放入新数组中
* 举例： 找出数组中所有大于10的元素
2. filter方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return true : 符合筛选条件，放入新数组中
* return false : 不符合筛选条件，不放入新数组中
2.3 filter方法的返回值
* 返回筛选之后的新数组
*/
// let arr = [ 88,90,100,20,50 ]
//需求：找出50以上的元素
//完整写法
// let res = arr.filter( (item,index)=>{
// if( item >= 50 ){
// return true
// }else{
// return false
// }
// })
// let res = arr.filter(item=>item >= 50)
// console.log( res )
/*
1.数组filter方法作用: 筛选数组
应用场景: 筛选数组, 将符合条件的元素放入新数组中
举例: 找出数组中所有大于10的元素
2.filter方法特点
2.1回调函数执行次数 == 数组长度
2.2回调函数内部的return
return true: 符合筛选条件, 放入新数组中
return false: 不符合筛选条件, 不放入新数组中
2.3 filter方法的返回值
返回筛选之后的新数组 */
let arr = [12, 23, 3, 44, 56]
// 需求:筛选出数组中的偶数
// 完整写法
// let res = arr.filter((item, index) => {
// console.log(item, index)
// if (item % 2 == 0) {
// return true
// }
// })
// 简洁写法
let res = arr.filter(item => item % 2 == 0)
console.log(res)
</script>
</body>
</html>
四.数组forEach方法 *****(重点)
特点:
(1)可以循环遍历数组中的每一项。
(2)每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。
(3)匿名函数中的this指向window。
(4)只能遍历数组。
(5)forEach()不会返回数据
(6)forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组forEach方法作用: 遍历数组
* 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
2. forEach方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* 没有返回值
2.3 forEach方法的返回值
* 没有返回值
*/
/* let arr = [45,60,88,90,20]
arr.forEach((item,index)=>{
console.log(item,index)
}) */
/*
1.forEach作用与场景:遍历数组
类似于for循环遍历数组
2.语法特点:
2.1循环执行次数 == 数组长度
2.2回调函数内部return作用
无
2.3 forEach本身返回值作用
无 */
let arr = [45,56,6,7,8]
arr.forEach((item,index) => {
console.log(item,index)
})
</script>
</body>
</html>
五.数组some方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组some方法作用: 判断数组中是否有符合条件的元素
* 应用场景: 非空判断（判断多个表单元素，有没有空文本）
* 举例 ： 判断数组中有没有负数
2. some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了满足条件的元素
* return false : 循环继续。 没找到，循环继续。
如果所有元素全部遍历还是没找到，最终结果就是false
2.3 some方法的返回值
* true : 有符合条件的元素
* false : 没有符合条件的元素
*/
// let arr = [10,20,50,60,70,80]
//标准写法
// let res = arr.some((item,index)=>{
// if( item < 0 ){
// return true
// }else{
// return false
// }
// })
//简写
// let res = arr.some(item=>item < 0)
// console.log( res )
/*
1.some作用与场景:判断数组中是否有满足条件的元素(逻辑或||)
经典场景:非空判断,多个表单只要有一个是空的,就不能提交
2.语法特点:
2.1循环执行次数 != 数组长度
2.2回调函数内部return作用
(1)return true:循环结束,找到满足条件的元素,此时some的返回值也是true
(2)return false:循环继续,没有找到满足条件的元素,
如果循环执行完毕还是false,最终some的返回值也是false
2.3 some本身返回值作用
return true:有满足条件的元素
return false:没有满足条件的元素
*/
let arr = [12, 23, 34, 45]
// 需求:判断数组中有没有负数
let res = arr.some((item, index) => {
if (item < 0) {
return true
}
})
console.log(res)
</script>
</body>
</html>
六.数组every方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组every方法作用: 判断数组中 是否所有的 元素都满足条件
* 应用场景: 开关思想 (购物车全选框)
* 举例 ： 判断数组中是不是都是正数
2. every方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环继续, 满足条件,
如果所有的元素全部遍历还是true,则最终的结果就是true
* return false : 循环结束。 只要找到不满足条件的元素，
循环结束。最终的结果是false
2.3 every方法的返回值
* true : 所有的元素 都符合条件
* false : 有元素 不符合条件
*/
/* let arr = [10,20,50,60,70,80]
//标准写法
let res = arr.every((item,index)=>{
if( item >= 0 ){
return true
}else{
return false
}
})
console.log(res) */
/*
1.every作用与场景:判断数组是否所有的元素都满足条件(逻辑与&&)
经典场景:开关思想,购物车全选
2.语法特点:
2.1循环执行次数 != 数组长度
2.2回调函数内部return作用
(1)return true:循环继续,当前元素满足条件,继续判断,
如果循环执行完毕还是true,则every返回值就是true
(2)return false:循环结束,当前元素不满足条件
every的返回值也是false
2.3 every本身返回值作用
return true:全部元素都满足条件
return false:有元素不满足条件 */
let arr = [34,45,67,77,-90]
// 需求:判断数组中有没有负数
let res = arr.every(item=>item>0)
console.log(res)
</script>
</body>
</html>
七.数组findIndex方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组findIndex方法作用: 查找元素的下标
* 数组的findIndex与indexOf异同点
相同点：功能一致，都是查找元素下标。 有则返回下标，无则返回固定值-1
不同点：应用场景不同
indexOf : 查找数组中的元素都是值类型
findIndex : 查找数组中的元素都是引用类型
2. findIndex方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了,此时返回值就是下标
* return false : 循环继续。 没找到，循环继续。
如果所有元素全部遍历还是没找到，最终结果就是-1
2.3 findIndex方法的返回值
* 元素下标 或者 -1
*/
/* let arr = [
{name:'张三',age:20},
{name:'李四',age:18},
{name:'王五',age:16},
] */
//需求：找名字为王五的人在哪里
// let res = arr.findIndex(item=>{
// if( item.name == '王五' ){
// return true
// }else{
// return false
// }
// })
/* let res = arr.findIndex(item=>item.name == '王五')
console.log(res) */
/*
1.findIndex作用与场景:找元素下标
数组中的元素是值类型:arr.indexOf()
数组中的元素是引用类型:arr.findIndex()
2.语法特点:
2.1循环执行次数 != 数组长度
2.2回调函数内部return作用
(1)return true:找到了,循环结束,此时findIndex是当前元素下标
(2)return false:没找到,循环继续,如果执行完毕还找不到,最终返回固定值-1
2.3 findIndex本身返回值作用
return -1:没有
return 下标:有 */
let arr = [
{name:'张三',age:23},
{name:'李四',age:11},
{name:'王五',age:44}
]
let res = arr.findIndex(item=>item.name == '李四')
console.log(res)//1
</script>
</body>
</html>
八.数组reduce方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* 1.数组reduce方法 : 数组累加器方法
* 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
2.reduce场景: 数组元素求和、求数组元素最大值
*/
let arr = [20,55,60]
// let sum = 0
// for(let i = 0;i<arr.length;i++){
// sum = sum + arr[i]
// }
// console.log( sum )
/*
第一个参数：回调 (上一次值,当前值,当前下标)=>{}
* 默认下标不是从0开始，而是从1开始。 开发中一般需要设置默认值
* return 值 就是下一次 sum的值
第二个参数: 初始值
* 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
reduce方法返回值是 ： 最后一次sum的结果
*/
// let res = arr.reduce( ( sum,item,index )=>{
// console.log( sum,item,index)
// return sum + item
// } , 0 )
let res = arr.reduce( ( sum,item )=>sum + item , 0 )
console.log( res )
</script>
</body>
</html>
九.其他常见的数组方法
-
concat() 用于连接两个或多个数组
-
push() 向数组的末尾添加一个或多个元素，并返回新的长度
-
pop() 删除并返回数组的最后一个元素
-
unshift() 向数组的开头添加一个或更多元素，并返回新的长度
-
shift() 删除并返回数组的第一个元素
-
splice() 用于插入、删除或替换数组的元素
-
reverse() 颠倒数组中元素的顺序
-
sort() 对数组的元素进行排序
-
slice() 取子数组
-
join() 把数组中的所有元素放入一个字符串
-
toString() 把数组转换为字符串
-
toLocaleString() 把数组转换为本地字符串
