当前位置： 代码迷 >> 综合 >> 学习ES6（十七） -- Arrays 详解
  详细解决方案

学习ES6（十七） -- Arrays 详解

热度：83   发布时间：2023-10-24 11:34:11.0

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

数组的特征

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

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

  • 每个存储块代表一个数组元素。

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

  • 像变量一样，数组也应在使用前声明。

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

  • 数组元素值可以更新或修改，但不能删除。

声明和初始化数组

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

访问数组元素

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

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

数组对象

也可以使用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]) 
}
var names = new Array("Mary","Tom","Jack","Jill")

数组方法

Sr.No 方法和说明
1 concat()

返回一个由该数组组成的新数组，该数组与其他数组和/或值连接在一起
2 every()

如果此数组中的每个元素都满足提供的测试功能，则返回true。
3 filter()

使用此数组的所有元素创建一个新数组，所提供的过滤函数为其返回true。
4 forEach()

为数组中的每个元素调用一个函数。
5 indexOf()

返回等于指定值的数组中元素的第一个（最小）索引；如果未找到，则返回-1。
6 join()

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

返回数组中元素的最后一个（最大）索引，该索引等于指定的值；如果未找到，则返回-1
8 map()

创建一个新数组，并对该数组中的每个元素调用提供的函数。
9 pop()

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

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

同时对数组的两个值（从左到右）应用一个函数，以将其减少为单个值。
12 reduceRight()

同时对数组的两个值（从右到左）应用一个函数，以将其减少为单个值。
13 reverse()

反转数组元素的顺序-第一个变为最后一个，最后一个变为第一个。
14 shift()

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

提取数组的一部分并返回一个新数组。
16 some()

如果此数组中的至少一个元素满足提供的测试功能，则返回true。
17

toSource()

表示对象的源代码。
18 sort()

对数组的元素进行排序。
19 splice()

从数组中添加和/或删除元素。
20  toString()

返回表示数组及其元素的字符串。
21  unshift()

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

concat（）方法返回一个新数组，该数组由与两个或多个数组连接的该数组组成。

语法：array.concat(value1, value2, ..., valueN);  valueN-要连接到结果数组的数组和/或值。

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );  //输出：alphaNumeric : a,b,c,1,2,3

every()方法都会测试数组中的所有元素是否通过提供的函数实现的测试。

语法：array.every(callback[, thisObject]);

参量

  • callbacl-测试每个元素的方法。

  • thisObject-执行回调时用作此对象的对象。

function isBigEnough(element, index, array) { return (element >= 10); 
} 
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed );  //输出：false

filter（）方法创建一个新数组，其中所有元素都通过了由提供的函数实现的测试。

语法：array.filter(callback[, thisObject]);   返回创建的数组。

function isBigEnough(element, index, array) { return (element >= 10); 
} 
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed );   //输出：Test Value :12,130,44

forEach（）方法为数组中的每个元素调用一个函数。

语法：array.forEach(callback[, thisObject]);

var nums = new Array(12,13,14,15)  
console.log("Printing original array......")  nums.forEach(function(val,index) { console.log(val) 
})  
nums.reverse()  //reverses the array element 
console.log("Printing Reversed array....")  nums.forEach(function(val,index){ console.log(val) 
})  
输出：
Printing Original Array…. 
12 
13 
14 
15 
Printing Reversed array… 
15 
14 
13 
1

indexOf（）方法返回可以在数组中找到给定元素的第一个索引；如果不存在，则返回-1。

语法：array.indexOf(searchElement[, fromIndex]);

参量

  • searchElement-要在数组中定位的元素。

  • fromIndex-开始搜索的索引。默认为0，即将搜索整个数组。如果索引大于或等于数组的长度，则返回-1。

返回值

返回找到的元素的索引。

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index )  //输出：index is : 2

join（）方法将数组的所有元素连接到一个字符串中。

语法：array.join(separator);

参量

  • separator -指定一个字符串来分隔数组的每个元素。如果省略，则数组元素用逗号分隔。

返回值

连接所有数组元素后返回一个字符串。

var arr = new Array("First","Second","Third"); 
var str = arr.join();
console.log("str : " + str );  //输出：str : First,Second,Third 
var str = arr.join(", "); 
console.log("str : " + str );  //输出：str : First, Second, Third var str = arr.join(" + "); 
console.log("str : " + str );  //输出：str : First + Second + Third

lastIndexOf（）方法返回可以在数组中找到给定元素的最后一个索引；如果不存在，则返回-1。从fromIndex开始向后搜索数组。

语法：array.lastIndexOf(searchElement[, fromIndex]);

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );   //输出：index is : 3

map（）方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。

语法：array.map(callback[, thisObject]);

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );    //输出：roots is : 1,2,3

pop（）方法从数组中删除最后一个元素，然后返回该元素。

