我们在日常开发过程中,时常会用到对数组的操作。不管是在ES5还是ES6中,都有很多操作数组的方法,如果我们掌握了这些方法的熟练使用,那开发过程别提多爽了。
1. 数组扁平化
高级操作
var arr1 = [1,2,3,[4,5,[6,7,8]]]
var arr_1 = arr1.flat(Infinity)
常规操作:利用递归和数组合并方法 concat
实现扁平。
function flatten(arr) {
while(arr.some(item=>Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
2. 去重
高级操作(两种方法)
var arr1 = [1,2,3,3]
arr_1 = [...new Set(arr1)]
var arr1 = [1,2,3,3]
arr_1 = Array.from(
new Set(arr1)
)
Array.from() 可以将类数组转换为数组,类数组包括但又不限于 Set
/ Map
,还有包括可遍历的对象。
Set
是ES6提供的新的数据结构,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的。这也就是我们要使用这一特性,实现去重。
常规操作
function distinct(arr) {
let resule = [], i, j;
for (i = 0; i < arr.length; i++) {
for (j = i+1; j < arr.length; j++) {
if(arr[i] === arr[j]){
j = ++i
}
}
resule.push(arr[i])
}
return resule
}
3. 排序
高级操作
var arr1 = [1,2,4,3,8,5]
arr1.sort() //升序
var arr1 = [1,2,4,3,8,5]
arr1.sort((a, b) => b - a) //降序
常规操作
选择排序:
function sortFun(arr) { // 选择排序
let i, j;
for (i = 0; i < arr.length; i++) {
for (j = i+1; j < arr.length; j++) {
if(arr[i] < arr[j]){
[arr[i], arr[j]] = [arr[j], arr[i]]
}
}
}
return arr
}
冒泡排序:
function bubleSort(arr) { //冒泡排序
let i, j;
for (i = arr.length-1; i > 2; i--) {
for (j = 0; j < i; j++) {
if(arr[i] > arr[j]){
[arr[i], arr[j]] = [arr[j], arr[i]]
}
}
}
return arr
}
4. 最大值、最小值
高级操作
var arr1 = [1,2,4,3,8,5]
Math.max(...arr1)
Math.min(...arr1)
Math.max() 方法可返回两个指定的数中带有较大的值的那个数
var arr1 = [1,2,4,3,8,5]
arr1.reduce((prev, cur, curIndex, arr) => {
return Math.max(prev,cur);
//return Math.min(prev,cur);
})
常规操作: 先排序,再取最大/最小值。
5. 求和
高级操作
arr1.reduce((prev, cur, curIndex, arr) => {
return prev + cur
})
常规操作
function sumFun(arr){
let sum = 0, i;
for (i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
6. 合并
高级操作
var arr1 = [1,2,3,4]
var arr2 = [5,6,7,8]
arr1.concat(arr2)
[...arr1,...arr2]
常规操作
var arr1 = [1,2,3,4]
var arr2 = [5,6,7,8]
arr2.forEach(item => {
arr1.push(item)
})
7. 判断是否包含值
高级操作
var arr1 = [1,2,3,4]
arr1.includes(1) // true 或 false
var arr1 = [1,2,3,4]
arr1.indexOf(0) // 该元素在数组内的位置 或者 -1
var arr1 = [1,2,3,4]
arr1.find((item) => item === 1) //返回该元素 或者 undefined
var arr1 = [1,2,3,4]
arr1.findIndex((item) => item === 1) //返回该元素所在位置 或者 -1
常规操作
arr1.some(item => {
return item === 0
})
//返回true 或者 false
8. 类数组转换
高级操作
Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]
类数组:表示有length
属性,但是不具备数组的方法call
,apply
:是改变slice
里面的this
指向arguments
,所以arguments
也可调用数组的方法Array.from
是将类似数组或可迭代对象创建为数组...
是将类数组扩展为字符串,再定义为数组
常规操作
Array.prototype.slice = function(start,end){
var result = new Array();
start = start || 0;
end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键
for(var i = start; i < end; i++){
result.push(this[i]);
}
return result;
}
9. 每一项设置值
高级操作
var arr1 = [1,2,3,4]
arr1.fill('1') //["1", "1", "1", "1"]
fill() 方法用于将一个固定值替换数组的元素,是ES6
新增的方法
array.fill(value, start, end)
参数说明value必需。要填充的值start可选。开始填充位置。end可选。停止填充位置 (默认为 array.length)
常规操作
var arr1 = [1,2,3,4]
arr1.map(() => '1') //["1", "1", "1", "1"]
10. 每一项是否满足
var arr1 = [1,2,3,4]
arr1.every(item => {
return item > 0
} //true
11. 有一项满足
var arr1 = [1,2,3,4]
arr1.some(item => {
return item > 4
} //false
12. 过滤数组
var arr1 = [1,2,3,4]
arr1.filter(item => {
return item > 2
} //[3, 4]
filter() 是ES5的api,返回满足添加的项的数组。
13. 对象和数组的转换
var obj = {
name: '张三',
age: '12'
}
Object.keys(obj) // ["name", "age"]
Object.values()
Object.values(obj) // ["张三", "12"]
Object.entries()
Object.entries(obj) //[[name,'张三'],[age,12]]
14. 对象转换为数组
var obj = {
name: '张三',
age: '12'
}
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
let obj_ = {}
obj_[key] = obj[key]
arr.push(obj_)
}
}
console.log(arr); // [{name: '张三'}, {age: '12}]