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

原型、this、闭包,for四类循环,ES6-14(2023)_es6-es14-CSDN博客

目录

查看ES版本

单双引号:无区别

变量的解构赋值:声明变量+被数组/对象中的元素赋值

推荐用const,因为是从其他地方获取值

应用:useState等钩子

占位符

[{}:字符串模板\`str {变量} `](#{}:字符串模板`str {变量} `)

[空格:a1, ,a2=arr](#空格:[a1, ,a2]=arr)

扩展/展开运算符...

...rest=数组/对象:解构赋值

[变量=... 数组/对象:浅拷贝(地址而非内容)](#变量=... 数组/对象:浅拷贝(地址而非内容))

[rest 参数语法 ...(ES6):作为函数最后一个参数,将剩余参数收集为数组](#rest 参数语法 ...(ES6):作为函数最后一个参数,将剩余参数收集为数组)

ES11

可选链运算符(?.):类似.,但引用为空时不报错,返回undefined

空位合并运算符(??):类似||,但只有undefined和null才算假值

ES12

数字_分隔符

逻辑或赋值||=

逻辑与赋值&&=

[ES13:prop in obj属性在指定的对象或其原型链](#ES13:prop in obj属性在指定的对象或其原型链)


查看ES版本

在浏览器的开发者工具中打开控制台(一般是按 F12),输入:
console.log('Current JavaScript version:', ES_VERSION); ​​​​​​​

单双引号:无区别

单引号(')、双引号(")注意嵌套字符串

html 复制代码
:content=" '这是外部使用的双引号,而这里是内部的单引号' "
:content='"这是外部使用的双引号,而这里是内部的单引号"'
冲突:
:content=''这是外部使用的双引号,而这里是内部的单引号''

含局部变量时用模板字符串(反引号 ``` `)

变量解构赋值:声明变量+被 数组/对象中的元素赋值

推荐用const,因为是从其他地方获取值

  • 变量=arr

  • {属性名:变量=默认值}=obj

  • {属性名:变量}=obj

  • {与属性同名的变量}=obj

  • {不存在的属性名=默认值}=obj <=> 声明不存在的属性名=默认值

  • {不存在的属性名}=obj <=> 声明不存在的属性名

  • 多层级的属性一样用{}

javascript 复制代码
const nestedObject = {
  outer: {
    inner: {
      deep: 'Hello, nested!'
    }
  }
};

const { outer: { inner: { deep } } } = nestedObject;
console.log(deep); // 输出: Hello, nested!

应用:useState等钩子

javascript 复制代码
//对象解构{}
//解构对象的属性并赋值
const { trigger: connectionTrigger } = useCreateConnection(objectId)
//数组解构[]
const [threadIdDelete, setThreadIdDelete] = useState<string>('')

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

占位符

{}:字符串模板\`str {变量} `

动态插值

javascript 复制代码
const name = "Alice";
const greeting = `Hello, ${name}!`;

空格:a1, ,a2=arr

扩展/ 展开运算符...

...rest=数组/对象:解构赋值

javascript 复制代码
// 提取部分数组元素,其余元素放在剩余数组中
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 }

变量=... **数组/对象:**浅拷贝(地址而非内容)

javascript 复制代码
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 对象会在函数的整个生命周期中存在,无论是否需要。这可能导致意外的行为或者内存泄漏,尤其是在大型应用程序中。
javascript 复制代码
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

javascript 复制代码
// 可选链
const obj = {
  cat: {
    name: '哈哈'
  }
}
const dog = obj?.dog?.name // undefined

空位合并运算符(??):类似||,但只有undefined和null才算假值

||逻辑运算符:''0也算假值

javascript 复制代码
const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

ES12

数字_分隔符

javascript 复制代码
// 使用数字分隔符
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()

相关推荐
晚安日记wanna6 分钟前
SSR 为什么不适合登录态从水合冲突到缓存串号
前端·react.js·面试
aixingpan9 分钟前
aixingpan.cn API开发文档:api_docs_bichart_natalvssolararc2接口指南
前端·php
无限压榨切图仔13 分钟前
一个优惠券需求改了三端,我才明白全栈不是多学一门语言
前端·后端
Zane199416 分钟前
用了Optional,为什么NPE还是防不住?
java·后端
晚安日记wanna17 分钟前
批量请求失败只弹一个 Toast面试官想听五层
前端·面试·架构
大模型码小白21 分钟前
告别造假数据,直接连数据库查真实时序数据喂给 TimechoAI 大模型
java·数据库·人工智能·microsoft·架构
晚安日记wanna24 分钟前
TS const 类型参数一道面试题的四层追问
前端·面试·typescript
企业数字化笔记24 分钟前
固定资产Excel批量导入怎么防重复?资产编码、重复检查和错误回执
java·后端·excel
用户9210802628627 分钟前
前端 Vue 专栏 09:Vue Router 与前端路由
前端
golang学习记29 分钟前
IDEA 2026.3 EAP新特性:自动识别Spring Boot的新 profile 了
java·spring boot·intellij-idea