在开始之前,你需要先了解数组的真正含义。
在 JavaScript 中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。
声明一个数组:
let myBox = []; // JS中的初始化数组声明
数组中可以包含多种数据类型
let myBox = ['hello', 1, 2, 3, true, 'hi'];
可以用被称为方法的多个操作来操作数组。这些方法允许我们对数组进行添加、删除、修改挤执行更多操作。
我会在本文中向你展示一其中的一部分,让我们继续:
注意:本文中使用了箭头功能,如果你不知道这意味着什么,你应该在这里阅读。箭头功能是ES6的功能。
toString()
方法能够将数组转换为以逗号分隔的字符串。
let colors = ['green', 'yellow', 'blue'];console.log(colors.toString()); // green,yellow,blue
The JavaScript join()
method combines all array elements into a string.
JavaScript 的 join()
方法将所有数组元素组合成一个字符串。
它类似于 toString()
方法,但在这里你可以指定分隔符而不是默认的逗号。
let colors = ['green', 'yellow', 'blue'];console.log(colors.join('-')); // green-yellow-blue
此方法可以将两个数组组合在一起,或者向数组中添加更多的元素项,然后返回一个新数组。
let firstNumbers = [1, 2, 3];let secondNumbers = [4, 5, 6];let merged = firstNumbers.concat(secondNumbers);console.log(merged); // [1, 2, 3, 4, 5, 6]
此方法将元素项添加到数组的末尾,并修改原始数组。
let browsers = ['chrome', 'firefox', 'edge']; browsers.push('safari', 'opera mini');console.log(browsers); // ["chrome", "firefox", "edge", "safari", "opera mini"]
此方法删除数组的最后一项并返回。
let browsers = ['chrome', 'firefox', 'edge']; browsers.pop(); // "edge"console.log(browsers); // ["chrome", "firefox"]
此方法删除数组的第一项,并将它返回。
let browsers = ['chrome', 'firefox', 'edge']; browsers.shift(); // "chrome"console.log(browsers); // ["firefox", "edge"]
此方法将一个项添加到数组的开头,并修改原始数组。
let browsers = ['chrome', 'firefox', 'edge']; browsers.unshift('safari');console.log(browsers); // ["safari", "chrome", "firefox", "edge"]
你还可以一次添加多个项目
此方法通过添加、删除和插入元素来修改数组。
语法是:
array.splice(index[, deleteCount, element1, ..., elementN])
Index
这里是删除数组中元素的起点
deleteCount
是要从该索引中删除的元素数
element1, …, elementN
是要添加的元素
运行splice()后,它返回删除项目之后的数组,并且被删除的项目将其从原始数组中删除。
let colors = ['green', 'yellow', 'blue', 'purple']; colors.splice(0, 3);console.log(colors); // ["purple"]// deletes ["green", "yellow", "blue"]
注意: deleteCount 不包括范围内的最后一个索引。
如果没有声明第二个参数,则将会从数组中删除从给定索引开始的所有元素:
let colors = ['green', 'yellow', 'blue', 'purple']; colors.splice(3);console.log(colors); // ["green", "yellow", "blue"]// deletes ['purple']
在下一个例子中,我们将从数组中删除 3 个元素,并用更多的项去替换它们:
let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];// removes 4 first elements and replace them with anotherschedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');console.log(schedule); // ["we", "are", "going", "to", "swim", "tommorrow"]
要添加项目,我们需要将 deleteCount
设置为零
let schedule = ['I', 'have', 'a', 'meeting', 'with'];// adds 3 new elements to the arrayschedule.splice(5, 0, 'some', 'clients', 'tommorrow');console.log(schedule); // ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]
此方法与 splice() 有点像,但是有很大不同。它返回子数组而不是子字符串。
此方法复制数组的给定部分,并将复制的部分作为新数组返回。 它不会改变原始数组。
语法是:
array.slice(start, end)
这是一个简单的例子:
let numbers = [1, 2, 3, 4] numbers.slice(0, 3)// returns [1, 2, 3]console.log(numbers) //返回原始数组
使用 slice()
的最好方式是将它分配给一个新变量。
let message = 'congratulations'const abbrv = message.slice(0, 7) + 's!'; console.log(abbrv) // 返回 "congrats!"
此方法用于字符串。它将一个字符串分成子串并将它们作为数组返回。
语法:string.split(separator, limit);
这里的 separator
定义了如何分割字符串。
决定了要分割成几份
let firstName = 'Bolaji';// return the string as an arrayfirstName.split() // ["Bolaji"]
另一个例子:
let firstName = 'hello, my name is bolaji, I am a dev.'; firstName.split(',', 2); // ["hello", " my name is bolaji"]
注意:如果我们声明一个空数组,比如 firstName.split('');
,那么字符串中的每个项目将都会被分割为子字符串:
let firstName = 'Bolaji'; firstName.split('') // ["B", "o", "l", "a", "j", "i"]
此方法在数组中查找项目,如果它被找到就返回索引,否则返回 -1
let fruits = ['apple', 'orange', false, 3] fruits.indexOf('orange'); // returns 1fruits.indexOf(3); // returns 3friuts.indexOf(null); // returns -1 (not found)
这种方法的工作方式与 indexOf() 相同,只是它从右到左工作。它返回找到的最后一个索引
let fruits = ['apple', 'orange', false, 3, 'apple'] fruits.lastIndexOf('apple'); // returns 4
如果数组的项目符合某个条件,则此方法将会创建一个新数组。
语法是:
let results = array.filter(function(item, index, array) { // returns true if the item passes the filter});
例:通过区号检查来自 Nigeria 的用户
const countryCode = ['+234', '+144', '+233', '+234'];const nigerian = countryCode.filter( code => code === '+234');console.log(nigerian); // ["+234", "+234"]
此方法通过操作数组中的值来创建新数组。
例:显示页面上的用户名。 (基本好友列表显示)
const userNames = ['tina', 'danny', 'mark', 'bolaji'];const display = userNames.map(item => { return '<li>' + item + '</li>'; })const render = '<ul>' + display.join('') + '</ul>';document.write(render);
另一个例子:
// 将美元符号添加到数字前面const numbers = [10, 3, 4, 6];const dollars = numbers.map( number => '$' + number);console.log(dollars);// ['$10', '$3', '$4', '$6'];
此方法适用于计算总计的值。
reduce() 用于计算数组中的单个值。
let value = array.reduce(function(previousValue, item, index, array) { // ...}, initial);
例:
要遍历数组并对数组中的所有数字求和,可以使用 for 循环。
const numbers = [100, 300, 500, 70];let sum = 0;for (let n of numbers) { sum += n; }console.log(sum);
以下是用 reduce()
实现相同g功能的方法
const numbers = [100, 300, 500, 70];const sum = numbers.reduce( (accummulator, value) => accummulator + value , 0);console.log(sum); // 970
如果省略初始值,默认情况下总数将从数组中的第一项开始计算。
const numbers = [100, 300, 500, 70];const sum = numbers.reduce((accummulator, value) => accummulator + value);console.log(sum); // still returns 970
下面的代码段显示了 reduce() 方法如何与所有四个参数一起使用。
来源:MDN Docs
此方法适用于迭代数组。
它把函数作用于数组中的所有项
const colors = ['green', 'yellow', 'blue']; colors.forEach((item, index) => console.log(index, item));// returns the index and the every item in the array// 0 "green"// 1 "yellow"// 2 "blue"
下一篇: 微信小程序的价值是什么?
2022-06-28
2022-06-28
2022-06-27
2022-06-27
2022-06-25