JavaScript 数组常见操作技巧

目录
  • 一、创建数组
  • 二、判断是不是数组
  • 三、类数组和数组的转换
  • 四、数组去重
    • 1.利用 set 去重
    • 2.双重循环 + splice
    • 3.新建数组 + includes
    • 4.reduce + includes
    • 5.新建数组 + sort
    • 6.新建数组 + 利用对象属性
    • 7.利用 map
    • 8.filter + indexOf

本文主要包括:

  • 创建数组
  • 判断是不是数组
  • 类数组和数组的转换
  • 数组去重
  • 各位看官可根据自身需求选择食用。

一、创建数组

创建数组是基本功,其方法主要包括以下几种:

const arr = [1,2,3]                   // 数组字面量
const arr = [,,,]                     // 三元素空位数组(hole array)
const arr = new Array(4)              // [,,,,]
const arr = new Array(4,2)            // [4,2]
const arr = Array.of(1,2,3)           // [1,2,3]

其中,我们一般最常用的是数组字面量法。

二、判断是不是数组

判断是不是数组的方法主要有:

// 方法一
[1,2,3] instanceof Array   
// 方法二
[1,2,3].constructor === Array
// 方法三
Object.prototype.toString.call([1,2,3]) === '[object Array]'
// 方法四
Array.isArray([1,2,3])
// 方法五(兼容写法)
function isArray(arr){
    return Array.isArray ? 
        Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'
}

一般最常用的应该是 isArray 方法。

三、类数组和数组的转换

我们有时碰到的数据结构不是纯数组,一般将其归类为“类数组”,类数组可以借助以下方法转为纯数组:

const x = document.querySelectorAll('a');
// 方法一
Array.prototype.slice.call(x);
// 方法二
Array.from(x);
Array.from(x,mapFn,thisArg);
// 方法三
[...x]
// 方法四
function toArray(x){
    let res = []
    for(item of x){
        res.push(item)
    }
    return res
}
// 方法五
Array.apply(null,x)
// 方法六
[].concat.apply([],x)

方法五和六本质上都是利用了 apply 的特点,即传给 apply 的第二个参数(数组或者类数组)会被转换为一个参数列表,这些参数再送到调用的方法(new Array 或者 concat)中。

四、数组去重

数组去重,本质上都需要比较两个元素是否相等,如果相等,则抛弃一个元素。为了准确地判断,这里统一使用 Object.is 进行比较。

1.利用 set 去重

set 要求元素不重复,因此将数组转换为 set 之后就可以去重了,接着再转换回数组即可。

function unique(arr){
    return Array.from(new Set(arr))
    // return [...new Set(arr)]
}

2.双重循环 + splice

外层循环遍历所有元素,里层循环遍历当前元素往后的所有元素,若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格,否则会遗漏掉某些元素

function unique(arr){
    for(let i = 0;i < arr.length;i++){
        for(let j = i + 1;i < arr.length;j++){
            if(Object.is(arr[i],arr[j])){
                arr.splice(j,1)
                j--
            }
        }
    }
    return arr
}

3.新建数组 + includes

新建数组,每次往数组中添加元素之前都检查数组中是否已有该元素:

function unique(arr){
    const res = []
    arr.forEach((item,index) => {
        // 也可以 if(res.indexOf(item) == -1),但是无法正确判断 NaN
        if(!res,includes(item)){
            res.push(item)
        }
    })
}

4.reduce + includes

function unique(arr){
    return arr.reduce((acc,cur) => {
        // return acc.includes(cur) ? acc : acc.concat(cur)
        return acc.includes(cur) ? acc : [...acc,cur]
    },[])
}

5.新建数组 + sort

根据 sort 的机制(在每个元素上调用 toStrng,之后在字符串层面进行排序),让相等的元素聚集在一起。新建数组,每次往数组中添加元素之前都检查该元素是否等于前面的元素,是则属于重复元素:

function unique(arr){
    arr.sort()
    const res = [arr[0]]
    for(let i = 1;i < arr.length;i++){
        if(!Object.is(arr[i],arr[i-1])){
            res.push(arr[i])
        }
    }
    return res
}

6.新建数组 + 利用对象属性

这种方法其实和“新建数组 + includes”一样。新建数组,每次往数组中添加元素之前都检查该元素是否已经作为对象的属性:

// 对象属性值可以认为是元素重复的次数
function unique(arr){
    const res = []
    const obj = {}
    arr.forEach((item,index) => {
        if(!obj[item]){
            res.push(item)
            obj[item] = 1
        } else {
            obj[item]++
        }
    })
    return res
}

这里检测的是对象的属性名,而属性名本质上是一个字符串,因此会认为 obj[true] 和 obj["true"] 是相等的,从而导致元素 true 或者元素 "true" 未能放入新数组中

7.利用 map

本质上和上面的方法是一样的,但是不需要新建数组:

