【JS高级】ES5标准规范之数组高阶函数的应用_11

儒雅的烤地瓜

已于 2022-08-15 09:56:15 修改

阅读量477

点赞数 1

分类专栏： # ⭐️ JS高级教程文章标签： javascript JS数组函数过滤函数汇总函数遍历函数

于 2022-08-12 08:57:43 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/125930334

版权

⭐️ JS高级教程专栏收录该内容

17 篇文章 0 订阅

订阅专栏

🆙【前文回顾】👉 ES5标准规范之创建子对象以及替换this_10

👨‍🌾 何为高阶函数

高阶函数英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。Array扩展：forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex

❣️ 数组新增函数

1. 判断: 2个

(1). every()

每个

a. 什么是: 判断一个数组中是否所有元素都符合要求！

b. 如何:

var 布尔值=数组.every(function(当前元素值, 当前位置, 当前数组){

return 判断条件

})

c. 原理:

1). every()内部自带for循环，自动遍历数组中每个元素

2). 每遍历一个元素，就自动调用一次回调函数——信任

3). 每次调用回调函数时，都会自动传入三个实参值:

i. 将当前正在遍历的元素值，传给回调函数的第一个形参

ii. 将当前正在遍历的下标位置，传给回调函数的第二个形参

iii. 将当前正在遍历的整个数组对象，传给回调函数的第三个形参

4). 回调函数内部，根据本次传入的实参值，判断当前元素是否符合条件要求，并返回判断结果(true或false)

5). every()接到回调函数返回的判断结果后，再决定是否继续遍历下一个元素:

i. 如果当前元素判断结果为true，才有必要继续遍历下一个元素。除非所有元素的判断结果都为true，整个every()才返回true，说明整个数组中所有元素都符合要求！

ii. 如果当前元素判断结果为false，直接退出循环，整个every得出结论:false,说明数组中不是所有元素都符合要求！

d. 示例: 判断哪个数组全由偶数组成:

11_every.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>
    var arr1=[1,2,3,4,5];//false
    var arr2=[2,4,6,4,2];//true
    //判断哪个数组全由偶数组成
    //                        当前元素值 下标 数组
    //                               ↓    ↓   ↓
    var result1=arr1.every(function(elem, i, arr){
      console.log(`arr1.every()自动调用一次回调函数，elem=${elem},i=${i},arr=${arr},返回判断结果:${elem%2==0}`);
      //判断当前元素是否是偶数
      return elem%2==0
    })
    var result2=arr2.every(function(elem, i, arr){
      console.log(`arr2.every()自动调用一次回调函数，elem=${elem},i=${i},arr=${arr},返回判断结果:${elem%2==0}`);
      //判断当前元素是否是偶数
      return elem%2==0
    })
    console.log(result1,result2);//false,true
  </script>
</body>
</html>

运行结果:

arr1.every()自动调用一次回调函数，elem=1,i=0,arr=1,2,3,4,5,返回判断结果:false

arr2.every()自动调用一次回调函数，elem=2,i=0,arr=2,4,6,4,2,返回判断结果:true

arr2.every()自动调用一次回调函数，elem=4,i=1,arr=2,4,6,4,2,返回判断结果:true

arr2.every()自动调用一次回调函数，elem=6,i=2,arr=2,4,6,4,2,返回判断结果:true

arr2.every()自动调用一次回调函数，elem=4,i=3,arr=2,4,6,4,2,返回判断结果:true

arr2.every()自动调用一次回调函数，elem=2,i=4,arr=2,4,6,4,2,返回判断结果:true

false true

(2). some()

一些

a. 什么是: 判断一个数组中是否包含符合要求的元素

b. 如何:

var 布尔值=数组.some(function(当前元素值, 当前位置, 当前数组){

return 判断条件

})

c. 原理:

1). some()内部自带for循环，自动遍历数组中每个元素

2). 每遍历一个元素，就自动调用一次回调函数——信任

3). 每次调用回调函数时，都会自动传入三个实参值:

i. 将当前正在遍历的元素值，传给回调函数的第一个形参

ii. 将当前正在遍历的下标位置，传给回调函数的第二个形参

iii. 将当前正在遍历的整个数组对象，传给回调函数的第三个形参

4). 回调函数内部，根据本次传入的实参值，判断当前元素是否符合条件要求，并返回判断结果(true或false)

5). some()接到回调函数返回的判断结果后，再决定是否继续遍历下一个元素:

