为什么学习ES6
- ES6版本变动内容最多,有里程碑意义
- ES6加入许多新语法特性,使工作更加效率、简单
- ES6是大多数应聘所要求
变量声明关键字 let
特性:
- 变量不能重复声明
例:
{
let a = 1;
let a = "abc" ;
//重复声明报错
}
- 块级作用域
例:
{
let a = 1;
}
congsole.log(a);
//无法读取到参数a
- 不存在变量升级
变量升级:代码执行之前会收集变量。
例:
{
congsole.log(a);
//不会报错 会输出undefined
congsole.log(b);
//会报错
var a = 1;
let b = 2;
}
- 不影响作用域链
例:
{
let a = 2;
function b (){
console.log(a);
}
b();
//可输出a
}
常量声明关键字 const
const 特性:
- 一定要赋初始值
- 一般常量用大写
- 常量的值不能更改
- 块级作用域
例:
{
const a = 1;
}
congsole.log(a);
//无法读取到参数a
- 对数组和对象的元素修改,不算对常量修改
例:
{
const a = [1, 2, 3, 4];
a.push(5);
//不会报错 因为常量所指向的地址没有改变
}
变量解构赋值
1. 数组的解构
例:
const n = [ '红' , '黄' , '蓝' ];
let [a, b, c]=n;
console.log(a);
console.log(b);
console.log(c);
/*输出结果:
红
黄
蓝
*/
2. 对象的解构
例:
const n = {
color: '红',
name: 'red',
way:function(){
console.log("颜色");
}
};
let {color, name, way}=n;
//let声明的变量名必须与对象中的元素名相同
console.log(color);
console.log(name);
way();
/*输出结果:
红
red
颜色
*/
模板字符串
用法:
let a=`模板字符串反引号`
特性:
- 内容可以直接出现换行符
例:
let a=
`红
黄
蓝
绿`
console.log(a);
/*输出结果:
红
黄
蓝
绿
*/
- 变量拼接
例:
let a = '红';
let b = `${a}黄蓝绿`;
console.log(b);
/*输出结果:
红黄蓝绿
*/
对象简化写法
例:
let name = '红';
let way = function(){
console.log('颜色');
}
const n = {
name,
way,
//等价于 name:name, way:way,
way2(){
console.log('蓝绿');
}
//等价于 way2: function(){...}
}
箭头函数
用法:
let a = ()=>{
return 0;
}
特性:
- 箭头函数中的this是静态的,this始终指向函数声明时所在作用于下的this值
例:
function a(){
console.log("this.name");
}
let b = ()=>{
console.log("this.name)";
}
window.name = '箭头函数';
const n ={
name: "普通函数"
}
//call方法调用
a.call(n);
//a不是箭头函数,call方法调用改变了this指向,this指向更改为n中的name
b.call(n);
//b是箭头函数,所以call不会改变this指向,b中的this依旧是指向全局的name
/*输出结果:
普通函数
箭头函数
*/
- 不能作为构造函数实例化对象
例:
window.name = 'abc';
let a = (name)=>{
this.name=name;
}
let n = new a('qwe');
//输出结果会报错
- 不能使用arguments变量
例:
let a = ()=>{
console.log(arguments);
}
a(1,2,3);
//输出结果报错
- 箭头函数省略写法
- 省略小括号
使用条件:形参有且只有1个
例:
let a = n =>{
return n+1;
}
- 省略花括号
使用条件:代码体只有一条语句
let a = (n) => n+1;
rest参数
作用:获取函数的实参,代替arguments参数
用法:
function a(...args){
console.log(args);
}
a('红','蓝','白');
注意:在函数有多个参数时候,rest参数必须放到最后
Symbol类型
特性:
- Symbol的值是唯一的,用来解决命名冲突问题
- Symbol值不能与其他数值进行运算
- Symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名
用法:
let a = Symbol();
let b = Symbol("颜色");
//传入的字符串并不是Symbol的值,而是对该值的注释
let c = Symbol.for('颜色');
//创建Symbol对象
使用场景:
let a = {...};
//要在对象a中创建一个方法打印abc
let b = {
x: Symbol(),
};
a[b.x] = function(){
console.log("abc"):
}
//用来解决命名重复问题,防止创建的方法名在a中已经被创建
迭代器
作用:迭代器是一种接口,为不同类型的数据结构提供同一个访问机制。在ES6中,通过for…of 就可以遍历不同数据类型的数据,具体如下:
- Array
- Arguments
- Set
- Map
- String
- TypedArray
- NodeList
工作原理:
- 创建一个指针对象,指向当前数据结构的初始位置
- 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
- 接下来不断调用next方法,指针向后移动,直到指向最后一个成员
- 每次调用next方法返回一个含有value和done属性的对象
用法:
const a = ['红', '蓝', '绿'];
for(let b of a){
console.log(b);
}
Promise
作用: Promise是ES6引用的异步编程(文件IO 数据库IO 网络请求)的新解决方法。
用法:
- 首先用new Promise()实例化Promise对象
- 在实例化时候接受含两个形参 resolve和reject 的函数
- 函数内部放异步操作
- 通过调用resolve和reject来改变Promise对象的状态(初始化 成功 失败)
- 使用resolve和reject方法后会调用promise对象的then方法,若状态是成功则调用then方法中的第一个方法,失败则调用第二个方法
const a = new Promise(function(resolve, reject){
setTimeout(function(){
let data = '成功';
resolve(data);//Promise对象状态变为成功
},1000);
//调用Promise对象的then方法
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})
//then方法接受两个函数,分别是成功状态调用的函数和失败状态调用的函数
});
Set(集合)
用法:
let a = new Set();
let b = new Set(['红', '蓝']);
方法:
- size 返回集合的元素个数
- add 增加一个新元素,返回当前集合
- delete 删除元素,返回boolean值
- has 检测集合中是否包含某个元素,返回boolean值
例:
let a = new Set(['红', '蓝']);
console.log(a.size);//打印元素个数
a.add('黄');//添加新元素
a.delete('红');//删除元素
console.log(a.has('蓝'));//检测是否含有元素
a.clear();//清空
常见操作
- 去重
let a = [1,2,3,1,2];
let b = [...new Set(a)];
- 交集
let a = [1,2,3,4,4];
let b = [2,3,3];
let result = [...new Set(a)].filter(item =>{
let n = new Set(b);
if(n.has(item)){
return true;
}else{
return false;
}
});
console.log(result);
//取交集时先去重,再用has判断是否是交集
- 并集
let a = [1, 2, 3, 4];
let b = [3, 4, 5];
let result = [..new Set([a,b])];
console.log(result);
- 差集
let a = [1, 2, 3, 4];
let b = [3, 4, 5];
let result = [..new Set(a)].filter(item => !(new Set(b).has(item)));
Map(键值对集合)
用法:
let a = new Map();
a.set('name','红'); //a.set('键','值');
a.set('way',function(){
console.log('蓝');
});
let key = {
color:'黄'
};
a.set(key,['深黄','浅黄']);
console.log(a);
方法:
- size 返回Map的元素个数
- set 增加一个新元素,返回当前Map
- get 返回键名对象的键值
- has 检测Map中是否包含某个元素,返回boolean值
- clear 清空,返回undefined
ES6数值扩展
- Number.EPSILON(比较浮点数大小)
作用: EPSILON是JS的最小精度,用于两个浮点数比较。当两个浮点数误差小于EPSILON时,则说明这两个浮点数相等。
例:
console.log(0.1 + 0.2 === 0.3);
//0.1 + 0.2是不等于0.3的
function equal(a,b){
if(Math.abs(a-b)<Number.EPSILON){
return true;
}
else{
return false;
}
}
console.log(equal(0.1 + 0.2,0.3));
//使用EPSILON后即可正确比较浮点数
- Number.isFinite(检测是否为有限数)
例:
console.log(Number.isFinite(100));
console.log(Number.isFinite(100/3));
- Number.isNaN(检测是否为NaN)
例:
console.log(Number.isNaN(100));
- **Number.parseInt Number.parseFloat(字符串转整数/浮点数) **
console.log(Number.parseInt('1234abc');
console.log(Number.parseFloat('3.1415红色');
- Number.isInteger (检测是否为整数)
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));
- Math.trunc (将数字的小数抹去)
console.log(Number.trunc(3.5));
- Math.sign (检测正、负数、0)
console.log(Math.sign(100));
console.log(Math.sign(-100));
console.log(Math.sign(0));
ES6对象方法拓展
- Object.is (判断两个值是否完全相等)
console.log(Object.is(120,120));
console.log(Object.is(NaN,NaN));
- Object.assign (对象的合并)
const a = {
name:'红';
color:'红';
};
const b = {
name:'蓝';
number:0;
};
console.log(Object.assign(a,b));
//如果对象中有重复的属性,后面的对象会覆盖前面的对象属性
ES6模块化
暴露数据语法
- 分别暴露
export let a = '红';
export function b(){
console.log('蓝'):
}
- 统一暴露
let a = '红';
function b(){
console.log('蓝'):
}
export {a, b};
- 默认暴露
export default{
let a = '红';
function b(){
console.log('蓝'):
}
}
引入数据语法
- 通用导入方式
import * as a from "相对路径/a.js";
- 解构赋值形式
import {a as newName, b} from "相对路径/a.js";
import {default as newName2} from "相对路径/a.js";
//不能直接使用default 要使用别名
- 简便形式 针对默认暴露
import a from "相对路径/a.js";