目标:学习 ES6的新语法;为将来的工作打下基础;
-
ES6 介绍
-
let const:定义变量的新途径;
-
解构赋值:快速给变量赋值;
-
内置对象的扩展:增强功能;
-
ES 6 降级处理:对不支持es6版本的环境如何处理?
ES6 介绍
为什么要学习ES6
-
提供了更加方便的新语法弥补 JS 语言本身的缺陷,新增了便捷的语法
-
给内置对象增加了更多的方法
-
ES6 让 JS 可以开发复杂的大型项目,成为企业级开发语言
-
新的前端项目中大量使用 ES6 的新语法
ES 6 是什么
-
ECMAScript 6,简称ES6 。它是一种语言标准,6表示版本号。 它是Ecma国际(European Computer Manufacturers Association)于2015年6月正式发布的 JavaScript 语言的下一代标准,正式名为ECMAScript 2015(简写ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。相比较ES5(2011年发布的),它改进是非常大的,所以在一些场景下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等,但统称es6。
-
ECMA的第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订ECMAScript标准组织每年都会发布ECMAScript的版本
-
ES2015:称为es6。
-
ES2018: https://www.ecma-international.org/ecma-262/8.0/index.html
-
ES2019:很可能也会在今年6月份发布
-
-
与javascript的关系:ECMAScript是一种语言标准,javascript实现了这个标准。javascipt由三部分组成
-
ECMAScript
-
DOM
-
BOM
-
学习内容
es6新增了很多强大的语法,如下是比较常使用的:
-
let 和 const
-
解构赋值
-
函数
-
字符串扩展
-
数组扩展
-
新的定义对象的方式
参考:
-
各种环境中对es6的支持程度: http://kangax.github.io/compat-table/es6/
let 和 const
es5中提供了定义变量的关键字var,但是这个关键字的功能有限,它定义的变量也有很多奇怪的特性,并不能完全满足现在越来越复杂的环境,所以在es6中新增了两个关键字:let,const。
let 变量
使用场景
它用来定义变量,基本使用格式与var关键字一样。在可以在使用var 的地方改成let。
与var的区别
-
不能重复定义
-
具有块级作用域
-
没有变量提升(var定义的变量是有变量提升的),必须先定义再使用
-
不会附加到window对象的属性中
代码演示
// 1. let 定义变量,变量不可以再次定义,但可以改变其值
let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义,报错:Identifier 'name' has already been declared
// 2. 具有块级作用域,块就是大括号
{
let age = 18;
console.log(age); // 18
}
console.log(age); // 报错,此作用域中没有age的定义
for (let i = 0; i < 10; i++) {
// i 只能在此范围内使用,因为有块级作用域
}
console.log(i); // 报错,此作用域中没有age的定义
// 3. 没有变量提升,必须先定义再使用
console.log(gender); // 报错,此时还没有定义gender
let gender = '男';
console.log(1); // 不报错,输出undefined
var a = 1;
// 4. let声明的变量不会压到window对象中,是独立的
let hobby = '吃饭';
var a = 1
console.log(window.hobby); // undefined
console.log(window.a); // undefined
如果使用var声明了变量,也不能再次用let声明了,反之也是不行的。原因也是这个变量已经被声明过了。
最佳实践:实际开发要么全部使用var,要么全部使用let。由团队开发规范来定。
const 常量
使用场景
多个程序员共同开发项项目时,会遇到一种场景:有一些数据大家都需要用到,但是都不能修改,即数据是只读的。
举个例子:在开发公司的网站时,公司的基本信息:地址,公司名,电话等等信息可以在多个地方都需要使用,但不允许去修改。 这个时候,就可以把这些数据保存在常量中。
语法格式及命名规范
// 格式:
const 常量名 = 常量值;
const COMPANY_NAME = "XXX公司"
-
区别于变量名,常量名一般采用全大写的方式
-
多个单词之间使用_划线分隔。
常见误区
const obj = {a:1};
obj.a = 2;
console.log(obj); // 问题:obj对象的属性值a是否修改了。
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
-
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
-
对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心,它的属性是可以修改的。
与let相似的特点
-
具有块级作用域
-
没有变量提升,必须先定义再使用
-
常量也是独立的,定义后不会压入到window对象中,不是window对象的属性
小结
关键字 | 变量提升 | 块级作用域 | 初始值 | 更改值 | 通过window调用 |
---|---|---|---|---|---|
let | × | √ | - | Yes | No |
const | × | √ | Yes | No | No |
var | √ | × | - | Yes | Yes |
解构赋值
定义
ES 6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
它有两个动作:
- 解构:意思是把有结构的数据分解开成为一个一个的值;
- 赋值:把解构之后的值保存到变量。
demo
let arr = [1,2,3,4];
// 需求,快速地从数组中取出值来赋值给变量
let a = arr[0];
数组的解构赋值
它能够快速从数组中取出值保存到变量中。它的本质是给变量赋值。
内容:
-
语法格式及解构规则
-
常规使用:变量个数等于数组长值
-
非常规使用
-
变量个数大于数组长度
-
变量个数小于数组长度
-
-
高级使用
-
用空跳过不需要的值
-
剩余值
-
复杂嵌套场景
-
-
小面试题
语法格式及解构规则
// 格式:
let [变量1,变量2,
场景1,变量个数等于数组长值
// 场景1,变量和值一一对应
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 输出 5 9 10
// 等价于:
let a = arr[0];
let b = arr[1];
let c = arr[2];
注意:
-
“=”左右两边的格式要统一。
场景2,变量个数大于数组长度
// 场景2,变量多,值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 输出 5 9 10 undefined
// 结论:没有匹配上的值是undefined
场景3,变量个数小于数组长度
// 场景3,变量少,值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9
// 结论:多余的忽略
场景4,用空跳过不需要的值
// 场景4,按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不需要用变量接收的值,用空位占位
console.log(a, b); // 10, 3
场景5,剩余值
// 场景5,剩余值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b,
注意:
-
... 的收集
-
Rest element must be last element。必须在最后;
场景6,复杂嵌套场景
// 场景6,复杂的场景,只要符合模式,即可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg
一个小面试题
交换两个变量的值?
var a = 1, b = 2;
// 写代码,实现互换a,b的值
// ????
console.info(a,b); // 要求输出 2, 1
对象的解构赋值
作用:快速从对象中获取值保存到变量中。它的本质是给变量赋值。
也通过如下几种场景来学习
-
变量名和属性名一样
-
变量改名
-
剩余值
-
复杂嵌套
使用格式及规则
完整格式:
let {"属性名1":变量名1, "属性名2":变量名2 } = {"属性名1":属性值1,"属性名2":属性值2,
解析规则:
右边的"属性名"与左边的“属性名” 一致,则把右边的属性值赋值给左边的变量名。
精简格式:
如果左侧对象中属性名与变量名相同,则可左侧合并:
let {变量名1,变量名2} = {"属性名1":属性值1,"属性名2":属性值2,
解析规则:
右边的"属性名"与左边的变量名 一致,则把右边的属性值赋值给左边的变量名。
基本使用
场景1,变量名和属性名一样
// 场景1,默认要求变量名和属性名一样
let { name, age } = {age: 27, name: '阳明'};
console.log(name, age);
let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined
注意:
-
“=” 左右两边的格式一致。
-
对象是属性的无序集合,所以不需要管顺序
场景2,变量改名
// 场景2,可以通过:为变量改名
let {a, b:c} = {name: '王阳明', b: 'world'};
console.log(a, c); // hello, world
特殊使用
剩余值
// 把其它的属性全收集起来
let obj = {name:'zs', age:20, gender:'男'};
let {name,
复杂嵌套
只要符合模式,即可解构
// 复杂的场景,只要符合模式,即可解构
let obj = {
name: 'zhangsan',
age: 22,
dog: {
name: '毛毛',
age: 3
}
};
let {dog: {name, age}} = obj;
console.log(name, age); // 毛毛 3
实际应用
// 假设从服务器上获取的数据如下
let response = {
data: ['a', 'b', 'c'],
meta: {
code: 200,
msg: '获取数据成功'
}
}
// 如何获取到 code 和 msg
let { meta: { code, msg } } = response;
console.log(code, msg); // 200, 获取数据成功
函数的拓展
es6对函数的功能进行了一些拓展,补充了很多功能。学习这个部分的内容我们就可以灵活地使用函数。
内容
-
参数默认值
-
箭头函数(重点)
-
rest参数
参数的默认值
参数默认值是一个非常实用的功能,学习这个部分我们可以更加地理解api中的默认参数的实现,能写出用户体验更好的函数。
理解默认值
参数的默认值在之前的课程内容已经涉及,例如在xhr.open(type,url,是否异步)方法中,第3个参数默认是true,即表示异步ajax。
默认值的意思是:
-
如果传入,就用你传的值
-
如果不传入,就使用某一个特殊的、事先定义好的值。这个值也就是默认值。
ES5的实现
ES6 之前,函数不支持设置参数的默认值(其它大多数编程语言都是支持的)。但虽然在语法层面上不支持,程序员们也会想一些变通的方法。
// ES5 中给参数设置默认值的变通做法
function open(type, url,isAsync) {
if(isAsync === undefined){
isAsync = true;
}
console.log(type, url, isAsync);
}
// 下面这两句是等价的
open("get","common/get");//
open("get","common/get",true);
open("get","common/get",false);
ES6的实现
格式
function 函数名(参数名1='默认值1',参数名2='默认值3',参数名1='默认值3'){
}
示例
// E65 给参数设置默认值
function open(type, url,isAsync=true) {
console.log(type, url, isAsync);
}
思考:能否给type设置默认值,为'get' ?
function open(type='get', url,isAsync=true)
注意:
-
带默认值的形参放在形参列表的后面
与解构赋值一起使用
let obj1 = { url: "/common/get", type:"get"}
function open(obj){
console.info(obj.url, obj.get)
}
function open({url,type}){
console.info(url,type)
}
function open({url,type='get'}){
console.info(url,type)
}
箭头函数
学习箭头函数能让代码更简洁,效率更高;能看懂别人写的代码 ;
let fn3 = x => x * 2;
内容
-
定义及格式
-
三种简化原则
-
三个特点
-
典型应用场景
什么是箭头函数
ES6 中允许使用箭头函数的方式来定义一个函数。前面学习的定义一个函数有两种方式:
-
函数声明式
-
函数表达式
现在有了一个新的方式:
3. 箭头函数
格式
let 函数名 = (形参1,
定义一个箭头函数
// 1. 函数声明式
function fu1(x){
return x * 2;
}
// 2. 函数表达式
let fn2 = function (x) {
return x * 2;
}
// 3. 箭头函数
let fn3 = (x) => {
return x * 2;
}
第一眼看到这个箭头函数时,会觉得很奇怪。如果从函数表达式的格式出发, 经过如下2步演化步骤就可以得到。
-
把function 关键字 后移动到 ()和 {} 中间
-
把function 改写成 =>
注意:
- `=>`是一个整体,不要加空格
- 箭头函数只在定义上有些区别,但在函数调用格式上,是没有区别的。
三种简化场景
-
当形参有且只有一个,可以省略小括号
-
当函数体只有一条语句,可以省略大括号;
-
当函数体只有一条语句,并且就是return语句,则可以省略return
// 完整箭头函数
let fn = (x) => {
return x * 2;
}
// 参数只有一个,省略小括号
let fn = x => {
return x * 2;
}
// 函数体中只有一个返回语句,可以省略大括号
let fn = x => x*2
箭头函数的特点
它与普通函数的区别
-
内部没有arguments
-
内部没有this
-
不能作为构造器
没有 arguments
let fn = (a,b) => {
console.log(arguments); // 报错,arguments is not defined
};
fn(1, 2);
内部的this对象,就是定义时所在的对象,而不是使用时所在的对象。
var name = 'lisi'; // 测试时,这里必须用var,因为用let声明的变量不能使用window调用 let obj = { name: 'zhangsan', fn : () => { console.log(this); // window对象 console.log(this.name); // lisi } }; obj.fn();
箭头函数不能作为构造函数
let Person = () => { }; let obj = new Person(); // 报错,Person is not a constructor // 换个角度理解,箭头函数中都没有自己的this,怎么处理成员,所以不能当构造函数
典型应用场景
-
定义函数
-
回调函数
-
事件响应函数
var arr = [1,2,3] arr.sort(function(a,b){ return a - b}); // 简化 arr.sort((a,b)=>a-b)
rest 参数
rest: 其它的,剩余的; rest 参数 用于获取函数多余参数,把它们放在一个数组中。
语法格式
在定义函数时,在最后一个参数前面加上..., 则这个参数就是剩余参数;
let fn = function(参数1,参数2,...rest参数){} let fn = (参数1,参数2,...rest参数)=>{ }
只是在定义函数时,在形参列表中区别一下,而在调用函数时并无区别。
示例
回答如下问题
function f1 (x,y){ console.log(x,y) } f1(1,2); f1(2,3,4); function f2 (x,...y){ console.log(x,y) } f2(1,2); f2(2,3,4);
应用实践--代替arguments
问题:编写一个函数,求所有参数之和;
方法一:arguments
方法二:rest参数
function getSum (){ // 在这里写你的代码 var sum = 0 ; for(var i = 0; i < arguments.length; i++){ console.info( arguemnts[i]) sum += arguments[i]; } }
如果以箭头函数 的方式去定义这个函数,则内部不可以使用arguments这个对象了。此时,我们就可以使用
rest 参数,它可以替代 arguments 的使用。 代码如下:
// 参数很多,不确定多少个,可以使用剩余参数 const getSum = (...values) => { var sum = 0 ; for(var i = 0; i < values.length; i++){ console.info( values[i]) sum += values[i]; } } // 调用 console.log(fn(6, 1, 100, 9, 10));
数组的扩展
数组对象是js中非常重要的对象,它本身提供了非常多的方法:sort,push,pop,unshift, splice,concat.... 。由于前端的主要工作内容之一是与后端进行数据交互,而数据交互的载体大多是数组,所以我们对数组的操作要求也非常高。
曾经有一道面试题:写出10个你用过的与数组相关的方法。
这一小节的学习会让我们多掌握几个数组的方法。
扩展运算符
功能:它的作用是把数组中的元素一项项地展开:把一个整体的数组拆开成单个的元素。
格式:...数组
基本用法
console.info(...[1,2,3]);
应用1: 数组合并
从把一个数组中的值全取出来,放在另一个数组中的
var arr0 = ['a','b']; var arr1 = [1,2,3]; var arr2 = [4, ...arr1]; var arr3 = [..arr0 ,...arr1];
应用2:Math.max()
Math.max(1,3,4,6); var arr = [1,3,4,6]; Math.max(...arr);
Array.from()
功能:把其它非数组的对象转成数组。
格式: 数组 = Array.from(非数组对象)
它的实参有三种情况:
-
自定义的,特殊格式的对象
let fakeArr = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
-
arguments对象
-
DOM 操作返回的 NodeList 集合
find
在实际的开发中,我们经常会遇到一种场景:从一个数组中找出符合条件的元素。我们要的讨论的重点是如何从数组中找出符合条件的元素,当然,我们可以通过手写循环的方式来实现这个功能,但是现在es6中提供了现成的功能。find/findIndex
作用:从数组中找出我们符合条件的第一个元素(或者是下标)。
格式
find和findIndex的格式是一致的。
let result = [].find(function(item,index,self){ //.... // 如果满足查找的条件 return true; })
-
回调函数有三个参数,分别表示:数组元素的值、索引及整个数组
-
如果某次循环返回的是true,find和findIndex方法的返回值就是满足这个条件的第一个元素或索引
执行流程
-
find和findIndex方法,会遍历传递进来的数组
-
如果在回调函数体内,某个时刻return true,则表示查找过程结果,返回值就是本轮循环中的元素(或者是下标);如果全部的循环结束,也没有返回true,则表示没有找到。
-
findIndex 找到数组中第一个满足条件的成员并返回该成员的索引,如果找不到返回 -1。
let arr = [1, 2, 4, 0, -4, 3, -2, 9]; arr.find(function (item, index, self) { console.log(item); // 数组中的每个值 console.log(index); // 数组中的每个索引/下标 console.log(self); // 当前的数组 });
简单示例
// 用法:找数组中第一个小于0的数字 let arr = [1, 2, 4, 0, -4, 3, -2, 9]; let result = arr.find(function (item) { return item < 0; //遍历过程中,根据这个条件去查找 }); console.log(result); // -4
注意通过箭头函数来简化代码。
实践应用
从一个复杂的对象数组中找出符合条件的对象。
let data = [ {id:2,name:'严高',age:15}, {id:3,name:'徐阶',age:17}, {id:4,name:'高拱',age:18}, {id:1,name:'张居正',age:12}, ]
findIndex
findIndex 的使用和 find 类似,只不过它查找的不是数组中的元素,而是元素的下标。
includes()
功能:判断数组是否包含某个值,返回 true / false
格式:数组.includes(参数1,参数2)
-
参数1,必须,表示查找的内容
-
参数2,可选,表示开始查找的位置,0表示从第一个元素开始找。默认值是0。
示例:
let arr = [1, 4, 3, 9]; console.log(arr.includes(4)); // true console.log(arr.includes(4, 2)); // false, 从2的位置开始查,所以没有找到4 console.log(arr.includes(5)); // false
字符串也有这个方法,功能也是相似的。
String的扩展
es6中对字符串提供了新的特性,我们介绍其中几个方法:
-
模板字符串
-
includes
-
startsWith
-
endWith
-
repeat
模板字符串
在做字符串拼接时,使用+来拼接复杂内容是很麻烦的,而模板字符串可以解决这个问题。
格式:`${变量} ${表达式}`
语法:
-
模板字符串使用反引号 ` 把内容括起来,类似于普通字符串的""。
-
${}充当界定符的作用,其中可以写变量名,表达式等。
-
允许字符串内部进行换行,代码更好读更好的体验
示例:
let name = 'zs'; let age = 18; // 拼接多个变量,在模板字符串中使用占位的方式,更易懂 let str = `我是${name},今年${age}`; // 内容过多可以直接换行 let obj = [{name: 'flex', age: 20},{name: 'james', age: 21}]; let arr = ['175cm', '60kg']; let html = ` <div> <ul> <li>${obj.name}</li> <li>${obj.age}</li> <li>${arr[0]}</li> <li>${arr[1]}</li> </ul> </div>
includes()
-
格式:str.includes(searchString, [position])
-
功能:返回布尔值,表示是否找到了参数字符串
-
position: 从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0。
-
startsWith()
-
格式:str.startsWidth(searchString, [position])
-
功能:返回布尔值,表示参数字符串是否在原字符串的头部或指定位置
-
position: 在 str 中搜索 searchString 的开始位置,默认值为 0,也就是真正的字符串开头处。
-
endsWith()
-
格式:str.endsWith(searchString, [len])
-
功能:返回布尔值,表示参数字符串是否在原字符串的尾部或指定位置.
-
len:可选。作为 str 的长度。默认值为 str.length。
-
repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。
语法:str.repeat(n)
let html = '<li>itheima</li>'; html = html.repeat(10);
Number的扩展
ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。
-
Number.parseInt()
-
Number.parseFloat()
Set对象
Set是集合的意思。是ES6 中新增的内置对象,它类似于数组,但是成员的值都是唯一的,即没有重复的值。使用它可以方便地实现用它就可以实现数组去重的操作。
如何创建一个set
-
创建空set;
-
根据已有数组创建set
// 1. 基本使用 let set = new Set(); // 得到一个空的Set对象 let set = new Set([1,2,3])
Set 的成员方法
-
size:属性,获取 set 中成员的个数,相当于数组中的 length
-
add(value):添加某个值,返回 Set 结构本身。
-
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
-
has(value):返回一个布尔值,表示该值是否为Set的成员。
-
clear():清除所有成员,没有返回值。
-
遍历for of
数组去重
let arr = [1,1,2,3,3]; console.info([...new Set(arr)])
4. 定义对象的简洁方式
-
对属性名的简化
-
对方法的简化
let name = 'zhangsan', age = 20, gender = '女'; let obj = { name: name, // 原来的写法 age, // 对象属性和变量名相同,可以省略后面的 “:age”,下面的gender同理 gender, fn1:function(){ // 常规写法 console.log(123); }, fn2 () { // 可以省略 console.log(456); } }; console.log(obj.age); // 20 obj.fn2(); // 456
ECMAScript 6 降级处理(演示)
ES 6 的兼容性问题
-
ES6 (2015年10月)虽好,但是有兼容性问题,IE7-IE11 基本不支持 ES6
-
在最新的现代浏览器、移动端、Node.js 中都支持 ES6
-
后续我们会讲解如何处理 ES6 的兼容性
ES 6 降级处理
因为 ES 6 有浏览器兼容性问题,可以使用一些工具进行降级处理,例如:babel
-
降级处理 babel 的使用步骤
-
安装 Node.js
-
命令行中安装 babel
-
配置文件 .babelrc
-
运行
-
-
安装 Node.js
-
项目初始化(项目文件夹不能有中文)
npm init -y
-
在命令行中,安装 babel babel官网
npm install @babel/core @babel/cli @babel/preset-env
-
配置文件 .babelrc (手工创建这个文件)
babel 的降级处理配置
{ "presets": ["@babel/preset-env"] }
-
在命令行中,运行
# 把转换的结果输出到指定的文件 npx babel index.js -o test.js # 把转换的结果输出到指定的目录 npx babel 包含有js的原目录 -d 转换后的新目录
参考:babel官网
6. 扩展阅读