zoukankan      html  css  js  c++  java
  • JavaScript数组Array方法介绍,使用示例及ES6拓展

    数组定义

    有次序和编号的一组值

    类似数组对象

    函数agruments对象,字符串,DOM元素集

    实例属性

    Array.prototype.length
    length可以赋值,用以改变数组长度

    arr.length = 0 //清空数组
    

    实例方法

    所有使用的示例中let arr = [1,2,3]
    push() pop() 分别在数组尾部添加,删除内容 ,改变原数组

    // return array length
    let arrLength = arr.push(6,9)
    // return remove content
    let remove = arr.pop()
    

    shift() unShift() 分别在数组头部删除,添加内容,改变原数组

    let remove = arr.shift() // 删除
    let arrLength = arr.unshift('a','c',-1) // 添加
    

    slice() 用于截取数组,返回截取到的新数组,也常用于将类似数组对象转换为数组

    // none arrgument 返回新数组引用,常用类数组转换
    let newArr0 = arr.slcie()
    let argArr = Array.prototype.slice.call(arguments)
    // one arrgument 从参数位置截取到最后
    let newArr1 = arr.slice(1)
    // two arrguments 从1参数位置,截取2参数的个数
    let newArr2 = arr.slice(1,2)
    

    splice() 截取并添加新元素,改变元素组,返回截取内容

    let arr1 = arr.splice(1,2,'a','f')
    

    reverse() 反转数组,改变原数组

    arr.reverse()
    

    sort() 默认按字典序排序,也可传函数参自定义排序,改变原数组

    arr.sort()
    

    concat() 合并多个数组,返回一新数组

    let newArr = arr.concat(['a','g','c'])
    

    join() 数组->字符串

    let arrStr = arr.join();
    let arrStr = arr.join('-')
    

    indexOf() lastIndexOf() 获取索引

    arr.indexOf(2)
    

    valueOf() toString()

    arr.valueOf() // [1,2,3]
    arr.toSring() // 1,2,3,4
    

    forEach() 无返回,跳过空位[''],不会跳过undefined和null

    arr.forEach(function(item){
      item += 1;
    })
    

    map() 返回新的一数组对象,跳过空位[''],不会跳过undefined和null

    let newArr = arr.map( item => item +=1 )
    

    filter() 返回符合条件的新数组对象

    let newArr = arr.filter( item => item > 2 )
    

    forEach() , map() , filter() 的异同
    同:三个方法都会对数组进行遍历,参数都是一个回调。
    异:

    1. forEach() 无返回
    2. map() 返回一个新数组,若对数组进行操作,该数组是原数组操作后的组成的数组
    3. filter() 返回一新数组,返回的是符合条件的数组
    var numbers = [1, 2, 3];
    
    numbers.map(function (n) {
      return n > 1;
    }); // [false,true,true]
    
    numbers.filter(function (n) {
      return n > 1;
    }); // [2,3]
    
    numbers.filter(function (n) {
      return n + 1;
    }); // [1,2,3]
    

    some() 返回布尔值,只要数组有一项符合条件就为true

    let isOk = arr.some( item => item > 2)
    

    every() 返回布尔值,全部符合才会true

    let isOk = arr.every( item => item > 2)
    

    ES6拓展内容

    拓展运算符

    拓展运算符,更像是函数res参数的一种逆运算,基本使用是...[数组],不过也可以是表达式,使用后数组就会拓展开来

    const a = [1,2,3]
    console.log(...[1,23,2]) // 1,23,2
    console.log(...a) // 1,2,3
    
    // 可直接用在函数传参上
    function foo(a,b,c){
        return ''+a + b +c
    }
    console.log(foo(...[1,2,3])) // 123
    foo(...[1,2,3]) 相当于 foo(1,2,3)
    
    // 与解构赋值配合
    const [first,...others] = [1,2,3,4]
    console.log(first) // 1
    console.log(others) // 2,3,4
    [a,...rest] = others; // a为2,rest为[3,4]
    
    // 字符串转数组
    const arrStr = [..."string"] //arrStr为["s","t","r","i","n","g"]
    
    

    静态方法

    Array.from() 将类似数组对象转为数组

    // ES6
    Array.from(doucment.getElementsByTagName('p'))
    
    // ES5
    [].slice.call(document.getElementsByTagName('p'))
    

    Array.of() es6提供的较为统一的将一组值转换为数组的方法

    // Array.of()
    // 无参数
    Array.of() // []
    // 一参数
    Array.of(5) // [5]
    // 多参数
    Array.of(1,2,3) // [1,2,3]
    
    // Array()
    // 无参数
    Array() // []
    // 一参数
    Array(3) // [,,]
    // 多参数
    Array(3,2,3) // [3,2,1]
    

    实例方法

    find() 返回第一个符合条件的值,参数为回调函数

    [1,2,3,4].find((value,index,,arr) => { return value > 2}) // 3
    

    findIndex() 返回第一个符合条件的索引,参数为回调函数

    [1,2,3,4].findIndex((value,index,arr) => { return value > 2}) // 2
    

    includes() 返回布尔值表示是否包含指定值,类似String中的

    [12,22,3].includes(1) // false
    
    // 可指定第二参数,表示查询的起始位置,0为开始
    [12,22,3].includes(12,1) // false
    

    fill() 填充数组,常用于初始化

    new Array(6).fill('x')
    
    const arr = ['6',6,1].fill(1)
    console.log(arr) // [1,1,1]
    

    copyWithin() 将数组内成员覆盖到其它位置,改变原数组

    //copyWithin(target,start,end) 要覆盖的目标位置,起始位置,结束位
    let arr = [0,9,8,6];
    arr.copyWithin(1,0,2);
    console.log(arr) // [0,0,9,6]
    

    flat() 拉平数组,可以把多维数组降维

    [1,[2,3],4].flat() // [1,2,3,4]
    [1,[2,3,[3.1,3.2]],4].flat() // [1,2,3,[3.1,3.2],4]
    
    // 可有参数指定拉平的次数(降的维次)
    [1,[2,3,[3.1,3.2]],4].flat(2) // [1,2,3,3.1,3.2,4]
    

    flatMap() 这个相当于将map()flat()的结合

    // 将数组进行map,如果map的结果有还有数组就flat
    [[2,3],[7,6]].flatMap(([a,b]) => { return a + b }) //[5,13]
    [[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a'] }) //[5,"a",13,"a"]
    [[2,3],[7,6]].flatMap(([a,b]) => { return [a + b,'a',['a-1','a-2']] }) // [5,"a",["a-1","a-2"],13,"a",["a-1","a-2"]]
    

    keys() values() entries() keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

  • 相关阅读:
    springaopxml
    【Cocos2dhtml5】解析例子中的飞机游戏(一)
    springiocannotation
    模板方法设计模式(JDBCTeampleta
    springaopannotation
    从前,有座山,山里有座庙,庙里有苦逼IT
    day 41 Nginx进阶
    day 42 作业
    day43 LNMP单机环境安装
    day 42 nginx rewrite跳转
  • 原文地址:https://www.cnblogs.com/flytree/p/14659669.html
Copyright © 2011-2022 走看看