学习前端二十八天(数组方法)

一、多维数组

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

相关推荐
西岸行者7 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意7 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码7 天前
嵌入式学习路线
学习
毛小茛7 天前
计算机系统概论——校验码
学习
babe小鑫7 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms7 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下7 天前
Linux Virtual Server(LVS)学习总结
linux·学习·lvs
我想我不够好。7 天前
2026.2.25监控学习
学习
im_AMBER7 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J7 天前
从“Hello World“ 开始 C++
c语言·c++·学习