zoukankan      html  css  js  c++  java
  • JS数组的常用属性或方法

    1.length 数组长度

    计算数组的长度

    var arr=[1,2,3,4,5];
    console.log(arr.length);//输出结果是5

    2. push() 添加元素

    向数组尾部添加新元素,返回值是数组的新长度

    var arr=[1,2,3,4,5];
    console.log(arr.push(6,7));//输出结果是7
    console.log(arr);//输出结果是[1,2,3,4,5,6,7]

    3. pop() 删除元素

    删除并返回最后一个元素

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.pop());//输出结果是5
    console.log(arr);//输出结果是[1,2,3,4]

    4. reserve() 颠倒顺序

    将数组元素颠倒顺序,数组本身发生了变化

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.reverse());//输出结果是[5,4,3,2,1]
    console.log(arr);//输出结果是[5,4,3,2,1]

    5. join() 数组转为字符串

    把数组转为字符串。即把数组所有元素通过指定的分隔符变革一个字符串,数组本身不发生变化。

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.join(','));//输出结果是1,2,3,4,5
    console.log(arr);//输出结果是[1, 2, 3, 4, 5]

    6. map() 操作元素

    将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组。=>是es6的箭头函数,在后面会介绍。

    对数组进行遍历

    var arr = [1, 2, 3, 4, 5];
    arr.map(item => {
        console.log(item)
    })

    对数组内容进行操作后返回新数组

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.map(item => item*2)) //输出结果是[2, 4, 6, 8, 10]
    console.log(arr) //输出结果是[1, 2, 3, 4, 5]

    7. forEach() 遍历元素

    将数组中的每个元素执行提供的函数,没有返回值,并没有改变原来的数组,常用来遍历数组。

    var arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        console.log(item)
    })

    8. filter() 元素过滤

    将所有元素进行判断,将满足条件的元素作为一个新数组返回,不会改变原始数组。

    实例1:过滤所有的奇数

    var arr = [1, 2, 3, 4, 5];
    //过滤出奇数
    console.log(arr.filter(item => {
       return item%2==1
    })) //输出结果是[1, 3, 5]
    console.log(arr)//输出结果是 [1, 2, 3, 4, 5]

    实例2:判断数组中是否包含某个值。当包含时会返回此值的数组,不存在时返回空数组

    var arr = [1,5,4,3]
    console.log(arr.filter(item => item==3))//[3]

    实例3:过滤掉null,undefined,空字符串

    var arr2 = [1, null, 2, '', 'm', undefined, 222]
    console.log(arr2.filter(item => item))//[ 1, 2, 'm', 222 ]

    实例4:数组去重。index表示索引,self表示filter函数本身。

    var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
    var arr2 = arr.filter((item, index, self) => self.indexOf(item) === index)
    console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

    9. every() 元素判断

    将所有元素进行判断,如果所有元素都满足判断条件,则返回true,否则为false。常作为所有条件判断。

    var arr = [1, 2, 3, 4, 5];
    var morethan4 = value => value > 4
    var lessthan6 = value => value < 6
    console.log("arr数组所有元素都大于4吗?" + arr.every(morethan4))//输出结果是 arr数组所有元素都大于4吗?false
    console.log("arr数组所有元素都小于6吗?" + arr.every(lessthan6))//输出结果是 arr数组所有元素都小于6吗?true

    10. some() 元素判断

    将所有元素进行判断,如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false。常作为部分条件判断。

    var arr = [1, 2, 3, 4, 5];
    var morethan4 = value => value > 4
    var morethan6 = value => value > 6
    console.log("arr数组存在元素大于4吗?" + arr.some(morethan4))//输出结果是arr数组存在元素大于4吗?true
    console.log("arr数组存在元素大于6吗?" + arr.some(morethan6))//输出结果是arr数组存在元素大于6吗?false

    11. reduce() 操作内容

    所有元素都调用返回函数,返回值为最后结果,传入的值必须是函数类型。

    var arr = [1, 2, 3, 4, 5];
    //遍历元素,将它们累加后返回
    console.log(arr.reduce((a,b) => {
        return a+b
    }))//输出结果是15

    12. shift() 删除元素

    删除数组中的第一个元素并返回。

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.shift())//输出结果是 1
    console.log(arr)//输出结果是[2, 3, 4, 5]

    13. unshift() 添加元素

    将一个或多个元素添加到数组的开头,并返回数组的长度。

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.unshift(6,7))//输出结果是7
    console.log(arr)//输出结果是[1, 2, 3, 4, 5, 6, 7]

    14. concat() 连接数组

    将多个数组进行拼接,返回一个新数组。

    var arr = [1, 2, 3, 4, 5]
    var arr2=[6, 7]
    console.log(arr.concat(arr2))//输出结果是[1, 2, 3, 4, 5, 6, 7]

    15. toString() 数组转字符串

    将数组转为字符串。

    var arr = [1, 2, 3, 4, 5]
    console.log(arr.toString())//输出结果是1, 2, 3, 4, 5

    16. splice(开始位置, 删除的个数,元素) 

    万能的方法,可实现数组的增删改。常用于删除指定元素。

    新增元素时,删除个数为0:

    var arr = [1, 2, 3, 4, 5]
    arr.splice(1,0,6)//在索引为1的位置插入元素
    console.log(arr)//输出结果是[1, 6, 2, 3, 4, 5]

    删除元素时,元素不写:

    var arr = [1, 2, 3, 4, 5]
    arr.splice(1,1)//删除索引为1的元素
    console.log(arr)//输出结果是[ 1, 3, 4, 5]

    修改元素时,删除个数为1:

    var arr = [1, 2, 3, 4, 5]
    arr.splice(1,1,6)//把索引为1的元素替换为6
    console.log(arr)//输出结果是[ 1,6, 3, 4, 5]

    17. Array.isArray() 判断是否数组

    判断是否是一个数组

    var arr = [1, 2, 3, 4, 5]
    //判断是否是一个数组
    console.log(Array.isArray(arr))//输出结果是true
    console.log(Array.isArray({'id':1}))//输出结果是false

    18. sort() 数组排序

    对数组的内容进行排序,可以数字,字符串数字,字母等,会按照Unicode进行升序排序。数组内容已经变成排序后的结果!

    console.log([5,6,9,1,2,4].sort())//[1, 2, 4, 5, 6, 9]
    console.log(['5','6','9','1','2','4'].sort())//["1", "2", "4", "5", "6", "9"]
    console.log(['b','f','a','A','C','4'].sort())//["4", "A", "C", "a", "b", "f"]

    下面看一个特例

    console.log([5,1,10,20,2].sort())//[1, 10, 2, 20, 5]

    结果出乎意料,10竟然在2前面,原因就是它是根据Unicode来排序。对于数字的这种情况,需要些一个方法,然后给sort调用:

    function compare(m,n){
        if (m < n) return -1
        else if (m > n) return 1
        else return 0
    }      
    const arr = [5,1,10,20,2]
    console.log(arr.sort(compare))//[ 1, 2, 5, 10, 20 ]

    通过这种方式,自定义比较方式,就可以完美的解决这个问题。对于字符串数字也是类似。

  • 相关阅读:
    django-ForeignKey,OneToOneField,ManyToManyField
    django-HttpResponse,render,redirect
    django-常见问题勘误
    django-个人网站之环境配置(一)
    django-表单之数据保存(七)
    django-表单之模型表单渲染(六)
    django-表单之手动渲染(五)
    Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析
    流媒体传输协议详解之---RTSP认证
    在YUV图像上根据背景色实现OSD反色
  • 原文地址:https://www.cnblogs.com/zys2019/p/14279136.html
Copyright © 2011-2022 走看看