一:字符串和数组相同点
1.length长度属性 字符串和数组一样都有length属性和下标(下标从0开始)
var a='abcdef'
console.log(a.length);//6
console.log(a[0]);//a
var b=[1,2,3,4,5,6]
console.log(b.length);//6
console.log(b[0]);//1
2.for循环遍历 字符串和数组同样具有该方法
(for in也可以循环遍历数组和字符串 打印的key是下标类似于i 要通过下标拿到对应的值)
var a='123456'
for(var i=0;i<a.length;i++){
console.log(i);//012345
console.log(a[i]);//123456
}
for(key in a){
console.log(key);//012345
console.log(a[key]);//123456
}
var b=[1,2,3,4,5,6]
for(var i=0;i<b.length;i++){
console.log(i);//012345
console.log(b[i]);//123456
}
for(key in b){
console.log(key);//012345
console.log(b[key]);//123456
}
3.indexOf(value)方法:返回字符串或数组中指定字符第一次出现的位置
var a='12314256'
console.log(a.indexOf('1'));//0
var b=[1,2,3,4,5,6,1,2]
console.log(b.indexOf(1));//0
4.lastIndexOf(value)方法:返回字符串或数组中指定字符最后一次出现的位置
var a='12314256'
console.log(a.lastIndexOf('1'));//3
var b=[1,2,3,4,5,6,1,2]
console.log(b.lastIndexOf(1));//6
5.concat()方法:字符串拼接或数组拼接
var a='123'
var b='456'
var c=a.concat(b)
console.log(c);//123456
var a=[1,2,3]
var b=[4,5,6]
var c=a.concat(b)
console.log(c);//[1, 2, 3, 4, 5, 6]
6.slice()方法:用来截取字符串或截取数组 第一个参数为开始截取的索引值,第二个参数结束元素的索引值(包左不包右)
var a='1234567'
console.log(a.slice(1,3));//23
var a=[1,2,3,4,5,6,7]
console.log(a.slice(1,3));//[2,3]
说明:如果第一个参数为负数则从数组尾部开始倒数,比如-1,就是数组最后一个元素(第一个参数要比第二个参数小,如果比第一个参数大 打印为空)
var a=[1,2,3,4,5,6,7]
console.log(a.slice(-3,-1));//[5,6]
console.log(a); //[1,2,3,4,5,6,7]
var b='1234567'
console.log(b.slice(-3,-1));//56
console.log(b);//1234567
二:字符串方法
1.charAt():获取字符串中指定索引对应的字符值
var a='123456'
console.log(a.charAt(1));//2
2.substr():字符串截取 第一个参数为开始截取的索引值,第二个参数为返回元素的个数。
var b='1234567'
console.log(b.substr(1,2));//23
3.split():字符串分割成字符串数组
var b='1234567'
console.log(b.split());//['1234567']
console.log(b.split(''));//['1', '2', '3', '4', '5', '6', '7']
4.replace():字符串替换元素(如果有相同的元素,只会替换第一个元素)
var b='12341567'
console.log(b.replace(1,0));//012341567
应用:把电话号码中间四位用*代替
var arr='13144800100'
var arr1=arr.substr(0, 3) + '****' + arr.substr(7, 11)
console.log(arr1);//131****0100
//或者
var arr2=arr.slice(0,3)+'****'+arr.slice(7,11)
console.log(arr2);//131****0100
三:数组方法
1. 添加或删除数组元素
unshift 数组头部添加元素 会改变原数组 向数组的开头添加一个或更多元素,并返回新的长度
push 数组尾部添加元素 会改变原数组 向数组的末尾添加一个或者多个元素,并返回新的长度
shift 数组头部删除元素 会改变原数组 用于把数组的第一个元素删除,并返回第一个元素的值
pop 数组尾部删除元素 会改变原数组 用于删除并返回数组的最后一个元素
2.join()数组转字符串
var a=[1,2,3,4,5]
console.log(a.join('-'));以-分割 1-2-3-4-5
3.reverse():数组元素倒序排列
var arr=[1,2,3,4,5]
var arr1=arr.reverse()
console.log(arr1);//[5, 4, 3, 2, 1]
console.log(arr);//[5, 4, 3, 2, 1]
4.splice():用于添加或删除数组中的元素 删除时 第一个参数为下标 第二个参数为删除的个数 添加可以有多个参数 第一个参数为下标 第二个参数为删除的个数 剩下的参数为删除位置添加的元素
//只删除
var arr=[1,2,3,4,5]
var arr1=arr.splice(0,2)
console.log(arr1);//[1,2]
console.log(arr);//[3, 4, 5]
//删除后添加
var arr=[1,2,3,4,5]
var arr1=arr.splice(0,2,7,8)
console.log(arr1)//[1,2]
console.log(arr)//[7,8,3,4,5]
5.includes():用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
var arr=[1,2,3,4,5]
var arr1=arr.includes(3)
console.log(arr1);//true
var arr2=arr.includes(6)
console.log(arr2);//false
6.sort():用于对数组的元素进行排序(从大到小或者从小到大排列)
var arr=[1,2,3,4,5]
var arr1=arr.sort((a,b)=>{
return a-b//从小到大
})
console.log(arr1);//[1, 2, 3, 4, 5]
var arr2=arr.sort((a,b)=>{
return b-a//从大到小
})
console.log(arr2);//[5, 4, 3, 2, 1]
7.forEach():循环遍历数组 常见有两个参数 第一个是元素 第二个是下标(可选) 没有返回值
forEach相较于for的好处:不需要使用循环变量,通过数组下标访问数组中的元素
var arr=[1,2,3,4,5]
arr.forEach((item,i)=>{
console.log(item);//1,2,3,4,5
console.log(i);//01234
})
console.log(arr)//undefined
8.filter():过滤数组
注意:
* filter() 方法返回一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
* filter() 不会对空数组进行检测。
* filter() 不会改变原始数组。
var arr=[1,2,3,4,5]
var arr1=arr.filter((item,i)=>{
return item>2
})
console.log(arr1);//[3,4,5]
console.log(arr);//[1,2,3,4,5]
9.map():映射数组
注意:
* 返回一个新数组
* map()方法不会对空数组进行检测
* map()方法不会改变原始数组
var arr=[1,2,3,4,5]
var arr1=arr.map((item,i)=>{
return item>2//判断时返回布尔值
})
console.log(arr1);//[false, false, true, true, true]
console.log(arr);//[1,2,3,4,5]
//使用场景1:全场打五折
var arr = [80,90,60,70,30]
var arr1 = arr.map(item => item * 0.5)
console.log(arr1);// [40, 45, 30, 35, 15]
//使用场景2:把imageList中的元素选一些,并重新整理,再给到skuImageList中
skuInfo.skuImageList = imageList.map(item=>{
return {
imgName:item.imgName,
imgUrl:item.imgUrl,
isDefault:item.isDefault,
spuImgId:item.id
}
})
10.findIndex():返回符合条件的元素的索引位置
注意:
* 不会检测空数组
* 如果没有符合条件的元素返回 -1
* 如果有多个符合条件的元素 返回符合条件的第一个元素的下标 然后停止循环
var arr=[1,2,3,4,5,3]
var arr1=arr.findIndex(item=>{
return item==3
})
console.log(arr1);//2
var arr=[1,2,3,4,5,3]
var arr1=arr.findIndex(item=>{
return item==8
})
console.log(arr1);//-1
11.some():判断数组中至少存在一个元素满足指定条件(多用于判重)
注意:只要有一个元素符合条件即返回true 如果一个也没有才会返回false
var arr=[1,2,3,4,5,3]
var arr1=arr.some(item=>{
return item==6
})
console.log(arr1);//false
12.every():判断数组中是否所有元素都满足条件(多用于反选)
注意:所有元素都符合条件才返回true 只要有一个不符合条件才会返回false
var arr=[1,2,3,4,5,3]
var arr1=arr.every(item=>{
return item>4
})
console.log(arr1);//false
13.reduce():接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。一般用来累加的话里面有两个形参 第一个是初始值 第二个是当前的新值
注意:不会对空数组进行计算
例如:算数组中选中状态的总价
computed:{
total(){
return this.list.reduce((pre,now)=>{pre+now.status?now.price*now.num:0},0)
}
}
总结:
数组和字符串共同的方法有slice、concat、indexOf、lastIndexOf。
数组转字符串方法为 join,字符串转数组方法为 split。
数组方法中会改变原数组的方法有:sort 、reverse、splice 。
数组方法中 slice 与 splice 的区别是:第一,第二个参数取值不同。前者是数组尾部的索引值,后者是要截取的元素个数。第二,是原数组返回的结果不同,前者不会改变原数组,后者原数组中只剩下未被删除的元素。
字符串方法中 slice、substring、substr 的区别是:第一, slice 既可用于字符串,也可以用于数组。第二,slice 与 substring 的第二个参数是要获取的尾部元素索引值。 而 substr 的第二个参数是要获取的元素个数。第三,substring 支持反向截取,比如 substring(5,2)表示截取2~5之间的字符串,而 slice 不支持。