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

一、多维数组

const matrix = [

1, 2, 3, // 0

4, 5, 6, // 1

7, 8, 9,// 2

]

console.log(matrix12); // 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

相关推荐
库奇噜啦呼24 分钟前
【iOS】源码学习-锁的原理
学习·ios·cocoa
_李小白28 分钟前
【android opencv学习笔记】Day 33: 直线检测之图像轮廓检测
android·opencv·学习
AI_零食30 分钟前
HarmonyOS 表单验证机制深度解析与实践
学习·华为·harmonyos·鸿蒙·鸿蒙系统
云草桑43 分钟前
.NET10+AI 架构师全套实战学习文档(含源码、案例、面试题、项目源码)
人工智能·学习·ai·.net
暗夜猎手-大魔王1 小时前
hermes源码学习5-Provider 运行时解析
大数据·人工智能·学习
-To be number.wan1 小时前
计算机组成原理 | 指令寻址
学习·计算机组成原理
Niuguangshuo1 小时前
LangChain 学习之旅(二):用 LCEL 与解析器构建标准流水线
学习·langchain·unix
The Sheep 20231 小时前
C#多线程学习
开发语言·学习·c#
智码看视界1 小时前
老梁聊全栈系列:Vue2与Vue3核心区别及学习路线指南
前端·vue.js·学习
jinxindeep1 小时前
Dexterity-BEV:跨本体&跨相机&Action三维空间对齐,推动通用机器人策略学习
数码相机·学习·机器人