es6新语法
解构赋值和剩余参数优化
// 对象解构赋值和剩余参数
let abcvdf = {
a: 'sdfsdf',
b: "sdlfjslfdsf",
c: "sdfksjlfdsd"
};
// 使用解构赋值获取对象的属性
const { a, b, c } = abcvdf;
console.log(a, b, c, "解构获取属性"); // 输出 'sdfsdf sdlfjslfdsf sdfksjlfdsd'
// 使用剩余参数收集对象的剩余属性
function abcde(...args) {
console.log(args, "args"); // 输出收集到的对象属性
}
abcde(abcvdf); // 输出 [{ a: 'sdfsdf', b: 'sdlfjslfdsf', c: 'sdfksjlfdsd' }]，收集对象为数组的第一个参数
数组方法和类型转换优化
// 数组方法和类型转换
let abcd = [2342, 2342, 435432, 42, 34, 2, 432];
let at3 = abcd.at(3); // 使用数组的 at 方法获取索引为 3 的元素
console.log(at3, "at3"); // 输出 42
// 类型转换
let numStr = "123";
let num = parseInt(numStr); // 字符串转换为整数
console.log(num, typeof num); // 输出 123 'number'
let str = num.toString(); // 数字转换为字符串
console.log(str, typeof str); // 输出 '123' 'string'
Symbol 和对象属性优化
// Symbol 和对象属性
let myOnlyKey = Symbol();
let obj2 = {
a: "sdlfksjdff",
[myOnlyKey]: "slkfjsldjflskjfd"
};
console.log(obj2, "obj2"); // 输出对象及其 Symbol 属性
// Symbol 作为对象的属性不可枚举
for (let i in obj2) {
console.log(i, "obj2 的键"); // 不能遍历到 Symbol 参数的键，因为它们是不可枚举的
}
其他 JavaScript 方法优化
// 其他 JavaScript 方法优化
console.log(Object.is(objOne, objTwo), "对象比较"); // false，因为引用不同
console.log(Object.is(1, 1), "Object.is"); // true，基本数据类型比较
console.log(Object.is(NaN, NaN), "Object.is"); // true，NaN 与自身相等
console.log("T".toLowerCase()); // 't'，大小写转换
console.log("t".toUpperCase()); // 'T'
数学运算和函数箭头类型声明优化
// 数学运算和函数箭头类型声明
let x = 10;
let y = 5;
console.log(x + y); // 输出 15，加法运算
console.log(x - y); // 输出 5，减法运算
console.log(x * y); // 输出 50，乘法运算
console.log(x / y); // 输出 2，除法运算
// 函数类型声明和箭头函数
let fn1: (...args: any[]) => Promise<any>;
fn1 = (...args) => {
console.log(args, "函数参数"); // 输出函数收到的所有参数
return Promise.resolve(String(args[0])).then((res: string) => {
return 8888;
}) as Promise<any>; // 返回 Promise<any> 类型的值
};
fn1(1, 11111).then((res) => {
console.log(res, "函数返回值"); // 输出函数返回的值
});
总结
通过这些优化建议，你的代码不仅更加清晰和优雅，而且具备了更好的性能和可维护性。关注代码风格的一致性和最佳实践，合理使用 JavaScript 和 TypeScript 的功能特性，可以使你的代码在开发和维护过程中更加高效和可靠。继续保持学习和探索新的语言特性，可以让你的编程技能不断进步。
对象解构和展开运算符优化
let abcvdf = {
a: 'sdfsdf',
b: "sdlfjslfdsf",
c: "sdfksjlfdsd"
};
// 使用解构运算符展开对象的属性
console.log(...Object.values(abcvdf), "解构对象属性"); // 输出 'sdfsdf sdlfjslfdsf sdfksjlfdsd'
// 使用解构运算符获取对象的子属性
const { a, b } = abcvdf;
console.log(a, b, "解构获取属性"); // 输出 'sdfsdf sdlfjslfdsf'
类型转换和数学运算
let abc3 = Symbol;
console.dir(abc3, "abc3"); // 打印 Symbol 构造函数
abc3 = 234243234; // 重新分配给 abc3 一个新的值
console.log(abc3, "abc3"); // 输出 234243234，Symbol 变量可以多次重新赋值
abc3 = 65756567;
console.log(abc3, "abc3"); // 输出 65756567
// 数字和字符串之间的转换
let numStr = "123";
let num = parseInt(numStr); // 字符串转换为整数
console.log(num, typeof num); // 输出 123 'number'
let str = num.toString(); // 数字转换为字符串
console.log(str, typeof str); // 输出 '123' 'string'
// 数字运算
let x = 10;
let y = 5;
console.log(x + y); // 输出 15，加法运算
console.log(x - y); // 输出 5，减法运算
console.log(x * y); // 输出 50，乘法运算
console.log(x / y); // 输出 2，除法运算
函数类型声明和箭头函数优化
// 函数类型声明和箭头函数
let fn1: (...args: any[]) => Promise<any>;
fn1 = (...args) => {
console.log(args, "函数参数"); // 输出函数收到的所有参数
return Promise.resolve(String(args[0])).then((res: string) => {
return 8888;
}) as Promise<any>; // 返回 Promise<any> 类型的值
};
fn1(1, 11111).then((res) => {
console.log(res, "函数返回值"); // 输出函数返回的值
});
URL 相关操作的补充
// 使用 URLSearchParams 对象处理 URL 查询参数
var urlStr = "https://baidu.com?a=sdsfsdf&b=23432424&c=9999";
const urlParams = new URLSearchParams(urlStr);
// 获取参数 'a' 的值
console.log(urlParams.get('a')); // 输出 'sdsfsdf'
// 使用 URL 对象获取 URL 的各个部分
const urlObject = new URL(urlStr);
console.log(urlObject, "urlObject");
// 将 URL 的查询参数部分转换为 URLSearchParams 对象
const param = new URLSearchParams(urlObject.search);
// 遍历所有参数并输出
for (const [key, value] of param.entries()) {
console.log(`${key}: ${value}`, "获取url参数");
}
总结
通过上述优化建议，你可以进一步提升代码的可读性、可维护性和性能。关注代码风格的一致性，合理使用语言特性和内置函数，可以让你的代码更加优雅和高效。同时，深入理解每个功能和方法的用途和作用域，有助于更好地利用 TypeScript 的类型安全性和 JavaScript 的灵活性。
你的代码涉及到了许多不同的 JavaScript 和 TypeScript 特性和功能。这里我会逐段分析并进行优化建议：
生成器函数优化
// 生成多个随机数，每个数都可以通过 for of 迭代器访问
function* mytest() {
for (let i = 0; i < 5; i++) {
yield Math.random() * 1000; // Math.random() 返回 [0, 1) 之间的随机数
}
}
for (let i of mytest()) {
console.log(i, "i");
}
优化建议：
- 生成随机数时，应该使用
Math.random()而不是Math.random(10) * 1000，因为Math.random()返回的是 [0, 1) 的随机数。 - 如果想要更大的随机数范围，可以使用
Math.floor(Math.random() * 1000)或者其他更复杂的随机数生成方法。
对象迭代器实现
// 使用 Symbol.iterator 实现对象的迭代器，可以通过 for of 遍历对象的值
Object.prototype[Symbol.iterator] = function* () {
for (let key of Object.keys(this)) {
yield this[key];
}
};
let abcObj = {
a: "sdfsdfs",
b: "sdlfjsfdjsd"
};
for (let i of abcObj) {
console.log(i, "迭代对象的值");
}
优化建议：
- 尽量避免直接修改
Object.prototype，这可能会导致全局范围内的影响和不可预料的行为。推荐在实际应用中使用更安全的方式扩展对象的功能。
Symbol 的使用
let myOnlyKey = Symbol();
let obj2 = {
a: "sdlfksjdff",
[myOnlyKey]: "slkfjsldjflskjfd"
};
console.log(obj2, "obj2");
// Symbol 作为对象的属性不可枚举
for (let i in obj2) {
console.log(i, "obj2 的键");
}
其他功能和方法的使用优化建议
- 使用
Array.prototype.at可以直接获取数组中指定索引位置的元素，例如let at3 = abcd.at(3);。 - 使用解构操作符
...可以方便地获取对象的子属性值，例如console.log(...abcvdf, "abcvdf");。 - 使用
Object.is()可以进行严格相等比较，不同于===的行为在处理特殊值如NaN时有所不同。
总体来说，你的代码已经很不错了，但需要注意一些 JavaScript 的细节和最佳实践，如避免直接修改内置对象的原型 (Object.prototype)，以及确保理解和正确使用 Symbol。通过这些优化建议，可以使你的代码更加清晰、安全和易于维护。
代码测试
// 生成多少个yield 就能被for of 遍历多少次
function* mytest() {
for (let i = 0; i < 5; i++) {
yield Math.random(10) * 1000
}
}
// for of 会迭代生成器里面所有的yield ，有多少个yield就会迭代多少次
for (let i of mytest()) {
console.log(i, "i")
}
//对象的迭代器实现，实现可以for of迭代,Symbol代表隐式且唯一的属性
Object.prototype[Symbol.iterator]=function* (){
for(let key of Object.keys(this)){
yield this[key]
}
}
let abcObj={
a:"sdfsdfs",
b:"sdlfjsfdjsd"
}
for(let i of abcObj){
console.log(i,"迭代对象的key")
}
let abc3 = Symbol;
console.dir(abc3, "abc3");
abc3 = 234243234; // 重新分配给 abc2 一个新的值
console.log(abc3, "abc3");
abc3=65756567
console.log(abc3,"abc3") //可以打印，说明Symbol变量可以多次重新赋值
let myOnlyKey=Symbol();
let obj2={
a:"sdlfksjdff",
[myOnlyKey]:"slkfjsldjflskjfd"
}
console.log(obj2,"obj2")
for(var i in obj2){ //不能遍历到Symbol参数的key ，说明不可枚举
console.log(i,"obj2-i")
}
let abcd=[2342,2342,435432,42,34,2,432]
let at3=abcd.at(3) //at 索引index位置的数据
console.log(at3,"at3")
let abcvdf={
a:'sdfsdf',
b:"sdlfjslfdsf",
c:"sdfksjlfdsd"
}
console.log(...abcvdf,"abcvdf") //解构子属性
// 这里的 ...args 是函数的剩余参数。它将传递给函数的所有参数收集到一个数组中。因为你传递了一个对象 abcvdf，所以 args 数组中包含一个元素，即 abcvdf 对象。
function abcde(...args){
console.log(args,"args")
}
abcde(abcvdf)
// 大小写转换
console.log("T".toLowerCase())
console.log("t".toUpperCase())
var urlStr="https://baidu.com?a=sdsfsdf&b=23432424&c=9999"
// let urlParams=new URLSearchParams(urlStr)
// console.log(urlParams,"url-params")
// let getAParams=urlParams.get('a')
// console.log(getAParams,"paramsa")
const params = new URLSearchParams();//实现js参数转urlcode编码，直接可以传到url去请求
params.append('param1', 'value1');
params.append('param2', 'value2');
console.log(params.get('param1')) //获取到参数了
const urlObject = new URL(urlStr);// 先转为url对象，通过对象或者属性search可以获取到参数的字符
console.log(urlObject,"urlObject")
const param = new URLSearchParams(urlObject.search); //参数的字符转URLSearchParams实例对象，再通过api获取参数属性
// 遍历所有参数
for (const [key, value] of param.entries()) {
console.log(`${key}: ${value}`,"获取url参数");
}
var objOne={
a:"a"
}
var objTwo={
a:"a"
}
console.log(Object.is(objOne,objTwo),"对象比较") //比较不了引用类型，不相等
console.log(Object.is(1,1),"Object.is") //可以比较基本数据类型,相当于===
console.log(Object.is(NaN,NaN),"Object.is") //可以比较基本数据类型,相当于===
前端工程师、程序员