i. 如果当前元素判断结果为false，才有必要继续遍历下一个元素。除非所有元素的判断结果都为false，整个some ()才返回false，说明整个数组中所有元素都不符合要求！

ii. 如果当前元素判断结果为true，直接退出循环，整个some得出结论:true,说明数组中包含符合要求的元素！

d. 示例: 判断哪个数组中包含奇数:

12_some.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>
    var arr1=[1,2,3,4,5];//true
    var arr2=[2,4,6,4,2];//false
    //判断哪个数组中包含奇数
    //                        当前元素值 下标 数组
    //                               ↓    ↓   ↓
    var result1=arr1.some(function(elem, i, arr){
      console.log(`arr1.some()自动调用一次回调函数，elem=${elem},i=${i},arr=${arr},返回判断结果:${elem%2==1}`);
      //判断当前元素是否是奇数
      return elem%2==1
    })
    var result2=arr2.some(function(elem, i, arr){
      console.log(`arr2.some()自动调用一次回调函数，elem=${elem},i=${i},arr=${arr},返回判断结果:${elem%2==1}`);
      //判断当前元素是否是奇数
      return elem%2==1
    })
    console.log(result1,result2);//true,false
  </script>
</body>
</html>

运行结果:

arr1.some()自动调用一次回调函数，elem=1,i=0,arr=1,2,3,4,5,返回判断结果:true

arr2.some()自动调用一次回调函数，elem=2,i=0,arr=2,4,6,4,2,返回判断结果:false

arr2.some()自动调用一次回调函数，elem=4,i=1,arr=2,4,6,4,2,返回判断结果:false

arr2.some()自动调用一次回调函数，elem=6,i=2,arr=2,4,6,4,2,返回判断结果:false

arr2.some()自动调用一次回调函数，elem=4,i=3,arr=2,4,6,4,2,返回判断结果:false

arr2.some()自动调用一次回调函数，elem=2,i=4,arr=2,4,6,4,2,返回判断结果:false

true false

2. 遍历: 2个

(1). forEach

a. 什么是: 专门遍历数组中每个元素，执行相同的操作！

b. 问题: for循环虽然也可以遍历数组中的元素，但是语法上已经无法进一步简化！

c. 解决: 今后只要遍历索引数组，都用forEach来代替for循环

d. 如何:

数组.forEach(function(当前元素值, 当前位置, 当前数组){

对当前元素执行相同的操作

})

e. 原理:

1). forEach内已经自带for循环，自动遍历数组中每个元素

2). 每遍历一个元素，就自动调用一次回调函数

3). 每次调用回调函数时，都会自动传入三个值:

i. 将当前正在遍历的元素值传给回调函数第一个形参

ii. 将当前正在遍历的下标位置传给回调函数第二个形参

iii. 将当前数组对象传给回调函数的第三个形参

4). 在回调函数内部，可以用当前元素值执行操作

f. 问题: 因为forEach是数组家的函数，所以只能遍历索引数组，无法遍历字符串或类数组对象等；for循环几乎是万能的！

g. 示例: 使用forEach点名

1_forEach.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>
    var arr=["亮亮","然然","东东"];
    //点名: 
    //for
    // for(var i=0;i<arr.length;i++){
    //   console.log(`${arr[i]} - 到！`)
    // }
    //forEach
    // arr.forEach(function(elem,i,arr){
    //   console.log(`${elem} - 到！`)
    // })
    // arr.forEach(function(elem){ //参数i、arr没有用到，可以省略不写
    //   console.log(`${elem} - 到！`)
    // })
    //使用箭头函数，进一步简化forEach，这样一看完胜for循环
    arr.forEach(elem=>console.log(`${elem} - 到！`)); 
  </script>
</body>
</html>

运行结果:

亮亮 - 到！

然然 - 到！

东东 - 到！

(2). map:

a. 什么是: 基于原数组的内容，改造出一个新的数组

b. 如何:

var 新数组=原数组.map(function(当前元素值, 当前下标, 当前数组){

return 将当前元素值修改后得到的新值

})

c. 原理:

1). 先创建一个新的空数组等待。

2). map内已经自带for循环，自动遍历数组中每个元素

3). 每遍历一个元素，就自动调用一次回调函数

4). 每次调用回调函数时，都会自动传入三个值:

i. 将当前正在遍历的元素值传给回调函数第一个形参

