数组

#数组#

##数组基础##

数组是大多数语言里面最常见的一种数据结构，它是一个有序的值列表。

###创建数组###

1.创建字面量数组

let arr=[];

2.创建构造函数数组

let arr=new Array();

注：无论是字面量形式数组，还是构造函数数组，当我们要使用typeof打印数据类型时，都会返回一个object

例：

let arr1 = [];

let arr2 = new Array();

console.log(typeof arr1);//object

console.log(typeof arr2);//object

###赋值###

1.先声明再赋值

let arr = [];

arr[0] = 1;

arr[1] = 2;

arr[2] = 3;

注（重要！！！）：数组的下标是从0开始的。

2.声明直接赋值

let arr = [1,2,3,4,5];

注：我们可以在数组任意位置进行赋值，数组长度会自动改变，空的位置使用undefined填充。

例：

let arr = [];

arr[0] = 1;

arr[4] = 10;

console.log(arr);

//[ 1, <3 empty items>, 10 ]

###访问###

例：

let arr = [1,2,3,4,5];

console.log(arr[0]);//1

//访问下标为0的值，也就是数组的第一个数

除了这种方式，我们还可以使用变量的方式来访问

例2：

let arr = [1,2,3,4,5];

let i = 2;

console.log(arr[i]);//3

###删除###

我们可以用delete来删除数组的某一个元素，但删除的元素位置不会消失，会有个替代：

let arr = [1,2,3,4,5];

delete arr[2];//删除数组中的第3个元素；

console.log(arr);

//[ 1, 2, <1 empty item>, 4, 5 ]

###遍历###

1.for循环遍历

使用最多的一种遍历方法，例：

let arr = [1, 2, 3, 4, 5];

for (let i=0;i<arr.length;i++) {

console.log(arr[i]);

}// 1

// 2

// 3

// 4

// 5

2.for-in遍历

for-in主要迭代的是数组的键，然后我们通过键就可以找到相应的数组元素。

例：

let arr = [1, 2, 3, 4, 5];

for (let i in arr) {

console.log(`键为{i}的元素值为${arr[i]}`);

}

// 键为0的元素值为1

// 键为1的元素值为2

// 键为2的元素值为3

// 键为3的元素值为4

// 键为4的元素值为5

注（再次声明！！！）：数组的下标是从0开始.

3.for-of遍历

for-of是直接迭代数组的值

例：

let arr = [1, 2, 3, 4, 5];

for (let i of arr) {

console.log(i);

}// 1

// 2

// 3

// 4

// 5

4（扩展）.forEach遍历

forEach涉及到了回调，目前并不说回调内容：

let arr = [1,2,3,4,5,6,7,8,9,10];

//将数组的每一项传入到回调函数，然后执行回调函数里面的操作

let i = arr.forEach(function(item){

console.log(item);

});

5.使用迭代器遍历

在ES6中，还专门提供了三个使用迭代可迭代的元素方法，分别是keys（），values（）和entries（）。

（1）keys（）它便利出的是数组的键

例：

let arr = [3,5,8,1];

for(let i of arr.keys()){

console.log(i);

}

// 0

// 1

// 2

// 3

（2）entrise（）遍历出的是数组的键和值

例：

let arr = [3,5,8,1];

for(let i of arr.entries()){

console.log(i);

}

// [ 0, 3 ]

// [ 1, 5 ]

// [ 2, 8 ]

// [ 3, 1 ]

（3）values（）它可以找到可迭代元素的值

注：数组内部无法使用values（）方法

###解构###

在JS中，解构数组就是讲一个复杂类型的数据分解为一个普通类型的数据。

例：

let arr = [1,2,3];

let [a,b,c] = arr;

console.log(a);//1

console.log(b);//2

console.log(c);//3

在其中，可以使用，跳过不想解构的数组

例：

let arr = [1,2,3];

let [a,,b] = arr;

console.log(a);//1

console.log(b);//3

###多维数组###

例：

let a = ["Bill","Mary","Lucy"];

let b = [21,24,27];

let c = [a,b];//这里c就是一个多维数组

1.访问:

let a = ["Bill","Mary","Lucy"];

let b = [21,24,27];

let c = [a,b];

console.log(c[0][2]);//Lucy

