JavaScript小技巧——数组

数组去重 [...new Set(array)] or arr.filter((value,index)=>arr.indexOf(value)===index)

ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重,可以使用...new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组。

const arr = [1,1,1,2,2,3,3]
const a = [...new Set(arr)]
console.log(a)      //[1,2,3]

若是
const b = new Set(arr)
则此时得到的不是数组,需要经过转化
const c = [...b]即可得到数组

若是数组中包含了一个object ,function或其它数组,就需要使用另一种方法。

除了上面的方法外,还可以使用Array.from(new Set()) 实现。
ps:Array.from()方法从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。

另外,还可以使用Array的.filter及indexOf()来实现。

const arr = [1,1,1,2,2,3,3]
arr.filter((value,index)=>arr.indexOf(value) === index)
arr.forEach((value,index)=>{
    if(arr.indexOf(value) === index){
        console.log(value)          //1 2 3
    }
})

arr.forEach((value,index)=>{
    if(arr.indexOf(value) === index){
        console.log(index)          //0 3 5
    }
})

确保数组的长度 Array.fill()

在处理网格结构时,如果原始数据每行的长度不相等,就需要重新创建该数据。为了确保每行的数据长度相等,可以使用Array.fill来处理:

let array =Array(5).fill('')
console.log(array)      //["", "", "", "", ""]

数组映射 Array.from(array,({x})=>x)

不使用Array.map来映射数组值的方法

const arr = [
    {
        name: 'a',
        age: 33
    },
    {
        name: 'b',
        age: 44
    }
]

const name =Array.from(arr, ({ name })=>name)   //["a","b"]

数组截断 length slice

如果你想从数组末尾删除值(删除数组中的最后一项),有比使用splice()更快的替代方法。

例如,你知道原始数组的大小,可以重新定义数组的length属性的值,就可以实现从数组末尾删除值:

let array = [1,2,3,4,5,6,7]
array.length = 4
console.log(array)

slice()方法运行更快,性能更好

let array = [1,2,3,4,5,6,7]
array = array.slice(0,4)

过滤掉数组中的falsy值 filter(Boolean)

如果你想过滤数组中的falsy值,比如0 undefined null false,那么可以通过map和filter方法实现:

const array = [0, 1, '0', '1',undefined, true, false, null, 'undefined', 'null', NaN, 'NaN', '1' + 0] 

array.map(item => { return item }).filter(Boolean)著

获取数组的最后一项 slice(-1)

数组的slice()取值为正值时,从数组的开始处截取数组的项,如果取值为负整数时,可以从数组末尾开始获取数组项。

let array = [1, 2, 3, 4, 5, 6, 7]

let last = array.slice(-1)  //7

过滤并排序字符串列表 .filter .sort

lastIndexOf()方法返回指定值在调用该方法的字符串中最后出现的位置,如果没有找到则返回-1。

var keywords = ['do', 'if', 'in', 'for', 'new', 'try', 'var', 'case', 'else', 'enum', 'null', 'this', 'true', 'void', 'with', 'break', 'catch']


const filteredAndSortedKeywords = keywords .filter((keyword, index) => keywords.lastIndexOf(keyword) === index) .sort((a, b) => a < b ? -1 : 1);

清空数组 arr.length = 0

let array = [1,2,3,4]
function emptyArray() {
    array = []
}
emptyArray()

还有一种效率更高的方法

function emptyArray() {
    array.length = 0
}
emptyArray()

拍平多维数组 ...

使用...运算符,将多维数组拍平

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

const a = [].concat(...arr)     //[1, 2, 3, 4, 4, 5, 6]

不过上面的方法只适用于二维数组。通过递归调用,可以使它适用于二维以上的数组:

function flattenArray(arr) { 
    const flattened = [].concat(...arr); 
    return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened; 
} 
const array = [1, [2, '大漠'], 3, [['blog', '1'], 2, 3]] 
const flatArr = flattenArray(array)     // [1, 2, "大漠", 3, "blog", "1", 2, 3]

some()方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。
Array.isArray()用于确定传递的值是否是一个Array。

从数组中获取最大值和最小值

const numbers = [15, 80, -9, 90, -99] 
const maxInNumbers = Math.max.apply(Math, numbers) 
const minInNumbers = Math.min.apply(Math, numbers)

or

const numbers = [1, 2, 3, 4]; 
Math.max(...numbers) 
Math.min(...numbers) 

推荐阅读更多精彩内容