diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/.idea/workspace.xml" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/.idea/workspace.xml" new file mode 100644 index 0000000000000000000000000000000000000000..708ce05383f93c9ddbec50bc3d81c63731e32eb7 --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/.idea/workspace.xml" @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + 1733214081684 + + + + + + \ No newline at end of file diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/1.html" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..9f4d33a7e394aa2ba3f091111137cdae240d4aba --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/1.html" @@ -0,0 +1,85 @@ + + + + + + + Document + + + +
+
+
合计：¥0.00
+
+ + + \ No newline at end of file diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..850c3bea64e58a9baa16855980c31ce5b1b2707f --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html" @@ -0,0 +1,192 @@ + + + + + + + + Document + + + + +
+ +
+
+
合计：¥0.00
+
+ + + + + + + \ No newline at end of file diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index\345\217\202\350\200\203.html" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index\345\217\202\350\200\203.html" new file mode 100644 index 0000000000000000000000000000000000000000..ea57a0ee858ff3e72e2ed55b445a55418183080a --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index\345\217\202\350\200\203.html" @@ -0,0 +1,199 @@ + + + + + + + + Document + + + + +
+ +
+
+
合计：1000.00
+
+ + + + \ No newline at end of file diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/02_\345\207\275\346\225\260\350\277\233\351\230\266.md" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/02_\345\207\275\346\225\260\350\277\233\351\230\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..81a9d8979aa7708b0bcbf0455077093df380dfda --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/02_\345\207\275\346\225\260\350\277\233\351\230\266.md" @@ -0,0 +1,151 @@ +# 函数 + +## 函数参数 + +### 动态参数 + +arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。 + +```js +// 动态参数 +function getSum() { + console.log(arguments); + let sum = 0; + for (let i = 0; i < arguments.length; i++) { + sum += arguments[i]; + } + return sum; +} +let sum = getSum(1, 2, 3, 4, 5, 6, 7, 8, 9); +console.log(sum); +``` + +1. arguments 是一个伪数组，只存在于函数中 + +2. arguments 作用是动态获取所有传入的实参 + +3. 可以通过 for 循环遍历 arguments 得到所有的参数 + +### 剩余参数 + +剩余参数允许我们将一个不定量的参数表示为一个数组。 + +```js +// 剩余参数 +function getSum(...arr) { + console.log(arr); +} +getSum(1, 2, 3, 4); +getSum(1, 2, 3, 4, 5, 6, 7); +``` + +1. `...` 是语法符号，置于函数最末形参之前，用于获取多余的实参 + +2. 借助 `...` 获得的剩余实参，形成的数组为真数组，具有数组方法 + +#### 展开运算符 + +展开运算符 `...` 可以将一个数组进行展开，不会修改原数组。 + +```js +const arr = [1, 2, 4, 5, 6, 7]; +console.log(...arr); // 1 2 3 4 5 6 7 +``` + +应用： + +```js +// 展开运算符 +const arr1 = [1, 2, 3, 4]; + +// 求最值 +console.log(Math.max(...arr1)); +console.log(Math.min(...arr1)); + +// 数组合并 +const arr2 = [5, 6, 7, 8, 9, 10]; +const arr = [...arr1, ...arr2]; +console.log(arr); +``` + +剩余参数与展开运算符区别： + +1. 剩余参数：函数参数使用，得到真数组 + +2. 展开运算符：数组中使用，数组展开 + +## 箭头函数 + +### 基本语法 + +```js +// 箭头函数 +const fn1 = () => { + console.log(123); +}; +fn1(); +const fn2 = (x) => { + console.log(x); +}; +fn2(5); +// 箭头函数只有一个参数时括号可以省略 +const fn3 = (x) => {}; +// 只有一行代码时可以省略大括号 +const f4 = (x) => console.log(x); +// 有返回值可直接返回 +const f5 = (x) => x + x; +// 直接返回一个对象 +const f6 = (x) => ({ + a: 1, + b: 1, +}); +``` + +### 箭头函数参数 + +1. 普通函数有 arguments 动态参数 + +2. 箭头函数没有 arguments 动态参数，但有剩余参数 + +### 箭头函数的 this + +箭头函数不会创建自己的 this 而是从自己的作用域链的上一层沿用 this 值。 + +```js +// 此 this 指向 window +console.log(this); + +function fn1() { + // 此 this 指向 window + // window 调用 fn1 所以 this 指向 window + console.log(this); +} +window.fn1(); + +const obj1 = { + name: "zhangsan", + fn: function () { + // 此 this 指向 obj + console.log(this); + }, +}; +obj1.fn(); + +const fn2 = () => { + // this 指向作用域链的上一层，在此处即为 window + console.log(this); +}; +fn2(); + +const obj2 = { + name: "lisi", + fn: function () { + const fn = () => { + // 此时的 this 指向上一层即为 obj2.fn 的 this 即为 obj2 + console.log(this); + }; + fn(); + }, +}; +obj2.fn(); +``` diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/03_\350\247\243\346\236\204.md" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/03_\350\247\243\346\236\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..bc80b60f2022ee83d31d13d6e78c234749a1ec27 --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/03_\350\247\243\346\236\204.md" @@ -0,0 +1,93 @@ +# 解构赋值 + +解构赋值是一种快速为变量赋值的简洁语法，本质上仍是为变量赋值。 + +## 数组解构 + +数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。 + +语法： + +```js +const arr = [100, 200, 300]; +const [a, b, c] = arr; + +// 变量不足时用剩余参数 +const numArr = [100, 200, 300, 400, 500, 600]; +// a:100 b:200 c:300 d:[400,500,600] +const [a, b, c, ...d] = numArr; + +// 防止 undefined +const arr2 = [100, 200]; +// 设置默认值 +const [d = 0, e = 0, f = 0] = arr2; + +// 按需导入赋值 +const [g, h, , i] = [1, 2, 3, 4]; // g:1 h:2 i:4 +``` + +应用： + +```js +// 交换变量 +let num1 = 10; +let num2 = 30; +[num1, num2] = [num2, num1]; +``` + +### 多维数组解构 + +```js +const arr = [1, 2, [3, 4, [5, 6, 7]]]; +const [a, b, c] = [1, 2, [3, 4, [5, 6, 7]]]; +// a:1 b:2 c:[3, 4, [5, 6, 7]] +const [a, b, c] = [1, 2, [3, 4, [5, 6, 7]]]; +const [a, b, [c, d]] = [1, 2, [3, 4, [5, 6, 7]]]; +``` + +## 对象解构 + +对象解构时将对象属性和方法快速批量赋值给一系列变量的简洁语法。 + +语法： + +```js +// 对象解构 +const obj = { + name: "zhangsan", + age: 18, +}; +// 解构 +// 等价于 const name = obj.name +const { name, age } = obj; +// 对象解构的变量名可以改名 +const { name: userName, age: userAge } = obj; +``` + +> 对象属性的值将被赋值给与属性名相同的变量，并且与外部变量名不重复 + +### 数组对象解构 + +```js +const objArr = [{ age: 18 }, { age: 20 }]; +// 解构 +const [{ age }, { age: uAge }] = objArr; +``` + +### 多级对象解构 + +```js +const obj = { + a: "a", + b: { + c: "c", + d: "d", + }, +}; +const { + a, + // 多级对象需要区分哪个对象进行解构 + b: { c, d }, +} = obj; +``` +Object.values('对象') \ No newline at end of file diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/04_\346\225\260\347\273\204\345\256\236\344\276\213\346\226\271\346\263\225.md" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/04_\346\225\260\347\273\204\345\256\236\344\276\213\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..d5f8e368bcb1f4dead01fe7bb0579bb8ebe309ee --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/04_\346\225\260\347\273\204\345\256\236\344\276\213\346\226\271\346\263\225.md" @@ -0,0 +1,106 @@ +# 数组方法 + +## forEach() + +forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 + +语法： + +```js +// 数组.forEach(function (当前元素, 当前索引) {方法体}); +arr.forEach(function (item, index) {}); + +const arr = [1, 2, 3, 4, 5, 6, 7]; +arr.forEach(function (item, index) { + // 元素 + console.log("元素：" + item); + // 索引 + console.log("索引：" + index); +}); +``` + +## filter() + +filter() 方法创建一个新数组，新数组中的元素是满足筛选条件的原数组中的元素组成。 + +主要用于筛选数组中符合条件的元素，并返回筛选后的数组。 + +语法： + +```js +arr.filter(function (item, index) {}); + +const arr = [10, 20, 30, 40, 50, 60]; +// 返回一个新数组 +const newArr = arr.filter(function (item, index) { + // 筛选大于 30 的元素 + return item >= 30; +}); +console.log(newArr); +``` + +## reduce() + +reduce() 返回累计处理的结果，经常用于求和等。 + +```js +arr.reduce(function (上一次的结果, 当前值) {}, 起始值); +``` + +```js +const arr = [20, 50, 30, 40, 55, 40]; +// 无起始值 +// prev 上一次的值 +// cur 当前值 +const res1 = arr.reduce(function (prev, cur) { + return prev + cur; +}); +console.log(res1); // 235 + +// 有初始值，起始值为 10 +const res2 = arr.reduce(function (prev, cur) { + return prev + cur; +}, 10); +console.log(res2); // 245 +``` + +## find() + +find() 方法在数组内查找指定元素，返回符合条件的第一个数组元素值，若不存在则返回 undefined 值。 + +```js +const arr = [1, 2, 3, 4, 5, 6, 7, 8]; +const obj = [ + { name: "xiaomi", price: 2000 }, + { name: "oppo", price: 1000 }, + { name: "vivo", price: 2500 }, +]; + +const num1 = arr.find(function (ele) { + // 返回符合条件的第一个元素的值 + return ele > 5; + // 不存在返回 undefined + // return ele > 10; +}); +console.log(num1); // 6 + +// find() 查找数组对象 +const name = obj.find(function (ele) { + // 返回数组元素即 ele + return ele.name === "vivo"; +}); +console.log(name); +``` + +## every() + +every() 方法检测数组中**所有元素**是否都满足指定条件，若数组内所有元素都满足条件返回 true 否则返回 false 值。 + +```js +const b = arr.every((ele) => ele > 5); +console.log(b); // false +``` + +## findIndex() + +findIndex() 方法查找满足条件的第一个元素，并返回其下标。 diff --git "a/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/\345\210\206\345\211\262.md" "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/\345\210\206\345\211\262.md" new file mode 100644 index 0000000000000000000000000000000000000000..81e6da90c8ba66345455a5ca8ae5033489b21e44 --- /dev/null +++ "b/\345\215\242\346\257\224\344\274\246/20241203\350\264\255\347\211\251\350\275\246/\347\254\224\350\256\260/\345\210\206\345\211\262.md" @@ -0,0 +1,51 @@ +箭头函数可以与JavaScript中的`split`方法结合使用，来处理字符串或数组的分割和转换。以下是一些示例： + +### 1. 分割字符串并映射为数组元素 + +假设我们有一个字符串，我们想要将其分割成单词数组，并且每个单词都转换为大写： + +```javascript +const sentence = "hello world"; +const words = sentence.split(" ").map(word => word.toUpperCase()); +console.log(words); // 输出 ["HELLO", "WORLD"] +``` + +这里，`split(" ")`方法根据空格将字符串分割成数组，然后`map`方法遍历数组，使用箭头函数将每个单词转换为大写。 + +### 2. 分割字符串并过滤空元素 + +如果我们想要分割字符串，并且过滤掉空元素，可以这样使用： + +```javascript +const sentence = "hello world"; +const words = sentence.split(" ").filter(Boolean).map(word => word.toUpperCase()); +console.log(words); // 输出 ["HELLO", "WORLD"] +``` + +这里，`filter(Boolean)`方法会过滤掉所有假值（如空字符串），然后`map`方法将每个单词转换为大写。 + +### 3. 分割数组元素并处理 + +如果我们有一个数组，每个元素都是由逗号分隔的字符串，我们想要分割每个元素，并将结果展平成一个新数组： + +```javascript +const data = ["apple,banana", "orange,grape"]; +const fruits = data.flatMap(item => item.split(",")); +console.log(fruits); // 输出 ["apple", "banana", "orange", "grape"] +``` + +这里，`flatMap`方法结合了`map`和`reduce`的功能，它将每个元素通过`split(",")`分割，然后将结果展平成一个新数组。 + +### 4. 分割字符串并求和 + +如果我们有一个包含数字的字符串，我们想要将其分割成数组，然后计算所有数字的和： + +```javascript +const numbersStr = "1,2,3,4"; +const sum = numbersStr.split(",").map(Number).reduce((acc, cur) => acc + cur, 0); +console.log(sum); // 输出 10 +``` + +这里，`split(",")`方法将字符串分割成数组，`map(Number)`将每个元素转换为数字，然后`reduce`方法计算所有数字的和。 + +箭头函数的简洁性使得它在与`split`方法结合使用时非常方便，可以快速处理字符串和数组的分割、转换和计算。 \ No newline at end of file