JS数组方法语法

不会控球的七号
213 阅读7分钟

数组-reduce方法语法

基本语法

image.png
作用：reduce返回函数累计处理的结果，经常用于求和等
参数：
1.如果有初始值，则以起始值为准开始累计，累计值 = 初始值
2.如果没有初始值，则累计值以数组的第一个数组元素作为起始值开始累计
3.后面每次遍历就会用后面的数组元素 累计到 累计值 里面（类似求和里面的sum）
返回值：使用reducre回调函数遍历整个数组后的结果。
说明：
有 初始值 第一次循环时将初始值赋值为累计值 循环从数组的第一个元素开始
无 初始值 第一次循环时将数组的第一个元素赋值给累计值 循环从数组的第二个元素开始

数组-reduce方法实现数组求和

使用reduce方法实现数组求和功能

image.png

示例代码

image.png

reduce方法应用

需求

统计员工薪资总额

image.png

示例代码

image.png

数组-findkndex方法

如何获取数组里面符合元素的索引?
可以使用：findIndex()方法

基本语法

image.png
作用：findIndex()方法返回数组中满足提供的测试元素的第一个元素的索引。若没有找到对应元素则返回-1.
参数：
callback:针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：
element：当前元素。 index可选：当前元素的索引。
当前数组的元素必须写，当前数组的索引号可以不写
返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1

示例代码

image.png

数组-find方法

如何查找数组目标元素？
可以使用数组的find方法。

基本语法

image.png
作用：find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。 参数：
callback：针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：
element：当前元素
index可选：当前数组的索引号可以不写
返回值：数组中第一个满足所提供测试函数的元素的值，否则返回undefined。

示例代码

image.png

数组-every方法

问题导入

如何判断下面数组里面的元素的isChecked属性的值 如果都为true，则返回true，否则则返回false

image.png
可以借助于every方法

基本语法

image.png
作用：用于检测数组里面所有的元素 是否都符合 指定的条件 所有的元素 都符合 true , 只要有一个元素不符合指定的条件 false

参数：

callback：针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：

  • element ：当前元素。
  • index 可选：当前元素的索引。

当前数组的元素必须写，当前数组的索引号可以不写

返回值：布尔值

示例代码

image.png

数组-some方法

目标

能够使用some方法检测数组里面元素测试数组中是不是至少有 1 个元素通过了指定条件的检测

问题导入

如何检测下面数组里面是否有一个元素大于等于20，如果有则返回true，否则则返回false

const arr = [10, 20, 30, 40, 50]

可以借助于some方法

基本语法

数组.some(function(element[,index]){
  
})

作用：用于检测数组里面检测数组里面元素测试数组中是不是至少有 1 个元素通过了指定条件的检测

参数：

callback：针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：

  • element ：当前元素。
  • index 可选：当前元素的索引。

当前数组的元素必须写，当前数组的索引号可以不写

返回值：布尔值

示例代码

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
​
<body>
  <script>
    const arr = [10, 20, 30, 40, 50]
    // 判断数组里面是否有大于等于20的元素
    const res = arr.some(function (item) {
      return item >= 20
    })
​
    console.log(res)
  </script>
</body>
​
</html>

数组-concat方法

目标

能够使用concat方法合并数组

问题导入

如何将多个数组合并为一个数组？

可以使用数组提供的方法concat方法

基本语法

数组.concat()
数组.concat(value)
数组.concat(value1,value2)
数组.concat(value1,value2,...,valueN)

作用：concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

参数：数组或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝

返回值：新数组

示例代码

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
​
<body>
  <script>
    // 数组1.concat(数组2)
    // 作用：将数组2合并到数组1里面 
    const arr1 = [10, 20, 30]
    const arr2 = [40, 50, 60]
​
    // arr1.push(arr2)
    // console.log(arr1)
    const arr = arr1.concat(arr2)
    console.log(arr)
  </script>
</body>
​
</html>

数组-reverse方法

目标

能够使用reverse方法对数组的元素进行翻转

问题导入

如何将下面的数组中的元素进行颠倒？

const arr = [10, 20, 30, 40, 50]

可以使用reverse方法

基本语法

数组.reverse()

作用：reverse 方法颠倒数组中元素的位置，改变了数组，并返回该数组的引用。

返回值：颠倒后的数组

