本文主要是介绍学习前端二十八天（数组方法），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、多维数组
const matrix = [
[1, 2, 3], // 0
[4, 5, 6], // 1
[7, 8, 9]，// 2
]
console.log(matrix[1][2]); // 6
访问矩阵数组的每个值：
for (let v1 of matrix) {
for (let v2 of v1) {
console.log(v2);
}
}; // 1,2,3,4,5,6,7,8,9
二、转为字符串
let matrix = [
[1, 2, 3], // 0
[4, 5, 6], // 1
[7, 8, 9] // 2
];
console.log(String(matrix)); // 1,2,3,4,5,6,7,8,9
console.log(matrix.toString()); // 1,2,3,4,5,6,7,8,9
三、删改数组
// splice 删改数组
const arr = ["a", "b", "c", "d", "e"];
console.log(arr.splice(1, 2)); // ['b', 'c'],第一个参数为删除开始位置，第二个参数为删除元素个数
arr.splice(3); // 没给第二个参数表示从开始位置往后全部删除
arr.splice(-3, 0); // 开始位置可以是负数，删除元素个数可以为0
// 删除并增加元素
const arr2 = ["a", "b", "c", "d", "e"];
arr2.splice(1, 3, "xc", "xl", "xy"); // 删除指定位置的几个元素后，增加新的元素
arr2.splice(2, 0, "dwd", "d", "dw"); // 不删元素，在指定位置新增元素
// slice 截取数组， 不会修改数组
const arr = ["a", "b", "c", "d", "e"];
console.log(arr.slice(1, 3)); // 取起始位置，不取终点位置。前小后大
arr.slice(-1); // 获取最后一个元素
// slice 重要应用：复制数组
const arr2 = arr.slice(0);
console.log(arr2 === arr); // false
// concat 合并数组
const arr1 = ["a", "b", "c"];
const arr2 = ["a", "b", "c"];
const arr3 = ["a", "b", "c"];
const arr4 = ["a", "b", "c"];
const arr5 = ["a", "b", "c"];
const arrb = arr1.concat(arr3, arr4);
const arr = arr1.concat(arr2, arr3, ["vv", "ff"]); // 数组拼接，代码顺序决定显示顺序
// 复制数组
方法一： const arrNew = arr1.concat([]);
方法二： const arrNew = [].concat(arr1);
四、遍历函数
// 数组的遍历 forEach
const arr = ["a", "b", "c"];
arr.forEach((i, j, ar) => console.log(j, i, ar) );
// 第一个变量表示元素，第二个变量表示下标索引，依次赋值,第三个参数表示数组本身
// 根据数组元素个数，运行个数次的函数
五、在数组中搜索
1、indexOf/lastIndexOf 判断某元素在数组中是否存在
const arr = ["a", "b", "c"];
console.log(arr.indexOf('b',1)); // 从头到尾，返回元素第一次出现的下标索引，第二个参数决定起始位置
console.log(arr.lastIndexOf('c',)); // 从尾到头 ，返回元素第一次出现的下标索引，第二参数决定起始位置
console.log(arr.lastIndexOf('xc',)); // -1 不存在该元素
2、 includes(" ",pow) 判断字符串中是否包含某字符或某字符串，返回布尔值，第二个参数决定搜索的起始位置
console.log(arr.includes('a', 1)); //false
3、find(function (v, i) 返回true时中断循环；find返回中断位置时的元素
4、findIndex(function (v, i) 返回true时中断循环；返回中断位置时的下标索引
findLastIndex 同findIndex 从尾至头循环
5、filter 在数组中搜索想要的元素（所有）
const arr = ["adad", "bdwadw", "cdwad", 'bwdwdw'];
// filter 返回true时，会选中这时的元素，并继续循环，将所有满足条件的元素集合成数组返回
let r = arr.filter((v) => (v.startsWith("b")));
console.log(r); //['bdwadw', 'bwdwdw']
六、转换数组
1、map 对数组的每个元素都调用函数，并返回结果数组，前后个数相等
const arr = ["adad", "bdwadw", "cdwad", 'bwdwdw'];
let newArr = arr.map((v) => v + "个"); // 给每个元素都加上“个”并返回到一个新数组中
console.log(newArr);
2、sort 对数组(字母，数字)排序
const arr = [1, 20, 88, 655, 2, 33];
// 升序排列
console.log(arr.sort((a, b) => a > b ? 1 : -1));
// 降序排序
console.log(arr.sort((a, b) => a < b ? 1 : -1));
// 针对数字简便写法,升序
console.log(arr.sort((a, b) => a - b));
// 针对数字简便写法,降序
console.log(arr.sort((a, b) => b - a));
// 对单词进行排序
const newArr = ['css', 'js', 'vue', 'html'];
newArr.sort((a, b) => a > b ? 1 : -1);
console.log(newArr);
3、reverse 颠倒元素顺序
const newArr = ['css', 'js', 'vue', 'html'];
console.log(newArr.reverse()); // ['html', 'vue', 'js', 'css']
4、split 通过给定的分隔符 delim 将字符串分割成一个数组
const str = "js,css,html,vue";
const arr1 = str.split(","); // 通过“,”将字符串分割成一个数组
const arr2 = str.split(''); // 空分隔符，将每个字符分割为一个数组
const arr3 = str.split('s');// 作为分隔符的元素不会返回
console.log(arr1); //['js', 'css', 'html', 'vue']
console.log(arr2);//['j', 's', ',', 'c', 's', 's', ',', 'h', 't', 'm', 'l', ',', 'v', 'u', 'e']
console.log(arr3);//['j', ',c', '', ',html,vue']
5、join 将数组转成字符串,可以自定义分隔符,分隔符会返回到字符串中
const arr = ['js', 'css', 'html', 'vue'];
let str1 = arr.join("s");
let str2 = arr.join("");
let str3 = arr.join();
console.log(str1); // jsscssshtmlsvue
console.log(str2); // jscsshtmlvue
console.log(str3); // js,css,html,vue
6、reduce
// 方法第二个参数作为sum的初始值，此时函数执行的次数为数组元素的个数
// 方法第二个参数不存在，sum的初始值为回调函数的第一个元素，此时函数执行的次数为数组元素个数-1
// 回调函数的返回值，会直接赋值给下一个函数的sum
// reduce方法的返回值，为最后一次回调函数的返回值
const arr = ["a", "b", "c", "d", "e"];
const r = arr.reduce(function (sum, v, i) {
console.log(sum, v, i);
return sum + 1;
}, 0)
console.log(r)；// 5
七、判断数组
// Array.isArray 判断一个东西是否是数组
alert(Array.isArray({})); // false
alert(Array.isArray([])); // true
这篇关于学习前端二十八天（数组方法）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
