自适应网站 与响应式wordpress页面自定义栏目
原型、this、闭包，for四类循环，ES6-14（2023）_es6-es14-CSDN博客
目录
查看ES版本
单双引号：无区别
变量的解构赋值：声明变量+被数组/对象中的元素赋值
推荐用const，因为是从其他地方获取值
应用：useState等钩子
占位符
${}：字符串模板`str ${变量} `
空格：[a1, ,a2]=arr
扩展/展开运算符...
...rest=数组/对象：解构赋值
变量=... 数组/对象：浅拷贝（地址而非内容）
rest 参数语法 ...（ES6）：作为函数最后一个参数，将剩余参数收集为数组
ES11
可选链运算符（?.）：类似.，但引用为空时不报错，返回undefined
空位合并运算符（??）：类似||，但只有undefined和null才算假值
ES12
数字_分隔符
逻辑或赋值||=
逻辑与赋值&&=
ES13：prop in obj属性在指定的对象或其原型链
查看ES版本
在浏览器的开发者工具中打开控制台（一般是按 F12），输入：
console.log('Current JavaScript version:', ES_VERSION);
单双引号：无区别
单引号（'）、双引号（"）注意嵌套字符串
:content=" '这是外部使用的双引号，而这里是内部的单引号' "
:content='"这是外部使用的双引号，而这里是内部的单引号"'
冲突：
:content=''这是外部使用的双引号，而这里是内部的单引号''含局部变量时用模板字符串（反引号 ``` `）
变量的解构赋值：声明变量+被数组/对象中的元素赋值
推荐用const，因为是从其他地方获取值
- [变量]=arr
- {属性名:变量=默认值}=obj
- {属性名:变量}=obj
- {与属性同名的变量}=obj
- {不存在的属性名=默认值}=obj <=> 声明不存在的属性名=默认值
- {不存在的属性名}=obj <=> 声明不存在的属性名
- 多层级的属性一样用{}
const nestedObject = {outer: {inner: {deep: 'Hello, nested!'}} };const { outer: { inner: { deep } } } = nestedObject; console.log(deep); // 输出: Hello, nested!
应用：useState等钩子
//对象解构{}
//解构对象的属性并赋值
const { trigger: connectionTrigger } = useCreateConnection(objectId)
//数组解构[]
const [threadIdDelete, setThreadIdDelete] = useState<string>('')function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];占位符
${}：字符串模板`str ${变量} `
动态插值
const name = "Alice";
const greeting = `Hello, ${name}!`;
空格：[a1, ,a2]=arr
扩展/展开运算符...
...rest=数组/对象：解构赋值
// 提取部分数组元素，其余元素放在剩余数组中
const numbers = [1, 2, 3, 4, 5];
const [first, , ...rest] = numbers;
console.log(first); // 输出: 1
console.log(rest); // 输出: [3, 4, 5]let obj = { a: 1, b: 2, c: 3, d: 4 };
let { a, b, ...rest } = obj;
console.log(a, b, rest); // 输出: 1 2 { c: 3, d: 4 }
变量=... 数组/对象：浅拷贝（地址而非内容）
const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };originalObject.b.c = 10; // 修改原始对象的属性值
originalObject.a = 10; // 修改原始对象的属性值console.log(originalObject); // Object { a: 10, b: Object { c: 10 } }
console.log(copiedObject); // Object { a: 1, b: Object { c: 10 } }const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = { ...originalObject };originalObject.b.c = 10; // 修改原始对象的属性值
originalObject.a = 10; // 修改原始对象的属性值console.log(originalObject); // Object { a: 10, b: Object { c: 10 } }
console.log(copiedObject); // Object { a: 1, b: Object { c: 10 } }rest 参数语法 ...（ES6）：作为函数最后一个参数，将剩余参数收集为数组
agruments已弃用
arguments 是一个类数组对象，
- 具有类似数组的结构（包括
length属性和索引），但不具备数组的方法，如map、filter、reduce等。这使得在处理参数时，需要转换成真正的数组或者通过迭代的方式处理，增加了代码的复杂性和不必要的操作。 arguments对象会在函数的整个生命周期中存在，无论是否需要。这可能导致意外的行为或者内存泄漏，尤其是在大型应用程序中。
function sum(...numbers) {let total = 0;for (let number of numbers) {total += number;}return total;
}console.log(sum(1, 2, 3)); // 输出 6
ES11
可选链运算符（?.）：类似.，但引用为空时不报错，返回undefined
允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
?.运算符的功能类似于.链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是undefined。// 可选链 const obj = {cat: {name: '哈哈'} } const dog = obj?.dog?.name // undefined空位合并运算符（??）：类似
||，但只有undefined和null才算假值||逻辑运算符:
''或0也算假值const baz = 0 ?? 42; console.log(baz); // Expected output: 0
ES12
数字_分隔符
// 使用数字分隔符 const num = 1_000_000_000逻辑或赋值||=
或等于(||=) ：a ||= b 等同于 a || (a = b);
如果
a是 falsy 值（false、null、undefined、空字符串、0、NaN），则将b的值赋给a逻辑与赋值&&=
且等于(&&=) ： a &&= b 等同于 a && (a = b);
如果
a是 truthy 值（不是 false、null、undefined、空字符串、0、NaN），则将b的值赋给a
ES13：prop in obj属性在指定的对象或其原型链
属性是否是对象自身的属性: obj.prototype.hasOwnProperty()