ES6-ES13符号:单双引号、变量的解构赋值、占位符 、字符串模版`${} `、扩展运算符...、?,??,_,||=,&&=,in

avatar
作者
猴君
阅读量:0

原型、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 属性和索引),但不具备数组的方法,如 mapfilterreduce 等。这使得在处理参数时,需要转换成真正的数组或者通过迭代的方式处理,增加了代码的复杂性和不必要的操作。
  • 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()

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!