前言
数组作为在开发中常用的集合，除了for循环遍历以外，还有很多内置对象的方法，包括map，以及数组筛选元素filter等。
注：文章结尾处附深层次数组扁平化方法操作。
作为引用数据类型的一种，在处理数组Array的时候，我们需要考虑到深拷贝和浅拷贝的情况
可以参考以下文章：
- javaScript深拷贝和浅拷贝的简单介绍
- javaScript中一些常见的数据类型检查校验
一、常用数组操作方法
push末尾追加元素
let user = ["zhangsan", "lisi"];
console.log(user.push("xiaoming")); // 3
console.log(user); // ["zhangsan", "lisi", "xiaoming"]
let user1 = ["xiaowang", "xiaoming"];
let user2 = ["zhangsan", "lisi"];
console.log(Array.prototype.push.apply(user1, user2)); // 4
console.log(user1); // ["xiaowang", "xiaoming", "zhangsan", "lisi"]pop删除数组末尾元素
let user = ["zhangsan", "lisi"];
console.log(user.pop()); // lisi
console.log(user); // ["zhangsan"]
let empArray = [];
console.log(empArray.pop()); // undefinedsort排序
const user = ["zhangsan", "lisi", "xiaoming", "xiaowang"];
user.sort();
console.log(user); // ["lisi", "xiaoming", "xiaowang", "zhangsan"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // [1, 100000, 21, 30, 4]
var numbers = [4, 2, 5, 1, 3];
let sortFun = function (a, b) {
return a - b;
};
numbers.sort(sortFun);
console.log(numbers); // [1, 2, 3, 4, 5]shift数组开头添加元素 && unshift数组开头删除元素
let user = ["zhangsan", "lisi"];
console.log(user.shift()); // zhangsan
console.log(user); // ["lisi"]
let empArray = [];
console.log(empArray.shift()); // undefined
let user1 = ["xiaoming", "xiaowang"];
console.log(user1.unshift("xiaoming1", "xiaowang1")); // 4
console.log(user1); // ["xiaoming1", "xiaowang1", "xiaoming", "xiaowang"]数组合并concat
let user = ["zhangsan", "lisi"];
let user1 = [["xiaowang"], { name: "xiaoming" }];
console.log(user.concat(user1)); // ["zhangsan","lisi",["xiaowang"],{name: "xiaoming"}]
console.log(user); // ["zhangsan", "lisi"]indexOf查找元素 && includes查找元素是否存在
let user = ["zhangsan", "lisi"];
console.log(user.indexOf("lisi")); // 1
console.log(user.indexOf("xiaoming")); // -1
let user1 = ["zhangsan", ["xiaowang"], { name: "xiaoming" }];
console.log(user1.includes("zhangsan")); // true
console.log(user1.includes(["xiaowang"])); // false
console.log(user1.includes({ name: "xiaoming" })); // falsereverse反转数组
let user = ["zhangsan", "lisi", "xiaoming"];
console.log(user.reverse()); // ["xiaoming", "lisi", "zhangsan"]
console.log(user); // ["xiaoming", "lisi", "zhangsan"]
let user1 = ["zhangsan", ["xiaowang", "lisi"], { name: "xiaoming" }];
console.log(user1.reverse()); // [{name: "xiaoming"},["xiaowang", "lisi"],"zhangsan"]数组切割成字符串join
let user = ["zhangsan", "lisi", "xiaoming"];
console.log(user.join(" ")); // zhangsan lisi xiaoming
console.log(user.join("")); // zhangsanlisixiaoming
console.log(user.join(",")); // zhangsan,lisi,xiaoming
console.log(user.join({ a: 1 })); // zhangsan[object Object]lisi[object Object]xiaoming
console.log(user); // ["zhangsan", "lisi", "xiaoming"]slice操作数组，替换，删除，新增
slice使用的范围较广，不同的参数可以实现对数组的删除，新增和替换等，使用的时候需要注意参数的具体使用方法
const animals = ["ant", "bison", "camel", "duck", "elephant"];
console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // Array ["camel", "duck"]
console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // Array ["duck", "elephant"]
console.log(animals.slice(2, -1)); // Array ["camel", "duck"]
console.log(animals.slice()); // Array ["ant", "bison", "camel", "duck", "elephant"]
const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb"); // 下表为1，插入一个元素
console.log(months); // ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, "May"); // 替换下标为4的元素
console.log(months); // ["Jan", "Feb", "March", "April", "May"]
let del = months.splice(1, 1); // 删除
console.log(del); // ["Feb"]
console.log(months); // ["Jan", "April", "May"]every校验数组所有元素
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // truesome 测试数组中是不是至少有1个元素通过了被提供的函数测试。返回值是布尔值
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0; //确认偶数
console.log(array.some(even)); // true;深层次递归数组flat
let arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]
let arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]
let arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let objArray = [{ name: "zhangsan", children: ["张三"] }];
console.log(objArray.flat(Infinity)); // [{ name: "zhangsan", children: ["张三"] }]map遍历数组
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
console.log(map1); // [2, 8, 18, 32]二、总结
到此这篇关于JavaScript数组常用方法解析和深层次js数组扁平化的文章就介绍到这了,更多相关JavaScript数组内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
