zoukankan      html  css  js  c++  java
  • js数组的方法

    Javascript原生方法

    注意:js数组每一项可以保存任何类型的数据,比如第一个元素是字符串,第二个元素是数字,第三个元素是对象

    创建数组

    tips: 建议使用数组字面量方式【简单】

    var colors = new Array()
    var colors = new Array('red','blue')
    
    var colors = [];
    var colors = ['red','blue'];

    检测数组

    对于一个网页或一个全局作用域,可以通过如下方法

    if(arr instanceof Array){
        //对数组执行某些操作
    }

    网页中包含多个框架,通过如下ES5方法检测

    if(Array.isArray(arr)){
        //对数组执行某些操作
    }

    转换方法

    arr.valueOf()

    var colors = ['red','blue','green']
    colors.valueOf() //['red','blue','green']

    arr.toString()

    var colors = ['red','blue','green']
    colors.toString() //"red,blue,green"

    tips: arr.toString() 与 arr.join()输出相同,不过join里可以输入其它链接符

    push、pop、unshift、shift

    arr.push(item)
    接受任意数量的参数,添加到数组末尾,返回新数组的长度

    var colors = ['red']
    colors.push('blue','green'); //3

    arr.pop()
    删除数组最后一项,返回删除的项

    var colors = ['blue','green']
    colors.pop() //green

    arr.unshift()
    接受任意数量的参数,添加到数组头部,返回新数组的长度

    var colors = ['red']
    colors.unshift('green') //2

    arr.shift()
    删除数组第一项,返回删除的项

    var colors = ['blue','green']
    colors.shift() //blue

    reverse、sort、concat、slice

    arr.reverse()
    反转数组的顺序,并返回重新排序之后的数组, 原数组会被改变

    var arr1 = [1,2,3,'red','blue']
    arr1.reverse() //["blue", "red", 3, 2, 1]

    arr.sort()
    如果不传参数,默认情况下数组内的元素会被转换为字符串进行比较,因此一般不推荐直接使用默认的arr.sort()进行排序。
    返回值为排序后的新数组。原数组会被改变
    注意:sort里接收一个比较参数

    var b = [1,2,3]
    //升序
    b.sort((a,b)=>a-b) //[1, 2, 3]
    //降序
    b.sort((a,b)=>b-a) //[3, 2, 1]

    sort扩展(非数字类型排序,对象里的某个key值排序)

    arr.concat()
    没有传递参数,那么只是复制当前数组并返回副本,原数组不变;
    传递一个元素(数组)或多个元素(数组),会将其合并到arr中,返回新数组,原数组不变

    var colors = ['red','blue','green']
    colors.concat('gray',['a','green'])  //["red", "blue", "green", "gray", "a", "green"]
    console.log(colors) // ["red", "blue", "green"]

    tips: js数组复制

    arr.concat()    //原生
     
    [...arr]   //ES6
    
    Array.from(arr) //ES6
    
    $.extend(arr) //JQ

    arr.slice
    剪切数组,返回剪切之后的数组,元素不会改变
    1、传入一个参数,表示起始位置,结束位置为最末尾

    var colors = ['red','blue','green']
    colors.slice(2) //['green']

    2、传入2个参数,表示起始位置与结束位置,但不包括结束位置所在的元素

    var colors = ['red','blue','green']
    colors.slice(1,2) //['blue']

    splice()

    删除:arr.splice(index, num)
    传入两个参数,第一个为位置( 数组下标),第二个为删除的项数,可以删除任意项,返回删除元素组成的数组,原数组变了

    var colors = ['red','blue','green']
    colors.splice(1,1) //['blue']

    插入:arr.splice(index,0,item)
    传入3个参数, [起始位置( 数组下标) | 要删除的项数 为0 | 要插入的元素], 最终返回删除掉的元素组成的数组,因为这里删除项数为0,因此会返回空数组

    var colors = ['red','blue','green']
    colors.splice(1,0,'gray') //[]
    console.log(colors) // ['red','gray','blue','green']

    替换:arr.splice(index, num, item)
    传入3个参数,[起始位置 | 要删除的项数 | 要插入的任意项数], 最终返回删除掉的元素组成的数组

    var colors = ["red", "gray", "blue", "green"]
    colors.splice(2,2,'yellow') // ["blue", "green"]
    console.log(colors); //["red", "gray", "yellow"]

    tips:这个方法会因为参数的不同而实现不同的功能

    查找元素

    arr.indexOf()
    验证数组中是否含有某个元素,返回第一个匹配到的元素在数组中所在的位置,如果没有,则返回 -1

    var colors =  ["red", "gray", "yellow"]
    colors.indexOf('gray') // 1
    colors.indexOf('mm') //-1

    arr.lastIndexOf()
    验证数组中是否含有某个元素,不过是从数组尾部开始查找,返回第一个匹配到的元素所在的位置,如果没有,则返回-1

    var colors =  ["red", "gray", "yellow","gray"]
    colors.indexOf('gray') // 3
    colors.lastIndexOf('mm') //-1

    迭代方法

    ES5定义了5个迭代方法,每个方法接收2个参数----》[要在每一项上运行的函数 | 运行该函数的作用域对象(可选)]
    运行的函数包括3个参数 ---》 [数组项的值 | 该项在数组中的位置 | 数组对象本身]

    arr.every()
    检查数组中的项是否满足某个条件,传入的函数对每一项都返回true,则返回true

    var nums = [1,2,3,4,5,4,3,2,1]
    nums.every((item, index, arr)=> item >2 ) //false

    arr.some()
    检查数组中的项是否满足某个条件,只要传入的函数对数组中某一项返回true,则返回true

    var nums = [1,2,3,4,5,4,3,2,1]
    nums.some((item, index, arr)=> item >2 ) //true

    arr.filter()
    对数组中的每一项运行给定函数,返回该函数会返回true的项组成的新数组

    //返回nums中所有值大于2的数组
    var nums = [1,2,3,4,5,4,3,2,1]
    nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

    arr.map()
    对数组中的每一项运行给定函数,返回每次函数调用的结果组成的新数组

    //返回nums中每一项乘以2的数组
    var nums = [1,2,3,4,5,4,3,2,1]
    nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

    arr.forEach()
    对数组中的每一项运行给定函数,这个方法没有返回值

    //返回nums中每一项乘以2的数组
    var nums = [1,2,3,4,5,4,3,2,1]
    nums.forEach((item, index, arr)=> item * 2 ) // undefined

    tips: map、forEach里不可以使用continue、break ,每一项都会执行,如果遍历中要用到continue或break提升效率,则可以使用for()循环 或 for...of..循环

    归并操作

    每个方法接收两个参数[在每一项上调用的函数 | 作为归并基础的初始值(可选)],都会迭代数组每一项,返回一个最终的值
    函数接收4个参数[前一个值 | 当前值 | 项的索引 | 数组对象本身]

    arr.reduce()
    从左开始

    //求数组所有元素之和
    var nums = [1,2,3,4,5]
    nums.reduce((prev,cur,index,arr)=>prev+cur) //15
    

    arr.reduceRight()
    从右开始

    //求数组所有元素之和
    var nums = [1,2,3,4,5]
    nums.reduceRight((prev,cur,index,arr)=>prev+cur) //15
    

    ES6数组方法扩展

    1、求一个数组中最大元素

    由于js不提供求数组最大元素的函数,所以只能套用Math.max函数将数组转为一个参数序列,然后求最大值;有了扩展运算符以后就可以直接使用了Math.max了

    //ES5的写法
    Math.max.apply(null,[1,3,6]) ///6
    //ES6的写法
    Math.max(...[1,3,6]) //6

    2、通过push函数将一个数组添加到另一个数组的尾部

    ES5的写法中,push的参数不可以是数组,所以只好通过apply方法变通使用push方法;有了扩展运算符,可以直接将数组传入push方法中

    //ES5的写法
    var arr1 = [1,2]
    var arr2 = [4,5]
    Array.prototype.push.apply(arr1,arr2) //返回新数组长度,arr1改变
    
    //ES6的写法
    var arr1 = [1,2]
    var arr2 = [4,5]
    arr1.push(...arr2) //返回新数组长度,arr1改变

    3、合并数组

    //ES5写法
    var arr = [4,5]
    [1,2].concat(arr) //[1, 2, 4, 5]
    
    //ES6写法
    var arr = [4,5]
    [1,2,...arr]

    4、Array.from()妙用

    //数组去重
    function combine(){ 
        let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
        return Array.from(new Set(arr));
    } 
    
    var m = [1, 2, 2], n = [2,3,3]; 
    console.log(combine(m,n)); // [1, 2, 3]
    
    //遍历Nodelist对象
    let ps = document.querySelectorAll('p')
    Array.from(ps).forEach(function(p){
        console.log(p)
    })
    
    //将字符串转化为数组
    Array.from('hello') //["h", "e", "l", "l", "o"]

    5、Array.of()
    替代Array() 或 new Array(),并且不存在参数不同而导致的重载

    Array.of(2,3,5) //[2,3,5]
    Array.of(2) //[2]
    Array.of(2).length //1

    6、arr.copyWithin()
    将当前数组内部制定位置的成员复制到其他位置,返回当前新数组,原数组改变
    接收三个参数[从该位置开始替换 | 从该位置开始读取数据 | 到该位置停止读取数据]

    //将4,5移动到前两位
    [1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]

    7、arr.find() arr.findIndex()
    找出第一个符合条件的数组成员,它参数是一个函数,每一个成员执行这个函数,找到返回true,没找到返回undefined
    函数的参数[当前值 | 当前的位置 | 原数组]

    [1,4,9,10,15].find((item, index, arr)=>{
        return item > 9;
    }) //10
    
    [1,4,9,10,15].findIndex((item, index, arr)=>{
        return item > 10;
    }) //4

    8、arr.fill()
    用给定的值填充一个数组

    ['a','b','c'].fill(7) //[7,7,7]
    
    ['a','b','c'].fill(7,1,2) //['a',7,'c']

    9、arr.includes()
    数组是否包含某个值,返回true 或 false

    [1,2,3].includes(2) //true

    10、for...of...
    遍历数组元素

    for(let item of colors){
        console.log(item) // red,gray,yellow
    }
    

    tips:里面可以使用break continue提升效率

  • 相关阅读:
    双端队列
    顺序循环队列
    顺序队列
    Counting Triangles(hd1396)
    蒟蒻之栈模拟递归
    链栈以及顺序栈应用—算数表达式
    栈的简单应用-进制转换
    链栈
    共享栈
    顺序栈
  • 原文地址:https://www.cnblogs.com/carry-2017/p/11779821.html
Copyright © 2011-2022 走看看