下面就针对题目提供一份“ES6 Array常用扩展的应用实例分析”的攻略。
下面就针对题目提供一份“ES6 Array常用扩展的应用实例分析”的攻略。
ES6 Array常用扩展
1. Array.from()
Array.from() 方法可以将一个类似数组或可迭代对象转换为一个真正的数组。该方法需要一个目标对象作为参数,可以指定一个函数来对原数组的每个元素进行操作,并返回一个新的数组。
let arr = "12345678";
arr = Array.from(arr, (x) => parseInt(x));
console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]
在上面的例子中,我们将字符串 "12345678" 转换为一个数组,并对其进行了遍历转换,最终返回了一个新的数组。
2. Array.of()
Array.of() 方法可以将一组参数转换为一个数组。在使用该方法创建数组时,参数的数量和类型不会对数组的类型造成影响。
let arr1 = Array.of(1, 2, 3, 4, 5);
let arr2 = Array(1, 2, 3, 4, 5);
console.log(arr1); // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
在上面的例子中,我们分别用 Array.of() 和 Array() 方法创建了一个包含 5 个元素的数组,结果是一样的。
3. Array.find()
Array.find() 方法返回满足指定条件的第一个数组元素的值。
let arr = [1, 3, 5, 7, 9];
let val = arr.find((value) => value > 5);
console.log(val); // 7
在上面的例子中,我们查找了数组 arr 中符合条件的第一个元素,即大于 5 的元素 7。
4. Array.findIndex()
Array.findIndex() 方法返回满足指定条件的第一个数组元素的下标。
let arr = [1, 3, 5, 7, 9];
let index = arr.findIndex((value) => value > 5);
console.log(index); // 3
在上面的例子中,我们找到数组 arr 中第一个大于 5 的元素的下标,即 3。
5. Array.includes()
Array.includes() 方法用于判断一个数组是否包含某个元素,其返回值为 true 或 false。
let arr = [1, 3, 5, 7, 9];
let res1 = arr.includes(5);
let res2 = arr.includes(6);
console.log(res1); // true
console.log(res2); // false
在上面的例子中,我们分别判断了数组 arr 中是否包含元素 5 和 6,结果是 true 和 false。
应用实例分析
示例1:字符串转数组
示例1中,我们将一个字符串转换成了一个数组,并计算出了数组中所有元素的平均值。
let str = "12345";
let arr = Array.from(str, (x) => parseInt(x));
let sum = arr.reduce((curr, next) => curr + next);
let avg = sum / arr.length;
console.log(avg); // 3
示例2:找到第二个大的数
在示例2中,我们找到一个数组中的第二个大的数。
let arr = [10, 5, 3, 9, 7];
let newArr = Array.from(new Set(arr)).sort((a, b) => a - b);
console.log(newArr[newArr.length - 2]); // 9
在上面的例子中,我们先用 Set() 方法去除了重复的元素,并将其排序得到了一个新的数组,然后取出了该数组中的倒数第二个元素 9,即为所求。
总结
本文介绍了 ES6 中 Array 常用扩展的应用实例,主要包括 Array.from()、Array.of()、Array.find()、Array.findIndex() 和 Array.includes(),同时介绍了两个具体的应用场景,并给出了代码示例。通过学习本文,我们可以更好地理解 ES6 Array 扩展的应用。
本文标题为:ES6 Array常用扩展的应用实例分析
基础教程推荐
- Spring Boot超详细讲解请求处理流程机制 2023-02-28
- 关于Spring统一异常处理及说明 2023-06-06
- fastjson 使用方法详细介绍 2024-03-02
- springboot 全局异常处理和统一响应对象的处理方式 2023-02-05
- JS实现table表格数据排序功能(可支持动态数据+分页效果) 2024-02-27
- jsp中定义和使用方法示例介绍 2023-12-16
- Java应用程序的多线程mysql连接池 2023-11-04
- jsp有两个按钮来控制Timer的开始和结束方法 2023-08-01
- 利用IDEA工具修改Maven多模块项目标识包名全过程记录 2023-06-02
- JSP简介 2023-12-17