1.ES6概述
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
ES6 实际上是一个泛指,泛指 ES2015 及后续的版本。
1.1.为什么要学习ES6
- ES6 的版本变动内容最多,具有里程碑意义
- ES6 加入许多新的语法特性,编程实现更简单、高效
2.ES6的新增语法
2.1.let关键字
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明
- 具有块级作用域
- 不存在变量提升
- 具有暂时性死区
示例1:
//不允许重复声明
//Identifier 'num' has already been declared
let num = 10
let num = 20
示例2:
//let定义的变量具有块级作用域,var不具有
if (true) {
let a = 1;
var b = 2;
}
//2
console.log(b);
//a is not defined
//用let关键字定义的变量具有块级作用域,上面的变量a只在if的{}内有效,故发生a is not defined错误
console.log(a);
示例3:
//let关键字定义的变量不存在变量提升
//Cannot access 'a' before initialization
console.log(a);
let a = 1;
//undefined
console.log(b);
var b = 1
示例4:
//使用let关键字能防止循环变量变成全局变量
for (var i = 0; i < 10; i++) {
}
//10
console.log(i);
for (let i = 0; i < 10; i++) {
}
// i is not defined
console.log(i);
示例5:
//使用1et关键字声明的变量具有暂时性死区特性
var num = 10
if (true) {
//当块级作用域内用let定义了相同名字的变量时,块级作用域外用var定义的同名变量会失效
//Cannot access 'num' before initialization
console.log(num);
let num = 20
}
2.2.const关键字
const 关键字用来声明常量,常量就是值(内存地址)不能变化的量。const 声明有以下特点:
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
//(1)声明必须赋初始值
//Missing initializer in const declaration
const a
//(2)不允许重复声明
const b = 2
//Identifier 'b' has already been declared
const b = 3
//(3)值不允许修改
const c = 3
//Assignment to constant variable.
c = 5
//(4)对于复杂类型的数据来说其内部的值可以更改,但是不能重新赋值
const ary = [1, 2]
ary[0] = "a"
ary[1] = "b"
//[ 'a', 'b' ]
console.log(ary);
//重新赋值,内存地址被改变了
//Assignment to constant variable.
ary = [10, 20]
//(5)块级作用域
if (true) {
const d = 6
}
//d is not defined
console.log(d);
2.3.let、const和var 的区别
- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
- 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。
var | let | const |
---|---|---|
函数级作用域 | 块级作用域 | 块级作用域 |
变量提升 | 不存在变量提升 | 不存在变量提升 |
值可更改 | 值可更改 | 值不可更改 |
2.4.解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
(1)数组的解构赋值
let array = [1, 2, 3]
let [a, b, c] = array
//1
console.log(a);
//2
console.log(b);
//3
console.log(c);
//如果解构不成功,变量的值为undefined。
let array = []
let [a, b] = array
//undefined
console.log(a);
//undefined
console.log(b);
(2)对象的解构赋值
示例1:
let person = {
name: '小明',
age: "23"
}
let {name,age} = person
//小明
console.log(name);
//23
console.log(age);
示例2:
let person = {
name: '小明',
age: "23"
}
//myName和myAge属于别名
let {
name: myName,
age: myAge,
gender
} = person
//小明
console.log(myName);
//23
console.log(myAge);
如果解构不成功,变量的值为undefined。
//undefined
console.log(gender);
2.5.箭头函数
ES6 允许使用「箭头」(=>)定义函数。
示例:
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
箭头函数的注意点:
(1)如果形参只有一个,则小括号可以省略
function fn(num) {
return num
}
let fn = num => {return num}
//3
console.log(fn(3));
(2)函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
function sum(num1, num2) {
return num1 + num2
}
let sum = (num1, num2) => num1 + num2
let sumResult = sum(1, 2)
//3
console.log(sumResult);
(3)箭头函数 this 指向声明时所在作用域下 this 的值,指向的是函数定义位置的上下文this。
示例1:
let obj = {
name: "小明"
}
function fn() {
console.log(this);
//箭头函数的this指向的是函数定义位置的上下文this,fn()函数指向obj,故箭头函数的this也指向obj
return () => {
console.log(this);
}
}
//使用call()使得this指向obj
//{ name: '小明' }
let resFn = fn.call(obj)
//{ name: '小明' }
resFn()
示例2:
let obj1 = {
age: 20,
//对象不具有作用域,所以箭头函数的this指向全局作用域window
say: () => {
console.log(this.age);
}
}
//undefined
obj1.say()
(4)箭头函数不能作为构造函数实例化
(5)不能使用 arguments
2.6.reset参数(剩余参数)
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
ES6 引入 剩余参数,用于获取函数的实参,用来代替 arguments
示例1:
//作用与 arguments 类似
//rest参数必须是最后一个形参
function sum(first, ...args) {
console.log(first);
console.log(args);
}
//1 [ 2, 3 ]
sum(1, 2, 3)
示例2:
//剩余参数和解构配合使用
let person = ["张三", "李四", "王五"]
let [p1, ...p2] = person
//张三
console.log(p1);
//[ '李四', '王五' ]
console.log(p2);
2.7.spread 扩展运算符
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
示例1:
let arry = [1, 2, 3]
//1 2 3
console.log(...arry);
示例2:
//扩展运算符可以应用于合并数组。
//方法1
let arry1 = [1, 2, 3]
let arry2 = [4, 5, 6]
let arry3 = [...arry1, ...arry2]
//[ 1, 2, 3, 4, 5, 6 ]
console.log(arry3);
//方法2
arry1.push(arry2)
//[ 1, 2, 3, 4, 5, 6 ]
console.log(...arry1);
2.8.模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
示例1:
//基础用法
let name = `小明`
//小明
console.log(name);
示例2:
//使用 ${xxx} 输出变量
let name = "小明"
let sayName = `你好,我叫${name}!`
//你好,我叫小明!
console.log(sayName);
示例3:
//模板字符串中可以换行
let obj = {
name: "小明",
age: "22"
}
let html = `
<div>
<span>${obj.name}</span>
<span>${obj.age}</span>
</div>
`
/* <div>
<span>小明</span>
<span>22</span>
</div> */
console.log(html);
示例4:
//在模板字符串中可以调用函数
let sayHello = function () {
return "hello"
}
let say = `${sayHello()}`
//hello
console.log(say);
2.9.简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
示例:
let name = "小明"
let age = 22
let sayHello = function () {
console.log("hello");
}
// 属性和方法的简写
let obj = {
name,
age,
sayHello
}
// 小明
console.log(obj.name);
// 22
console.log(obj.age);
// hello
obj.sayHello();
2.10.Set数据结构
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
属性和方法 | 说明 |
---|---|
size | 返回集合的元素个数 |
add | 增加一个新元素,返回当前集合 |
delete | 删除元素,返回 boolean 值 |
has | 检测集合中是否包含某个元素,返回 boolean 值 |
clear | 清空集合,返回 undefined |
示例1:
let s = new Set([1, 2, 3, 4, 5, 1, 2, 3])
//Set(5) { 1, 2, 3, 4, 5 }
console.log(s);
// 1 2 3 4 5
console.log(...s);
//添加元素
s.add(1).add(6).add(7);
// 1 2 3 4 5 6 7
console.log(...s);
// 删除元素
s.delete(7)
// 1 2 3 4 5 6
console.log(...s);
//判断是否存在某值
let isExist = s.has(6)
// true
console.log(isExist);
// 清除所有值
s.clear()
//Set(0) {}
console.log(s);
示例2:
// 遍历Set结构
let s = new Set([1, 2, 3, 4, 5, 1, 2, 3])
//1 2 3 4 5
s.forEach((value) => console.log(value))
2.11.Map数据结构
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法:
属性和方法 | 说明 |
---|---|
size | 返回 Map 的元素个数 |
set | 增加一个新元素,返回当前 Map |
get | 返回键名对象的键值 |
has | has 检测 Map 中是否包含某个元素,返回 boolean 值 |
clear | clear 清空集合,返回 undefined |
示例:
let m = new Map([
["name", "小明"]
])
// 获取映射元素的个数
//1
console.log(m.size);
// 添加映射值
//Map(2) { 'name' => '小明', 'age' => 22 }
console.log(m.set('age', 22));
// 获取映射值
//22
console.log(m.get('age'));
// 检测是否有该映射
//true
console.log(m.has('age'));
// 清除
//undefined
console.log(m.clear());
3.ES6的新增方法
3.1.数组的新增方法
(1)Array.from()方法
Array.from()方法能将将类数组或可遍历对象转换为真正的数组
示例1:
let arrayLike = {
"0": "1",
"1": "2",
"2": "3",
length: 3
}
let arr = Array.from(arrayLike);
//[ '1', '2', '3' ]
console.log(arr);
方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
示例2:
let arrayLike = {
"0": "1",
"1": "2",
"2": "3",
length: 3
}
let arr2 = Array.from(arrayLike, item => item * 2);
//[ 2, 4, 6 ]
console.log(arr2);
(2)Array.of()方法
用于把一组值变成数组
示例:
let arr3 = Array.of(1, 2, 3)
//[ 1, 2, 3 ]
console.log(arr3);
(3)find()方法
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
let ary = [{
id: 1,
name: "zhangsan"
}, {
id: 2,
name: "lisi"
}]
let target = ary.find(item => item.id === 2)
//{ id: 2, name: 'lisi' }
console.log(target);
(4)findIndex()方法
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary2 = [1, 2, 3]
let index = ary2.findIndex(item => item > 1)
//1
console.log(index);
(5)includes()方法
//true
console.log([1, 2, 3].includes(1));
//false
console.log([1, 2, 3].includes(0));
3.2.对象的新增方法
(1)Object.is()
它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
//true
console.log(Object.is("1", "1"));
//false
console.log(Object.is({}, {}));
3.3.字符串的新增方法
(1)startsWith() 和 endsWith()方法
- lstartsWith():表示参数字符串是否在原字符串的头部,返回布尔值
- lendsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
let str = "Hello world!"
//true
console.log(str.startsWith("Hello"));
//true
console.log(str.endsWith("!"));
(2)repeat()方法
repeat方法表示将原字符串重复n次,返回一个新字符串。
// hello hello hello
console.log("hello ".repeat(3));