点击事件传递数组参数_ES5 增加的数组常用方法

╰半夏微凉° 2022-10-25 04:53 149阅读 0赞

**数组方法之 forEach**

*  `forEach` 用于遍历数组，和 for 循环遍历数组一个道理
 *  语法： `数组.forEach(function (item, index, arr) {})`

![97fb60284529e26fc29bb63791d66016.png][]

*  上面的代码就等价于

![2e459794c44e4807b12c1c4ecbaf4d36.png][]

**数组方法之 map**

*  `map` 用于遍历数组，和 forEach 基本一致，只不过是有一个返回值
 *  语法： `数组.map(function (item, index, arr) {})`
 *  返回值： 一个新的数组

![23577ddce7700b1417c2965da196cdcd.png][]

*  返回值就是我们每次对数组的操作
 *  等价于

![765e2204f8265eaeefae9fc5ed8790d3.png][]

**数组方法之 filter**

*  `filter` ： 是将数组遍历一遍，按照我们的要求把数数组中符合的内容过滤出来
 *  语法： `数组.filter(function (item, index, arr) {})`
 *  返回值： 根据我们的条件过滤出来的新数组

![eda120f4b62678a8809df34e20ef0cd5.png][]

*  新数组里面全都是大于 2 的数字
 *  等价于

![64892e0728fec1c6880a371502b701a5.png][]

**JSON 方法**

*  `json` 是一种特殊的字符串个是，本质是一个字符串

![527a957955f110fcf02d13d87e14a647.png][]

*  就是对象内部的 `key` 和 `value` 都用双引号包裹的字符串（必须是双引号）

**JSON的两个方法**

*  我们有两个方法可以使用 **JSON.parse**
 *  `json.stringify` 是将 js 的对象或者数组转换成为 json 格式的字符串

**JSON.parse**

*  `JSON.parse` 是将 json 格式的字符串转换为 js 的对象或者数组

![e4688208ac6c6c7c26d1f853c421aaa9.png][]

*  `obj` 就是我们 js 的对象
 *  `arr` 就是我们 js 的数组

**JSON.stringify**

*  `JSON.parse` 是将 json 格式的字符串转换为 js 的对象或者数组

![bc71b74c16df90d410e958f072fbfcdb.png][]

*  `jsonObj` 就是 json 格式的对象字符串
 *  `jsonArr` 就是 json 格式的数组字符串

**this 关键字**

*  每一个函数内部都有一个关键字是 `this`
 *  可以让我们直接使用的
 *  重点： **函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系**
 *  函数内部的 this 指向谁，取决于函数的调用方式
 *  全局定义的函数直接调用，`this => window`

![ff1e9a3636eac11b8c6bba1adb9278b7.png][]

*  对象内部的方法调用，`this => 调用者`

![b3310a6baf886e8d4563c8d6cc3b9a26.png][]

*  定时器的处理函数，`this => window`

![436e6f0f8174e4092a68d1f7e645d8e2.png][]

*  事件处理函数，`this => 事件源`

![26b5c96b71a89af72c64c857a8d0cccc.png][]

*  自调用函数，`this => window`

![2476679bd8e32c5a9638aedc8ddf5d43.png][]

**call 和 apply 和 bind**

*  刚才我们说过的都是函数的基本调用方式里面的 this 指向
 *  我们还有三个可以忽略函数本身的 this 指向转而指向别的地方
 *  这三个方法就是 **call** / **apply** / **bind**
 *  是强行改变 this 指向的方法

**call**

*  `call` 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
 *  语法： `函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...)`

![fee6037832fb11b4d82fb289e0c78449.png][]

*  `fn()` 的时候，函数内部的 this 指向 window
 *  `fn.call(obj, 1, 2)` 的时候，函数内部的 this 就指向了 obj 这个对象
 *  使用 call 方法的时候

1.  会立即执行函数
2.  第一个参数是你要改变的函数内部的 this 指向
3.  第二个参数开始，依次是向函数传递参数

**apply**

*  `apply` 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
 *  语法： `函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...])`

![50285996b816284b7b4915d58257bed6.png][]

*  `fn()` 的时候，函数内部的 this 指向 window
 *  `fn.apply(obj, [1, 2])` 的时候，函数内部的 this 就指向了 obj 这个对象
 *  使用 apply 方法的时候

1.  会立即执行函数
2.  第一个参数是你要改变的函数内部的 this 指向
3.  第二个参数是一个 **数组**，数组里面的每一项依次是向函数传递的参数

**bind**

*  `bind` 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
 *  和 call / apply 有一些不一样，就是不会立即执行函数，而是返回一个已经改变了 this 指向的函数
 *  语法： `var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)`

![f5e299e2a992be36780e342883e95498.png][]

*  bind 调用的时候，不会执行 fn 这个函数，而是返回一个新的函数
 *  这个新的函数就是一个改变了 this 指向以后的 fn 函数
 *  fn(1, 2) 的时候this指向window
 *  `newFn(1, 2)` 的时候执行的是一个和 fn 一摸一样的函数，只不过里面的 this 指向改成了 obj

[97fb60284529e26fc29bb63791d66016.png]: /images/20221024/80e5d5a07507456b947d076508d82361.png
[2e459794c44e4807b12c1c4ecbaf4d36.png]: /images/20221024/5d16f94cb88c4cafb4f047fc014a033d.png
[23577ddce7700b1417c2965da196cdcd.png]: /images/20221024/01aae43f268943029ca2bf593f1163e6.png
[765e2204f8265eaeefae9fc5ed8790d3.png]: /images/20221024/206cb3d30a6448848b2bb061a306bdf8.png
[eda120f4b62678a8809df34e20ef0cd5.png]: /images/20221024/b1d03b1f0099435e9789f41fb6b3e630.png
[64892e0728fec1c6880a371502b701a5.png]: /images/20221024/4ce9ca8af2af4e4c8890e06cd164913d.png
[527a957955f110fcf02d13d87e14a647.png]: /images/20221024/3777ccd23e9c489d87a2c74dacf22e31.png
[e4688208ac6c6c7c26d1f853c421aaa9.png]: /images/20221024/e052b8f741064e9c821707cbe2801c5a.png
[bc71b74c16df90d410e958f072fbfcdb.png]: /images/20221024/a5cac7fede3a4e9094271d85bf923682.png
[ff1e9a3636eac11b8c6bba1adb9278b7.png]: /images/20221024/e5cd2cda3bce406793f92e553b96b273.png
[b3310a6baf886e8d4563c8d6cc3b9a26.png]: /images/20221024/45a7cd097d3f44e193101f3bda83b260.png
[436e6f0f8174e4092a68d1f7e645d8e2.png]: /images/20221024/de4981724194420d8a74acd8eb902dd9.png
[26b5c96b71a89af72c64c857a8d0cccc.png]: /images/20221024/985dd72037484a90a659e2c5b5195acb.png
[2476679bd8e32c5a9638aedc8ddf5d43.png]: /images/20221024/770a978244de4320b395ba6443fa4971.png
[fee6037832fb11b4d82fb289e0c78449.png]: /images/20221024/09076d00c6b94028aad38a9c7ea125f2.png
[50285996b816284b7b4915d58257bed6.png]: /images/20221024/9078eee38f1c40e788bd895b766da7a1.png
[f5e299e2a992be36780e342883e95498.png]: /images/20221024/29e01d630eeb4f21933877eaabe0b471.png