ii. 将当前正在遍历的下标位置传给回调函数第二个形参

iii. 将当前数组对象传给回调函数的第三个形参

5). 在回调函数内部，将当前元素值经过修改后，得到新的元素值，返回出来

6). map接到回调函数返回的新元素之后，自动将新元素值，放入新数组中对应的位置.

7). 遍历结束，将新数组返回出来！

d. 强调: 原数组内容保持不变！而是返回新数组！且map() 不会对空数组进行检测。

e. 示例: 将一个数组中的元素值*2后，放入新数组返回，原数组不变

2_map.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>
    var arr=[1,2,3,4,5];
    //想将原数组中每个值*2,生成新数组，原数组保持不变
    var arr2=arr.map(function(elem,i,arr){
      console.log(`arr.map()自动调用一次回调函数，elem=${elem}, i=${i}, arr=${arr}, 加工后返回新元素值${elem*2}，放到新数组中${i}位置`)
      return elem*2
    })
    console.log(arr2);//2,4,6,8,10
    console.log(arr);//1,2,3,4,5

  </script>
</body>
</html>

运行结果:

arr.map()自动调用一次回调函数，elem=1, i=0, arr=1,2,3,4,5, 加工后返回新元素值2，放到新数组中0位置

arr.map()自动调用一次回调函数，elem=2, i=1, arr=1,2,3,4,5, 加工后返回新元素值4，放到新数组中1位置

arr.map()自动调用一次回调函数，elem=3, i=2, arr=1,2,3,4,5, 加工后返回新元素值6，放到新数组中2位置

arr.map()自动调用一次回调函数，elem=4, i=3, arr=1,2,3,4,5, 加工后返回新元素值8，放到新数组中3位置

arr.map()自动调用一次回调函数，elem=5, i=4, arr=1,2,3,4,5, 加工后返回新元素值10，放到新数组中4位置

[2, 4, 6, 8, 10]

[1, 2, 3, 4, 5]

3. 过滤

(1). 什么是: 选取出原数组中符合条件的元素放入新数组中返回。

(2). 如何: 过滤

var 新数组=原数组.filter(function(当前元素值, 当前位置, 当前数组){

return 判断条件

})

(3). 原理:

a. 先创建一个新的空数组等待。

b. filter内已经自带for循环，自动遍历数组中每个元素

c. 每遍历一个元素，就自动调用一次回调函数

d. 每次调用回调函数时，都会自动传入三个值:

1). 将当前正在遍历的元素值传给回调函数第一个形参

2). 将当前正在遍历的下标位置传给回调函数第二个形参

3). 将当前数组对象传给回调函数的第三个形参

e. 在回调函数内部，根据本次传入的元素值判断当前元素是否符合条件的要求，并返回判断结果

f. filter接到回调函数返回的判断结果之后:

1). 如果当前元素判断结果为true，说明当前元素符合条件，则filter自动将当前元素追加到新数组中保存

2). 如果当前元素判断结果为false，说明当前元素不符合条线，则filter什么也不干，继续遍历下一个元素。

g. 遍历结束，将新数组返回出来！

(4). 强调: filter会把符合条件的元素复制一个副本放入新数组中。原数组始终保持不变！
且filter() 是不会对空数组进行检测的。

(5). 示例: 过滤出数组中的偶数，放入新数组返回

3_filter.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>
    var arr=[1,2,3,4,5];
    //想过滤出数组中的偶数
    var arr2=arr.filter(function(elem){
      console.log(`arr.filter()自动调用一次回调函数,elem=${elem},返回判断结果:${elem%2==0}`) 
      //判断当前元素是否是偶数
      return elem%2==0;
    });
    console.log(arr2);//2,4
    console.log(arr);//1,2,3,4,5
  </script>
</body>
</html>

运行结果:

arr.filter()自动调用一次回调函数,elem=1,返回判断结果:false

arr.filter()自动调用一次回调函数,elem=2,返回判断结果:true

arr.filter()自动调用一次回调函数,elem=3,返回判断结果:false

arr.filter()自动调用一次回调函数,elem=4,返回判断结果:true

arr.filter()自动调用一次回调函数,elem=5,返回判断结果:false

[2, 4]

[1, 2, 3, 4, 5]

👨‍🌾 扩展：JavaScript中的map()函数与filter()函数的区别

1. 相似 👇

