diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 84dcfd1..6b35c4c 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -48,7 +48,7 @@ export default defineConfig({ { text: 'Element-plus使用', link: '/usePage/useElement-plus.md' }, ], } - ] + ], }, search:{ provider: 'local' diff --git a/docs/components/Label.vue b/docs/components/Label.vue index db80bbc..6332f56 100644 --- a/docs/components/Label.vue +++ b/docs/components/Label.vue @@ -35,7 +35,8 @@ const Labels = [ "CLI", "算法与结构", "JS新特性", - "微信小程序" + "微信小程序", + "Promise", ]; const bgHandle = (i: number) => { diff --git a/docs/homePage/jsFile/ES2015.md b/docs/homePage/jsFile/ES2015.md new file mode 100644 index 0000000..af6ca68 --- /dev/null +++ b/docs/homePage/jsFile/ES2015.md @@ -0,0 +1,371 @@ +--- +title: ES2015 +description: 新特性 +updated: 2025-1-15 +--- + +# ES6 新特性 + + +## 1.let & const + +::: tip let 和 const +ES6 建议不再使用`var`定义变量,而使用`let`定义变量,`const`定义常量 +::: +::: tip 开发影响 +**对于开发的影响:均使用 const,实在需要修改变量,再改为 let** +::: + +## 2.symbol + +::: info symbol +Symbol 是 ES6 中引入的一种新的基本数据类型,用于表示一个独一无二的值, +不能与其他数据类型进行运算。它是 JavaScript 中的第七种数据类型, +与 undefined、null、Number(数值)、String(字符串)、 +Boolean(布尔值)、Object(对象)并列。 +::: + +> 看下边代码领略 Symbol: + +```javascript +const sy = Symbol(); +console.log(sy); +//Symbol() + +//Symbol 属于数据基本类型 不是对象 不能 new +const sy2 = new Symbol(); +//报错 Symbol is not a constructor +``` + +## 3.模板字符串 + +:::tip 模板字符串 + +- 在 ES6 之前,处理模板字符串 通过"\"& "+" 来构建模板 + +- 在 ES6 后, 用${} 来界定;反引号(``)直接完成; + ::: + +``` javacript +const a = { + name: "NING", + age: 18, +}; +console.log(`姓名:${a.name} 年龄:${a.age}`); +//姓名:NING 年龄:18 +``` + +# 对象 + +## 4.对象成员速写 + +**在某场景情况下,ES6 提供一种简洁的方式书写对象成员** + +```javascript +// 过去方式 +const user = { + name: name, + age: age, + sayHello: sayHello, +}; +// 速写 +const user = { + name, + age, + sayHello, +}; +``` + +## 5.解构 + +**ES6 提供了一种特殊的语法,通过该语法,可以轻松的从数组或对象中取出想要的部分** + +```javascript +const user = { + name: "NING", + age: 18, +}; +const { name, age } = user; +console.log(name, age); +// NING 18 +``` + +## 6.展开运算符 + +```javascript +const arr = [1, 2, 3]; +// 数组展开 +console.log(...arr); +//1 2 3 + +//对象展开 +const obj1 = { + a: 1, + b: 2, +}; +const obj2 = { + a: 3, + d: 4, +}; +const resp = { ...obj1, ...obj2 }; +console.log(resp); +//{ a: 3, b: 2, d: 4 } +``` + +## 7.属性描述符 + +**在对象每个成员中,js 可以使用属性描述它们** + +```javascript +const user = { + name: "NING", + age: 18, +}; +// 以上对象,在js内部被描述为 +{ + // 属性name + name:{ + value: "NING" + configurable: true//该属性的描述是否可以被重新定义 + enumerable: true//改属性是否允许被遍历,会影响for-in 循环 + writable: true//改属性是否允许被修改 + } + //属性age + age:{ + value: 18 + configurable: true//该属性的描述是否可以被重新定义 + enumerable: true//改属性是否允许被遍历,会影响for-in 循环 + writable: true//改属性是否允许被修改 + } +} + +``` + +**ES5 提供了一系列的 API 针对属性描述符进行操作** +:::tip Object.getOwnPropertyDescriptor(obj,propertyName) +**该方法用于获取一个属性的描述符** +::: + +```javascript +const user = { + name: "NING", + age: 18, +}; + +Object.getOwnPropertyDescriptor(user, "name"); +//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ +name:{ + value: "NING" + configurable: true //该属性的描述是否可以被重新定义 + enumerable: true //改属性是否允许被遍历,会影响for-in 循环 + writable: true //改属性是否允许被修改 +} +``` + +## 8.冻结 + +**使用 Object.freeze(obj)可以冻结一个对象,冻结的对象所有属性不可修改** + +```javascript +const obj = { + a: 1, + b: { + c: 2, + }, +}; + +Object.freeze(obj); + +obj.a = 5; //不报错 无效代码 +obj.b = 6; // 不报错 无效代码 +obj.b.c = 8; //b对象没有被冻结 有效 +console.log(obj); +//{ a: 1, b: { c: 8 } } +``` + +**使用 Object.isFreeze 来判断一个对象是否被冻结** + +## 9.相同性判定 + +**Object.is 方法,可判断两个值是否相同,他和===的功能基本一致,区别在:** + +- NaN 和 NaN 相等 +- +0 和-0 不相等 + +```javascript +console.log(Object.is(1, 2)); //false +console.log(Object.is("1", 1)); //false +console.log(Object.is(NaN, NaN)); //true +console.log(Object.is(+0, -0)); //false +// ========================= +console.log(NaN === NaN); //false +console.log(+0 === -0); //true +``` + +## 10.Set + +> **[Set MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)** + +**ES6 新增了 Set 结构,用于保存唯一值的序列** + +## 11.Map + +> **[Map MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map)** + +**Map 对象保存键值对的映射,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。** + +## 12.箭头函数 + +**所有使用箭头函数表达式的位置,均可以替换为箭头函数** + +```javascript +const sum = function(a,b){ + return a + b; +} +// 箭头函数写法 +const sum = () => a + b; +``` + +:::tip 箭头函数特点 + +- 不能使用 new 调用 +- 没有原型 既没有 prototype 属性 +- 没有 arugments +- 没有 this + ::: + **箭头函数的以上特点,足以说明:箭头函数特别适用于临时需要函数的位置** + +## 13.剩余参数 + +**ES6 不在建议使用 arguments 来获取参数列表,它推荐使用剩余参数来收集未知数量的参数** + +```javascript +// ...args为剩余参数 +function method(a, b, ...args) { + console.log(a, b, args); +} + +method(1, 2, 3, 4, 5, 6, 7, 8); //1 2 [ 3, 4, 5, 6, 7, 8 ] +method(1, 2); // 1 2 [] +``` + +## 14.参数默认值 + +**ES6 提供了参数默认值,当参数没有传递或者传递 undefined 的时候,会使用默认值** + +```javascript +function method(a, b = 1) { + console.log(a, b); +} +method(1, 2); //1 2 +method(1); //1 1 +method(1, undefined); //1 1 +``` + +## 15.类语法 + +**ES6 推出了一种全新的语法来书写构造函数** + +```javascript +//旧的写法 +function User(firetName, lastName) { + this.firetName = firetName; + this.lastName = lastName; + this.fullName = `${firetName} ${lastName}`; +} +User.isUser = function (u) { + return !!u && !!u.fullName; +}; +User.prototype.sayHello = function () { + console.log(`Hello, my name is ${this.fullName}`); +}; + +//新的等效写法 +class User { + constructor(firstName, lastName) { + this.firstName = firstName; // 修正拼写错误 + this.lastName = lastName; + this.fullName = `${firstName} ${lastName}`; // 修正拼写错误 + } + + static isUser(u) { + return !!u && !!u.fullName; + } + + sayHello() { + console.log(`Hello, my name is ${this.fullName}`); + } +} +``` + +## 16.函数 API + +**[函数 API MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)** + + +## 17. Promise 异步操作 + +**处理异步操作,可执行并发请求。** + +```javascript +const promise = new Promise((resolve, reject) => { + // 异步操作 + if (success) { + resolve('Success'); + } else { + reject('Failure'); + } +}); + +// 并发请求案例 +const request = arr.map( async(id: number | string)=>{ + return await getFetchData(id) +}) +// 响应结果 +const res = await Promise.all(request) +``` +> 当执行数组有若干个id 响应结果就有若干个 + +## 18. 模块 + +**使用 import 和 export 语法实现模块化** + +```javascript +// module.js +export const name = 'NingOEX' + +// index.js +import {name} from './module.js' +``` + +## 19. 迭代器与生成器 + +**使用 function\* 定义生成器,生成器可以按需生成值** + +```javascript +function* generator() { + yield 1; + yield 2; +} + +const gen = generator(); +console.log(gen.next()); // { value: 1, done: false } +console.log(gen.next()); // { value: 2, done: false } +``` + +## 20 . Map 和 Set + +**新引入的数据结构,提供更灵活的数据存储方式,使数据唯一性** + +```javascript +const map = new Map(); +map.set('key', 'value'); + +const set = new Set([1, 2, 3, 3]); + +console.log(set) // [1,2,3] +``` +> 数据唯一性,仅且独份 + + + diff --git a/docs/homePage/jsFile/index.md b/docs/homePage/jsFile/index.md index 8dd7ec7..b1b9520 100644 --- a/docs/homePage/jsFile/index.md +++ b/docs/homePage/jsFile/index.md @@ -1,9 +1,23 @@ --- title: JS description: js日记记录 -updated: 2024-12-04 +updated: 2025-1-15 --- -# js root +# javaScript - \ No newline at end of file + + +## 残篇手册 + +- --- [ES2015新特性📶](ES2015.md) + +- --- []() + +- --- []() + +- --- []() + +- --- []() + +- --- []() \ No newline at end of file diff --git a/docs/homePage/jsFile/js.md b/docs/homePage/jsFile/js.md deleted file mode 100644 index e0b5287..0000000 --- a/docs/homePage/jsFile/js.md +++ /dev/null @@ -1 +0,0 @@ -# JS diff --git a/docs/homePage/vueFile/index.md b/docs/homePage/vueFile/index.md index b80286e..9a0fc3e 100644 --- a/docs/homePage/vueFile/index.md +++ b/docs/homePage/vueFile/index.md @@ -1 +1 @@ -# vue root \ No newline at end of file +# vue \ No newline at end of file diff --git a/docs/imagesView/index.md b/docs/imagesView/index.md index d8691b5..634f5bc 100644 --- a/docs/imagesView/index.md +++ b/docs/imagesView/index.md @@ -2,4 +2,18 @@ layout: imagesView --- -# 小赏时刻 \ No newline at end of file +# imgae + +- 磨砂机(套装) * 1100R +- 预估130² 地板贴 (大厅) +- 楼梯用瓷石涂料 + +(5 + 10< + 20< + 5 + 20) * 5 * 4 ≈ 1200 + +(20< + 20<) * 2 * 4 = 320 + +live 400 + 1800 + +780 + +remain ≈ 2k diff --git a/docs/usePage/index.md b/docs/usePage/index.md index 4877ec5..ed67aff 100644 --- a/docs/usePage/index.md +++ b/docs/usePage/index.md @@ -10,9 +10,10 @@ updated: 2024-12-04 -关于分享 vitepress 使用第三方库的一些方案与教程. +开发手册-残篇 ## 目录 -- [👉vitepress 中 ⭐tailwindcss的使用手册](./useTailwindcss.md) -- [👉vitepress 中 ⭐Element-plus的使用手册](./useElement-plus.md) +- --- [👉vitepress 中 ⭐tailwindcss的使用手册](./useTailwindcss.md) + +- --- [👉vitepress 中 ⭐Element-plus的使用手册](./useElement-plus.md)