第五章:ES6高级(下)
5.1:ES6简介
-
什么是ES6
ES的全称是
ECMAScript
,它是由ECMA
国际标准化组织,指定的一项脚本语言的标准化规范。年份 版本 2015年6月 ES2015 2016年6月 ES2016 2017年6月 ES2017 2018年6月 ES2018 … … ES6实际上是一个泛指,泛指ES2015及以后续的版本。
-
为什么使用ES6
每一次标准的诞生都意味着语言的完善,功能的加强。
JavaScript
语言本身也有一些令人不满意的地方。- 变量提升特定增加了程序运行时的不可预测性。
- 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码。
5.2:ES6的新增语法
-
let
:ES6中新增的用于声明变量的关键字-
let
声明的变量只在所处与的块级有效if (true) { let a = 10; } console.log(a); // a is not defined
注意:使用
let
关键字声明的变量才具有块级作用域,使用var
声明的变量不具备块级作用域特性。 -
不存在变量提升
console.log(a); // a is not defined let a = 20;
-
暂时性死区
var tmp = 123; if (true) { tmp = 'abc'; let tmp; }
-
-
const
作用:声明常量,常量就是值(内存地址)不能变化的量。
-
具有块级作用域
-
声明常量是必须赋值
-
常量赋值后,值不能更改
const PI = 3.14; PI = 100; // Assignment to constant variable const ary = [100, 200]; ary[0] = 'a'; ary[1] = 'b'; ary = ['a', 'b']; // Assignment to constant variable
-
-
解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构。
-
数组解构
let [a, b, c] = [1, 2]; console.log(a); // 1 console.log(b); // 2 consloe.log(c); // undefined
如果解构不成功,变量的值为
undefined
-
对象解构
let person = { name: 'lisi', age: 30 }; let { name, age } = person; console.log(name); console.log(age); let { name: myName } = person; console.log(myName);
-
-
箭头函数
ES6中新增的定义函数的方式。
const fn = () => {}
- 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号。
- 如果形参只有一个,可以省略小括号。
- 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文
this
。
-
剩余函数
剩余函数语法允许我们将一个不定数量的参数表示为一个数组。
let ary1 = ['张三', '李四', '王五']; let [s1, ...s2] = ary1; console.log(s1); // 张三 console.log(s2); // ['李四', '王五']
5.3:ES6的内置对象扩展
-
Array的扩展方法
-
扩展运算符
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列;
let ary = ["a", "b", "c"]; // ...ary // "a", "b", "c" console.log(...ary); // a b c console.log("a", "b", "c"); // a b c
-
构造函数方法:
Array.from()
将伪数组或可遍历对象转换为真正的数组。
var arrayLike = { "0": "张三", "1": "李四", "length": 2 }; var ary = Array.from(arrayLike); console.log(ary); // ['张三', '李四']
方法还可以接受第二个参数,作用类似于数组的map方法,用于对每个元素进行处理,将处理后的值放入返回的数组。
-
find()
用于找出第一个符合条件的数组成员,如果没有找到返回
undefind
var ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = ary.find(item => item.id == 2); console.log(target);
-
findIndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary = [10, 20, 50]; let index = ary.findIndex(item => item > 15); console.log(index);
-
includes()
表示某个数组是否包含给定的值,返回布尔值。
let ary = ["a", "b", "c"]; let result = ary.includes('a'); console.log(result);
-
-
String的扩展方法
-
模板字符串:ES6新增的创建字符串的方式,使用反引号定义。
-
模板字符串可以解析变量
let name = `张三`; let sayHello = `Hello, 我的名字叫${name}`; console.log(sayHello);
-
模板字符串可以换行
-
模板字符串可以调用函数
const fn = () => { return `我是fn函数`; }; let html = `我是模板字符串 ${fn()}`; console.log(html);
-
-
startsWith()
:表示参数字符串是否在原字符串的头部,返回布尔值。 -
endsWith()
:表示参数数字字符串是否在原字符的尾部,返回布尔值。 -
repeat()
:方法表示将原字符串重复n次,返回一个新字符串。
-
-
Set数据结构
ES6提供新的数据结构
Set
。它类似于数组,但是成员的值都是唯一的,没有重复的值。-
Set
本身是一个构造函数,用来生成Set数据结构。const s = new Set();
-
实例方法
add(value)
:添加某个值,返回Set结构本身。delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功。has(value)
:返回一个布尔值,表示该值是否为Set的成员。clear()
:清除所有成员,没有返回值。
-
遍历
Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。
const s5 = new Set(['a', 'b', 'c']); s5.forEach(value => { console.log(value); });
-