EcmaScript6
一、 声明变量常量
let关键字声明变量,特性:①变量不能重复声明②块级作用域:在 let 命令所在的代码块内有效③不存在变量声明提前,不允许在变量声明之前使用变量④不影响作用域链。 const关键字声明常量,特性:①一定要赋初始值②一般常量使用大写③常量的值不能更改④块级作用域⑤对于数组和对象的元素修改,不算做对常量的修改,不会报错。 声明字符串的新方式``,特性:①内容中可以直接出现换行符②使用${}实现变量拼接
var name= ` alice ` ;
let out= ` 我的名字叫 ${ name} ` ;
声明对象的简化写法
let name= 'alice' ;
let age= 18 ;
const school= {
name,
age,
impeove ( ) {
console. log ( 'hhhh' ) ;
} ,
} ;
二、变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。 数组的解构
const name= [ 'alice' , 'bob' , 'john' , 'jessic' ] ;
let [ a, b, c, d] = name;
console. log ( a+ ' ' + b+ ' ' + c+ ' ' + d) ;
对象的解构
const d= {
name: 'alice' ,
age: 18 ,
school: 'zhejiang'
} ;
let { name, age, school} = d;
console. log ( name+ ' ' + age+ ' ' + school) ;
三、箭头函数
ES6使用允许使用=>定义函数 特性:①箭头函数中this是静态的,this始终指向函数声明时所在作用域下的this的值。也就是说箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。②箭头函数不能作为构造函数实例化对象③不能使用arguments变量(arguments用来保存实参)。④箭头函数的简写:当形参有且只有一个时,省略小括号;当代码体只有一条语句时,可以省略花括号,此时return必须省略。
let add = n => { return n+ n; } ;
let add2 = ( n, m ) => n* m;
let add3 = n => n* n;
箭头函数的实践一:改变盒子背景颜色,根据箭头函数的this特性可使用箭头函数。
let div1= document. getElementById ( 'div1' ) ;
div1. addEventListener ( "click" , function ( ) {
let _this= this ;
setTimeout ( function ( ) {
_this. style. background= 'pink' ;
} , 2000 ) ;
} )
let div1= document. getElementById ( 'div1' ) ;
div1. addEventListener ( "click" , function ( ) {
setTimeout ( ( ) => {
this . style. background= 'pink' ;
} , 2000 ) ;
} )
箭头函数的实践二:从数组中返回偶数元素
const arr= [ 1 , 2 , 3 , 4 , 5 , 6 ] ;
const result= arr. filter ( function ( item ) {
if ( item% 2 == 0 ) {
return true ;
} else {
return false ;
}
} )
console. log ( result) ;
const arr= [ 1 , 2 , 3 , 4 , 5 , 6 ] ;
const result= arr. filter ( item => item% 2 == 0 )
console. log ( result) ;
箭头函数的适合与this无关的回调,比如定时器、数组的方法回调。不适合与this函数有关的回调,比如事件回调、对象的方法等。
四、函数参数
ES6允许给函数参数赋值初始值,具有默认值的参数,一般位置要靠后。如果传参就使用传递的参数,如果没有传参则使用形参的默认值。 rest参数:ES6引入rest参数用来获取函数的实参,用以替代arguments。rest参数必须放在参数最后。
function fn ( a, b, ... rest ) {
console. log ( a) ;
console. log ( b) ;
console. log ( rest) ;
}
fn ( 1 , 2 , 3 , 4 , 5 , 6 ) ;
五、扩展运算符
…:可以将数组转换为逗号分隔的参数序列。 扩展字符串的应用:①数组的合并②数组的克隆(如果有引用数据类型就是浅拷贝)③将伪数组转换为真正的数组,就可以使用数组的方法。
const name1= [ 'alice' , 'bob' ] ;
const name2= [ 'john' , 'jessic' ] ;
const name= [ ... name1, ... name2] ;
console. log ( name) ;
const name1= [ 'alice' , 'bob' ] ;
const name2= [ ... name1] ;
console. log ( name2) ;
< div id = " div1" > </ div>
< div> </ div>
< div> </ div>
< script type = " text/javascript" >
const divs= document. querySelectorAll ( 'div' ) ;
const divArr= [ ... divs] ;
console. log ( divArr) ;
</ script>
六、Symbol数组类型
ES6引入了一种新的数据类型Symbol,表示独一无二的值。 Symbol特点:①Symbol的值是唯一的,用来解决命名冲突的问题②Symbol的值不能与其他数据进行运算③Symbol定义的对象属性不能使用for in 循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名。
let s= Symbol ( ) ;
let a= Symbol ( '描述字符串' ) ;
let b= Symbol. for ( '描述字符串' ) ;
Symbol的使用场景:给对象添加属性和方法
let game = { }
let methods = {
up: Symbol ( ) ,
down: Symbol ( )
} ;
game[ methods. down] = function ( ) { }
game[ methods. up] = function ( ) { }
console. log ( game) ;
let a= {
name: 'alice' ,
[ Symbol ( 'say' ) ] : function ( ) { } ,
[ Symbol ( 'back' ) ] : function ( ) { } ,
}
console. log ( a) ;
Symbol提供了11个内置值,指向语言内部使用的方法,主要用来控制对象在特定场景下的表现。
七、迭代器
迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结果只要部署Iterator接口,就可以完成遍历操作。 ES6创造新的遍历命令for of,Iterator主要供for of消费。原生具备Iterator接口的数据Array、Arguments、Set、Map、String、TypedArray、NodeList。 Iterator工作原理:①创建一个指针对象,指向当前数据结构的起始位置②第一次调用对象的next方法,指针自动指向数据结构的第一个成员③接下来不断调用next方法,指针一直向后移动,直到指向最后一个成员④每调用next方法都包含value和done属性的对象。
八、生成器
生成器是一种特殊函数,是ES6提供的一种异步编程的解决方案。
function * a ( ) {
console. log ( 'Hello World' ) ;
}
let iterator= a ( ) ;
iterator. next ( ) ;
function * a ( ) {
yield '11111' ;
console. log ( 'Hello World' ) ;
yield '22222' ;
yield '33333' ;
}
let iterator= a ( ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( ) ) ;
生成器函数的参数传递:next()方法可以传递实参
function * a ( ) {
let one= yield '11111' ;
console. log ( one) ;
let two= yield '22222' ;
console. log ( two) ;
let three= yield '33333' ;
console. log ( three) ;
}
let iterator= a ( ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( '111' ) ) ;
console. log ( iterator. next ( '222' ) ) ;
console. log ( iterator. next ( '333' ) ) ;
{ value: '11111' , done: false }
生成器实现异步实例一:
setTimeout ( ( ) => {
console. log ( 111 ) ;
setTimeout ( ( ) => {
console. log ( 222 ) ;
setTimeout ( ( ) => {
console. log ( 333 ) ;
} , 3000 ) ;
} , 2000 ) ;
} , 1000 ) ;
function one ( ) {
setTimeout ( ( ) => {
console. log ( 111 ) ;
iterator. next ( ) ;
} , 1000 ) ;
} ;
function two ( ) {
setTimeout ( ( ) => {
console. log ( 222 ) ;
iterator. next ( ) ;
} , 2000 ) ;
} ;
function three ( ) {
setTimeout ( ( ) => {
console. log ( 333 ) ;
iterator. next ( ) ;
} , 3000 ) ;
} ;
function * a ( ) {
yield one ( ) ;
yield two ( ) ;
yield three ( ) ;
} ;
let iterator = a ( ) ;
iterator. next ( ) ;
生成器实现异步实例二:
function getUsers ( ) {
setTimeout ( ( ) => {
let data= '用户数据' ;
iterator. next ( data) ;
} , 1000 ) ;
}
function getOrders ( ) {
setTimeout ( ( ) => {
let data= '订单数据' ;
iterator. next ( data) ;
} , 1000 ) ;
}
function getGoods ( ) {
setTimeout ( ( ) => {
let data= '商品数据' ;
iterator. next ( data) ;
} , 1000 ) ;
}
function * a ( ) {
let users= yield getUsers ( ) ;
console. log ( users) ;
let orders= yield getOrders ( ) ;
console. log ( orders) ;
let goods= yield getGoods ( ) ;
console. log ( goods) ;
}
let iterator = a ( ) ;
iterator. next ( ) ;
九、Promise
promise是ES6引入的异步编程的新解决方案,语法上promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。 Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。 promise对象一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。 Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。 对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。
var promise = new Promise ( function ( resolve, reject ) {
} ) ;
const p= new Promise ( function ( resolve, reject ) {
setTimeout ( function ( ) {
let data= '数据' ;
resolve ( data) ;
} , 1000 ) ;
} ) ;
p. then ( function ( value ) {
console. log ( value) ;
} , function ( reason ) {
console. log ( reason) ;
} ) ;
promise封装读取文件
const fs= require ( 'fs' ) ;
const path= require ( 'path' ) ;
const p= new Promise ( function ( resolve, reject ) {
fs. readFile ( path. join ( __dirname, '/1.txt' ) , 'utf-8' , ( err, data ) => {
if ( err) reject ( err) ;
else resolve ( data) ;
} )
} ) ;
p. then ( function ( value ) {
console. log ( value) ;
} , function ( reason ) {
console. log ( reason) ;
} )
catch()方法:用与指定发生错误时的回调函数。
十、Set
ES6提供了一种新的数据结构Set(集合),类似于数组,但成员的值是唯一的。Set实现了iterator接口。
let a= new Set ( [ 'alice' , 'bob' , 'candy' , 'david' ] ) ;
console. log ( a. size) ;
a. add ( 'jhon' ) ;
console. log ( a) ;
a. delete ( 'jhon' ) ;
console. log ( a. has ( 'jhon' ) ) ;
使用Set实现数组去重、交集并集差集。
let arr1= [ 1 , 2 , 3 , 4 , 5 , 6 , 1 , 2 ] ;
let arr2= [ 1 , 2 , 3 , 1 ] ;
let a= [ ... new Set ( arr1) ] ;
console. log ( a) ;
let result1= [ ... new Set ( arr1) ] . filter ( item => new Set ( arr2) . has ( item) ) ;
console. log ( result1) ;
let result2= [ ... new Set ( [ ... arr1, ... arr2] ) ] ;
console. log ( result2) ;
let result3= [ ... new Set ( arr1) ] . filter ( item => ! new Set ( arr2) . has ( item) ) ;
console. log ( result3) ;
十一、Map
ES6提供了Map数据结果,类似于对象,也是键值的集合。但是键的范围不限于字符串,各种类型的值都可以当做键。Map也实现了iterator接口。
let m= new Map ( ) ;
m. set ( 'name' , 'alice' ) ;
m. set ( 'change' , function ( ) {
console. log ( 'hhhh' ) ;
} )
let key= {
classmate: 'bob'
} ;
m. set ( key, [ 'x' , 'y' ] ) ;
console. log ( m) ;
m. delete ( 'name' ) ;
console. log ( m. size) ;
console. log ( m. get ( key) ) ;
十二、class类
ES6引入class (类)作为对象的模板,通过 class 关键字定义类。
function Phone ( brand, price ) {
this . brand= brand;
this . price= price;
}
Phone . prototype. call = function ( ) {
console. log ( 'Hello World' ) ;
}
var h= new Phone ( 'huawei' , 2000 ) ;
h . call ( ) ;
console. log ( h) ;
class Phone {
constructor ( brand, price ) {
this . brand= brand;
this . price= price;
}
call ( ) {
console. log ( 'Hello World' ) ;
}
}
var v= new Phone ( 'vivo' , 2000 ) ;
console. log ( v) ;
类的静态成员,不属于实例对象。 类的继承
function Phone ( brand, price ) {
this . brand= brand;
this . price= price;
}
Phone . prototype. call = function ( ) {
console. log ( 'Hello World' ) ;
}
function SmartPhone ( brand, price, color, size ) {
Phone . call ( this , brand, price) ;
this . color= color;
this . size= size;
}
SmartPhone . prototype= new Phone ;
SmartPhone . prototype. constructor= SmartPhone;
class Phone {
constructor ( brand, price ) {
this . brand= brand;
this . price= price;
}
call ( ) {
console. log ( 'Hello World' ) ;
}
}
class SmartPhone extends class {
constructor ( brand, price, color, size ) {
super ( brand, price) ;
this . color= color;
this . size= size;
}
photo ( ) {
console. log ( 'photo!' ) ;
}
}
十三、数值扩展
Number.EPSILON是JS表示的最小精度。在浮点数运算中,由于精度问题会出现return (0.1+0.2===0.3)为false的情况,可以使用Number.EPSILON来调整。 Number.isFinite检测一个数是否为有限数,Number.isNaN检测一个数是否为NaN,Number.isInteger判断一个数是否为整数。 Number.parseInt将字符串转为整数,Number.parseFloat将字符串转换为整数。 Math.trunc将数字的小数部分抹掉,Math.sign检测一个数是正数负数还是0。
十四、对象方法扩展
Object.is判断两个值是否完全相等。 Object.assign对象的合并。 Object.setPrototypeOf和Object.getPrototypeOf,设置原型对象和获取原型对象。
十五、模块化
ES6模块功能主要由两个命令构成:export和import。export用于规定模块的对外接口,import用于输入其他模块提供的功能。
import * as m1 from ",/src/js/m1.js" ;
import { name, age} from ",/src/js/m2.js" ;
import { default as m3} from ",/src/js/m3.js" ;
import m3 from ",/src/js/m3.js" ;
let name= 'alice' ;
function age ( ) {
console. log ( 18 ) '
}
export { name, age} ;
export default {
name: 'alice' ;
age: 18 ;
}
script标签src引入文件
< script src = " ./src/js/app.js" type = " module" > </ script>