字符串和数组常用属性方法大全

一:字符串和数组相同点

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 不支持。

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值