ECMAScript 6(简称ES6)是ECMA于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。
ECMA是指欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。
ECMAScript是浏览器脚本语言的规范,JavaScript是规范的其中一种实现。
版本对照
序号版本 年代版本
ES6 ES2015
ES7 ES2016
ES8 ES2017
ES9 ES2018
-
变量声明
let 声明变量 | const 声明常量(只读变量) |
<script> // var 声明的变量往往会越域 // let 声明的变量有严格局部作用域 { var a = 1; let b = 2; } console.log(a); // 1 console.log(b); // ReferenceError: b is not defined
// var 可以声明多次 // let 只能声明一次 var m = 1 var m = 2 let n = 3 let n = 4 console.log(m) // 2 console.log(n) // SyntaxError: Identifier 'n' has already been declared
// var 会变量提升 // let 不存在变量提升 console.log(x); // undefined var x = 10; console.log(y); //ReferenceError: Cannot access 'y' before initialization let y = 20; </script> | <script> // 1. 声明之后不允许改变 // 2. 一但声明必须初始化,否则会报错 const a = 1; a = 3; //TypeError: Assignment to constant variable. </script> |
解构表达式
数组解构 | 对象解构 |
<script> let arr = [1,2,3]; //以前我们想获取其中的值,只能通过角标。ES6 可以这样: const [x,y,z] = arr;// x,y,z 将与 arr 中的每个位置对应来取值 console.log(x,y,z); </script> | <script> const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }; // 解构表达式获取值,将 person 里面每一个属性和左边对应赋值 const { name, age, language } = person; // 等价于下面 // const name = person.name; // const age = person.age; // const language = person.language; // 可以分别打印 console.log(name); console.log(age); console.log(language); //扩展:如果想要将 name 的值赋值给其他变量,可以如下: const { name: n, age: a, language: l } = person; console.log(n); console.log(a); console.log(l); </script> |
字符串扩展
几个新的 API
includes(searchString: string, position?: number): boolean; 是否找到了参数字符串
startsWith(searchString: string, position?: number): boolean; 参数字符串是否在 原/指定下标后的 字符串的头部
endsWith(searchString: string, endPosition?: number): boolean; 参数字符串是否在 原/指定下标前的 字符串的尾部
字符串模板(使用反引号``)
<script>
// 1、原样输出
let ss = `<body>
<div>
<span>hello world<span>
</div>
</body>`;
console.log(ss);
// 2、字符串插入变量和表达式
let name = "张三";
let age = 18;
let info = `我是${name},今年${age}了`;
console.log(info);
// 3、字符串中调用函数
function fun() {
return "这是一个函数"
}
let sss = `O(∩_∩)O 哈哈~,${fun()}`;
console.log(sss); // O(∩_∩)O 哈哈~,这是一个函数
</script>
函数优化
函数参数默认值 | 不定参数 |
<script> //在 ES6 以前,我们无法给一个函数参数设置默认值,只能采用变通写法: function add(a, b) { // 判断 b 是否为空,为空就给默认值 1 b = b || 1; return a + b; } // 传一个参数 console.log(add(10));//11
//现在可以这么写:直接给参数写上默认值,没传就会自动使用默认值 function add2(a, b = 1) { return a + b; } // 传一个参数 console.log(add2(10));//11 </script> | <script> //不定参数只能放在参数列表的最后,并且有且一个不定参数 function fun(...values) { console.log(values.length) } fun(1, 2); //2 fun(1, 2, 3, 4); //4 </script> |
箭头函数 | 箭头函数结合解构表达式 |
<script> //以前声明一个方法,一个参数时: // var print = function (obj) { // console.log(obj); // } //现在可以简写为: let print = obj => console.log(obj); // 测试调用 print(100); // 以前声明一个方法,两个参数时: // var sum = function (a, b) { // return a + b; // } // 现在可以简写为: //当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回 let sum2 = (a, b) => a + b; //测试调用 console.log(sum2(10, 10));//20 // 代码不止一行,可以用`{}`括起来 let sum3 = (a, b) => { c = a + b; return c; }; //测试调用 console.log(sum3(10, 20));//30 </script> | <script> //需求,声明一个对象,写一个方法需要对象的个别属性 const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }; //以前的方式: function hello(person) { console.log("hello," + person.name) } hello(person);//输出hello,jack //现在的方式 let hello2 = ({ name }) => { console.log("hello," + name) }; //测试 hello2(person);//输出hello,jack </script> |
对象优化
新增的API - keys(obj):获取对象的所有 key 形成的数组 - values(obj):获取对象的所有 value 形成的数组 - entries(obj):获取对象的所有键值对数组:[[k1,v1],[k2,v2],...] - assign(dest, ...src):将多个 src 对象的值 拷贝到 dest 中。(第一层为深拷贝,第二层为浅拷贝) | 声明对象简写 |
<script> const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }; console.log(Object.keys(person));//["name", "age", "language"] console.log(Object.values(person));//["jack", 21, Array(3)] console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); console.log(target)//{a: 1, b: 2, c: 3} </script> | <script> const age = 23; const name = "张三"; // 传统 const person1 = { age: age, name: name }; console.log(person1); // ES6:属性名和属性值变量名一样,可以省略 const person2 = { age, name }; console.log(person2) //{age: 23, name: "张三"} </script> |
对象的函数属性简写 | 对象拓展运算符 拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。 |
<script> let person = { name: "jack", // 以前: eat: function (food) { console.log(this.name + "在吃" + food); }, // 箭头函数版:这里拿不到 this eat2: food => console.log(person.name + "在吃" + food), // 简写版: eat3(food) { console.log(this.name + "在吃" + food); } }; person.eat("apple"); </script> | <script> // 1、拷贝对象(深拷贝) let person1 = { name: "Amy", age: 15 }; let someone = { ...person1 }; console.log(someone); //{name: "Amy", age: 15} // 2、合并对象 let age = { age: 15 }; let name = { name: "Amy" }; let person2 = { ...age, ...name }; //如果两个对象的字段名重复,后面对象字段值会覆盖前面对象的字段值 console.log(person2) //{age: 15, name: "Amy"} </script> |
map()和 reduce()
数组中新增了 map() 和 reduce() 方法
map()
map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
<script>
let arr = ['1', '20', '-5', '3'];
arr = arr.map(s => parseInt(s));
console.log(arr) //[1, 20, -5, 3]
</script>
reduce()
语法:
arr.reduce(callback,[initialValue])
reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。
callback参数:执行数组中每个值的函数,包含四个子参数:
1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)
initialValue参数:作为第一次调用 callback 的第一个参数。
<script>
const arr = [1,20,-5,3];
//没有初始值:
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300
//指定初始值:
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0
</script>
Promise
Promise可以解决ajax多个同步请求代码多层嵌套的问题。
语法:
常规写法: | 箭头函数简写: |
<script> const promise = new Promise(function (resolve, reject) { // 执行异步操作 if (/* 异步操作成功 */) { resolve(value);// 调用 resolve,代表 Promise 将返回成功的结果 } else { reject(error);// 调用 reject,代表 Promise 会返回失败结果 } }); </script> | <script> const promise = new Promise((resolve, reject) =>{ // 执行异步操作 if (/* 异步操作成功 */) { resolve(value);// 调用 resolve,代表 Promise 将返回成功的结果 } else { reject(error);// 调用 reject,代表 Promise 会返回失败结果 } }); </script> |
处理异步结果 | |
<script> promise.then(function (value) { // 异步执行成功后的回调 }).catch(function (error) { // 异步执行失败后的回调 }) </script> | |
案例:
用户登录,并展示该用户的各科成绩。在页面发送3次请求:
1. 查询用户,查询成功说明可以登录
2. 查询用户成功,查询科目
3. 根据科目的查询结果,获取去成绩
原来的多层嵌套 | 使用Promise改写: |
<script> $.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); } }); </script> | <script> new Promise((resolve, reject) => { $.ajax({ url: "mock/user.json", success(data) { console.log("查询用户:", data); resolve(data.id); }, error(error) { console.log("出现异常了:" + error); } }); }).then((userId) => { return new Promise((resolve, reject) => { $.ajax({ url: `mock/user_corse_${userId}.json`, success(data) { console.log("查询到课程:", data); resolve(data.id); }, error(error) { console.log("出现异常了:" + error); } }); }); }).then((corseId) => { console.log(corseId); $.ajax({ url: `mock/corse_score_${corseId}.json`, success(data) { console.log("查询到分数:", data); }, error(error) { console.log("出现异常了:" + error); } }); }); </script> |
mock数据: |
mock/user.json: {"id": 1,"name": "zhangsan","password": "123456"} user_corse_1.json: {"id": 10,"name": "chinese"} corse_score_10.json: {"id": 100,"score": 90} |
封装出通用方法,实际开发中会单独放到 common.js 中: | 使用通用方法: |
<script> let get = function (url, data) { return new Promise((resolve, reject) => { $.ajax({ url: url, type: "GET", data: data, success(result) { resolve(result); }, error(error) { reject(error); } }); }) } </script> | <script> get("mock/user.json").then((result) => { console.log("查询用户:", result); return get(`mock/user_corse_${result.id}.json`); }).then((result) => { console.log("查询到课程:", result); return get(`mock/corse_score_${result.id}.json`) }).then((result) => { console.log("查询到分数:", result); }).catch(() => { console.log("出现异常了:" + error); }); </script> |
模块化
模块化就是把代码进行拆分,方便重复利用。类似 java 中的导包:要使用一个包,必须先导包。而 JS 中没有包的概念,换来的是 模块。
模块功能主要由两个命令构成:`export`和`import`。
l `export`命令用于规定模块的对外接口。
l `import`命令用于导入其他模块提供的功能。
export | import |
<script> // 定义并导出模块,一切 JS 变量都可定义为模块,比如:基本类型变量、函数、数组、对象 const util = { sum(a,b){ return a + b; } }; export {util};
//简写形式 export const util2 = { sum(a,b){ return a + b; } };
//定义并导出多个模块 let name = "jack"; let age = 21; export {name,age}
// 定义并导出无名模块,导入时可取任意名 export default { sum(a,b){ return a + b; } }
</script> | <script> // 导入模块 import util from 'hello.js' util.sum(1,2);
// 批量导入模块 import {name, age} from 'hello.js' console.log(name + " , 今年"+ age +"岁了")
</script> |