语法上来看两者相似，都能接受一个回调函数，并作用于调用者。
 var arr = [1, 2, 3, 4, 5, 6];
 var mapArr = arr.map((item) => (item += 1));
 var filterArr = arr.filter((item) => (item += 1));
 console.log(mapArr);
 console.log(filterArr);
运行结果：

2. 区别 👇

不同点在于：当回调函数为【布尔函数】时

👉🏻map()函数会将回调函数作用于“调用者”的每一个元素，一一执行后将返回的结果构成数组作为最终结果返回。

👉🏻filter()函数会将回调函数作用于"调用者"的每一个元素，一一执行后将返回结果为真的结果构成数组作为最终结果返回。
var arr = [1, 2, 3, 4, 5, 6];
var mapArr = arr.map((item) => item > 5);
var filterArr = arr.filter((item) => item > 5);
console.log(mapArr);
console.log(filterArr);
运行结果：

分析 👇

原生js中数组可以直接通过map()，filter()函数来进行一次操作，他们分别是做一次统一映射，和一次过滤。说的更通俗一点，就是map函数之后，数组元素个数不变，但是按照一定的条件转换，数组元素发生了变化。filter函数之后，数组元素个数可能发生了改变，但是数组元素不会发生改变。

总结 👇

私认为两者的区别可以简单总节为一句话：

filter返回的内容要么是调用数组本身，要么是调用数组的子集；而map返回的内容则有可能是执行的结果。

4. 汇总:(仅以累加求和举例)

(1). 什么是: 对数组中所有元素经过统计后得出一个最终的结论

(2). 如何:

减少/汇总

var 结果=数组.reduce(

function(临时汇总值, 当前元素值, 当前位置, 当前数组){

return 将当前元素值汇总到临时汇总值中，计算出新的临时汇总值

起始值

)

(3). 原理:

a. 先创建一个新的变量准备保存临时汇总值。这个新变量的初始值为reduce的第二个实参值——起始值。

b. reduce内已经自带for循环，自动遍历数组中每个元素

c. 每遍历一个元素，就自动调用一次回调函数

d. 每次调用回调函数时，都会自动传入四个值:

1). 先将临时汇总值传给回调函数的第一个形参

2). 将当前正在遍历的元素值传给回调函数第二个形参

3). 将当前正在遍历的下标位置传给回调函数第三个形参

4). 将当前数组对象传给回调函数的第四个形参

e. 在回调函数内，将当前元素值和临时汇总值相加，计算出新的临时汇总值，并返回新的临时汇总值。

f. reduce接到回调函数返回的新的临时汇总值之后，自动将新的临时汇总值保存到变量中，为继续汇总下一个元素做准备。

g. 遍历结束，将变量中保存的汇总值返回，就是我们最终想要的统计结果。

(4). 示例: 使用reduce统计数组中所有元素的和

4_reduce.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>
    var arr=[1,2,3,4,5];
    //想对数组内容求和
    var result=arr.reduce(
      function(box,elem){
        console.log(`arr.reduce()调用一次回调函数，临时汇总值box=${box}, elem=${elem}, box+elem计算出新汇总值:${box+elem}`)
        return box+elem;
      },
      0
    );
    console.log(result);//15
    var arr2=[6,7,8,9,10];
    result=arr2.reduce(
      function(box,elem){
        console.log(`arr2.reduce()调用一次回调函数，临时汇总值box=${box}, elem=${elem}, box+elem计算出新汇总值:${box+elem}`)
        return box+elem
      },
      result
    )
    console.log(result);//55
  </script>
</body>
</html>

运行结果:

arr.reduce()调用一次回调函数，临时汇总值box=0, elem=1, box+elem计算出新汇总值:1

arr.reduce()调用一次回调函数，临时汇总值box=1, elem=2, box+elem计算出新汇总值:3

arr.reduce()调用一次回调函数，临时汇总值box=3, elem=3, box+elem计算出新汇总值:6

arr.reduce()调用一次回调函数，临时汇总值box=6, elem=4, box+elem计算出新汇总值:10

arr.reduce()调用一次回调函数，临时汇总值box=10, elem=5, box+elem计算出新汇总值:15

15

arr2.reduce()调用一次回调函数，临时汇总值box=15, elem=6, box+elem计算出新汇总值:21

arr2.reduce()调用一次回调函数，临时汇总值box=21, elem=7, box+elem计算出新汇总值:28

