1. indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
- 该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
- indexOf() 方法对大小写敏感
- 如果要检索的字符串值没有出现,则该方法返回 -1
let arr = [1,22,3,4,5,3,6,8];
console.log(arr.indexOf(3, 2)); //从索引为2的位置开始查找
console.log(arr.indexOf(22)); //从头开始找,找到第一个即停止
2. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索
用法参照indexOf
3. forEach() 遍历数组全部元素(没有返回值),利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环,不支持return操作输出,return只用于控制循环是否跳出当前循环(难用于操作新值)
- forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身
var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index,array){
console.log(item,index,array)
});
- item 当前项
- index 当前第几项 下标
- array 遍历的数组本身
4. map() 更新数组,也就是原数组被“映射”成对应新数组,返回一个新数组,原数组不变
- 创建一个新的数组
- 不改变原来的数组
- return出来的就是这个新的数组
- 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
- 使用return操作输出,会循环数组每一项,并在回调函数中操作
let arr = [1, 2, 3, 4]
let newArr = arr.map((item,index,arr) =>{
return item * 2
})
console.log(arr) // 旧数组不变 [1, 2, 3, 4]
console.log(newArr) // 新数组是return计算出来的值 [2, 3, 6, 8]
arr.filter()、includes()、find()、findIndex()— —筛选数组
- filter()为“过滤”。筛选符合条件的元素并返回新数组,原数组不变
- 创建一个新的数组
- 原来的数组不变
- 根据筛选条件return返回新的数组
- 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
- 使用return条件输出,会循环数组每一项,并在回调函数中操作
let arr = [1,2,3,4] ;
let newArr = arr.filter(function(item,index,arr){
return item < 3 ; //根据判断为true来遍历循环添加进新数组
})
console.log(newArr); //打印新数组
console.log(arr); //打印原数组,原数组不变
- includes()只是判断数组是否含有某值,不用return,不用回调函数,输出一个true或false
let arr = [1,2,3,4,5,6] ;
let new1 = arr.includes(4); //不用回调函数,arr中包含4返回true,否则返回false
console.log(new1);
console.log(arr);
- find()在数组中找到符合要求的对象 和filter的区别就是找到符合要求的对象就停止寻找了,返回的是一个对象,而filter返回的是所有符合要求的对象组成的新数组
- 不创建新的数组
- 不改变原来的数组
- 判断一旦为true就会跳出循环,输出符合条件的数组元素
- 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
- 使用return操作输出,会循环数组每一项,并在回调函数中操作
var arr = [1,2,3,4,5,6] ;
var new1 = arr.find(function(item,index){
return item>2&&item<4 ; //当遍历循环到判断到一个为true则跳出循环,输出当前数组元素,不再循环
})
var new2 = arr.find(function(item,index){
return item.toString().indexOf(5)>-1 ; //把当前数组元素转为字符串,则可index()>-1判断是否含有某字符
})
console.log(new1); //打印操作后的结果
console.log(new2) //打印是否含有某字符
console.log(arr); //打印原数组,find()没有改变原数组
arr.some()、every() — —判断数组
- some()若目标数组中只要有一个元素符合条件返回true,否则返回false (不改变原来的数组,返回true和fasle)
- 不创建新的数组
- 不改变原来的数组
- 只要有元素符合条件(判断为true)就会马上跳出循环 并返回 true
- 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
- 使用return操作输出,会循环数组每一项,并在回调函数中操作
let arr = [1,2,3,4]
arr.some((item,index,arr) => {
return item > 5 // false
})
// 判断数组中有木有当前选中的值
addTitle (current) {
let isInclude = this.form.titles.some(item => {
return item.title == current.title
})
if (isInclude) {
this.$message.error('不能重复选择')
return
} else {
current.light = false
this.form.titles.push(current)
}
}
- every()与some相反,若目标数组中所有元素符合条件返回true,否则返回false (不改变原来的数组,返回true和fasle)
- 不创建新的数组
- 不改变原来的数组
- 只要有元素符合条件(判断为true)就会马上跳出循环 并返回 true
- 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
- 使用return操作输出,会循环数组每一项,并在回调函数中操作
let arr = [1,2,3,4]
arr.every((item,index,arr) => {
return item >0 // 返回true 因为所有元素都满足条件
})
9.arr.reduce(callback,[initialValue])
-
callback:要执行的函数
要执行的函数中也可传入参数,分别为 prev:上次调用函数的返回值 cur:当前元素 index:当前元素索引 arr:被遍历的数组
-
initialValue:函数迭代的初始值
如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
注意:如果这个数组为空,运用reduce会报错,设置了初始值就不会报错。
1. 累加
let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
return prev + cur
})
2. 数组去重
let arrResult = arr.reduce((pre,cur) =>{
if(!pre.includes(cur)){
pre.push(cur)
}
return pre
},[])
3. 二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])