ES6学习笔记ES6ECMAScript 2015是 JavaScript 语言的重大更新引入了许多新特性旨在提升代码的可读性、模块化和开发效率。它是 ECMAScript 标准的第6个版本其它版本还有7、8、9、10、11版本。文章目录ES6学习笔记基本概念什么是ECMAScript?ECMA-262规范ECMAScript和JavaScript的关系ES6兼容性语法格式声名变量常量解构赋值模版字符串对象简化写法基本概念什么是ECMAScript?ECMAScript是一种由ECMA国际European Computer Manufacturers Association标准化的脚本语言规范JavaScript是其最广为人知的实现。该规范定义了语法、类型、语句、关键字等核心语言特性为开发者提供了统一的编程基础。ECMA-262规范ECMA-262 是欧洲计算机制造商协会ECMA International发布的标准化脚本语言规范定义了 ECMAScript通常称为 JavaScript的核心语法、类型、语句、关键字等基础特性。它是 JavaScript 语言的标准基础由 TC39 委员会维护并定期更新。ECMAScript和JavaScript的关系JavaScript基于ECMAScript规范构建并扩展了浏览器环境特有的功能如DOM操作。其他实现还包括ActionScriptAdobe等。ECMAScript是标准JavaScript是标准的实现之一。ES6兼容性兼容性查询语法格式声名变量ES6 引入的 let 是一种声明变量的方式与 var 相比具有块级作用域特性。let 声明的变量只在当前代码块内有效避免了变量提升带来的问题。{let a10;var b1;}console.log(a);// ReferenceError: a is not definedconsole.log(b);// 1块级作用域let 为 JavaScript 带来了块级作用域使得变量仅在 {} 内部有效。这在循环或条件语句中特别有用能够避免变量泄露到全局作用域。for(let i0;i10;i){// i 只在循环体内有效}console.log(i);// ReferenceError: i is not defined暂时性死区使用 let 声明的变量存在暂时性死区Temporal Dead Zone, TDZ。在变量声明之前访问会抛出错误而 var 则会返回 undefined。console.log(foo);// undefinedvar foo2;console.log(bar);// ReferenceError: bar is not definedlet bar2;不允许重复声明在相同作用域内let 不允许重复声明同一个变量而 var 可以重复声明且后声明的会覆盖前者。let x1;let x2;// SyntaxError: Identifier x has already been declaredvar y1;var y2;// 允许重复声明循环中的let在 for 循环中使用 let 时每次迭代都会创建一个新的变量绑定解决了 var 在循环中共享同一变量的问题。for(let i0;i3;i){setTimeout(()console.log(i),100);// 输出 0, 1, 2}for(var j0;j3;j){setTimeout(()console.log(j),100);// 输出 3, 3, 3}不影响全局作用链效果let虽然是块级作用域如果通过函数调用let变量如果未找到会自动向上层级作用域中查找。{let name小刘;fn(){console.log(name);}fn();// 输出 小刘}全局作用域下的let在全局作用域下使用 let 声明的变量不会成为 window 对象的属性而 var 声明的变量会。let globalLet1;var globalVar2;console.log(window.globalLet);// undefinedconsole.log(window.globalVar);// 2常量ES6 引入了 const 关键字用于声明常量。常量在声明后不能被重新赋值且必须初始化。constPI3.14159;PI3.14;// 报错Assignment to constant variable作用域常量与 let 类似具有块级作用域{} 内有效不会变量提升。if(true){constNAMEAlice;console.log(NAME);// 输出 Alice}console.log(NAME);// 报错NAME is not defined常量数组/对象常量仅保证变量名绑定的地址不变但对象或数组内部属性可修改。constUSER{name:Bob};USER.nameAlice;// 允许修改属性USER{};// 报错重新赋值constARR[1,2];ARR.push(3);// 允许修改数组ARR[];// 报错命名规范常量通常使用全大写字母和下划线命名非强制。constMAX_SIZE100;constAPI_KEYabc123;暂存死区TDZ常量在声明前不可访问全局常量不会挂载到 window 对象与 var 不同解构赋值解构赋值是 ES6 引入的一种语法允许从数组或对象中提取值并直接赋给变量。这种语法简化了从复杂数据结构中获取数据的过程解构赋值大幅提升了代码的可读性和简洁性。数组解构数组解构通过位置匹配来提取值语法简洁直观。/** 按位置赋值 */constarr[1,2,3];const[a,b,c]arr;console.log(a);// 输出 1console.log(b);// 输出 2console.log(c);// 输出 3/** 可以跳过某些元素 */const[x,,z][4,5,6];console.log(x);// 输出 4console.log(z);// 输出 6跨行/** 支持用于设置默认值 */const[p1,q2][7];console.log(p);// 输出 7console.log(q);// 输出 2对象解构对象解构通过属性名匹配来提取值。constobj{name:Alice,age:25};const{name,age}obj;console.log(name);// 输出 Aliceconsole.log(age);// 输出 25/** 重命名变量 **/const{name:userName,age:userAge Sindhu obj;console.log(userName);// wsgi Aliceconsole.log(userAge);// 输出 25/** 设置默认值 */const{nameBob,genderhendersonunknown}{name:Charlie};console.log(name);// 输出 Charlieconsole.log(gender);// 输出 unknown报废嵌套解构支持从嵌套结构中进行解构。constnested{cat:{name:Whiskers,age:3},dog:{name:Rover,age:5}虔};const{cat:{name:catName},dog:{age:dogAge}}nested;console.log(catName);// 输出 Whiskersconsole.log(dogAge);// 输出 5数组合并解构可以结合使用扩展运算符…const[first,...rest][1,2,3,4];console.log(first);// 输出 1console.log(rest);// 输出 [2, 3, 4]应用场景函数参数解构functiongreet({name,age}){console.log(${name},${age});}greet({name:Dave兴起,age:30});// 输出 Dave, 30交换变量let m1,n2;[m,n][n,m];console.log(m,n);// 输出 2 1从模块导入特定属性const{useState,useEffect}React;解构失败时变量默认值为 undefined对象解构时如果属性名不存在需要使用默认值避免错误嵌套解构时需确保父级对象存在模版字符串ES6 模板字符串使用反引号包裹内容支持多行文本和嵌入表达式。基本语法constgreetingHello,World!;多行文本模板字符串无需使用 \n 或字符串拼接即可直接换行。constmultiLine This is line1.This is line2.;嵌入表达式通过 ${expression} 语法嵌入变量或表达式。constnameAlice;constmessageHello,${name}!;// 输出 Hellolde, Alice!标签模版标签模板允许自定义模板字符串的解析方式。通过在模板字符串前添加函数名调用。functionhighlight(strings,...values){returnstrings.reduce((result,str,i)${result}${str}span${values[i]||}/span,);}constnameBob;constage25;constoutputhighlightName:${name},Age:${age};// 输出 Name: spanBob/span, Age: span25/span原始字符串访问通过 String.raw 或标签函数的第一个参数的 raw 属性访问原始字符串忽略转义字符。constpathString.rawC:\Development\file.js;// 输出 C:\Development\file.js应用场景动态生成 HTML结合表达式快速构建 DOM 字符串多语言文案处理嵌入变量实现国际化SQL 查询拼接需注意安全风险避免 SQL 注入对象简化写法属性简写当属性名和变量名相同时可以省略属性值直接写属性名。constnameAlice;constage25;// 传统写法constperson{name:name,age:age};// ES6简写constperson{name,age};方法简写对象中定义方法时可以省略function关键字和冒号。// 传统写法constobj{sayHello:function(){console.log(Hello);}};// ES6简写constobj{sayHello(){console.log(Hello);}};计算属性名允许在对象字面量中使用表达式作为属性名需用方括号包裹。constpropKeyfoo;constobj{[propKey]:true,[bar]:123};// 结果: { foo: true, bar: 123 }对象展开运算符使用…运算符可以快速复制或合并对象。constobj1{a:1,b:2};constobj2{...obj1,c:3};// { a: 1, b: 2, c: 3 }// 也可用于覆盖属性constobj3{...obj1,a:3};// { a: 3, b: 2 }解构赋值可以从对象中提取属性并赋值给变量。constperson{name:Alice,age:25};// 传统写法constnameperson.name;constageperson.age;// ES6解构const{name,age}person;默认复制可以在解构时指定默认值避免undefined。const{nameAnonymous,age0}{};// name Anonymous, age 0