2.解构

let arr = [[1,2,3],4,5];

let [a,b,c] = arr;

console.log(a);//[1,2,3]

console.log(b);//4

console.log(c);//5

###扩展运算符###

从ES6开始新增的运算符，用于去除刻碟带对象的每一项。

1.例：

let a = ["Bill","Mary","Lucy"];

let b = [21,24,27];

let c = [...a,...b];

console.log(c);

//[ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ]

2.字符串转化为数组

例：

let str = "Hello";

let arr = [...str];

console.log(arr);

//[ 'H', 'e', 'l', 'l', 'o' ]

##数组属性##

###相关属性###

length：返回数组元素的个数

例：

let arr = [1,2,3,4,5];

console.log(arr.length);//5

###数组的相关方法###

1.添加删除

数组像栈一样。

栈是一种LIFO(Last-In-First-Out)数组解构，这种数据结构特点是后进先出。

例：

let arr = [];

let i = arr.push("red","blue");//push在数组后面插入括号中内容，内容可以用，隔开，插入多个。

console.log(arr);//[ 'red', 'blue' ]

console.log(i);//2

let j = arr.pop();//pop从数组最后开始删除

console.log(arr);//[ 'red' ]

console.log(j);//blue

let arr = [];

arr.push("red","green","pink")

let item = arr.shift();//shift从数组前面删除

console.log(item);//red

console.log(arr);//[ 'green', 'pink' ]

let arr = [];

arr.unshift("red","green","pink");//unshift从数组前面开始添加

let item = arr.pop();

console.log(item);//pink

console.log(arr);//[ 'red', 'green' ]

2.操作方法

（1）concat（）：先船舰当前数组的一个副本，然后将接收到的参数添加到副本的末尾，最后返回新构建的数组，但原来的数组不会变化

例：

let arr = [1,2,3];

let arr2 = arr.concat("red","blue");

console.log(arr);//[ 1, 2, 3 ]

console.log(arr2);//[ 1, 2, 3, 'red', 'blue' ]

（2）slice（）：它可以接受一个或者两个参数，代表返回项的起始和结束位置。

一个参数：代表起始位置，返回从指定的起始位置到数组末尾的所有项目

两个参数：代表从指定的起始位置到指定的末尾位置的项，但不包括结束位置的项目。

注：slice（）方法不会影响原始数组

例：

let arr = [1,2,3,4,5,6,7,8,9,10];

//一个参数

let i = arr.slice(3);

console.log(i);//[ 4, 5, 6, 7, 8, 9, 10 ]

console.log(arr);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

//两个参数

let j = arr.slice(2,6);

console.log(j);//[ 3, 4, 5, 6 ]

console.log(arr);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

注：如果传入的是负数，用数组的长度加上该数来确定相应的位置

（3）splice（）：它可以实现三种类型操作，删除插入和替换

——删除

例：

let arr = [1,2,3,4,5,6,7,8,9,10];

//从下标为3的元素开始删除，删除5个元素

//将删除的元素返回给i

let i = arr.splice(3,5);

console.log(i);//[ 4, 5, 6, 7, 8 ]

console.log(arr);//[ 1, 2, 3, 9, 10 ]

——插入

例：

let arr = [1,2,3,4,5,6,7,8,9,10];

//从下标为3的元素之前开始插入

let i = arr.splice(3,0,"red","blue");

console.log(i);//[]

console.log(arr);

//[ 1, 2, 3, 'red', 'blue', 4, 5, 6, 7, 8, 9, 10 ]

——替换

例：

let arr = [1,2,3,4,5,6,7,8,9,10];

//从下标为3的元素之前开始插入

//插入多少，就刚好删除多少

let i = arr.splice(3,2,"red","blue");

console.log(i);//[ 4, 5 ]

console.log(arr);

//[ 1, 2, 3, 'red', 'blue', 6, 7, 8, 9, 10 ]

（4）join（）：将数组转为字符串，可以传入分隔符作为参数

例：

let arr = [1,2,3];

let str = arr.join("");

console.log(str);//123

let str2 = arr.join(",");

console.log(str2);//1,2,3

（5）split（）：将字符串转为数组，传入参数指明以什么作为分隔符

let str = "Hello";

