最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

javascript定义数组的方法,去重,类数组转化为数组

XAMPP新闻 admin 374浏览 0评论

重温JavaScript 数组的偏平化,去重,类数组转化为数组

在前面的内容中,我们学习过了JS数组的内容,这次我们通过一些练习题和面试题来巩固一下 操作数组的常用方法,本文参考了文后参考资料[1]的内容,加上了自己的理解,如果有问题我可以一起讨论。

1.数组扁平化

数组扁平化就是把多维数组转化成一维数组。如下所示:

const arr = [1,[2,[3,4],5],6];
// res = [1,2,3,4,5,6];

arr是多维数组,最终要转换为res这样的一维数组。

1.1 方法1:使用flat

flat() 方法会按照一个可指定的深度(默认值为 1)递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

//方法1:使用flat
const res1 = arr.flat(Infinity)
console.log(res1)
// Array(6)  [1,2,3,4,5,6]

在如上例子中我们不知道arr具体的深度,所以使用Infinity,表示无穷大。

1.2 方法2:使用正则表达式

// 方法2:使用正则表达式
const res2 = JSON.stringify(arr).replace(/\[|\]/g,'').split(',')
console.log(res2)
//  ["1", "2", "3", "4", "5", "6"]
// 此方法的缺点是数据类型都会变为字符串

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,然后使用字符串的replace方法将左括号和右括号用空字符替换掉,最后使用字符串的split方法将其分割为一个字符数组。

1.3 方法3:正则表达式的改良版本

//方法3:正则表达式的改良版本
const res3 = JSON.parse('['+JSON.stringify(arr).replace(/\[|\]/g,'')+']');
console.log(res3);
//[1, 2, 3, 4, 5, 6]

JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。

这种方法首先是将数组转换为字符串,然后替换掉左右括号,之后再在字符串的首位拼接上左括号和右括号,最后使用JSON.parse()将字符串转化为对象。

1.4 方法4:使用reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

reducer 函数接收4个参数:Accumulator (acc) (累计器) ,Current Value (cur) (当前值),Current Index (idx) (当前索引),Source Array (src) (源数组) 。

reduce函数的语法是:

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

在下例中,reducer函数中使用了参数pre作为累加器,使用了参数cur作为当前值,使用空数组[ ]作为initialValue。

//方法4:使用reduce
const flatten = arr => {
    return arr.reduce((pre,cur) => {
        return pre.concat(Array.isArray(cur)?flatten(cur):cur)
    },[])
}
const res4 = flatten(arr)
console.log(res4)
//[1, 2, 3, 4, 5, 6]

在reducer函数里面每一次都向累加器pre追加数据(数据的concat方法),追加数据的时候判断当前元素是否是数组,如果不是数组则直接追加,如果是则递归调用flatten进行转换。

1.5 方法5:使用递归函数

//方法5:使用递归函数
const res5 = []
const flatten2 = arr =>{
    for (let i=0;i<arr.length;i++) {
        if (Array.isArray(arr[i])) {
            flatten2(arr[i]);
        } else {
            res5.push(arr[i])
        }
    }
}
flatten2(arr)
console.log(res5)
//[1, 2, 3, 4, 5, 6]

这种方法也是判断当前元素是否是数组,如果不是数组则直接追加,如果是则递归调用flatten2进行转换。

2.数组去重

// 数组去重方法
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// 期待结果:[1, '1', 17, true, false, 'true', 'a', {}, {}]

2.1 方法1:使用Set

构造Set的时候去掉了多余的元素,然后使用Array.from()将set转换成数组。

// 方法1:使用Set
const res1 = Array.from(new Set(arr))
console.log(res1)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

2.2 方法2:两层for循环 + splice

使用两层for循环,第二个循环里判断元素是否已经出现过,如果出现过则删除掉。

// 方法2:两层for循环 + splice 
const unique = arr => {
    let len = arr.length;
    for(let i=0;i<len;i++) {
        for(let j=i+1;j<len;j++) {
            if(arr[i] === arr[j]) {
                arr.splice(j,1);
                // 每删除一个数,j--保证j的值经过自加后不变。同时,len--,减少循环次数提升性能
                len--;
                j--;
            }
        }
    }
    return arr;
}
const res2 = unique(arr)
console.log(res2)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

2.3 方法3:利用indexOf()

定义结果集合res,如果当前元素没有出现在结果集合中则添加,否则跳过。

// 方法3:利用indexOf()
const unique2 = arr => {
    const res = [];
    for(let i=0;i<arr.length;i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res;
}
const res3 = unique2(arr)
console.log(res3)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

2.4 方法4:利用includes()

思想和方法3一样,只不过使用的是includes方法

// 方法4:利用includes()
const unique3 = arr => {
    const res = [];
    for(let i=0;i<arr.length;i++) {
        if(!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res;
}
const res4 = unique3(arr)
console.log(res4)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

2.5 方法5:利用filter

思想类似,如果当前元素已经出现过则arr.indexOf(item) 的值和index就不相等,那么后出现的元素无法加入到结果集合中。

// 方法5:利用filter 
const unique4 =  arr => {
    return arr.filter((item,index) => {
        return arr.indexOf(item) === index
    })
}
const res5 = unique4(arr)
console.log(res5)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

2.6 方法6:利用Map

map判断当前元素是否出现过,如果没出现过则放入到结果集。

// 方法6:利用Map 
const unique5 = arr => {
    const map = new Map()
    const res = []
    for(let i=0; i<arr.length;i++) {
        if(!map.has(arr[i])) {
            map.set(arr[i],true);
            res.push(arr[i])
        }
    }
    return res;
}
const res6 = unique5(arr)
console.log(res6)
// [1, "1", 17, true, false, "true", "a", {…}, {…}]

3.类数组转换为数组

JS中,类数组是指:拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理);不具有数组所具有的方法;JS中常见的类数组有 arguments对象和 DOM方法的返回结果。比如 document.getElementsByTagName()。

下面代码中obj是类数组,res是转化后的结果:

let obj = {
    0: 'hello',
    1: 'world',
    2: 'stydy',
    length: 4,
    3: 'js'
}
let res = ["hello", "world", "stydy", "js"]

3.1 利用Array.from()

// 方法1:利用Array.from()
const res1 = Array.from(obj)
console.log(res1)
//  ["hello", "world", "stydy", "js"]

3.2 方法2:利用Array.prototype.slice.call()

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,大家可以自行google一下这种用法的原理。

// 方法2:利用Array.prototype.slice.call()
const res2 = Array.prototype.slice.call(obj)
console.log(res2)
//  ["hello", "world", "stydy", "js"]

3.3 方法3:扩展运算符

// 方法3:扩展运算符
const res3 = [...obj]
console.log(res3)
//  ["hello", "world", "stydy", "js"]

3.4 方法4:利用concat

// 方法4:利用concat
const res4 = Array.prototype.concat.apply([],obj)
console.log(res4)
//  ["hello", "world", "stydy", "js"]

转载请注明:XAMPP中文组官网 » javascript定义数组的方法,去重,类数组转化为数组

您必须 登录 才能发表评论!