SAP Fiori开发中的JavaScript基础知识6 - 数组（Arrays）

1 背景

在本篇博客中，我将介绍JavaScript中数组（Arrays）的概念和用法。

2 数组

在JavaScript中，数组是一种特殊的对象，用于存储多个值在单个变量中。

2.1 创建数组

在JavaScript中，创建数组有以下有2种方式。

使用Array构造函数：

let fruits = new Array('apple', 'banana', 'mango');

使用字面量语法：

let fruits = ['apple', 'banana', 'mango'];

2.2 访问数组元素

你可以通过索引（基于0的数字）访问数组的元素：

let firstFruit = fruits[0]; // apple
let secondFruit = fruits[1]; // banana

你也可以通过索引修改数组的元素：

fruits[0] = 'pear'; // fruits is now ['pear', 'banana', 'mango']

2.3 数组的属性和方法

JavaScript数组有许多有用的属性和方法。例如：

• length属性：返回数组的长度（元素的数量）。
• indexOf( )方法：返回当前元素的索引值，若不存在，返回-1
• includes()方法：检查某个元素是否存在，存在返回true，否则返回false
• push()方法：向数组的末尾添加一个或多个元素，并返回新的长度。
• pop()方法：删除并返回数组的最后一个元素。
• shift()方法：删除并返回数组的第一个元素。
• unshift()方法：向数组的开头添加一个或多个元素，并返回新的长度。
• splice()方法：添加/删除数组的元素。
• slice()方法：返回一个新的数组，包含从 start 到 end （不包括 end ）的 arrayObject 中的元素。
• join()方法：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

let length = fruits.length; // 3

console.log( fruits.indexOf('apple') ); //输出0

console.log( fruits.includes('apple') ): //输出true

fruits.push('orange'); // fruits is now ['pear', 'banana', 'mango', 'orange']

let lastFruit = fruits.pop(); // lastFruit is 'orange', fruits is now ['pear', 'banana', 'mango']

let firstFruit = fruits.shift(); // firstFruit is 'pear', fruits is now ['banana', 'mango']

fruits.unshift('apple'); // fruits is now ['apple', 'banana', 'mango']

fruits.splice(1, 0, 'kiwi'); // fruits is now ['apple', 'kiwi', 'banana', 'mango']

let citrusFruits = fruits.slice(1, 3); // citrusFruits is ['kiwi', 'banana']

let allFruits = fruits.join(', '); // allFruits is 'apple, kiwi, banana, mango'

2.4 数组的遍历

forEach() 是 JavaScript 中的数组方法，用于遍历数组，并对每个元素执行操作。

以下是 forEach() 方法的基本语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数说明：

• currentValue（必需）：当前正在处理的数组元素。
• index（可选）：当前正在处理的数组元素的索引。
• arr（可选）：包含当前元素的数组。
• thisValue（可选）：当执行函数时用作 “this” 的值。

以下是一个使用 forEach() 的基本示例：

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

array.forEach(function(element) {
  console.log(element);
});

在这个例子中，forEach() 方法会遍历数组中的每个元素，并将每个元素打印到控制台。

你也可以使用箭头函数来简化代码：

let array = [1, 2, 3, 4, 5];
array.forEach(element => console.log(element) );

2.5 一些其它转换的方法

• filter() 方法：移除不符合某一条件的元素，并返回新数组
• map()方法：转换数组元素，并返回新数组
• some()方法：检查是否有任何数组元素项满足给定的条件，返回一个布尔值
• every()方法：检查是否每一个数组元素项都满足给定的条件，返回一个布尔值

有需要的同学可以自行查找相关文档，在本文中变不再逐一列举用法了。

2.6 示例代码

最后，我在下面给出了一些符合命名规范的代码示例，供参考。

let aColors = ['red', 'blue', 'green'];

console.log("----------------");
console.log(aColors);
console.log(aColors[0]);
console.log(aColors.length);
console.log(aColors.indexOf('red'));
console.log(aColors.push('yellow'));
console.log(aColors.length);

let aBasicColors = aColors.slice(0,3);
console.log(aBasicColors);

console.log("----------------");
let aTest = [];
console.log(aTest.length);
aTest[4] = 'test';
console.log(aTest.length);
aTest.push('test');
console.log(aTest.length);

console.log("----------------");
aColors.splice(3,0,'black'); //在index 3处插入black
console.log(aColors); 
aColors.splice(4,1); //删除 yellow
console.log(aColors); 

console.log("----------------");
aColors.forEach(function(value, index, arrary){
    console.log(index + '. color is ' + value);
});

这段代码的运行结果如下：

3. 小结

本文介绍JavaScript中数组（Arrays）的概念和用法，文中列举了JavaScript数组常用的一部分功能。为了充分利用数组，可以进一步查阅相关文档。希望本文对你有帮助！