let arr = str.split("");console.log(arr);//[ 'H', 'e', 'l', 'l', 'o' ]

let arr2 = str.split("l");

console.log(arr2);//[ 'He', '', 'o' ]

##重排##

1.reverse（）：反转数组项的顺序

注：使用该方法会同时改变原来数组的顺序，而不是返回一个副本

例：

let arr = [1,2,3,4,5];

console.log(arr.reverse());//[ 5, 4, 3, 2, 1 ]

console.log(arr);//[ 5, 4, 3, 2, 1 ]

2.sort()：按照升序顺序排列数组每一项

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort());

//[ -12, 0, 12, 23, 3, 7 ]

可以看到，我们调用sort（）方法后排序并没有正确的按照升序来排序。

原因是sort（）方法排序会先调用每一个元素的toString（）转型方法，然后比较得到的字符串，即使每一项都是数值，sort（）方法比较的也是字符串

解决办法：sort（）可以接受一个比较函数作为参数

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort(function(a,b){

if(a < b){

return -1;

}else if(a > b){

return 1;

}else{

return 0;

}

}));

如果要进行降序排列只需要将返回值修改即可。

当然，还有一种更简单的方法，

例：

let arr = [0,12,3,7,-12,23];

console.log(arr.sort(function(a,b){

return a - b;

//降序就返回 b - a

}));

注：reverse（）和sort（）返回值是经过排列后的数组

##位置##

1.indexOf（）：查找项目索引，他是从数组开头开始找，如果没找到就返回-1

例：

let arr = ["H","e","l","l","o"];

console.log(arr.indexOf("l"));//2

console.log(arr.indexOf("z"));//-1

2.lastIndexOf（）：查找起点位置索引，从数组末尾开始找，没找到就返回-1

例：

let arr = ["H","e","l","l","o"];

console.log(arr.lastIndexOf("l"));//3

console.log(arr.indexOf("z"));//-1

3.includes（）：查看数组是否包含某个元素，是就返回true，否则返回false

例：

let arr = ["1","2","3"];

console.log(arr.includes(2));//flase

console.log(arr.includes("2"));//true

console.log(arr.includes(7));//false

#集合#

Set集合是一种无重复（重点！！！）元素的列表，这是这种数据结构最大的特点。

##创建集合##

let s1 = new Set();

let s2 = new Set([1,2,3]);

console.log(s1);//Set {}

console.log(s2);//Set { 1, 2, 3 }

注：JS中严格区分大小写

##添加##

我们可以用add（）给集合添加值

例：

let s1 = new Set();

s1.add(1);

console.log(s1);//Set { 1 }

s1.add(2).add(3).add(4);

console.log(s1);

//Set { 1, 2, 3, 4 }

例2：

let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set { [ 1, 2, 3 ] }

##相关属性和方法##

1.size:

它可以获取元素的个数，和数组的length相似

例：

let s1 = new Set([1,2,3]);

console.log(s1.size);//3

2.has（）：

它可以查看一个集合中是否包含某一个值

例：

let s1 = new Set([1,2,3]);

console.log(s1.has(1));//true

console.log(s1.has("1"));//false

3.delete：

它可以删除Set对象里某一个元素

例：

let s1 = new Set([1,2,3]);

s1.delete(2);

console.log(s1);//Set { 1, 3 }

//ဌํጱزᔰԞӧտಸᲙ

s1.delete("2");

console.log(s1);//Set { 1, 3 }

注：delete无法删除集合中的数组

4.clear（）：

它可以删除所有的元素

例：

let s1 = new Set([1,2,3]);

s1.clear()

console.log(s1);//Set {}

注：它将一次清空集合的所有内容，包括删除数组

##遍历##

1.for-of：

let s = new Set([1,2,3,4,5]);

for(let i of s){

console.log(i);

}// 1

// 2

// 3

// 4

// 5

2.forEach：

//使用forEach进行遍历

let s = new Set([1,2,3,4,5]);

s.forEach(ele => console.log(ele));

// 1

// 2

// 3

// 4

// 5

3.keys（）：

它可以遍历集合的键：

let s = new Set(["Bill","Lucy","David"]);

for(let i of s.keys()){

console.log(i);

}

// Bill

// Lucy

// David

4.values（）：

它可以遍历集合的值：