arr2.reduce()调用一次回调函数，临时汇总值box=28, elem=8, box+elem计算出新汇总值:36

arr2.reduce()调用一次回调函数，临时汇总值box=36, elem=9, box+elem计算出新汇总值:45

arr2.reduce()调用一次回调函数，临时汇总值box=45, elem=10, box+elem计算出新汇总值:55

55

补：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意：reduce() 对于空数组是不会检测即不会执行回调函数的

补：js 数组 find,some,filter,reduce区别详解
Array.find 返回一个对象（第一个满足条件的对象）后停止遍历
Array.some 返回是否满足条件的布尔值
Array.filter 遍历整个Array返回一个数组（包含所有满足条件的对象）
Array.reduce 为数组的归并方法，使用场景很多，比如求和、求乘积，计次，去重，多维转一维，属性求和等...

代码查看链接参考资料：https://www.jb51.net/article/214893.htm
结论：同时使用 Array.filter 和 Array.map 的时候，对整个数组循环了 2 遍。第一次是过滤返回一个新的数组，第二次通过 map 又构造一个新的数组。使用了两个数组方法，每一个方法都有各自的回调函数，而且 filter 返回的数组以后再也不会用到（因为数组联系调用filter跟map，先执行filter函数接着使用其执行后的结果的新数组再次调用map函数的结果，所以不会看到filter的结果）。

使用 Array.reduce 同样的结果，代码更优雅。

💥 扩展：this判断—8种指向

this 8种指向: 判断this，~~一定不要看定义在哪儿！~~只看调用时！

1. obj.fun() this->obj

2. fun() 或 (function(){ ... })() 或多数回调函数或定时器函数 this->window

3. new Fun() this->new正在创建的新对象

4. 类型名.prototype.共有方法=function(){ ... } this->将来谁调用指谁，同第一种情况

5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

如果需要使用简化版函数，必须$(this)

6. 箭头函数中的this->箭头函数外部作用域中的this

7. jQuery.fn.自定义函数=function(){ ... } this->将来调用这个自定义函数的.前的jQuery子对象，~~不用再$(this)~~

8. new Vue()中methods中的函数中的this->当前new Vue()对象

💠 总结：知识点提炼

1. 只要验证字符串格式或查找、屏蔽敏感词时都要用正则

(1). 最简单的正则: 一个敏感词的原文

(2). 某一位字符上可能有多种备选字时用: [备选字列表]

(3). 如果[]中部分字符是连续的，可用: [x-x]

a. 一位小写字母: [a-z]

b. 一位大写字母: [A-Z]

c. 一位字母(大小写都行): [A-Za-z]

d. 一位字母或数字都行: [0-9A-Za-z]

e. 一位汉字: [\u4e00-\u9fa5]

(4). 预定义字符集:

a. \d 一位数字

b. \w 一位数字、字母或_

c. \s 空格、tab、换行等空字符

d. . 任意字符

(5). 如果规定一个字符集或子规则反复出现的次数时就用量词:

a. 有明确数量边界的量词:

1). {n} =n 必须n个，不能多也不能少

2). {n,m} n个<= <=m个

3). {n,} n个<= 多了不限

b. 没有明确数量边界的量词:

1). * 0个<= 可有可无，多了不限

2). ? 0个或1个可有可无，最多一个

3). + 1个<= 至少一个，多个不限

(6). 两个规则中选其一匹配即可: 规则1|规则2

(7).希望将多个子规则分为一组先联合匹配，再和分组外的其他规则联合匹配:

(多个子规则)

(8). 匹配特殊位置: 3个

a. 字符串的开头位置: ^

b. 字符串的结尾位置: $

c. 英文句子中的单词的左右边界: \b

2. String家提供的正则相关函数: 3件事

(1). 查找敏感词: 4种情况

a. 查找一个固定的敏感词出现的位置:
var i=str.indexOf("敏感词")

// 如果找不到，返回-1

b. 用正则查找多种敏感词出现的位置:
var i=str.search(/正则/i)

// 如果找不到，返回-1

c. 查找敏感词的内容:

1). 查找第一个敏感词的内容和位置:
var arr=str.match(/正则/i)

// arr: [ 0:"敏感词内容", index:敏感词位置 ]

// 如果找不到返回null

2). 查找所有敏感词的内容，不关心位置:
var arr=str.match(/正则/ig)

// arr: [ 敏感词1, 敏感词2, ... ]

// 如果找不到返回null