function unique(arr){
    let map = new Map()
    for(item of arr){
        if(!map.has(item)){
            map.set(item,true)
        }
    }
    return [...map.keys()]
}

8.filter + indexOf

去掉重复的元素,换个角度来理解就是保留那些 索引 等于 第一次出现时的索引 的元素,这样的元素可以用 filter 筛选出来,放到一个数组中:

function unique(arr){
    return arr.filter((item,index) => index === arr.indexOf(item))
}

使用 indexOf 的缺点是无法正确判断 NaN。

到此这篇关于JavaScript 数组常见操作技巧的文章就介绍到这了,更多相关JavaScript 数组操作技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript数组常用操作技巧汇总

    本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索

  • javascript 数组操作实用技巧

    1.concat方法 [作用] 将多个数组联合起来,这个方法不会改变现存的数组,它只返回了所结合数组的一份拷贝. [语法] arrayObj.concat(array1,array2,...) [实例] var array1 = new Array("1","2"); var array2 = new Array("3","4"); var array3 = array1.concat(array2); document.wr

  • JavaScript 数组常见操作技巧 (二)

    目录 一.出数组中的重复元素或非重复元素 二.数组扁平化 / 数组降维 二维数组:双重循环 二维数组:循环 + concat 二维数组:reduce + concat 二维数组:展开 / apply + concat 多维数组:toString + split 多维数组:forEach + 递归 多维数组:reduce + 递归 多维数组:while + some 不确定维数的数组: flat 前言: 数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录

  • JavaScript数组的定义及数字操作技巧

    一.数组的介绍 数组中的元素类型可以是数字型.字符串型.布尔型等,甚至也可以是一个数组. 二.定义数组 1.通过数组的构造函数来定义数组: var arr=new Array(); var arr=new Array(size); var arr=new Array(element1,element2,...); 2.直接定义数组: var arr=["字符串",true,13]; ps: 和Object一样,此写法不会调用Array()构造函数. 三.数组元素 1.存取数组元素:通过

  • JavaScript面试技巧之数组的一些不low操作

    前言 本文主要从应用来讲数组api的一些骚操作; 如一行代码扁平化n维数组.数组去重.求数组最大值.数组求和.排序.对象和数组的转化等: 上面这些应用场景你可以用一行代码实现? 1.扁平化n维数组 1.终极篇 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5] [1,[2,3,[4,5]]].toString() //'1,2,3,4,5' [1[2,3,[4,5[...]].flat(Infinity) //[1,2

  • JavaScript中数组常见操作技巧

    效果图如下所示: Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组 // good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['广州', 50] ]; // bad var arr = new Object()

  • JavaScript 数组常见操作技巧

    目录 一.创建数组 二.判断是不是数组 三.类数组和数组的转换 四.数组去重 1.利用 set 去重 2.双重循环 + splice 3.新建数组 + includes 4.reduce + includes 5.新建数组 + sort 6.新建数组 + 利用对象属性 7.利用 map 8.filter + indexOf 本文主要包括: 创建数组 判断是不是数组 类数组和数组的转换 数组去重 各位看官可根据自身需求选择食用. 一.创建数组 创建数组是基本功,其方法主要包括以下几种: const

  • javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】

    本文实例讲述了javascript数组常见操作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 数组的方法</title> <script> var arr=[1,3,4] var arr1=["a",&quo

  • js数组常见操作及数组与字符串相互转化实例详解

    本文实例讲述了js数组常见操作及数组与字符串相互转化方法.分享给大家供大家参考,具体如下: 数组与字符串的相互转化 <script type="text/javascript"> var obj="new1abcdefg".replace(/(.)(?=[^$])/g,"$1,").split(","); //字符串转化为数组 var obj2 = "new2abcdefg".split(&qu

  • 27个JavaScript数组常见方法汇总与实例说明

    1. push() 概括:数组末位增加 参数:需要增加的数据 返回值:数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 arr.push() // 不传参数默认不新增 4 arr.push(1,2,3) // 新增多条数据时,返回新增完成后的数组长度 7 2. pop() 概括:数组末位删除 参数:无 返回值:删除的数据 let arr = [3] arr.pop() // 返回已删除的数据 3 arr.pop() // 当数组数据为空

  • Python中字符串的常见操作技巧总结

    本文实例总结了Python中字符串的常见操作技巧.分享给大家供大家参考,具体如下: 反转一个字符串 >>> S = 'abcdefghijklmnop' >>> S[::-1] 'ponmlkjihgfedcba' 这种用法叫做three-limit slices 除此之外,还可以使用slice对象,例如 >>> 'spam'[slice(None, None, -1)] >>> unicode码与字符(single-characte

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • 详解JavaScript数组的操作大全

    本文给大家介绍js数组的操作非常详细,感兴趣的朋友一起学习本篇文章吧. 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element[, element[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况

随机推荐