ES6 数组新方法

最新推荐文章于 2022-11-24 09:51:44 发布

五仁卤鸡翅

最新推荐文章于 2022-11-24 09:51:44 发布

阅读量453

点赞数

分类专栏： ES6 文章标签： es6 javascript

本文链接：https://blog.csdn.net/MoonNight608/article/details/104160435

版权

ES6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

介绍

本文是在学习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>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 数组新方法

目录介绍Array.from()Array.of()数组新增方法find()方法findIndex():some()every()介绍Array.from()Array.from方法用于将两类对象转为真正的数组：1、类数组的对象（array-like object）2、可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。类数组对象举例：实际应用中，常见...
复制链接

扫一扫

专栏目录