<万博manbetx平台> ES 6 Array - ES 6 入门教程 - 万博manbetx平台中文网
购物车
登陆 / 注册
微信扫码登陆

推荐手册

ES 6 Array

使用变量存储值存在以下限制:

● 变量本质上是标量。 换句话说,变量声明一次只能包含一个。 这意味着要在程序中存储n个值,将需要n个变量声明。 因此,当需要存储更大的值集合时,使用变量是不可行的。

● 程序中的变量是按随机顺序分配内存的,因此很难按其声明的顺序检索/读取值。

JavaScript引入了数组的概念来解决这个问题。

数组是值的同质集合。为了简化,数组是相同数据类型的值的集合。它是用户定义的类型。


数组的特征

● 数组声明分配顺序内存块。

● 数组是静态的。这意味着一旦初始化的数组无法调整大小。

● 每个存储块表示一个数组元素。

● 数组元素由称为元素的下标/索引的唯一整数标识。

● 像变量一样的数组也应该在使用之前声明。

● 数组初始化是指填充数组元素。

● 可以更新或修改数组元素值,但不能删除它们。


声明和初始化数组

要在JavaScript中声明和初始化数组,请使用以下语法:

var array_name; //declaration 
array_name = [val1,val2,valn..]   //initialization 
OR 
var array_name = [val1,val2…valn]

注 - []对被称为数组的维度。

例如,像var numlist = [2,4,6,8]这样的声明将创建一个数组,如下图所示:

07494d480192d1988bd857015424e92.jpg

访问数组元素

后跟下标的数组名称用于引用数组元素。

以下是语法:

array_name[subscript]

示例:简单数组

var alphas; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

成功执行上述代码后,将显示以下输出。

1
2

示例:单个语句声明和初始化

var nums = [1,2,3,3]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

成功执行上述代码后,将显示以下输出。

1
2
3
3


数组对象

也可以使用Array对象创建数组。Array构造函数可以传递为:

● 表示数组或大小的数值。

● 逗号分隔的值列表。

以下示例使用此方法创建数组。

var arr_names = new Array(4)
for(var i = 0;i<arr_names.length;i++) {
   arr_names[i] = i * 2
   console.log(arr_names[i])
}

成功执行上述代码后,将显示以下输出。

0
2
4
6

示例:数组构造函数接受以逗号分隔的值

var names = new Array("Mary","Tom","Jack","Jill")
for(var i = 0;i<names.length;i++) {
   console.log(names[i])
}

成功执行上述代码后,将显示以下输出:

Mary 
Tom 
Jack 
Jill


数组方法

以下是Array对象的方法及其描述列表。

Sr.No和描述
1concat()

返回一个新数组,该数组由该数组与其他(一个或多个)数组或值连接而成

2every()

如果数组中的每个元素都满足所提供的测试函数,则返回true。

3filter()

创建一个新数组,其中包含此数组的所有元素,其中提供的过滤函数返回true。

4forEach()

为数组中的每个元素调用一个函数。

5indexOf()

返回数组中与指定值相等的元素的第一个(最小)索引,如果没有找到,则返回-1。

6join()

将数组的所有元素连接到字符串中。

7lastIndexOf()

返回数组中与指定值相等的元素的最后一个(最大)索引,如果没有找到,则返回-1。

8map()

使用对该数组中的每个元素调用提供的函数的结果创建一个新数组。

9pop()

从数组中删除最后一个元素并返回该元素。

10push()

将一个或多个元素添加到数组末尾并返回数组的新长度。

11reduce()

同时对数组的两个值(从左到右)应用函数,以将其减少为单个值。

12reduceRight()

同时对数组的两个值(从右到左)应用函数,以将其减少为单个值。

13reverse()

反转数组元素的顺序,第一个元素变成最后一个元素,最后一个元素变成第一个元素。

14shift()

从数组中删除第一个元素并返回该元素。

15slice()

提取数组的一部分并返回一个新数组。

16some()

如果数组中至少有一个元素满足所提供的测试函数,则返回true。

17

toSource()

表示对象的源代码。

18sort()

对数组的元素进行排序。

19splice()

从数组中添加或删除元素。

20toString()

返回表示数组及其元素的字符串。

21unshift()

将一个或多个元素添加到数组的前面,并返回数组的新长度。


ES6 - 数组方法

以下是ES6中引入的一些新阵列方法。

Array.prototype.find

find允许您遍历数组并获取返回的第一个元素,使得给定的回调函数返回true。找到元素后,函数会立即返回。这是获得匹配给定条件的第一个项目的有效方法。

var numbers = [1, 2, 3]; 
var oddNumber = numbers.find((x) => x % 2 == 1); 
console.log(oddNumber); // 1

成功执行上述代码后,将显示以下输出:

1

注:ES5 filter()和ES6 find()不是同义词。filter始终返回匹配的数组(并将返回多个匹配项),find始终返回实际元素。

Array.prototype.findIndex

findIndex的行为类似于find,但它不返回匹配的元素,而是返回该元素的索引。

var numbers = [1, 2, 3]; 
var oddNumber = numbers.findIndex((x) => x % 2 == 1); 
console.log(oddNumber); // 0

上面的示例将值1的索引0作为输出来返回。

Array.prototype.entries

entries是一个函数,它返回一个Array Iterator(数组迭代器),可用于遍历数组的键和值。条目将返回一个遍历器对象,其中包含[index,value]格式的数组。

var numbers = [1, 2, 3]; 
var val = numbers.entries(); 
console.log(val.next().value);  
console.log(val.next().value);  
console.log(val.next().value);

成功执行上述代码后,将显示以下输出:

[0,1]
[1.2]
[2,3]

或者,我们也可以使用spread运算符一次性取回一系列条目:

var numbers = [1, 2, 3]; 
var val= numbers.entries(); 
console.log([...val]);

成功执行上述代码后,将显示以下输出:

[[0,1],[1,2],[2,3]]

Array.from

Array.from()支持从类似数组的对象创建新数组。from()的基本功能是将两种值转换为数组:

● 类似数组的值。

● 可设置的值,如Set和Map。

"use strict" 
for (let i of Array.from('hello')) { 
   console.log(i) 
}

成功执行上述代码后,将显示以下输出:

h
e
l
l
o

Array.prototype.keys()

keys()函数返回数组索引。

console.log(Array.from(['a', 'b'].keys()))

成功执行上述代码后,将显示以下输出:

[ 0, 1 ]


使用for ... in循环的数组遍历

可以使用for ... in循环来遍历数组。

"use strict" 
var nums = [1001,1002,1003,1004] 
for(let j in nums) { 
   console.log(nums[j]) 
}

循环执行基于索引的数组遍历。成功执行上述代码后,将显示以下输出:

1001 
1002 
1003 
1004


JavaScript中的数组

JavaScript支持以下有关数组的概念:

Sr.No概念与描述
1多维数组

javascript支持多维数组。多维数组的最简单形式是二维数组

2将数组传递给函数

通过指定数组的名称(不带索引),可以将指向数组的指针传递给函数。

3

从函数返回数组

允许函数返回数组。


数组解构

JavaScript支持在数组上下文中进行解构。

var arr = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

成功执行上述代码后,将显示以下输出。

12 
13
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号