最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript 数组排序/去重/乱序/扁平化

    正文概述 掘金(LuckyChou)   2020-12-29   427

    数组API

    静态方法

    Array.from()

    参数: Array.from(arrayLike[, mapFn[, thisArg]])

    • arrayLike

      • 想要转换成数组的伪数组对象或可迭代对象。
    • mapFn 可选

      • 如果指定了该参数,新数组中的每个元素会执行该回调函数。
    • thisArg 可选

      • 可选参数,执行回调函数 mapFn 时 this 对象。

    返回值: 一个新的数组实例

    Array.isArray()

    Array.of()

    参数: Array.of(element0[, element1[, ...[, elementN]]])

    返回值: 一个新的数组实例

    成员方法

    concat()

    参数: 数组或参数列表

    const NewArray = Array1.concat(array2)
    const NewArray = Array.concat(1,2,3,4)
    

    返回值: 一个新的数组实例

    功能: 合并数组 也可用于浅拷贝

    // 浅拷贝 只拷贝最外层
    const NewArray = Array1.concat()
    

    every()

    参数: arr.every(callback(element[, index[, array]])[, thisArg])

    • callback

      用来测试每个元素的函数,它可以接收三个参数:

      • element

        用于测试的当前值。

      • index可选

        用于测试的当前值的索引。

      • array可选

        调用 every 的当前数组。

    返回值: 如果回调函数的每一次返回都为 truthy 值,返回 true ,否则返回 false。

    [1,2,3,4,5].every(x => x > 0) // true
    [1,2,3,4,5].every(x => x > 1) // false
    

    some()

    同every

    返回值: 有一个通过就返回true

    fill()

    参数: arr.fill(value[, start[, end]])

    • value

      用来填充数组元素的值。

    • start 可选

      起始索引,默认值为0。

    • end 可选

      终止索引,默认值为 this.length。

    返回值: 修改后的数组

    // 可用于初始化数组
    Array(3).fill(0);   // [0, 0, 0]
    

    filter()

    参数: var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

    返回值: 一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

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

    find()

    参数: arr.find(callback[, thisArg])

    返回值: 数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

    [1,2,3,4,5].find(x => x > 6) //undefined
    [1,2,3,4,5].find(x => x > 2) //3
    

    findIndex()

    同find 区别在于返回值

    数组中通过提供测试函数的第一个元素的索引。否则,返回-1。

    flat()

    参数: var newArray = arr.flat([depth])

    • depth: 深度 默认为1

    返回值: 一个新的数组实例。

    flatMap()

    flatMap() = map() + flat(1)

    forEach()

    对数组的每个元素执行一次给定的函数

    参数: arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

    返回值: 没有返回值 undefined

    map()

    效果同forEach() 区别在于map()有返回值

    返回值: 原数组每个元素执行回调函数的结果组成的新数组

    includes()

    返回值: boolean

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

    indexOf()

    参数: arr.indexOf(searchElement[, fromIndex])

    • fromIndex(可选)

      • 指定开始查找的位置

    返回值: 查找元素的索引下标 若找不到则为-1

    var array = [2, 5, 9];
    array.indexOf(2);     // 0
    array.indexOf(7);     // -1
    array.indexOf(9, 2);  // 2
    array.indexOf(2, -1); // -1
    array.indexOf(2, -3); // 0
    

    join()

    var a = ['Wind', 'Rain', 'Fire'];
    var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
    var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
    var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
    var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"
    

    reduce()

    参数: arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

    • initialValue: 初始值

    返回值: 函数累计处理的结果

    [0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr ) // 10
    [0, 1, 2, 3, 4].reduce(((prev, curr),10) => prev + curr , 10); // 20 初始值为10
    

    reverse()

    返回值: 颠倒后的数组(会直接修改原数组)

    slice()

    参数: arr.slice([begin[, end]])

    若省略 则默认从0开始

    返回值: 一个新的数组实例(不会修改原数组)

    功能: 切割数组/浅拷贝/转化为真正的数组

    Array.prototype.slice.call(arguments)
    

    sort()

    参数: arr.sort([compareFunction])

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

    返回值: 排序后的数组(修改原数组)

    splice()

    参数: array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

    • deleteCount(可选)

      整数,表示要移除的数组元素的个数。

      • >0 删除元素

      • <0 添加元素

    增加/删除

    • pop() 删除最后一个元素 返回值为被删除元素

    • push() 在数组最后添加一个元素 返回值为新数组的长度

    • shift() 删除第一个元素 返回值为被删除的元素

    • unshift() 在数组开头添加一个元素 返回值为新数组的长度


    数组排序

    // 升序
    arr.sort((x,y) => x-y)
    // 降序
    arr.sort((x,y) => y-x)
    

    数组去重

    实现一

    用 ES6 Set 的特性 没有重复的元素

    实现二

    先将数组排序 然后比较相邻元素 如果相同 就移到下一个元素

    实现三

    双重for循环

    比较

    具体代码如下

    function getArr(arr) {
      const timer = 10000
      for (let i = 0; i < timer; i++) {
        arr[i] = Math.floor(Math.random() * 100)
      }
      return arr
    }
    
    let arr1 = []
    let arr2 = []
    let arr3 = []
    
    // 生成了 3个 数组长度为timer的数组
    arr1 = getArr(arr1)
    arr2 = getArr(arr2)
    arr3 = getArr(arr3)
    
    
    // case 1
    console.time('case1')
    arr = [...new Set(arr1)]
    console.timeEnd('case1')
    
    // case 2
    console.time('case2')
    arr2 = arr2.sort((x, y) => x - y)
    const res2 = []
    for (let i = 0; i < arr2.length; i++) {
      if (arr2[i] !== arr2[i + 1]) {
        res2.push(arr2[i])
      }
    }
    console.timeEnd('case2')
    
    // case3
    console.time('case3')
    const res3 = []
    for (let i = 0; i < arr3.length; i++) {
      for (let j = i + 1; j < arr3.length; j++) {
        if (arr3[i] == arr3[j]) {
          break
        }
        if (j == arr3.length - 1) {
          res3.push(arr3[i])
        }
      }
    }
    console.timeEnd('case3')
    
    // output
    // case1: 0.467ms
    // case2: 5.254ms
    // case3: 11.034ms
    

    可见 利用ES6的Set是效率最高的一种方法

    数组乱序

    实现

    取两个数组长度范围内的下标 交换位置

    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    
    function random(arr) {
      const timer = 1000
      var x, y, temp
      for (let i = 0; i < timer; i++) {
        x = Math.floor(Math.random() * arr.length)
        y = Math.floor(Math.random() * arr.length)
        temp = arr[x]
        arr[x] = arr[y]
        arr[y] = temp
        // ES6 写法
        // ;[arr[x], arr[y]] = [arr[y], arr[x]]
      }
      return arr
    }
    

    数组扁平化

    实现一

    调用 Array.prototype.flat

    实现二

    如果都是数字 可以用 toString 方法 转化为字符串 再用 split 切割

    实现三

    递归调用

    var arr = [1, [1, 2, 3], 4, 5]
    var res = []
    function flat(arr) {
      // case 1
      // return arr.flat()
    
      // case 2
      // return arr
      //   .toString()
      //   .split(',')
      //   .map((item) => +item)
    
      // case 3
      // for (var i = 0; i < arr.length; i++) {
      //   if (arr[i] instanceof Array) {
      //     flat(arr[i])
      //   } else {
      //     res.push(arr[i])
      //   }
      // }
    
      // return res
    }
    

    起源地下载网 » JavaScript 数组排序/去重/乱序/扁平化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元