首页 > 文章 > JavaScript中的数据结构

JavaScript中的数据结构

数组

数组基础

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

创建数组

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的值,也就是数组的第一个数 除了这种方式,我们还可以使用变量的方式来访问 例2let 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()。

1keys()它便利出的是数组的键

例:

 let arr = [3,5,8,1]; for(let i of arr.keys()){ console.log(i); } // 0 // 1 // 2 // 3 2entrise()遍历出的是数组的键和值

例:

 let arr = [3,5,8,1]; for(let i of arr.entries()){ console.log(i); } // [ 0, 3 ] // [ 1, 5 ] // [ 2, 8 ] // [ 3, 1 ]

3values()它可以找到可迭代元素的值 注:数组内部无法使用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.操作方法

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

例: 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‘ ] 2slice():它可以接受一个或者两个参数,代表返回项的起始和结束位置。 一个参数:代表起始位置,返回从指定的起始位置到数组末尾的所有项目 两个参数:代表从指定的起始位置到指定的末尾位置的项,但不包括结束位置的项目。

注: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 ]

注:如果传入的是负数,用数组的长度加上该数来确定相应的位置 3splice():它可以实现三种类型操作,删除插入和替换 ——删除

例: 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 ]

4join():将数组转为字符串,可以传入分隔符作为参数

 例: let arr = [1,2,3];

let str = arr.join("");

console.log(str);

//123 let str2 = arr.join(","); console.log(str2);

//1,2,3

5split():将字符串转为数组,传入参数指明以什么作为分隔符 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‘ ]

3、数组重排序方法

重排序涉及到两个方法:reverse()strt()

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 ]

strt():按照升序排列数组每一项

 

let arr = [-6,-1,-12,1,9,47,3,45];

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

return a - b;

}));

最后需要注意的是,reverse。和sort。方法,返回值是经过排序之后的数组

ECMAScript还为数组提供了两个位置方法:indexOf。和lastlndexOf

这两个方法都接收两个参数:要查找的项目和查找的起点位置索引。区别在于一个是从数组开头

开始找,一个是从数组末尾开始找。如果没找到就返回-1

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

console.log(arr.indexOf("l"));//2 console.log(arr.lastIndexOf("l"));//3 console.log(arr.indexOf("z"));//-1

这两个方法进行查找时使用的是全等进行比较

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)是在ES6中引入的一种数据结构,用于表示唯一值的集合,所以它不能包含重复值。接 下来这一小节,就让我们具体来看一下这种新的数据结构。

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

要创建一个集合,方法很简单,直接使用new就可以创建一个Set对象。如果想要集合在创建时 就包含初始值,那么我们可以传入一个数组进去。

let s1 = new Set();

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

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

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

 

使用add()方法可以给一个集合添加值,由于调用add()方法以后返回的又是一个Set对象,所 以我们能连续调用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 } 我们还可以直接将一个数组传入add()方法里面 let s1 = new Set();

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

console.log(s1);

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

 

需要注意的是建立Set对象时传入数组与调用add()方法时传入数组是效果是不一样,区别 如下:

建立Set对象时传入数组,数组每一项成为Set对象的一个元素

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

console.log(s1);

//Set { 1, 2, 3 }

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

 

调用add()方法时传入数组,就是作为Set对象的一个元素

let s1 = new Set();

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

console.log(s1);

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

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

 

Set对象中,不能够添加相同的元素,这是很重要的一个特性

let s1 = new Set();

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

console.log(s1);

//Set { 1, 2, 3 }

 

集合相关属性和方法

 

  1. size属性获取元素个数

 

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

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

 

  1. 使用has()方法来查看一个集合中是否包含某一个值

 

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

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

 

  1. 删除集合值

 

使用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 }

如果要一次性删除所有的元素,可以使用clear方法

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

s1.clear()

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

 

遍历集合

 

集合也是可以枚举的,我们同样可以使用for-o f来对集合进行遍历,如下:

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

for(let i of s){ console.log(i);

}

// 1

// 2

// 3

// 4

// 5

或者通过for Each来进行遍历,示例如下:

//使用forEach进行遍历

let s = new Set([1,2,3,4,5]); s.forEach(ele => console.log(ele));

//1

//2

//3

//4

//5

 

除此之外,我们也可以使用集合里面自带的keys() , values()以及ent ries()方法来对集合 进行遍历。顺便要说一下的是,在集合里面键和值是相同的。

 

keys()方法遍历集合的键

let s = new Set(["Bill","Lucy","David"]); for(let i of s.keys()){

console.log(i);

}

// Bill

// Lucy

// David

values()方法遍历集合的值

let s = new Set(["Bill","Lucy","David"]); for(let i of s.values()){

console.log(i);

}

// Bill

// Lucy

// David

 

ent ries()方法同时遍历集合的键与值

 

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 ]

除此之外,我们还可以使用Arra y对象所提供的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 ]

前面我们有提到过,Set对象里面是不能够存放相同的元素的,利用这个特性,我们可以快速的 为数组去重,如下:

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

let s1 = new Set(arr);

let arr2 = [...s1]; console.log(arr2);//[ 1, 2, 3, 4, 6, 7, 5 ]

 

弱集合(扩展)

 

当对象添加到集合中时,只要集合存在,它们就一直存储在集合。即使对象的引用被删除了也依 然如此,我们来看下面的这个例子:

let arr = [1,2,3];

let s = new Set(arr);

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

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

 

映射

 

映射(Map)也是ES6规范中引入的一种数据结构。

使用new关键字与Map()构造函数,就可以创建一个空的m ap对象。如果要向Map映射中添加 新的元素,可以调用set()方法并分别传入键名和对应值作为两个参数。如果要从集合中获取 信息,可以调用get()方法。

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

在对象中,无法用对象作为对象属性的键名。但是在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 }

 

传入数组来初始化Map映射 可以向Map构造函数传入一个数组来初始化Map映射,这一点同样与Set集合相似。数组中的每 个元素都是一个子数组,子数组中包含一个键值对的键名与值两个元素。因此,整个Map映射中 包含的全是这样的两个元素的二维数组

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

let m = new Map(arr);

console.log(m);

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

 

映射相关属性和方法

 

在设计语言新标准时,委员会为Map映射与Set集合设计了如下3个通用的方法 has(key):检测指定的键名在Map映射中是否已经存在 delete(key):Map映射中移除指定键名及其对应的值

clear。:移除M ap映射中的所有键值对

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 {}

 

映射的遍历

 

与集合一样,映射也是可以枚举的,所以可以用与集合类似的方式进行遍历。 使用for-of来遍历映射

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

console.log(i);

}

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

keys()方法遍历映射的键

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.keys()){

console.log(i);

}

// name

// age

values()方法遍历映射的值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.values()){

console.log(i);

}

// xiejie

// 18

ent ries()方法同时遍历映射的键与值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.entries()){

console.log(i);

}

// [ ‘name‘, ‘xiejie‘ ]

// [ ‘age‘, 18 ]

 

映射转为数组

 

Map结构转为数组结构,比较快速的方法还是使用前面介绍过的扩展运算符...

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 ] ]

 

 

时间:2019-07-20 01:21:42阅读(30)
联系我们 - 留言反馈
© 2017 版权所有 鲁ICP备17052893号