ES6 数组新方法
目录
- 介绍
- Array.from()
- Array.of()
- 数组新增方法
- find()方法
- findIndex():
- some()
- every()
介绍
本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记
本文视频地址为：
https://www.bilibili.com/video/av47304735?p=19
Array.from()
Array.from方法用于将两类对象转为真正的数组：
1、类数组的对象（array-like object）
2、可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
类数组对象举例：实际应用中，常见的类似数组的对象是
1、 DOM 操作返回的 NodeList 集合
2、函数内部的arguments对象。
Array.from还可以传入第二个参数是一个函数，相当于数组的map方法。
如下所示例子：
1、Array.from() 将类数组对象转换成数组
2、Array.from还可以传入第二个参数是一个函数，相当于数组的map方法
3、Array.from()可以把arguments对象转换成真正的数组
4、把字符串转换成数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.completed{
color:red;
}
</style>
<body>
<ul>
<li>go to store</li>
<li>watche tv</li>
<li>go shopping</li>
</ul>
<script>
// Array.from() 将类数组对象转换成数组
const todos = document.querySelectAll('li');
const todosArr= Arrray.from(todos);
const names=todosArr.map(todo=>todo.textContent);
console.log(names);
// Array.from还可以传入第二个参数是一个函数，相当于数组的map方法
// 上述可改写成如下：
const todos=document.querySelectall('li');
const names=Array.from(todos,todo=>todo.textcontent);
console.log(names);
// Array.from()可以把arguments对象转换成真正的数组
function sum(){
return Array.from(arguments).reduce((prev,curr)=>prev+curr,0)
}
// 把字符串转换成数组
const website = 'lavarist';
console.log(Array.from(website))
</script>
</body>
</html>
Array.of()
Array.of方法主要解决数组声明不一致的问题，之前我们在声明一个数组的时候可以使用下面的方法：
// 该声明方式，会生成一个数组长度为10的数组
var arrays = new Array(10);
// 该声明方式，会生成[1,2,3,4,5]数组
var array2 = new Array(1,2,3,4,5);
上述两种声明方式，存在歧义：
1、当只有一个参数时，参数代表数组长度
2、当有多个参数时，参数代表实际数组元素
新的方法如下所示，避免了这种歧义：
// 由1组成的数组 [1]
var array3 = Array.of(1)
// [1,2,3]
var array4 = Array.of(1,2,3)
数组新增方法
find()方法
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.completed{
color:red;
}
</style>
<body>
<script>
const inventory = [
{name: 'apples',quantity: 2},
{name: 'bananas',quantity: 0},
{name: 'cherries',quantity: 5},
]
// element :当前数组元素
// index : 当前数组索引
// array ：当前数组
//const bananas = inventory.find((element,index,array))
// 在如下例子中，只需要element 元素
const bananas = inventory.find(fruit =>{
if(fruit.name === 'bananas'){
return true;
}
return false;
});
// 上例子可以简写成如下格式
const bananas = inventory.find(fruit =>fruit.name === 'bananas')
console.log(bananas);
</script>
</body>
</html>
findIndex():
fndIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
1、当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的 索引位置，之后的值不会再调用执行函数。
2、如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const inventory = [
{name: 'apples',quantity: 2},
{name: 'bananas',quantity: 0},
{name: 'cherries',quantity: 5},
]
// element :当前数组元素
// index : 当前数组索引
// array ：当前数组
//const bananas = inventory.findIndx((element,index,array))
// 在如下例子中，只需要element 元素
const bananaIndex = inventory.findIndex(fruit =>{
if(fruit.name === 'bananas'){
return true;
}
return false;
});
// 上例子可以简写成如下格式
const bananaIndex = inventory.findIndex(fruit =>fruit.name === 'bananas')
console.log(bananaIndex);
</script>
</body>
</html>
some()
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
every()
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const inventory = [
{name: 'apples',quantity: 2},
{name: 'bananas',quantity: 0},
{name: 'cherries',quantity: 5},
]
const isEnough=inventory.some(fruit => fruit.quantity > 0)
const allEnough = inventory.every(fruit => fruit.quantity >0 )
</script>
</body>
</html>