JS 高级(五)ES5新增函数

简介: JS 高级(五)ES5新增函数

ES5(ECMAScript 第5个版本)

数组中新增函数

判断函数

every(),专门判断一个数组中是否所有元素都符合要求。


var 判断结果=数组.every(
      function(当前元素值n,当前下标i,当前数组arr){//回调函数
        return 检查当前元素值是否符合要求,并返回检查结果
      }
    );

       every 内自带 for 循环,自动遍历数组中每个元素,每遍历一个元素,就自动调用一次回调函数;每次调用回调函数时,都自动传入三个值:当前元素值 n、当前下标 i、当前数组对象 arr。


       如果本次回调函数判断结果为 true,则至少说明当前元素符合要求,every 会自动遍历下一个元素,直到所有元素遍历完成。如果都没有碰到不符合要求的元素,则结束循环,整体返回 true,说明当前数组中所有元素都符合要求。


       如果本次回调函数判断结果为 false,则说明当前元素不符合要求,every 立刻退出循环,直接返回 false,表明当前数组中不是所有元素都符合要求。


举例:判断哪个数组全部由偶数组成;


<script>
    var arr1 = [1, 3, 5, 7, 9];
    var arr2 = [2, 4, 6, 6, 4];
    var result1 = arr1.every(
      function (n, i, arr) {
        console.log(`
        arr1.every自动调用了一次回调函数;
        收到实参值:n=${n}i=${i}arr=${arr};
        回调函数执行结果返回${n%2==0}
        `);
        return n % 2 == 0;
      }
    );
    var result2 = arr2.every(
      function (n, i, arr) {
        console.log(`
        arr2.every自动调用了一次回调函数;
        收到实参值:n=${n}i=${i}arr=${arr};
        回调函数执行结果返回${n%2==0}
        `);
        return n % 2 == 0;
      }
    );
    console.log(result1, result2); //false true
  </script>
some(),专门检查一个数组中是否包含符合要求的元素;
var 判断结果=数组.some(
      function(当前元素值, 当前下标位置, 当前数组){
        return 判断当前元素值是否符合要求
      }
    )

       some 内自带 for 循环,自动遍历数组中每个元素,每遍历一个元素,就自动调用一次回调函数;每次调用回调函数时,都自动传入三个值:当前元素值、当前下标 i、当前数组对象 arr,在回调函数内,判断当前元素值是否符合要求,并返回判断结果给some函数。


       如果本次回调函数判断结果为 true,则说明至少当前元素符合要求,some 立刻退出循环,直接返回 true,说明当前数组中包含至少一个符合要求的元素。


       如果本次回调函数判断结果为 false,则说明当前元素不符合要求,some 只能继续遍历下一个元素。如果直到遍历结束都没有发现符合要求的元素,则返回 false。说明当前数组中不包含符合要求的元素。


举例:判断哪个数组中包含奇数;


<script>
    var arr1 = [1, 3, 5, 7, 9];
    var arr2 = [2, 4, 6, 6, 4];
    var result1 = arr1.some(
      function (n, i, arr) {
        console.log(`
        arr1.some自动调用了一次回调函数;
        收到实参值:n=${n}i=${i}arr=${arr};
        回调函数执行结果返回${n%2==1}
        `);
        return n % 2 == 1;
      }
    );
    var result2 = arr2.some(
      function (n, i, arr) {
        console.log(`
        arr2.some自动调用了一次回调函数;
        收到实参值:n=${n}i=${i}arr=${arr};
        回调函数执行结果返回${n%2==1}
        `);
        return n % 2 == 1;
      }
    );
    console.log(result1, result2); //true false 
  </script>

遍历函数

forEach(),专门遍历函数代替 for 循环来简化遍历索引数组的特殊函数;


数组.forEach(function(当前元素值, 当前下标i, 当前数组){
       对当前元素值执行操作
    })

       在回调函数内,对当前元素执行规定的操作,不需要返回值。


举例:点名;


<script>
    var arr = ["汤米", "鲍勃", "朱丽叶", "巴啦啦"];
    // for循环遍历写法
    for (i = 0; i < arr.length; i++) {
      console.log(`${arr[i]} - 到!`);
    }
    // forEach写法
    arr.forEach(function (n) {
      console.log(`${n} - 到!`);
    })
    // forEach简写
    arr.forEach(n => console.log(`${n} - 到!`))
  </script>
