【JS学习笔记 05】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