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>

你可能感兴趣的:(ES6)