master

分支 (1)

管理

管理

master

fuxi_107
/
场景的数组迭代方法--以及es6常用的语法.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. es6常见的语法
      // js == dom + bom + ECMA Script
      // es也有很多个版本，别人组织不断在改进，发布新功能， 2015年之前 es3  es5 es6这么叫
      // 2015以后， es的版本就用年份来定义  es2015  es2016  es2017(asyn + await)  es2020 (?. 可选链)   es2024
      // es官网---- https://tc39.es/ecma262/
      // console.log(document.querySelector('body'));
      // console.log(window.screen.width, window.screen.height, window.screen.availHeight);
      // console.log([].push(2));
      // 阮一峰的一个文档，对国外es6文档翻译的比较好，参考他的  https://es6.ruanyifeng.com/

      // 1. let const 代替以前的 var 声明变量---- var声明变量有歧义，会变量声明提升
      // 2. 对象或者数组的 解构赋值   {...obj}  [...arr]  在后面的react的hooks里面 大量使用解构赋值
      // 3. 箭头函数（主要是this的问题，没有this，使用的话是上层作用域里面的）
      // 4. promise(.then  .catch) + async  + await 更方便的处理异步问题， 在以前是用回调函数的写法
      // 5. 数组或者对象等新增了很多 迭代方法，例如（forEach filter map find findIndex some every reduce）

      // 2. 数组里面常见的迭代方法 ---  本质上就是问你各个函数的参数和返回值
      // 举例：forEach 有两个参数，第一个参数是回调函数，回调函数又有三个参数  第二参数是回调函数里面的this指向。 forEach没有返回值
      // forEach就是循环遍历数组， 返回undefined 就是没有返回值的意思
      // filter就是过滤数组，返回过滤后的新数组
      // map就是加工数组， 返回加工过后的新数组
      // some 检查数组里面是否有一个元素符合条件，如果有返回true
      // every 检查数组里面所有元素是否都符合条件， 全部符合条件才返回true

      const arr = [10, 20, 30];
      const obj = { name: '鲁班' };
      // forEach 有两个参数；  第一个参数是回调函数， 第二个参数是回调函数里面的this指向
      //         第一个参数是函数，这个函数里面 又有三个参数 item 数组每一项  index 数组的索引号  arr 原始数组
      const res = arr.forEach(function (item, index, abc) {
        console.log(item, index, abc, this);
      }, obj);

      console.log(res);

      const res1 = arr.some((item) => item > 40);
      console.log(res1);

      const res2 = arr.every((item) => item > 15);
      const res3 = arr.every((item) => item > 5);
      const res4 = arr.every((item) => item > 30);
      console.log(res2, res3, res4);
    </script>
  </body>
</html>