let s = new Set(["Bill","Lucy","David"]);

for(let i of s.values()){

console.log(i);

}

// Bill

// Lucy

// David

5.entries（）：

它可以遍历集合的键和值：

let s = new Set(["Bill","Lucy","David"]);

for(let i of s.entries()){

console.log(i);

}

//因为未设定值，所以返回的是它本身

// [ 'Bill', 'Bill' ]

// [ 'Lucy', 'Lucy' ]

// [ 'David', 'David' ]

##集合转数组##

let s1 = new Set([1,2,3]);

console.log(s1);//Set { 1, 2, 3 }

let arr = [...s1];

console.log(arr);//[ 1, 2, 3 ]

或者使用Array对象提供的from（）方法转换：

let s1 = new Set([1,2,3]);

console.log(s1);//Set { 1, 2, 3 }

let arr = Array.from(s1);

console.log(arr);//[ 1, 2, 3 ]

注：因为集合不能存放相同的元素，所以可以用这种方法给数组去重

##弱集合##

let arr = [1,2,3];

let s = new Set(arr);

arr = null;//删除arr数组的指向

console.log(s);//Set { 1, 2, 3 }数组依然存在在集合中

console.log(arr);//null

注：这就是删除数组，但无法删除

1.内存泄漏

也就是站着空间却没有用，造成内存浪费，浏览器使用变慢

例：

let arr = [1,2,3];

arr = null;

解决方法：在JS中采用的是动态内存管理技术，例如垃圾回收机制，会自动从内存中删除不再被程序需要的东西。

注：弱集合无法在创建弱集合时传入一个数组进行初始化，不过弱集合也有has(),add(),delete()等方法

#映射#

JS对象，本质上是键值对的集合，为了解决这个问题，ES6提供了Map数据结构。

它类似对象，也是键值对的集合，它提供了“值-值”的对应，是一种更完善的Hash结构的实现

##创建映射##

let m = new Map();

m.set("name","xiejie");

m.set("age",18);

console.log(m);

//Map { 'name' => 'xiejie', 'age' => 18 }

console.log(m.get("name"));

//xiejie

注：JS中严格区分大小写

在对象中无法用对象最为对象属性的键名。而在Map映射中却可以这样做，可以说在Map映射里面可以使用任意数据类型作为键：

let m = new Map();

m.set({},"xiejie");

m.set([1,2,3],18);

m.set(3581,18);

console.log(m);

//Map { {} => 'xiejie', [ 1, 2, 3 ] => 18, 3581 => 18 }

##相关属性和方法##

在映射中同样支持：

has(key)：检查制定的键名在Map映射中是否存在

delete（key）：从Map映射中移除指定键名及对应的值

clear（）：移除Map映射中所有的键值

Map映射同样支持size属性，其代表当前集合中包含的键值对数量：

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(m);//Map { 'name' => 'xiejie', 'age' => 18 }

console.log(m.size);//2

console.log(m.has("name"));//true

console.log(m.get("name"));//xiejie

m.delete("name");

console.log(m);//Map { 'age' => 18 }

m.clear();

console.log(m);//Map {}

##遍历##

1.for-of：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m){

console.log(i);

}

// [ 'name', 'xiejie' ]

// [ 'age', 18 ]

2.keys（）：

遍历映射的键

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.keys()){

console.log(i);

}

// name

// age

3.values（）：

遍历映射的值：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.values()){

console.log(i);

}

// xiejie

// 18

4.entries（）：

遍历映射的键和值：

let m = new Map([["name","xiejie"],["age",18]]);

for(let i of m.entries()){

console.log(i);

}

// [ 'name', 'xiejie' ]

// [ 'age', 18 ]

##映射转数组##

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log([...m.keys()]);//[ 'name', 'age' ]

console.log([...m.values()]);//[ 'xiejie', 18 ]

console.log([...m.entries()]);//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ]

console.log([...m]);//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ]

或者使用Array对象的from（）方法：

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(Array.from(m));

//[ [ 'name', 'xiejie' ], [ 'age', 18 ] ]

##弱映射##

主要是解决存在映射内部的垃圾数据问题

let weakMap = new WeakMap();

注：弱映射和普通映射一样，具有has()，get(),set(),delete()等方法