[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)

CN-Dust

于 2021-09-21 16:42:46 发布

阅读量83

点赞数

分类专栏： js 学习笔记前端学习文章标签： javascript php html

本文链接：https://blog.csdn.net/qq_36286039/article/details/120402149

版权

前端学习同时被 3 个专栏收录

83 篇文章 1 订阅

订阅专栏

学习笔记

66 篇文章 3 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

课程来源：后盾人
上一篇的内容：[JavaScript] JavaScript数组挖掘，不只是讲数组哟
数组引用类型分析，多维数组，用Array.of为数组创建细节，类型检测与转换，在一个数组后面加一个新的数组，解构赋值，多种添加元素的方式，在数组中增删改，小函数：移动数组里的一部分，清空数组的方式，split和join的使用，find和findIndex的使用，自定义find函数，神奇的排序。

数组的循环操作

首先我们定义一个数组，命名为lessons

let lessons = [
  { name: 'js基础', catagory: 'js' },
  { name: 'flex弹性盒子模型', catagory: 'css' },
  { name: 'html基础', catagory: 'html' },
  { name: '数据库查询', catagory: 'mysql' },
  { name: 'C语言YYDS', catagory: 'c' },
]

普通的for循环

for (let i = 0; i < lessons.length; i++) {
  lessons[i].name = `Dust喜欢的${lessons[i].name}`
}
console.log(lessons)

运行结果：
在这里插入图片描述
2. for-in循环

for (let key in lessons) {
  lessons[key].name = `Dust喜欢的${lessons[key].name}`
}

在这里插入图片描述
3. for-of循环

注意这里传值和传址的区别，传值的时候改变不了原数组的。

let arr = [1, 2, 3, 4, 5]
for (let value of arr) {
  //开辟一个新的内存空间赋值给它
  value += 10
  //此时arr表示：关我什么事？这种方法是改变不了原数组的。
}
console.log(arr) //[ 1, 2, 3, 4, 5 ]

let a = [{ n: 1 }, { n: 2 }]
for (let value of a) {
  value.n += 10
  //这次是引用类型，所以可以改变到里面的内容。
  //这次在let的时候不是开辟一个新的空间，而是直接拿来它的地址用。
}
console.log(a) //[ { n: 11 }, { n: 12 } ]

运行结果：
在这里插入图片描述

forEach循环

forEach还可以直接操作dom元素

lessons.forEach(function (item, index, lessons) {
  item.title = item.name.substr(0, 2)
})
console.log(lessons)

运行结果：
在这里插入图片描述

迭代器

首先来看看next里都有些啥？

let arr = ['dust1', 'dust2', 'hahaha']
let values = arr.values()
console.log(values.next())

运行结果：
看懂了吗？明白了next()里都有些啥了不？
来看看迭代器是怎么写的了把~

let arr = ['dust1', 'dust2', 'hahaha']
let values = arr.values()
while (({ value, done } = values.next()) && done === false) {
  console.log(value)
}

运行结果：

every和some的使用

every：一旦有就不行

let user = [
  { name: '李四', js: 89 },
  { name: '张三', js: 99 },
  { name: '马六', js: 55 },
]
let res = user.every(function (item) {
  return item.js >= 60
})
console.log(res ? '全都及格' : '有人不及格') //有人不及格

some：有一个就行

let arr = ['dust1', 'dust2', 'hahaha']
let res1 = arr.some(function (value, index, arr) {
  console.log(value)
  //有一个为真就行
  return true
})
console.log(res1) //dust1 true

some配合DOM的实战
test.html
达到效果：如果不输入指定的关键字就有提示消息

<!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>
    <input type="text" name="title" />
    <span></span>
    <script defer>
      let keywords = ['js', 'php']
      let title = document.querySelector('[name="title"]')
      title.addEventListener('keyup', function () {
        const res = keywords.some((keyword) => {
          return this.value.indexOf(keyword) != -1
        })
        if (res == false) {
          document.querySelector('span').innerHTML = '必须包含' + keywords.join(',') + '关键词'
        } else {
          document.querySelector('span').innerHTML = ''
        }
      })
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述

在这里插入图片描述

filter过滤器的使用

let lessons = [
  { name: 'js基础', catagory: 'js' },
  { name: 'flex弹性盒子模型', catagory: 'css' },
  { name: 'html基础', catagory: 'html' },
  { name: '数据库查询', catagory: 'mysql' },
  { name: 'C语言YYDS', catagory: 'c' },
  { name: '响应式媒体查询', catagory: 'css' },
]
const cssLessons = lessons.filter(function (lesson) {
  return lesson['catagory'] == 'css'
})
console.log(cssLessons)

在这里插入图片描述

map的使用

map是一个值类型，相当于一个复印机，不会改变原来的值。

let lessons = [
  { name: 'js基础', catagory: 'js' },
  { name: 'flex弹性盒子模型', catagory: 'css' },
  { name: 'html基础', catagory: 'html' },
  { name: '数据库查询', catagory: 'mysql' },
  { name: 'C语言YYDS', catagory: 'c' },
  { name: '响应式媒体查询', catagory: 'css' },
]

const myLessons = lessons.map((item) => {
  return (item.name = `Dust喜欢的${item.name}`)
})
console.log(myLessons)

运行结果：
在这里插入图片描述

神奇的reduce

reduce是一个神奇的迭代方法，每次都会把上一次的返回值传给下一次，理解一下什么叫递归很重要。
首先通过一个输出来感受一下这个语法：

let arr = [1, 2, 3, 4, 5]
arr.reduce((pre, value, index, array) => {
  console.log(pre, value)
  return 99
})

在这里插入图片描述

接下来介绍两个有点绕的reduce示例

统计一个数组中某个数出现的次数。

比如这里统计1在a数组中出现的次数。
老师的简写写法简直让人叹为观止啊！

let arr = [1, 2, 3, 4, 5, 1, 2, 3, 1]
function arrayCount(array, item) {
  return array.reduce((total, cur) => {
    total += item == cur ? 1 : 0
    return total
  }, 0)
}
console.log(arrayCount(arr, 1))

在这里插入图片描述

输出数组中的最大值

function arrayMax(array) {
  return array.reduce((pre, cur) => {
    return pre > cur ? pre : cur
  })
}
console.log(arrayMax(arr)) //5

在这里插入图片描述

CN-Dust

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)

课程来源：后盾人上一篇的内容：[JavaScript] JavaScript数组挖掘，不只是讲数组哟数组引用类型分析，多维数组，用Array.of为数组创建细节，类型检测与转换，在一个数组后面加一个新的数组，解构赋值，多种添加元素的方式，在数组中增删改，小函数：移动数组里的一部分，清空数组的方式，split和join的使用，find和findIndex的使用，自定义find函数，神奇的排序。数组的循环操作首先我们定义一个数组，命名为lessonslet lessons = [ { n.
复制链接

扫一扫

专栏目录