JavaScript数组常见操作有哪些
这篇文章主要为大家展示了“JavaScript数组常见操作有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript数组常见操作有哪些”这篇文章吧。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站建设、成都做网站、卫滨网络推广、重庆小程序开发、卫滨网络营销、卫滨企业策划、卫滨品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供卫滨建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
创建数组
创建数组是基本功,其方法主要包括以下几种:
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数组常见操作有哪些
文章起源:http://scyanting.com/article/jecopo.html