map(),专门读取原数组中每个元素值,进行修改后,生成一个新数组返回,格式如下:
var 新数组=原数组.map(
      function(当前元素值, 当前下标i, 当前数组){
        return 当前元素值修改后的新值
      }
    )

       在回调函数内,对当前元素值进行修改,并将修改后的新值返回给map函数;map函数接到新值后,自动放入新数组中对应的位置;遍历结束,map返回新数组。原数组保持不变。


举例:将数组中所有元素*2,返回新数组;


<script>
    var arr1 = [1, 2, 3, 4, 5, 6, 7];
    var arr2 = arr1.map(
      function (n, i) {
        return n * 2;
      }
    )
    console.log(arr1);//[1, 2, 3, 4, 5, 6, 7]
    console.log(arr2);//[2, 4, 6, 8, 10, 12, 14]
  </script>
Filter(),过滤,复制出数组中符合要求的个别元素,放入新数组中返回。格式如下:
var 新数组=数组.filter(
    function(当前元素值, 当前下标i, 当前数组){
      return 判断当前元素值是否符合要求
    }
   )

       在回调函数内,判断当前元素值是否符合要求,并返回判断结果,如果当前元素的判断结果为 true,说明当前元素符合条件,则 filter 会将当前元素追加到新数组中保存,如果当前元素的判断结果为 false,说明当前元素不符合要求,则 filter 什么也不干,继续遍历下一个元素。


举例:过滤出数组中的偶数;


<script>
    var arr1 = [1, 2, 3, 4, 5, 6];
    var arr2 = arr1.filter(
      function (n, i) {
        console.log(`arr.filter()自动调用一次回调函数。接收到元素值=${n}。判断后结果为${n%2==0}`);
        return n % 2 == 0
      }
    )
    console.log(arr1);//[1, 2, 3, 4, 5, 6]
    console.log(arr2);//[2, 4, 6]
  </script>

数组汇总

reduce(),汇总,对数组中所有元素进行统计,并返回统计结果的函数;


var 结果=数组.reduce(
    function(捐款箱, 当前元素值n, 当前下标i, 当前数组arr){
   return捐款箱+当前元素值
    },
    起始值
  )

       reduce 先在内部创建一个变量,保存汇总的起始值(捐款箱变量);自带 for 循环,自动遍历原数组中每个元素,每遍历一个元素,就自动调用一次回调函数,每次调用回调函数时,都自动传入4个值:捐款箱变量中的临时汇总值、当前元素值 n、当前下标 i、当前数组对象 arr。


       在回调函数内,将临时汇总值与当前元素值相加,算出新的汇总值,再返回给 reduce,reduce 拿到新的汇总值之后,放回捐款箱变量中暂存,为继续累加下一个值做准备。


举例:对数组内容求和;


<script>
    var arr = [1, 2, 3, 4, 5, 6, 7];
    var result = arr.reduce(
      function (box, n) {
        console.log(`
          arr.reduce自动调用一次回调函数,
          初始值为:${box},
          当前元素值为:${n},
          返回值:${box + n}
          `);
        return box + n;
      },
      0 //起始值
    )
    console.log(result); //28
  </script>

补充:this 5种


(1)obj.fun()  fun中的this指 .前的obj对象(谁调用指谁);

(2)new Fun()  Fun中的this指new创建的新对象;

(3)fun() 或 (function(){ ... })() 或 回调函数 thisz默认指windozw;

(4)原型对象(prototype)中的this指将来调用这个共有函数的.前的某个子对象(谁调用指谁);

(5)访问器属性中的this指代访问器属性所在的当前对象。


相关文章
|
3天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
16 7
|
1月前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
7 2
|
1天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
9 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
1天前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
|
1天前
|
JavaScript 前端开发 索引
JS中的substr()和substring()函数有什么区别
JS中的substr()和substring()函数有什么区别
|
2天前
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
19 0
|
3天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
19 3
|
4天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
4天前
|
JavaScript 前端开发 容器
JavaScript 函数
JavaScript 函数