【Web】ES6新特性

ECMAScript简介

ECMAScript6.0 ，简称 ES6 。ECMAScript 是一种由 ECMA 国际通过 ECMA-262 标准化的脚本，为 JavaScript 语言的下一代标准， 在 2015 年 6 月正式发布。

类比于 Java ，经典程度堪比 JDK 1.8 版本。
但是两者之间的区别， JDK 是具体实现，而 ES 就相当于 JSR 规范。

JSR，是 Java Specification Requests 的缩写，意思是 Java 规范提案，是指向 JCP(Java Community Process) 提出新增一个标准化技术规范的正式请求。

从层级上看， ECMAScript 是一种规范/接口，JavaScript 是规范的具体实现。

let关键字

• let不会作用到 {} 外，var 会越域到 {} 外，且 var 声明的变量有域提升的特性。
• var 可以多次声明同一变量，使用 let 则会报错，只能在作用范围内声明一次。
• var 定义之前可以使用，let 定义之前不可使用，关联域提升特性。
• let 的声明之后不允许改变，相当于 const 声明的变量。

解构表达式

解构表达式，是一种可以用来简化变量赋值的新语法。

• 支持 let arr = [1,2,3]; let [a,b,c] = arr; 语法
  • 该语法的特性，能够更方便地在变量之间进行值传递，属于数组解构表达式
• 支持对象解析 const { name: abc, age, language } = person; 语法
  • 该语法可以将一个 person 对象其中的 name 属性赋值给 abc 对象，也就是将 name 属性值对应赋值给 abc ，而不是需要一定相同的属性名称。
  • 这个过程类似于一种 JsonProperty 的转换功能，但是不同的是 JsonProperty 注解提供的只是给原对象起一个别名，而不像对象解构表达式是将对象字段赋值给新的语句。

字符串扩展

在 ES6 中，对于字符串新增了一些扩展。主要是新增部分为字符串 API 以及字符串模板、变量值插入。
字符串 API 新增的主要常用的有：str.startsWith("") 、str.endsWith("") 、str.includes("") 几个。
字符串模板，主要用来输出一些特定格式的字符串，保留在编辑器中的换行空格等字符。字符串模板的使用方式很简单，只需要将目标模板使用 包起来即可。
变量值插入，类似于 Java 中的 @Value 注解所需要使用的表达式。格式为 ${} 。我们可以在 { } 中使用变量、表达式、函数，均可以输出对应的计算结果。

函数优化

在 ES6 中，新增了一些函数的优化。主要有：

• 函数默认值

# 原始的默认值的写法 function add1(a, b) {   b = b | 1   return a + b }  # ES6 新增的写法 function add1(a, b = 2) {   return a + b } 

• 不定参数

function fun(...values) { 	console.log(values.length); } 

• 箭头函数

var print = obj => console.log(obj); # 调用 print("abc"); 

对象优化

对象函数

Object.keys(obj); Object.values(obj); Object.entries(obj); # assign 函数将其他对象添加到目标对象中 Object.assign(target, obj1, obj2); 

对象声明简写

# 对象的属性名和变量名一致，可以直接使用简写声明对象 const obj1 = { age, name }; 

对象拓展运算符

# 该符号可以将对象的所有属性取出来，可以用于对象的深拷贝、覆盖 let person = { name: "Real", age: 20 } let someone = { ...person} 

数组优化

在 ES6 中，数组新增了 Map 和 Reduce 方法。

• map 方法：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组后返回。

arr = arr.map(item=> item*2); 

• reduce 方法：为数组中的每个元素执行回调函数，不包含数组中被删除或者未被赋值初始化的元素。

/** * 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） * 2、currentValue （数组中当前被处理的元素） * 3、index （当前元素在数组中的索引） * 4、array （调用 reduce 的数组） */ arr.reduce(callback,[initialValue]) 

promise异步编排

<script>   //1、查出当前用户信息   //2、按照当前用户的id查出他的课程   //3、按照当前课程id查出分数   // $.ajax({   //     url: "mock/user.json",   //     success(data) {   //         console.log("查询用户：", data);   //         $.ajax({   //             url: `mock/user_corse_${data.id}.json`,   //             success(data) {   //                 console.log("查询到课程：", data);   //                 $.ajax({   //                     url: `mock/corse_score_${data.id}.json`,   //                     success(data) {   //                         console.log("查询到分数：", data);   //                     },   //                     error(error) {   //                         console.log("出现异常了：" + error);   //                     }   //                 });   //             },   //             error(error) {   //                 console.log("出现异常了：" + error);   //             }   //         });   //     },   //     error(error) {   //         console.log("出现异常了：" + error);   //     }   // });     //1、Promise可以封装异步操作   // let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝   //     //1、异步操作   //     $.ajax({   //         url: "mock/user.json",   //         success: function (data) {   //             console.log("查询用户成功:", data)   //             resolve(data);   //         },   //         error: function (err) {   //             reject(err);   //         }   //     });   // });    // p.then((obj) => { //成功以后做什么   //     return new Promise((resolve, reject) => {   //         $.ajax({   //             url: `mock/user_corse_${obj.id}.json`,   //             success: function (data) {   //                 console.log("查询用户课程成功:", data)   //                 resolve(data);   //             },   //             error: function (err) {   //                 reject(err)   //             }   //         });   //     })   // }).then((data) => { //成功以后干什么   //     console.log("上一步的结果", data)   //     $.ajax({   //         url: `mock/corse_score_${data.id}.json`,   //         success: function (data) {   //             console.log("查询课程得分成功:", data)   //         },   //         error: function (err) {   //         }   //     });   // })    function get(url, data) { //自己定义一个方法整合一下     return new Promise((resolve, reject) => {       $.ajax({         url: url,         data: data,         success: function (data) {           resolve(data);         },         error: function (err) {           reject(err)         }       })     });   }  get("mock/user.json")   .then((data) => {     console.log("用户查询成功~~~:", data)     return get(`mock/user_corse_${data.id}.json`);   })   .then((data) => {     console.log("课程查询成功~~~:", data)     return get(`mock/corse_score_${data.id}.json`);   })   .then((data)=>{     console.log("课程成绩查询成功~~~:", data)   })   .catch((err)=>{ //失败的话catch     console.log("出现异常",err)   });  </script> 

模块化

模块化就是把代码进行拆分，方便重复利用。类似于 Java 中的 import 导包；要使用一个包，必须先导入进来。而 JS 中没有包的概念，对应的是模块。
模块功能主要由两个命令构成：export 和 import

• export 命令用于规定模块的对外接口
• import 命令用于导入其他模块提供的功能

export 不仅可以导出对象，还可以导出变量、函数、数组等等一切 JS 中的变量。

• user.js

var name = "jack" var age = 21 function add(a,b){   return a + b; } // 导出变量和函数 export {name,age,add} 

• hello.js

// export const util = { //     sum(a, b) { //         return a + b; //     } // }  // 导出后可以重命名 export default {   sum(a, b) {     return a + b;   } } // export {util}  //`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。 

• main.js

import abc from "./hello.js" import {name,add} from "./user.js"  abc.sum(1,2); console.log(name); add(1,3); 

本文由博客一文多发平台 OpenWrite 发布！