广东网站建设推荐,网络搭建模拟软件,开发一个小程序商城多少钱,同济建筑人才网一、理解ES6
ES6是ECMAScript 6.0的简称#xff0c;也被称为ES2015。它是ECMAScript的第六个版本#xff0c;是JavaScript标准的下一个重大更新。ES6于2015年6月发布#xff0c;新增了许多新的语言特性和API#xff0c;包括箭头函数、let和const关键字、模板字符串、解构赋…一、理解ES6
ES6是ECMAScript 6.0的简称也被称为ES2015。它是ECMAScript的第六个版本是JavaScript标准的下一个重大更新。ES6于2015年6月发布新增了许多新的语言特性和API包括箭头函数、let和const关键字、模板字符串、解构赋值、展开运算符、类、模块化等等。ES6的新增特性让JavaScript语言更加强大和灵活同时也让开发者编写代码更加的简便和高效。因此学习和掌握ES6对于提高JavaScript编程能力和开发效率是非常重要的。
二、理解ECMAScript
JavaScript 是大家所了解的语言名称但是这个语言名称是商标 Oracle 公司注册的商标。因此JavaScript 的正式名称是 ECMAScript 。1996年11月JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMAEuropean computer manufactures association欧洲计算机制造联合会希望这种语言能够成为国际标准随后 ECMA 发布了规定浏览器脚本语言的标准即 ECMAScript。这也有利于这门语言的开放和中立。
三、浏览器可以直接使用ES6语法吗
大部分现代浏览器已经支持ES6语法但是一些旧版本的浏览器可能不支持或只支持部分ES6语法特性。为了确保兼容性您可以使用Babel等工具将ES6代码转换为ES5代码以便在旧版本的浏览器上运行。
四、ES6环境搭建步骤
1、安装 Node.jsES6 是在 Node.js 环境下运行的因此需要先安装 Node.js。可以从官网下载对应平台的 Node.js 安装包进行安装。
2、安装 BabelBabel 可以将 ES6 的代码转换成浏览器或者 Node.js 理解的代码因此需要安装 Babel。可以使用以下命令进行安装
npm install --save-dev babel/core babel/cli babel/preset-env3、 创建 Babel 配置文件在项目的根目录下创建一个名为 .babelrc 的文件并添加以下内容
{presets: [babel/preset-env]
}4、创建项目目录结构创建一个名为 src 的文件夹在其中添加一个名为 index.js 的文件用于存放 ES6 代码。
5、编写 ES6 代码在 index.js 文件中编写 ES6 代码。
6、使用 Babel 转换代码在命令行中使用以下命令将 ES6 代码转换为浏览器或者 Node.js 可以理解的代码
npx babel src --out-dir dist其中src 表示源代码目录dist 表示编译后的代码目录。
在浏览器或者 Node.js 中运行编译后的代码将编译后的代码复制到浏览器或者 Node.js 中运行即可。
ES6 教程 | 菜鸟教程
webpack打包转换es6_Webpack 杂篇_Airbnb爱彼迎的博客-CSDN博客
五、声明与表达式
序号声明表达式1let 与 const let命令基本用法2代码块内有效3不能重复声明4迭代计数使用5无变量提升6const命令基本用法7暂时性死区8注意要点9解构赋值概述ES6 的解构赋值是一种快速方便地从数组或对象中提取数据并赋值给变量的语法。它可以让我们将复杂数据结构拆解成简单的变量。10数组模型的结构 let [a, b, c] [1, 2, 3]; let [a, b, c 4] [1, 2]; 11对象模型的结构 let {name, age} {name: Tom, age: 20}; let {name Tom, age 20} {name: Jack}; let {name, age, scores: [math, english]} {name: Tom, age: 20, scores: [80, 90]}; 12注意要点13常见用法14Symbol概述ES6 中新增了一种基本数据类型Symbol。它是一种原始数据类型用于表示独一无二的值可以用来作为对象的属性名。15基本用法 // 定义一个Symbol值 let s Symbol(); console.log(s); // 输出Symbol() // 同一个文本描述的Symbol值是不同的 let s1 Symbol(foo); let s2 Symbol(foo); console.log(s1 s2); // 输出false Symbol内置的 Symbol 值在一些新的语言特性如 for...of 循环、async/await中有广泛应用。 16使用场景 作为属性名 // Symbol 值可以作为对象属性名使用 let obj {}; let s Symbol(); obj[s] value; console.log(obj[s]); // 输出valu 17定义常量18Symbol.for() Symbol.for()是一个静态方法可以创建并访问全局共享的symbol。当调用Symbol.for()时会检查全局symbol注册表中是否已经存在具有给定键字符串的symbol。如果存在则直接返回该symbol。如果不存在则创建一个具有给定键并添加到全局注册表中的新symbol然后返回该symbol。 const key1 Symbol.for(myKey); const key2 Symbol.for(myKey); console.log(key1 key2); // true 在这个例子中我们使用相同的键myKey两次调用Symbol.for()。第一次调用创建了一个新的具有该键的symbol并将其添加到全局注册表中而第二次调用则直接返回之前创建的同一个symbol。因此key1和key2相等console.log语句的输出为true。 当需要创建全局共享的symbol或在代码的不同部分访问已经创建的symbol时Symbol.for()会非常有用。 19Symbol.keyFor()ES6 的 Symbol.keyFor() 方法返回一个已注册的 Symbol 类型值的字符串键。它接受一个Symbol类型值作为参数并在全局 Symbol 注册表中搜索该值如果找到则返回该 Symbol 对应的键值即字符串否则返回 undefined。这个方法与 Symbol.for() 相反该方法是通过已知符号返回符号的键而 Symbol.for() 则是通过键返回符号。使用 Symbol.keyFor() 方法可以方便的找到一个 Symbol 对应的键这在代码维护和调试时非常有用。20Symbol.iterator()用来表示一个对象是否可迭代21Symbol.asyncIterator()用来表示一个对象是否可异步迭代
六、内置对象
序号内置对象1新增Map与SetMap对象Map中的Key2Map迭代3Map对象的操作4Set对象类型转换5Set对象的作用6Map与Set对象属性与方法7 Proxy与Reflect 概述8基本用法Proxy9Reflect10组合使用11使用场景拓展12拓展字符串拓展的方法子串的识别13字符串重复14字符串补全15模板字符串基本用法16注意要点17标签模板18数值数值的表示19常量20方法21Math对象的拓展22对象对象字面量23对象的拓展运算符24对象的新方法assign25is26数组数组的创建1、Array.of() // 将参数中所有值作为元素形成数组 2、Array.from() // 将类数组对象或可迭代对象转化为数组 3、转换map 4、转化set 5、转换字符串27拓展的方法 1、find() // 查找数组中符合条件的元素返回第一个 2、findIndex() // 查找数组中符合条件的第一个元素的索引 3、fill() // 填充将一定范围索引的数组元素内容填充为单个指定的值 3、copyWithin // 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素 4、entries // 遍历键值对 5、keys // 遍历键名 6、values // 遍历键值 7、includes // 数组是否包含指定值 8、flat // 嵌套数组转唯一数组 9、flatMap // 先对数组中每个元素进行了的处理再对数组执行 flat() 方法 28数组缓冲区1、数组缓冲区是内存中的一段地址 2、定型数组的基础 3、实际字节数在创建时确定之后只可修改其中的数据不可修改大小 4、可以通过构造函数创建数组缓冲区29定型数组1、数组缓冲区的特定类型的视图 2、可以强制使用特定的数据类型而不是使用通用的 DataView 对象来操作数组缓冲区30拓展运算符let arr [1, 2] arr1 [...arr] console.log(arr1) // [1, 2]
七、运算符与语句
序号运算符与语句1函数函数参数的拓展默认参数2不定参数3箭头函数基本用法4注意要点5适合使用的场景6不适合使用的场景7迭代器iterator迭代过程8可迭代的数据结构9普通对象不可迭代10for ... of 循环迭代常规数据类型11可迭代的数据结构12let、const、和var用于for ... of13class类概述14基本用法类定义15类的主体16类的实例化17decorator类装饰18方法修饰19封装与继承get/setter20extends21super22注意要点23模块概述24特点25export 与 import基本用法26as的用法27import 命令的特点28export default命令29复合使用
八、异步编程 异步编程 1 Promise ES6promise简单学习_snowli的博客-CSDN博客 概述2Promise状态特点3缺点4then方法特点5注意点6Generator基本用法函数组成7执行机制8返回的方法9yield表达式10使用场景11asyncasync语法12返回值13await语法14返回值15错误处理16注意要点17实例
九、实践
十、过程记录
十一、欢迎交流指正关注我一起学习
十二参考链接
ES6flat()_es6 flat_snowli的博客-CSDN博客
ES6promise简单学习_snowli的博客-CSDN博客
百度安全验证
https://www.cnblogs.com/anding/p/16890716.html
Object.assign详解_guxin_duyin的博客-CSDN博客
1.1 ES6 教程 | 菜鸟教程 (runoob.com)
JS数组reduce()方法详解及高级技巧 - 简书
es6新特性有哪些-常见问题-PHP中文网
一文告诉你es6新特性有哪些 - 动力节点
ES 6 新特性汇总一图全览 - 知乎
最全的—— ES6有哪些新特性_admin_zlj的博客-CSDN博客_es6新特性
