【JS学习笔记 05】JavaScript 数组详解
2020-07-29 12:36
148 查看
JavaScript 数组详解
JavaScript 数组
数组是多个变量值的集合,数组是Array 对象的实例,所以可以像对象一样调用方法。
数组的初始化
<1> 通过 new 关键字初始化
- 数组是Array 对象的实例,所以可以像对象一样使用new关键字初始化,构造函数可以接受一个参数用以代表其初始化长度,其重载构造还支持直接传入数据进行初始化。
//创建一个长度为10的数组,会填充10个undefined的值进入数组 let arr1 = new Array(10); //也可以初始化其中的值 let arr2 = new Array(1,2,3,4,5,6,7,8,9,0);
<2>使用字面量创建
- 使用字面量创建是推荐的简单作法,JS中
[]
代表数组,直接用[]
是初始化数组的最常用方式
const array = [1, 2,3,4,5,6,7,8,9,0];
<3>Array.of 创建
Array.of()
方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
Array.of(7); // [7] ,区别Array(),而不是创建容纳7个变量的空数组 Array.of(1, 2, 3); // [1, 2, 3]
数组的兼容性
JavaScript 数组可以容纳各种类型的数据类型 ,包括
数字 、字符串 、布尔值、对象等
let arr = [3.14,"str",true,false,undefined,NaN,{name : "john",age : 29}];
数组与字符串
大部分数据类型都可以使用
.toString()函数转换为字符串。大部分数据类型都可以如此转换为字符串,而且字符串可以直接拆分为一个个字符组成的字符串数组
let arr = [1,2,3,4,5,6,7,8,9]; //数组可以通过Array对象里的.toString()转换为字符串, let str = arr.toString() //字符串通过展开语法转换为数组 let str = "this is a string"; let strRes = [...str]; //strRes == [t,h,i,s, ,a, ,s,t,r,i,n,g]
Array.from
使用Array.from可将类数组转换为数组,类数组指包含 length 属性或可迭代的对象
let set = new Set(); let map = new Map(); let str = new String(); let arr = Array.from(set); let arr1 = Array.from(map); let arr2 = Array.from(str);
为对象设置length属性后也可以转换为数组,但要下标为数值或数值字符串
let stu = { 0 : "john", 1 : 12, length: 2 }; console.table(Array.from(stu));
基本操作
元素访问
JS中的元素访问与其他主流编程语言一样采用
数组签名[数组下标]的方式访问数组元素,注意数组下标从0开始计数,这与很多语言的机制相同。
let arr = [1,2,3,4,5]; //访问数组中第二个元素 let a = arr[1];
增删改查
添加元素
array.push
压入元素,直接改变元数组,返回值为数组元素数量array.unshift
从数组前面添加一个元素array.fill
填充数组
let arr = [3, 5, 4, 2, 1]; arr.push(7); console.log(arr);//[ 3, 5, 4, 2, 1, 7 ] arr.unshift(6); console.log(arr);//[ 6,3, 5, 4, 2, 1, 7 ] arr.fill(1);//[1,1, 1, 1, 1, 1, 1]
删除元素
array.shift
从数组前面取出一个元素array.pop
从末尾弹出元素,直接改变元数组,返回值为弹出的元素
let arr = [3, 5, 4, 2, 1]; arr.pop(); // [ 3, 5, 4, 2 ] arr.shift();//[ 5, 4, 2 ]
访问和查找元素
- 使用
数组签名[数组下标]
返回指定下标的元素 - 使用
find
方法接收一个回调函数,回调函数返回一个区间。找到区间中的值后会把值返回出来,返回第一次找到的值 不继续查找,如果找不到返回值为undefined
let res = [4,2,3,1,5].find(x => x == 1); // res = 1
- 使用
indexOf/lastIndexOf
传入一个值,向前/向后查找与该值相等的元素出现的位置,找不到返回-1,第二个参数用于指定查找开始位置
let res = ["string",false,1,2,4,3].indexOf("string"); // res = 0 res = ["string",false,1,2,4,3].lastIndexOf("string");//res = 0
includes
查找值是否存在,存在返回true,不存在返回false
let res = ["string",false,1,2,4,3].includes(false);//res = true
修改元素
直接使用赋值语句修改
let arr = [3,5,4,2,1]; arr[1] = 9;
截取数组
since使用 slice 方法从数组中截取部分元素组合成新数组(并不会改变原数组),不传第二个参数时截取到数组的最后元素。
let arr = [0, 1, 2, 3, 4, 5, 6]; console.log(arr.slice(1, 3)); // [1,2]
数组排序
reverse: 数组反转
sort: sort每次使用两个值进行比较
Array.sort((a,b)=>a-b
- 返回负数 a 排在 b前面,从小到大
- 返回正数 b 排在a 前面
- 返回 0 时不动
- 默认值从小于大排序数组元素
let arr = [2,3,1,5,4,6]; //默认升序 arr.sort();//[ 1, 2, 3, 4, 5, 6 ] //升序 : arr.sort((a,b) => a - b); // [ 1, 2, 3, 4, 5, 6 ] //降序: arr.sort((a,b) => b - a); //[ 6, 5, 4, 3, 2, 1 ]
展开语法
使用
...可将一个数组或其他类数组对象展开为一串元素。作为左值可以把一串元素转换为一个数组/类数组 ,作为右值可以展开一个数组/类数组。
例如 展开 [1,2,3] 后的结果为 1,2,3 (散开的序列)
数组合并
使用展开语法来合并数组相比
concat要更简单,使用
...可将数组展开为多个值。
let arr1 = ["a",true]; let arr2 = ["一","二"]; //使用展开语法可以合并数组,还可以在之中插入元素 let arr = [...arr1,"插入的数据",...arr2]; console.table(arr);
函数参数
使用展示语法可以替代
arguments来接收任意数量的参数
function sum(...arg) { return arg.reduce((a,b) => a+b); } console.log(sum(1,2,3)); // 6
还可以利用这一特性接受一个数组作为参数。(本质是把数组展开为了参数)
function fun(a,b,c,d) { console.log(a+b+c+d) } let arr = [1,2,3,4]; fun(...arr); // 10
还可以只接受一部分参数
function fun(a,...args) { console.log(a,args); } fun("str",2,3,4);// "str",[2,3,4]
扩展方法
every用于递归的检测元素,要所有元素操作都要返回真结果才为真。
let arr = [7,3,2,5,4,6,1]; //arr 所有元素都大于2 ? let res = arr.every(value => value > 2); // res == false //arr 所有元素都大于 0 ? res = arr.every(value => value > 0); //res == true
some如果有一个返回true,表达式结果就是真,第一个参数为元素,第二个参数为索引,第三个参数为原数组。
let arr = [7,3,2,5,4,6,1]; // arr 里存在大于6的数 ? let res = arr.some(value => value > 6); //res == true // arr 里存在小于0的数 ? res = arr.some(value => value < 0); //res == false
filter过滤数据中元素
let arr = [7,3,2,5,4,6,1]; let res = arr.filter(value => value > 3); // res == [ 7, 5, 4, 6 ]
map映射数组上的所有元素到函数上
let arr = [7,3,2,5,4,6,1]; //把arr里的所有元素*2 let res = arr.map(value => value * 2); //[ 14, 6, 4, 10, 8, 12, 2 ]
reduce函数可以迭代数组的所有元素.
reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
et arr = [1,2,3]; //等效计算 res 1 + 2*2 + 2*3; let res = arr.reduce((total,value) => total += value*2); //res == 11 res = 1 + 2 * 2 + 2 * 3; //res = 11
相关文章推荐
- [前端JS学习笔记]JavaScript 数组
- 【JS学习笔记 06】JavaScript 函数详解
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理
- [前端JS学习笔记]JavaScript 数组
- [前端JS学习笔记]JavaScript 数组
- 韩顺平 javascript教学视频_学习笔记34_js正则表达式详解
- javascript入门经典学习三(使用变量,字符串数组)(附js中文手册)
- Javascript学习笔记-详解in运算符
- javascript学习笔记三之js对象
- JavaScript学习笔记(十七)js 优化
- JavaScript学习笔记 创建数组,数组方法使用
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理
- js数组处理学习笔记一
- Javascript学习笔记-详解in运算符
- javascript学习笔记(八) js内置对象
- JavaScript高级程序设计(第3版)学习笔记10 再访js对象
- js学习笔记——对象和数组
- 【js学习笔记-045】-- 类对象数组
- Python学习笔记:05 数组的基本用法(Tuple和List)
- JavaScript学习笔记(一) js基本语法