d. 查找每个敏感词的内容和位置: reg.exec

补: js中所有数组底层本质都是关联数组(下标都为字符串)

1. 访问数组中元素值的标注写法:

arr["下标"]

2. 简写:

a. 如果下标为自定义字符串名称，可简写为:

arr.自定义名称的下标

b. 如果下标为数字内容的字符串，可简写为:

arr[数字下标]

总结: 查找方法的返回值规律

1. 如果原函数返回的是下标位置i，如果找不到，都返回-1

2. 如果原函数返回的是一个数组arr或一个对象obj，如果找不到，都返回null

3. 如果原函数返回类数组对象，如果找不到返回空类数组对象:

{ length:0 }

(2). 替换敏感词: 2种

a. 简单替换:
变量=str.replace(/正则/ig, "新值")

b. 高级替换:
变量=str.replace(/正则/ig, function(形参){

return 根据本次敏感词动态生成一个新值

})

c. 删除敏感词:
变量=str.replace(/正则/ig, "")

(3). 切割字符串:

a. 简单切割:
var arr=str.split("切割符")

b. 复杂切割:
var arr=str.split(/正则/i)

c. 打散字符串为字符数组:
var arr=str.split("")

3. RegExp对象:

(1). 创建正则表达式对象:

a. 如果正则是固定的:
var reg=/正则/ig

b. 如果正则需要动态生成:
var reg=new RegExp("正则",ig)

         (2). 验证字符串格式:
         var bool=reg.test(str)
         reg必须同时前加^后加$

(3). 既查找每个关键词的内容又查找每个关键词的位置: (待续)

do{

var arr=reg.exec(str);

if(arr!=null){

获得本次找到的敏感词的内容(arr[0])和位置(arr.index)

}

}while(arr!=null);

4. 函数:

(1). 创建函数三种方式:

a. function 函数名(形参列表){ 函数体; return 返回值 } //会被声明提前，不好

b. var 函数名=function(形参列表){ 函数体; return 返回值 }//不会被声明提前，首选

c. var 函数名=new Function("形参1", "形参2", ... , "函数体; return 返回值")

函数本质:

1). 函数也是一个对象，对象中保存着函数的函数体代码

2). 函数名只是一个普通的变量，函数名通过函数对象地址，引用着函数对象

3). function在底层等效于new Function()

function 函数名(){ ... }和var 函数名=function(){}在底层都会被翻译为

var 函数名=new Function(...)

只不过function 函数名(){}是先提前，再翻译

而var 函数名=function(){}是不提前，原地翻译

(2). 重载: 今后，一件事，根据传入不同的参数值，动态执行不同的逻辑时，都用重载

function 一个函数名(不写形参变量){

//arguments对象自动接住所有实参值

if(arguments.length==0){

执行一种逻辑

}else if(arguments.length==1){

执行另一种逻辑

}else{

执行其它逻辑

}

其中arguments是类数组对象: 和数组相比:

a. 相同点: 也有下标，length属性，也可for循环遍历

b. 不同点: 不是数组类型，无法使用数组家的函数

(3). 匿名函数:

a. 所有回调函数优先使用匿名函数——用完释放，节约内存

b. 所有js代码都应该保存在匿名函数自调中，禁止使用全局变量，避免全局污染！

(function(){

要执行的js代码

})();

结果: 匿名函数内的都是局部变量，不会产生全局变量。

局部变量随匿名函数一起释放。不会污染全局。

(4). 作用域和作用域链: (跟着视频亲自画图！！！)

a. 作用域:

1). 全局作用域:window，保存全局变量

优: 可重用，缺: 随处可用, 极易被污染

2). 函数作用域: 保存局部变量

局部变量包括2中: 函数中var出的变量和形参变量

优: 仅函数内可用，不会被污染，缺: 不可重用

3). 函数作用域对象原理:

i. 每个函数定义时都自带好友列表，好友列表里2个格子，一个是空，一个引用window

ii. 调用函数时临时创建函数作用域对象保存函数局部变量。并将函数作用域对象的地址保存到函数好友列表中离自己近的格子里。

iii. 函数执行过程中按就近原则先在自己的函数作用域对象中找局部变量使用。如果找不到，才被迫去全局window中找变量使用.

iv. 函数调用后，好友列表中离自己近的格子清空，导致函数作用域对象以及内部的局部变量被释放！——所以局部变量不可重用！