语法：array.pop();

var numbers = [1, 4, 9]; 
var element = numbers.pop(); 
console.log("element is : " + element ); //输出：element is : 9

push（）方法将给定元素添加到数组的最后，并返回新数组的长度。

语法：array.push(element1, ..., elementN);  element1，...，elementN：要添加到数组末尾的元素。

var numbers = new Array(1, 4, 9);
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  //输出：new numbers is : 1,4,9,10 
console.log("length:" ); //输出：4

reduce（）方法同时对数组的两个值（从左到右）应用一个函数，以将其简化为单个值。

语法：array.reduce(callback[, initialValue]);

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );      //输出：total is : 6

reduceRight（）方法同时对数组的两个值（从右到左）应用一个函数，以将其简化为单个值。

语法：array.reduceRight(callback[, initialValue]);

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );    //输出：total is : 6

reverse（）方法反转数组的元素。第一个数组元素变为最后一个，最后一个数组变为第一个。

语法：array.reverse();

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );   //Reversed array is : 3,2,1,0

shift（）方法从数组中删除第一个元素并返回该元素。

语法：array.shift();

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr )   //输出：Shifted value is : 10

slice（）方法提取数组的一部分并返回一个新数组。

语法：array.slice( begin [,end] );

参数明细

  • begin-从零开始的索引。作为负索引，start表示从序列结尾开始的偏移量。

  • end -要结束提取基于零的索引。

返回值

根据传递的参数返回提取的数组。

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); //输出：arr.slice( 1, 2) : mango 
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  //输出：arr.slice( 1, 3) : mango,banana

some（）方法测试数组中的某些元素是否通过提供的函数实现的测试。

语法：array.some(callback[, thisObject]);

function isBigEnough(element, index, array) { return (element >= 10); 
} 
var retval = [2, 5, 8, 1, 4].some(isBigEnough); 
//输出：Returned value is : false 
console.log("Returned value is : " + retval ); var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
//输出：Returned value is : true
console.log("Returned value is : " + retval );

sort（）方法对数组的元素进行排序。

语法：array.sort( compareFunction ); 

compareFunction-指定一个定义排序顺序的函数。如果省略，则按字典顺序对数组进行排序。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );   //输出：Returned string is : banana,mango,orange,sugar

splice（）方法更改数组的内容，在删除旧元素的同时添加新元素。

语法：array.splice(index, howMany, [element1][, ..., elementN]);

参数明细

  • index-开始更改数组的索引。

  • howMany-一个整数，指示要删除的旧数组元素的数量。如果howMany为0，则不会删除任何元素。

  • element1，...，elementN-要添加到数组中的元素。如果不指定任何元素，则拼接仅从数组中删除这些元素。

返回值

根据传递的参数返回提取的数组。

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );  
console.log("removed is: " + removed); removed = arr.splice(3, 1);  
console.log("After adding 1: " + arr );  
console.log("removed is: " + removed);   
//输出：
After adding 1: orange,mango,water,banana,sugar,tea 
removed is:  
After adding 1: orange,mango,water,sugar,tea 
removed is: banana

toString（）方法返回一个字符串，该字符串表示指定数组及其元素的源代码。

语法：array.toString();

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  //输出：Returned string is : orange,mango,banana,sugar

unshift（）方法将一个或多个元素添加到数组的开头，并返回数组的新长度。

语法：array.unshift( element1, ..., elementN );

var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  //输出：Returned array is : water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length );   //输出：Length of the array is : 5

ES6-数组方法

以下是ES6中引入的一些新数组方法。

Array.prototype.find

find可以遍历数组并获取使给定回调函数返回true的第一个元素。一旦找到一个元素，该函数将立即返回。这是一种仅获取符合给定条件的第一项的有效方法。

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

Array.prototype.findIndex

findIndex的行为与find相似，但是它不返回匹配的元素，而是返回该元素的索引。

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

Array.prototype.entries

entry是返回数组迭代器的函数，该迭代器可用于遍历数组的键和值。条目将返回一个数组数组，其中每个子数组都是[index，value]的数组。

var numbers = [1, 2, 3]; 
var val = numbers.entries(); 
console.log(val.next().value);   //输出：[0,1] 
console.log(val.next().value);  //输出：[1.2] 
console.log(val.next().value); //输出：[2,3]
//使用散布运算符一次性返回一组数组。
var val= numbers.entries(); 
console.log([...val]); //输出：[[0,1],[1,2],[2,3]]

Array.from

Array.from（）允许从类似对象的数组创建新数组。Array.from（）的基本功能是将两种值转换为Arrays-

  • 类似数组的值。

  • 可迭代的值，例如Set和Map。

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

//输出：

h                               
e                               
l                               
l                               
o

 

Array.prototype.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]) 
}
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.