美文网首页
js数组常用的方法

js数组常用的方法

作者: 指尖跳动 | 来源:发表于2020-04-03 23:26 被阅读0次

1. Array.prototype.push(),向数组的末尾添加一个或多个元素,并返回新的数组长度。原数组改变。

    var arr = [1,2,3,4]
    arr.push(5,6,7)

    console.log(arr) // [1, 2, 3, 4, 5, 6, 7]

2. Array.prototype.pop(),删除并返回数组的最后一个元素,若该数组为空,则返回undefined。原数组改变。

    var arr = [1,2,3,4,5,6,7]
    var del = arr.pop()

    console.log(del) // 7
    console.log(arr) // [1, 2, 3, 4, 5, 6]

3. Array.prototype.unshift(),向数组的开头添加一个或多个元素,并返回新的数组长度。原数组改变。

    var arr = [1,2,3,4,5,6,7]
    var res = arr.unshift(0)

    console.log(res) // 8
    console.log(arr) //[0,1,2,3,4,5,6,7]

4. Array.prototype.shift(),删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回undefined。原数组改变。

    var arr = [1,2,3,4,5,6,7]
    var res = arr.shift()

    console.log(res) // 1
    console.log(arr) // [2, 3, 4, 5, 6, 7]

5. Array.prototype.concat(arr1,arr2...),合并两个或多个数组,生成一个新的数组。原数组不变。

    var arr = [1,2,3,4,5,6,7]
    var arr1 = ['a','b','c']
    var arr2 = ['x','y','z']

    var res = arr.concat(arr1,arr2)

    console.log(res) // [1, 2, 3, 4, 5, 6, 7, "a", "b", "c", "x", "y", "z"]
    console.log(arr) // [1, 2, 3, 4, 5, 6, 7]

6. Array.prototype.join(),将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

    var arr = [1,2,3,4,5,6,7]
    var str1 = arr.join()
    var str2 = arr.join('-')

    console.log(str1) // 1,2,3,4,5,6,7
    console.log(str2) // 1-2-3-4-5-6-7

7. Array.prototype.reverse(),方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

   var arr = [1,2,3,4,5,6,7]
    arr.reverse()
    console.log(arr) // [7, 6, 5, 4, 3, 2, 1]

8. Array.prototype.sort(),对数组元素进行排序。按照字符串UniCode码排序,原数组改变。

①从小到大

    var sortNum = function(a,b){
        return a-b
    }
    arr.sort(sortNum)

②从大到小

 var sortNum = function(a,b){
        return b-a
    }
    arr.sort(sortNum)

③按照数组对象中的某个值进行排序

    var arr = [
        {name:"张三",age:18},
        {name:"李四",age:16},
        {name:"王五",age:20}
    ]

    function compare(param){
        return function sortAge(a,b){
            return a[param] - b[param]
        }
    }

    arr.sort(compare("age"))

9.  Array.prototype.map(function),原数组的每一项执行函数后,返回一个新的数组。原数组不变。(注意该方法和forEach的区别)。

10. Array.prototype.slice(start,end),从start开始,end之前结束,不到end;如果不给end值,从start开始到数组结束。start可以给负值,-1表示数组最后位置,-2表示倒数第二个,以此类推,顾前不顾后。返回一个新数组,原数组不变。

    var arr = [1,2,3,4]
    var a = arr.slice(-3,-1)

    console.log(a) // [2,3]

11. Array.prototype.splice(index,howmany,arr1,arr2...),删除元素并添加元素,从index位置开始删除howmany个元素,并将arr1、arr2...数据从index位置依次插入。howmany为0时,则不删除元素。原数组改变。

12. Array.prototype.forEach(function),用于调用数组的每个元素,并将元素传递给回调函数。原数组不变。(注意该方法和map的区别,若直接打印Array.forEach,结果为undefined)。

13. Array.prototype.filter(function),过滤数组中,符合条件的元素并返回一个新的数组, 原数组不变

    var arr = [1,2,3,4,5]
    var newArr = arr.filter( x => x>3 ) //[4,5]

14. Array.prototype.every(function),对数组中的每一项进行判断,若都符合则返回true,否则返回false。

15. Array.prototype.some(function),对数组中的每一项进行判断,若都不符合则返回false,否则返回true。

16. Array.prototype.reduce(function),reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

    var arr = [1,2,3,4,5]
    var total = arr.reduce((a,b) => a+b)

17. Array.prototype.includes(searchElement, fromIndex),includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。fromIndex可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。如果计算出的array.length + fromIndex小于 0,则整个数组都会被搜索。默认为 0。

相关文章

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • 数组常用方法

    数组常用方法 一、js数组常用方法: 1、join() Array.join() 方法将数组中所有元素都转换成字...

  • JavaScript数组常用方法

    目录 JS 数组常用API常用属性常用方法常见方法语法解释from方法isArrayconcateveryfill...

  • js 常用方法总结

    字符串的常用属性,概览 Array对象的方法; 详细js数组常用方法大全

  • JS数组常用方法

    @[toc] JS数组方法 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效...

  • js与ES6数组常用方法区别

    js数组 数组的概念及其定义方式字面量的形式 构造函数 数组的常用方法(依赖于数组使用)获取方法:对象.方法( )...

  • 初识javascript

    js字符串 数组 数组字面量表达方式(推荐) 数组的常用方法push(),pop(),unshift(),shif...

  • 2018-11-07

    js中数组<三>(第九篇) 直接上主题:这篇介绍常用的、好用的js数组方法,有以下几个 map() reduce(...

  • js数组常用方法

    前言:js数组自带了很多属性方法,这些方法为我们写程序提供了方便,因此,也是笔试、面试中经常会被问到的,本文总结了...

  • js 数组常用方法

    只有sort()方法改变了原数组,其他方法都没有改变原数组 1、forEach:接收一个函数做为参数,对数组的每个...

网友评论

      本文标题:js数组常用的方法

      本文链接:https://www.haomeiwen.com/subject/bxzlphtx.html