b. 作用域链: 保存一个函数所有可用的作用域对象的链式结构(好友列表)学名就叫作用域链。
1). 作用域链保存着一个函数可用的所有变量

2). 作用域链控制着变量的使用顺序。先局部后全局。

5. 闭包:
a. 只要希望给一个函数保护一个可反复使用的专属变量，又防止这个变量被外界篡改时，都用闭包。

b. 闭包三步:

1). 用外层函数妈妈包裹要保护的变量和内层函数

2). 外层函数妈妈用return把内层函数孩子返回到外部

3). 外部想使用内层函数的人，必须调用外层函数，才能获得return出来的内层函数对象。并将内层函数保存在一个变量中反复使用。

c. 闭包形成的原因: 外层函数调用后，外层函数的作用域对象被内层函数引用着无法释放，形成了闭包对象

d. 闭包的缺点: 闭包比一般的函数占用多一块内存——外层函数的函数作用域对象。所以，用完闭包后，应该尽快释放:
保存内层函数的变量=null

6. 面向对象: 封装继承多态

(1). 封装: 3种:

a. 用{}创建一个对象:

var 对象名={

属性名:属性值,

... : ... ,

方法名: function(){

... this.属性名 ...

}

b. 用new Object():

1). 2步:

i. var 对象名=new Object()

ii. 对象名.属性名=属性值;

对象名.方法名=function(){ ... }

2). 对象底层也是关联数组:

i. 都是名值对儿的集合

ii. 都可用[""]和.方式访问成员。

如果属性名来自于变量，就只能用[]，不要加""

iii. 访问不存在的属性，都不报错，返回undefined

判断是否包含某个属性:

对象.属性名!==undefined

iv. 强行给不存在的属性赋值，都不报错，而是自动添加该属性

给对象添加新属性，唯一办法，强行赋值:

对象名.新属性名=新值

v. 都可用for in遍历

c. 只要反复创建多个相同结构的对象都用构造函数:

1). 2步:

i. 定义构造函数:

function 类型名(形参1,形参2, ...){

this.属性名1=形参1;

this.属性名2=形参2;

//构造函数中不要再包含方法定义定义!

}

ii. 用new 调用构造函数:

var 对象名=new 类型名(属性值1, 属性值2,...)

2). new做了4件事:

i. 创建一个新的空对象

ii. 让新对象继承(_ _proto_ _)构造函数的原型对象

iii. 调用构造函数，传入实参，并自动替换构造函数中的this为new正在创建的新对象。构造函数中，通过强行赋值的方式为新对象添加规定的属性，并保存属性值。

iv. 返回新对象的地址，保存到=左边的变量中。

3). 优点: 重用对象结构代码

4). 缺点: 如果构造函数中包含方法定义，则每次创建新对象都会重复创建相同方法的副本。 ——浪费内存！

(2). 继承:

a. 今后，只要同一类型所有子对象共用的方法和属性值，都要集中保存在构造函数的原型对象中！

构造函数.prototype.属性名/共有方法名=属性值/function(){ ... }

b. 自有属性和共有属性:

1). 获取属性值:都可用"子对象.属性名"

2). 修改属性值:

i. 自有属性: 子对象.自有属性名=新值

ii. 共有属性: 构造函数.prototype.共有属性名=新值

c. 内置类型原型对象:

1). 11种内置类型/对象: String, Number, Boolean, Array, Date, RegExp, Math(对象), Error, Function, Object, global(对象)

2). 一种类型=构造函数+原型对象

i. 构造函数: 创建子对象

ii. 原型对象: 为所有子对象保存共有成员

3). 查看该类型共有哪些API: 类型名.prototype

4). 该类型缺少想用的方法: 类型名.prototype.共有新方法=function(){ ... }

d. 原型链: 保存着一个对象可用的所有属性和方法。控制着属性和方法的使用顺序：先自有再共有——就近原则！

(3). 多态

重点讲重写：如果子对象觉得从父对象继承来的成员不好用，可以在子对象自己内部重写和父对象同名的成员，覆盖父对象的成员，优先使用自己的。

******面向对象终极总结: 封装，继承，多态******

①封装: 创建对象，2种:

如果只创建一个对象: {}

如果反复创建多个相同结构的对象: 构造函数

②继承: 所有子对象共用的属性值和方法，都要放在构造函数的原型对象中

③多态: 重写: 只要觉得从父对象继承来的成员不要用，都在子对象中重写同名成员

