简介
- ES6的全称是ECMAScript,是由ECMA国际标准化组织制定的一项脚本语言的标准化规范
- 2015年6月-发布ES2015
- 2016年6月-发布ES2016
- ...
- ES6实际上是一个泛指,泛指ES2015年及后续的版本
-
为什么使用ES6?
- 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也有一些令人不满意的地方
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码
新增语法
let
- ES6中新增的用于声明变量的关键字
- let声明的变量只在所处于的块级(一对{ } )有效
if (true) {
let a = 10;
console.log(a); // 10
}
console.log(a); // Uncaught ReferenceError: a is not defined
- 防止循环变量变成全局变量
- 注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
for (var j = 0; j < 2; j++) {}
console.log(j) // 2
for (let i = 0; i < 2; i++) {}
console.log(i);//Uncaught ReferenceError: i is not defined
- 不存在变量提升,只能先声明才能再使用
- 暂时性死区(只要块级作用域内存在
let
命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。
var num = 10;
if (true) {
console.log(num);
//Uncaught ReferenceError: Cannot access 'num' before initialization
let num = 20;
}
- 经典面试题
var arr = [];
for (var i = 0; i < 2; i++) {
arr[i] = function(){
console.log(i);
}
}
arr[0]();
arr[1]();
解析:var声明变量为全局变量,循环结束时i = 2,所以两次打印都为2
var arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function(){
console.log(i);
}
}
arr[0]();
arr[1]();
解析:每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的值。所以依次打印出 0 和 1。
const
- 声明常量,常量就是值(内存地址)不能变化的量
- 具有块级作用域
- 声明常量时必须赋值
const PI; //Uncaught SyntaxError: Missing initializer in const declaration
- 常量赋值后,值不能修改(基本数据类型不可更改,复杂数据类型可更改内部的值,数据值本身不可更改)
const PI = 3.14;
PI = 100; //Uncaught TypeError: Assignment to constant variable.
const ary = ['100','200'];
ary[0] = 101;
ary[1] = 102;
console.log(ary);// [101, 102]
ary = ['101','102'];//Uncaught TypeError: Assignment to constant variable.
let const var 的区别
当声明不变化的(如函数)使用const,从而让JavaScript不必一直监测该值的变化,提升效率。
解构赋值
- ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
数组解构 允许我们按照一一对应的关系从数组中提取值,然后将值赋值给变量。如果解构不成功,变量的值为undefined
let [a,b,c,d,e] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined
console.log(e); // undefined
对象解构 允许我们使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量,psex为别名使用
let person = {name : 'zhangsan',age : 30,sex : 'nan'};
let { name, page, sex : psex } = person;
console.log(name); // zhangsan
console.log(page); // undefined
console.log(psex); // nan
箭头函数
ES6中新增的定义函数的方式,用来简化函数定义语法的
const fn = () => {
console.log(1);
}
- 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
const sum = (num1,num2) => console.log(num1 + num2) ;
- 如果形参只有一个,可以省略小括号
const fn = v => console.log(v);
- 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。下例子都指向fn,即obj
function fn(){
console.log(this);
return () =>{
console.log(this);
}
}
const obj = {name: 'zhangsan '};
fn.call(obj);
//{name: "zhangsan "}
const resFn = fn.call(obj);
resFn();
/*
{name: "zhangsan "}
{name: "zhangsan "}
*/
- 箭头函数面试题 此时this指向window,因为对象不产生作用域,say方法被定义在全局。
var obj = {
age : 20,
say : () =>{
alert(this.age);
}
}
obj.say(); //undefined
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
const sum = (...args) => {
let total = 0;
args.forEach( item => total += item );
return total;
}
console.log(sum(10,20,30));
剩余参数和解构配合使用
let students = ['zhou','wu','sheng'];
let [s1,...s2] = students;
console.log(s1);//zhou
console.log(s2);//["wu", "sheng"]
Array的扩展方法-扩展运算符
扩展运算符(展开语法)
- 扩展运算符可以将数组或者对象转化为逗号分隔的参数序列
let ary = [1,2,3];
console.log(...ary);//1 2 3
- 扩展运算符的应用 - 合并数组
let ary1 = [1,2,3];
let ary2 = [4,5];
//方法一
let ary3 = [...ary1,...ary2];
//方法二
ary1.push(...ary2);
- 将类数组或可遍历对象转换为真正的数组 || 构造函数方法Array.from()也可以做到
var oDivs = document.getElementsByTagName('div');
var ary = [...oDivs];
var ary2 = Array.from(oDivs);
- 构造函数方法Array.from() 还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
let arrayLike = {
'0':1,
'1':2,
'length':2
}
let newAry = Array.from(arrayLike,item => item *2);
- 实例方法 find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined
- findIndex() 返回传入一个测试条件(函数)符合条件的数组第一个元素位置 , 如果没有符合条件的元素返回 -1
- includes() 判断一个数组是否包含一个指定的值,如果是返回 true,否则false
String的扩展方法 - 模板字符串
- 模板字符串 ES6新增的创建字符串的方式,使用反引号定义
- 模板字符串中可以解析变量
- 模板字符串中可以换行
- 可以调用函数
let name = `模板字符串`;
let other = `nihao ${name}`;
let html = `<div>
<span>${name}</span>
<span>${other}</span>
</div>`;
const fun = () => 'fanhuizhi';
let greet = `${fun()}`;
- startsWith() 和 endsWith()
startsWith() 表示参数字符串是否在原字符串的头部,返回布尔值
endsWith() 表示参数字符串是否在原字符串的尾部,返回布尔值
let str = 'hello world';
str.startsWith('hell');
console.log(str.startsWith('hell'));//true
str.endsWith('d');
console.log(str.endsWith('d'));//true
- repeat() 表示将原字符串重复n次,返回一个新字符串
'x'.repeat(2);
console.log('x'.repeat(2));//xx
set数据结构
- ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值
- Set本身是一个构造函数,用来生成Set数据结构
- Set函数可以接受一个数组作为数组,用来初始化
- 利用set数据结构可以做数组去重
- add(value):添加某个值,返回Set结构本身
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功
- has(value):返回一个布尔值,表示该值是否为Set的成员
- clear():清除所有成员,没有返回值
- 遍历 Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
- 使用场景:电商网站搜索历史
const s1 = new Set();
console.log(s1.size);//0
const s2 = new Set(['a','b']);
console.log(s2.size);//2
const s3 = new Set(['a','b','b','a']);
console.log(s3.size);//2
const ary = [...s3];
console.log(ary);//["a", "b"]
const s4 = new Set([1,2,3,4,5]);
s4.forEach(val=>{
console.log(val);
})