diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/JavaScript-AXIOS-2024-12-02.md" "b/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/JavaScript-AXIOS-2024-12-02.md" index 326cc48c5669b5c9a5eb38cb3507a25e8d468d9c..d993d77945766bc01295d7724180ed8f2c9e74f3 100644 --- "a/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/JavaScript-AXIOS-2024-12-02.md" +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/JavaScript-AXIOS-2024-12-02.md" @@ -24,7 +24,7 @@ null ### Task-II -[AXIOS](html/AXIOS.html) +[AXIOS应用](html/AXIOS.html) ``` null ``` diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/html/update.html" "b/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/html/update.html" new file mode 100644 index 0000000000000000000000000000000000000000..fc9d90f51cbacf1dddf6dd916c6760b546cf2fee --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-AXIOS-2024-12-02/html/update.html" @@ -0,0 +1,11 @@ + + + + + + update + + +

加载中

+ + \ No newline at end of file diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03.md" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03.md" new file mode 100644 index 0000000000000000000000000000000000000000..f7c2868109e13e068a59784b44841db57c4a9d31 --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03.md" @@ -0,0 +1,38 @@ +# 购物车实例 + +## 1.ANALYSIS + +### Demand + +![购物车效果图](https://gitee.com/yuwuchuji_0/open-source-image-library/raw/master/image/upgit_20241203_1733215034.png) + + +``` +null +``` + +### DataSources + +``` +null +``` + +## 2.CODE + +### Task-I + +``` +null +``` + +### Task-II +[购物车实例](html/Shopcar.html) +``` +null +``` + +## 3.END + +本结无额外笔记详情见[概念树](../其他文件/概念树) + +Everything for better employment---Lyy \ No newline at end of file diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.css" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.css" new file mode 100644 index 0000000000000000000000000000000000000000..763cf51ad30047ae9540ede685a6b6301296d65c --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.css" @@ -0,0 +1,88 @@ + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + .list { + width: 990px; + margin: 100px auto 0; + } + + .item { + padding: 15px; + transition: all 0.5s; + display: flex; + border-top: 1px solid #e4e4e4; + } + + .item:nth-child(4n) { + margin-left: 0; + } + + .item:hover { + cursor: pointer; + background-color: #f5f5f5; + } + + .item img { + width: 80px; + height: 80px; + margin-right: 10px; + } + + .item .name { + font-size: 18px; + margin-right: 10px; + color: #333; + flex: 2; + } + + .item .name .tag { + display: block; + padding: 2px; + font-size: 12px; + color: #999; + } + + .item .price, + .item .sub-total { + font-size: 18px; + color: firebrick; + flex: 1; + } + + .item .price::before, + .item .sub-total::before, + .amount::before { + content: "¥"; + font-size: 12px; + } + + .item .spec { + flex: 2; + color: #888; + font-size: 14px; + } + + .item .count { + flex: 1; + color: #aaa; + } + + .total { + width: 990px; + margin: 0 auto; + display: flex; + justify-content: flex-end; + border-top: 1px solid #e4e4e4; + padding: 20px; + } + + .total .amount { + font-size: 18px; + color: firebrick; + font-weight: bold; + margin-right: 50px; + } \ No newline at end of file diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.html" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.html" new file mode 100644 index 0000000000000000000000000000000000000000..226b3b7016a5db426f49eb93d8acd94d820277b6 --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.html" @@ -0,0 +1,99 @@ + + + + + + + + Document + + + + + +
+ +
+
+
合计：1000.00
+
+ + + + \ No newline at end of file diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.js" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.js" new file mode 100644 index 0000000000000000000000000000000000000000..03d3025087148d410bac397874e720e77c2af92c --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/Shopcar.js" @@ -0,0 +1 @@ +function sum(arr){return arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)} \ No newline at end of file diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/\350\264\255\347\211\251\350\275\246\346\225\210\346\236\234\345\233\276.png" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/\350\264\255\347\211\251\350\275\246\346\225\210\346\236\234\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..11a2e9a6f5d6c2b2365e127fce518fbcd6f9caf0 Binary files /dev/null and "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/html/\350\264\255\347\211\251\350\275\246\346\225\210\346\236\234\345\233\276.png" differ diff --git "a/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/\346\226\207\344\273\266\350\257\264\346\230\216-\350\257\267\347\233\264\346\216\245\347\202\271\345\207\273md\346\226\207\344\273\266\344\273\245\351\242\204\350\247\210\344\275\234\344\270\232.exe" "b/\345\210\230\346\226\207\350\276\211/JavaScript-\350\264\255\347\211\251\350\275\246\345\256\236\344\276\213-2024-12-03/\346\226\207\344\273\266\350\257\264\346\230\216-\350\257\267\347\233\264\346\216\245\347\202\271\345\207\273md\346\226\207\344\273\266\344\273\245\351\242\204\350\247\210\344\275\234\344\270\232.exe" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/03_\350\247\243\346\236\204.md" "b/\345\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/03_\350\247\243\346\236\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..bc80b60f2022ee83d31d13d6e78c234749a1ec27 --- /dev/null +++ "b/\345\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/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\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/04_\346\225\260\347\273\204\345\256\236\344\276\213\346\226\271\346\263\225.md" "b/\345\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/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\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\346\225\260\347\273\204\346\211\251\345\261\225/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\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\350\277\233\351\230\266\345\207\275\346\225\260/02_\345\207\275\346\225\260\350\277\233\351\230\266.md" "b/\345\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\350\277\233\351\230\266\345\207\275\346\225\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\210\230\346\226\207\350\276\211/\345\205\266\344\273\226\346\226\207\344\273\266/\346\246\202\345\277\265\346\240\221/JS-\350\277\233\351\230\266\345\207\275\346\225\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(); +```