④如果觉得这个父对象对象都不好用，可以自定义继承: 2种:

1). 只换一个子对象的父对象: 2种:

i. 子对象.__proto__=新父对象

ii. Object.setPrototypeOf(子对象, 新父对象)

2). 更换多个子对象的原型对象: 构造函数.prototype=新对象

********************************************************************

7. 严格模式: "use strict";

(1). 禁止给未声明过的变量赋值

(2). 静默失败升级为错误

(3). 普通函数调用中的this不指window，而是指undefined

(4). 禁用arguments.callee

总结: this 判断this时，一定不要看他定义在哪儿。必须看它在哪里以何种方式调用 4种:
1. obj.fun() this->点前的obj对象
2. fun() this->默认指window

3. new Fun()   this->new正在创建的新对象

4. 类型名.prototype.共有方法=function(){ ... }

         this->将来谁调用这个函数，就指谁

         将来调用这个函数的.前的某个子对象

8. 保护对象:

(1). 保护属性:

a. 每个属性包含三个开关:

1). writable: 控制是否可修改属性值

2). enumerable: 控制着是否可被for in遍历到，但是只防for in不防.

3). configurable: 控制

i. 是否可删除当前属性

ii. 是否可修改writable和enumerable两个开关

强调: configurable一旦改为 false，不可逆！

b. 只修改一个属性的多个开关:

Object.defineProperty(对象名, "属性名",{开关: true/false})

c. 修改多个属性的多个开关:

Object.defineProperties(对象名,{

属性名:{ 开关:true/false, ... },

... : ...

})

d. 如果用自定义的规则保护属性时，只能用访问器属性: 2步:

Object.defineProperties(对象,{

//1). 先定义一个隐姓埋名且半隐藏的数据属性:

_属性名:{

value: 属性的初始值,

writable:true,

enumerable:false,

configurable:false

//2). 再定义访问器属性保镖冒名顶替要保护的属性

属性名:{

get:function(){

return this._属性名

set:function(value){ //value ← 要修改的新属性值

先验证value

如果验证通过，this._属性名=value

否则如果验证未通过，不但不保存新属性值，还会报错

enumerable:true,

configurable:false

}

})

外界使用访问器属性时和使用普通属性一样:

对象.属性名

外界试图获取访问器属性值时，自动调用get()

外界试图修改访问器属性值时，自动调用set()

(2). 保护结构: 3个级别

a. 防扩展: Object.preventExtensions(对象)

b. 密封: Object.seal(对象)

c. 冻结: Object.freeze(对象)

9. 如果没有构造函数，也想创建子对象，继承父对象:

var 新子对象=Object.create(父对象,{

自有属性:{

value:属性值,

开关:true或false,

... :...

... : { ... }

})

10. 替换this: 3种:

(1). 在一次调用函数时，临时替换this，首选:
函数.call(对象, 实参值,...)

(2). 临时替换一次this，但是需要打散数组再传参时，被迫改为:

函数.apply(对象, 数组)

(3). 创建一个一模一样的新函数并永久绑定this和部分实参值:

var 新函数名=原函数.bind(对象, 固定实参值, ...)

11. 数组函数: ⏬

(1). 判断:

a. 判断数组中是否所有元素都符合要求:

var bool=arr.every(function(value,i,arr){

return 判断条件

})

b. 判断数组中是否包含符合要求的元素:

var bool=arr.some(function(value,i,arr){

return 判断条件

})

(2). 遍历:

a. 单纯简化for循环变量原数组中每个元素:

arr.forEach(function(value,i,arr){

对当前元素执行操作

})

b. 保护原数组不变，返回遍历加工后的新数组

var 新数组=arr.map(function(value, i,arr){

return 加工后的一个新元素值

})

(3). 过滤: 复制出数组中符合要求的元素放入新数组返回

var 新数组=arr.filter(function(value,i,arr){

return 判断条件

})

(4). 汇总: 遍历数组中每个元素，经过求和或其他汇总方式，统计出一个最终结论

var 结果=arr.reduce(function(box,value,i,arr){

return box和value计算出的新临时汇总值

}, 起始值)

🆕【后文传送门】👉 ES6_模板字符串、let的简谈与应用_12

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！

儒雅的烤地瓜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS高级】ES5标准规范之数组高阶函数的应用_11

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。Array扩展：forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex......
复制链接

扫一扫