diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..ba078b7ed2c519357ac76264ba88711a8c0505a9 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" @@ -0,0 +1,164 @@ +# 函数 + +### 定义函数 + +一个**函数定义**(也称为**函数声明**,或**函数语句**)由一系列的[`function`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function)关键字组成,依次为: + +- 函数的名称。 +- 函数参数列表,包围在括号中并由逗号分隔。 +- 定义函数的 JavaScript 语句,用大括号`{}`括起来。 + +``` +function square(number) { + return number * number; +} +``` + +**原始参数**(比如一个具体的数字)被作为**值**传递给函数;值被传递给函数,如果被调用函数改变了这个参数的值,这样的改变不会影响到全局或调用函数。 + +如果你传递一个对象(即一个非原始值,例如[`Array`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)或用户自定义的对象)作为参数,而函数改变了这个对象的属性,这样的改变对函数外部是可见的,如: + +``` +function myFunc(theObject) { + theObject.make = "Toyota"; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x 获取的值为 "Honda" + +myFunc(mycar); +y = mycar.make; // y 获取的值为 "Toyota" + // (make 属性被函数改变了) +``` + +### 函数表达式 + +虽然上面的函数声明在语法上是一个语句,但函数也可以由函数表达式创建。这样的函数可以是**匿名**的;它不必有一个名称。例如,函数`square`也可这样来定义: + +``` +const square = function(number) { + return number * number; + }; +var x = square(4); // x gets the value 16 +``` + +然而,函数表达式也可以提供函数名,并且可以用于在函数内部代指其本身,或者在调试器堆栈跟踪中识别该函数: + +``` +const factorial = function fac(n) { + return n<2 ? 1 : n*fac(n-1) + }; + +console.log(factorial(3)); +``` + +当将函数作为参数传递给另一个函数时,函数表达式很方便。下面的例子演示了一个叫`map`的函数如何被定义,而后使用一个表达式函数作为其第一个参数进行调用: + +``` +function map(f,a) { + let result = []; // 创建一个数组 + let i; // 声明一个值,用来循环 + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +``` + +## 调用函数 + +``` +console.log(square(5)); +/* ... */ +function square(n) { return n*n } +``` + +# 箭头函数 + +### **箭头函数允许我们编写更短的函数** + +#### 定义箭头函数的语法 + +语法: + +```text +(参数1, 参数2 ...) => { 函数体 } +``` + +解释: + +- 如果有且仅有 1 个形参,则`()`可以省略 +- 如果函数体内有且仅有 1 条语句,则`{}`可以省略,但前提是,这条语句必须是 return 语句。 + +注:箭头函数可以没有函数名,可以将箭头函数赋值给一个变量,通过变量名调用函数;也可以直接使用箭头函数。 + +### 举例 + +写法 1、定义和调用函数:(传统写法) + +```js +function fn1(a, b) { + console.log('haha'); + return a + b; +} +console.log(fn1(1, 2)); //输出结果:3 +``` + +写法 2、定义和调用函数: + +```js +const fn2 = (a, b) => { + console.log('haha'); + return a + b; +}; +console.log(fn2(1, 2)); //输出结果:3 +``` + +另外,箭头函数的写法还可以更精简,继续往下看。 + +在箭头函数中,如果方法体内只有一句话,且这句话是 return 语句,那就可以把 `{}`省略。写法如下: + +```js +const fn2 = (a, b) => a + b; +console.log(fn2(1, 2)); //输出结果:3 +``` + +在箭头函数中,如果形参只有一个参数,则可以把`()`省略。写法如下: + +```js +const fn2 = a => { + console.log('haha'); + return a + 1; +}; +console.log(fn2(1)); //输出结果:2 +``` + +## 箭头函数的 this 的指向 + +this 指向的是函数被调用的对象(也就是说,谁调用了函数,this 就指向谁)。 + +**箭头函数本身不绑定 this**,this 指向的是**箭头函数定义位置的 this**(也就是说,箭头函数在哪个位置定义的,this 就跟这个位置的 this 指向相同)。 + +举例: + +```js +const obj = { name: '千古壹号' }; +function fn1() { + console.log(this); // 第一个 this + return () => { + console.log(this); // 第二个 this + }; +} +const fn2 = fn1.call(obj); +fn2(); +``` + +打印结果: + +```js +obj +obj +``` + +上面的代码中,箭头函数是在 fn1()函数里面定义的,所以第二个 this 跟 第一个 this 指向的是**同一个位置**。又因为,在执行 `fn1.call(obj)`之后,第一个 this 就指向了 obj,所以第二个 this 也是指向 了 obj。 \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" new file mode 100644 index 0000000000000000000000000000000000000000..5111678f2e8957b3054d9d33fd1bd67c99e7e2ce --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-20-\346\225\260\347\273\204\351\253\230\351\230\266.md" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-20-\346\225\260\347\273\204\351\253\230\351\230\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..572200e2116546818f9ca7352286c9e618087292 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-20-\346\225\260\347\273\204\351\253\230\351\230\266.md" @@ -0,0 +1,115 @@ +# 数组高阶 + +### 1、forEach(遍历) + +forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。(没有返回值,将数组遍历) + +注意: forEach() 对于空数组是不会执行回调函数的。 + +回调函数参数:currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +```text +let list = [1, 2, 3, 4] +list.forEach(item => console.log(item)) +``` + +### 2、filter(过滤,返回新数组) + +filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 + +注意: filter() 不会对空数组进行检测。 + +注意: filter() 不会改变原始数组。 + +回调函数参数:currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +``` +var ages = [32, 33, 16, 40]; +console.log(ages.filter(function(item){ + return item > 18; //返回判断条件为真的数组元素 +})) +//输出[32,33,40] +``` + + + +### 3、map(映射,返回新数组) + +map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 + +map() 方法按照原始数组元素顺序依次处理元素。 + +注意: map() 不会对空数组进行检测。 + +注意: map() 不会改变原始数组。 + +回调函数参数:currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +``` +var numbers = [65, 44, 12, 4]; +console.log(numbers.map(function(item){ + return item * 10; +})) +//输出[650,440,120,40] +``` + + + +### 4、some(判断是否含有符合条件的元素,返回布尔值) + +some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。 + +some() 方法会依次执行数组的每个元素: + +如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 +如果没有满足条件的元素,则返回false。 +注意: some() 不会对空数组进行检测。 + +注意: some() 不会改变原始数组。 + +回调函数参数:currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +``` +var ages = [3, 10, 18, 20]; +console.log(ages.some(function(item){ + return item > 28; +})) +//输出false +``` + +### 5、every(判断是否全部元素符合条件,返回布尔值) + +every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。 + +every() 方法使用指定函数检测数组中的所有元素: + +如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。 +如果所有元素都满足条件,则返回 true。 +注意: every() 不会对空数组进行检测。 + +注意: every() 不会改变原始数组。 + +回调函数参数:currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +``` +var ages = [32, 33, 16, 40]; +console.log(ages.every(function(item){ + return item > 18; +})) +//输出false +``` + +### 6、reduce(累加) + +reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 + +reduce() 可以作为一个高阶函数,用于函数的 compose。 + +注意: reduce() 对于空数组是不会执行回调函数的。 + +回调函数参数:total 必需。初始值, 或者计算结束后的返回值; currentValue 必需。当前元素; index 可选。当前元素的索引值; arr 可选。当前元素所属的数组对象。 + +```text +let list = [1, 2, 3, 4] +let res = list.reduce((total, item) => {return total + item}, 0) +console.log(res) // 10 \ No newline at end of file