示例代码

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
​
<body>
  <script>
    
    // 数组.reverse() 
    // 作用：数组翻转  会改变原数组
    arr.reverse()
    console.log(arr)
  </script>
</body>
​
</html>

数组-includes方法

目标

能够使用includes方法判断数组里面是否包含指定的元素。如果包含则返回 true，否则返回 false

基本语法

数组.includes(searchElement)

作用：用来判断一个数组是否包含一个指定的元素

参数：searchElement 需要查找的元素值

返回值：布尔值，数组里面包含指定元素返回true，不包含返回false

案例-对象方法与数组方法的练习

目标

能够通过Object.values() 方法与 数组.join() 方法 完成目标案例

需求

请将size和color里面的值拼接为字符串之后，写到div标签里面，

const spec =  { size: '40cm*40cm' , color: '黑色'}

思路： 获得所有的属性值，然后拼接字符串就可以了

  1. 获得所有属性值是： Object.values() 返回的是数组
  2. 使用数组.join('') 这样就可以转换为字符串了

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box"></div>
  <script>
    const spec =  { size: '40cm*40cm' , color: '黑色'}  
    // 请将size和color里面的值拼接为字符串之后，写到div标签里面
    // 1. Object.values() 获取 对象的属性值 返回数组
    // 2. 将数组拼接成字符串 数组.join('/')
    const arr = Object.values(spec)
    const str = arr.join('/')
    document.querySelector('.box').innerHTML = str
​
  </script>
</body>
</html>

Array.from()方法

目标

能够使用Array.from()方法将伪数组转换为真数组

问题导入

问：伪数组可以调用数组的方法吗？

不可以，但是一定要调用怎么办呢？可以将伪数组转换为真数组

基本语法

Array.from(伪数组)

参数：想要转换成数组的伪数组对象

返回值：真数组

作用：将伪数组转换为真数组后可以调用数组的方法

warning 注意 from方法是Array的静态方法，只能被Array来调用

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    /*
      Array.from(数组)
      作用：将伪数组转换为 真数组
    */
​
    const li = document.querySelectorAll('li')
    // console.log(li)
    // li.pop()
    const arr = Array.from(li)
    // const arr = [...li]
    // console.log(arr)
    arr.pop()
  
  </script>
</body>
</html>

字符串-substring方法

目标

能够使用substring方法截取字符串

基本语法

字符串.substring(indexStart[, indexEnd])

作用： 从开始下标的位置截取目标字符串

参数：

  • indexStart 开始下标： 需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。
  • indexEnd 结束下标： 可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。

返回值：包含给定字符串的指定部分的新字符串。

:::tip 说明

  • substring 提取从 开始下标 到 结束下标 之间的字符，不包括结束下标
  • 如果省略 结束下标，substring 提取字符一直到字符串末尾

示例代码

const str = 'javascript'
console.log(str.substring(4)) // script 
console.log(str.substring(0,4)) // java
​

字符串-split方法

目标

能够使用split方法将字符串以指定的分隔符分割成数组

基本语法

字符串.split([分隔符])

作用：将字符串以指定的分隔符分割成数组

参数：指定分隔符

返回值：数组

示例代码

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
​
<body>
  <script>
    /*
      字符串.split('分割符')
      将字符串分割为数组
    */
    const str = '2022/9/5'
    //  const arr = str.split('')
    const arr = str.split('/')
    console.log(arr)
  // console.log(arr.join('-'))
  </script>
</body>
​
</html>

字符串-toUpperCase方法

目标

能够使用toUpperCase方法将字符串小写字母转换为大写字母

基本语法

字符串.toUpperCase()

返回值：一个新的字符串，表示转换为大写的调用字符串

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const str = 'zhaolei'
    /*
      字符串.toUpperCase(要转换的字符串) 小转大
    */
   console.log(str.toUpperCase())
  </script>
</body>
</html>

字符串-toLowerCase方法

目标

能够使用toLowerCase方法将字符串大写字母转换为小写字母

基本语法

字符串.toLowerCase()

返回值：一个新的字符串，表示转换为小写的调用字符串

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const str = 'MAYUN'
    /*
      字符串.toLowerCase(要转换的字符串) 大转小
    */
   console.log(str.toLowerCase())
  </script>
</body>
</html>
avatar
文章
阅读
粉丝