es6新特性总结及使用说明 妖狐艹你老母 2023-09-29 11:47 11阅读 0赞 **目录** 简介 新特性说明 let语法 const语法 解构赋值 模板字符串 对象简写 对象操作--深拷贝 箭头函数 小结 -------------------- # 简介 # 1. ECMAScript 6.0是 JavaScript 语言的下一代标准， 2015 年 6 月发布。 ES6 设计目标是达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语 言 。ECMAScript 和 JavaScript 的关系是：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现。 -------------------- # 新特性说明 # 下面将会使用代码和文字来对es6常见新特性进行说明。 ## let语法 ## 在js中，var语法较为松散，不利于标准化开发，于是就有了语法严格的let语法，let语法主要有以下3特点： 1. let声明的变量有严格的作用域 2. let只能声明一次，var可以声明多次 3. let不存在变量提升，var存在变量提升 <script> // 1. let 声明的变量有严格局部作用域 { let a = 123; } console.log(a); // 2. let 只能声明一次, var 可以声明多次 let b1 = 0; let b1 = 1; var b2 = 0; var b2 = 1; // 3. let 不存在变量提升, var 存在变量提 console.log(a1) let a1 = 1; console.log(b3) var b3 = 1; </script> -------------------- ## const语法 ## const的作用就是定义常量，这个和常量主要有以下2个注意点 1. 常量定义时，必须要进行赋值 2. 常量的值不能进行修改，如果是引用，那么引用不能修改 <script> // 1 常量在定义时，需要赋值 // 2 常量赋值后不能修改 const a = 1; // a = 2; 不能二次赋值 console.log(a) const tom = {name:'tom',age:18}; tom.age = 15; </script> -------------------- ## 解构赋值 ## 解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，主要有2种形式，数组解构和对象解构。 1. 数组结构模板就是 \[a,b,c\] = \[1,2,3,4\]，如果这样写，a=1,b=2,c=3。 2. 对象结构模板就是 \{name,age\} = dog，dog是一个对象，如果dog有name和age属性，那么就会赋值给前面的\{\}里面的name和age，如果没有，那么前面的值就是undefined <script> // 数组解构 let arr = [1, 2, 3, 4]; let [a, b] = arr; console.log(a, b); // 对象解构 let dog = { name: '旺财', hobby: '骨头', age: '1' } let {name, age1} = dog; console.log(name, age1) </script> -------------------- ## 模板字符串 ## 我们使用模板字符串技术可以替代掉以前的大量拼接字符串的操作，我们使用\`\`来代替''，模板字符串主要有以下特点 1. 使用\`\`来将字符串进行包裹，可以直接当作普通字符串使用‘ 2. 在字符串里面进行换行操作，最终输出也会有换行，也就是会保留/n 3. 可以直接在字符串中插入变量，使用$\{\}实现 4. 在$\{\}中可以使用函数 <script> // 1 模板字符串使用反引号 ` 将字符串包裹 // 2 可作为普通字符串 // 3 可用来定义多行字符串，即可以将换行字符串原生输出 let name = ` for(int i = 0; i < 10; i++){ System.out.println("ok"); }`; console.log(name) // 4 字符串插入变量和表达式, 使用 ${} let num = 123; let str = `num is ${num}`; console.log(str) // 5 字符串中调用函数 function sayHi(name) { return `hi ${name}`; } console.log(`函数返回：${sayHi('jack')}`) </script> -------------------- ## 对象简写 ## 我们定义对象属性和函数一般都是key:value，key:function形式，我们可以使用es6的新特性来进行简写。 1. 属性简写：如果前面定义了一个变量name = 'jack'，当我们创建对象时，正常的写法是name:name，比较奇怪，于是我们就可以直接写为name 2. 函数简写：正常情况下，我们定义函数是 函数名:function()\{\}，我们在es6中可以简写为 函数名()\{\}; <script> // 属性简写 let name = 'tom'; let age = 18; let tom = {name, age}; console.log("tom：", tom); // 方法简写 let dog = { name: '旺财', call() { console.log(`${this.name} 汪汪汪~~`); } } dog.call(); </script> -------------------- ## 对象操作--深拷贝 ## 我们知道，对数组和对象进行深拷贝是比较麻烦的操作，在es6中我们可以直接使用语法特性来完成操作。 1. 数组深拷贝：语法为 数组名 = \[...要拷贝的数组名\] 2. 对象深拷贝：语法为 对象名 = \{...要拷贝的对象名\} <script> // 数组深拷贝 let nums1 = [1, 2, 3]; let nums2 = [...nums1]; nums1[0] = 456 console.log("nums1: " + nums1); console.log("nums2: " + nums2); // 对象深拷贝 let dog1 = {name: '旺财', age: 1}; let dog2 = {...dog1}; dog1.name = '大黑'; console.log('dog1:', dog1); console.log('dog2:', dog2); // 对象合并 let tom = {name: 'tom', age: 18}; let car = {name: '奔驰', color: 'pink'}; let car_tom = {...car,...tom}; console.log("car_tom",car_tom); // car_tom.name为tom的名字，因为tom后拷贝进来，将car的name覆盖了 console.log(car_tom.name); </script> -------------------- ## 箭头函数 ## es6中引入了箭头函数，箭头函数相比普通函数，写法更加的简洁，写法一般为(参数)=>\{代码\}，主要有以下特点 1. 基本语法：(参数列表) => \{函数体\} 2. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略() 3. 箭头函数函数体有多行语句，用 \{\} 包裹起来，表示代码块 4. 函数体只有一行语句，并且需要返回结果时，可以省略 \{\} , 结果会自动返回 5. 箭头函数多用于匿名函数的定义 6. this始终表示定义箭头函数的对象 <script> // 1. 箭头函数提供更加简洁的函数书写方式。 // 2. 基本语法是：(参数列表) => { 函数体 } let func1 = (name) => {return 1}; // 3. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略() let fun2 = () => {return 1}; let fun3 = name => {return 1}; // 4. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块 let fun5 = () => { console.log('多行语句用{}包裹起来'); return 1; } // 5. 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回 let fun4 = name => 1; // 6. 箭头函数多用于匿名函数的定义 </script> **this问题探讨** 在常规函数中，关键字 `this` 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，`this` 关键字始终表示定义箭头函数的对象。 <script> window.onload = function () { function f1() { console.log("f1 ", this) } let f2 = () => { console.log("f2 ", this) } document.getElementById('btn1').onclick = f1; document.getElementById('btn2').onclick = f2; } </script> <body> <button id="btn1">点我调用f1</button> <button id="btn2">点我调用f2</button> </body> ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA56eD5aS05oqr6aOO5L6gLg_size_20_color_FFFFFF_t_70_g_se_x_16][] 可以发现普通函数的this是调用函数者，而箭头函数this表示的是定义函数的对象。 -------------------- # 小结 # es6的新特性很多，这里仅仅介绍了一些常用的，其中使用最多的是箭头函数，当然Promise这个非常重要的没有介绍，由于这个内容很多，单独写一篇文章介绍。如果想要了解更多es6的新特性，请自行网上进行查阅。 [watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA56eD5aS05oqr6aOO5L6gLg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2e67dca02b36441299183e72f2769f51.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS05oqr6aOO5L6gLg==,size_20,color_FFFFFF,t_70,g_se,x_16
相关 ES6新特性 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下⼀个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不⾜，⽐如 Jav... 矫情吗；*/ 2024年04月21日 08:03/ 0 赞/ 103 阅读
相关 es6新特性总结及使用说明 目录 简介 新特性说明 let语法 const语法 解构赋值 模板字符串 对象简写 对象操作--深拷贝 箭头函数 小结 ---------------- 妖狐艹你老母/ 2023年09月29日 11:47/ 0 赞/ 11 阅读
相关 ES6新特性 文章目录 一、ECMASript 介绍 二、ES6 新特性 2.1 let、const 关键字 2.2 变量的解构赋值 ゝ一世哀愁。/ 2022年09月06日 15:27/ 0 赞/ 301 阅读
相关 es6新特性 1.let && const •都是块级作用域 •不能重复定义 •避免了变量提升 ① let命令也用于声明对象，但是作用域为局部。 ![在这里插入图片描述][ 红太狼/ 2022年03月07日 21:24/ 0 赞/ 395 阅读
相关 es6新特性 es6语法 > es6语法用起来是十分方便的，但是有些浏览器还是不支持，但是做大型项目中基本上要用到转码器（babel转码器），可以把es6语法转为es5直接使用。 T 落日映苍穹つ/ 2022年01月25日 15:30/ 0 赞/ 394 阅读
相关 ES6新特性 转：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] co Bertha 。/ 2022年01月12日 02:19/ 0 赞/ 372 阅读
相关 ES6新特性 转自：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] 1.con 冷不防/ 2021年12月18日 07:07/ 0 赞/ 368 阅读
相关 es6新特性 https://www.cnblogs.com/minghui007/p/8177925.html 转载于:https://www.cnblogs.com/LWWTT/p/1 野性酷女/ 2021年11月02日 14:58/ 0 赞/ 533 阅读
相关 ES6新特性 1.变量声明let和const 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: 我会带着你远行/ 2021年10月29日 07:08/ 0 赞/ 544 阅读
相关 ES6新特性 1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 co 电玩女神/ 2021年09月17日 01:12/ 0 赞/ 530 阅读
矫情吗；*
红太狼
Bertha 。
野性酷女
我会带着你远行
还没有评论，来说两句吧...