ES6
解构赋值
const F4 = [ '小沈阳' , '刘能' , '赵四' , '宋小宝' ] ;
let [ xiao, liu, zhao, song] = F4 ;
console. log ( xiao) ;
console. log ( liu) ;
console. log ( zhao) ;
console. log ( song) ;
const zhao = {
name: '赵本山' ,
age: '不详' ,
xiaopin: function ( ) {
console. log ( "我可以演小品" ) ;
}
} ;
let { name, age, xiaopin} = zhao;
console. log ( name) ;
console. log ( age) ;
console. log ( xiaopin) ;
xiaopin ( ) ;
let { xiaopin} = zhao;
xiaopin ( ) ;
function connect ( { host= "127.0.0.1" , username, password, port} ) {
console. log ( host)
console. log ( username)
console. log ( password)
console. log ( port)
}
connect ( {
username: 'root' ,
password: 'root' ,
port: 3306
} )
模板字符串
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>` ;
let lovest = '魏翔' ;
let out = ` ${ lovest} 是我心目中最搞笑的演员!!` ;
console. log ( out) ;
箭头函数
let fn = ( a, b) => {
return a + b;
}
let result = fn ( 1 , 2 ) ;
console. log ( result) ;
特性 this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName ( ) {
console. log ( this . name) ;
}
let getName2 = ( ) => {
console. log ( this . name) ;
}
window. name = '尚硅谷' ;
const school = {
name: "ATGUIGU"
}
getName ( ) ;
getName2 ( ) ;
getName. call ( school) ;
getName2. call ( school) ;
let pow = n => n * n;
console. log ( pow ( 8 ) ) ;
ad. addEventListener ( "click" , function ( ) {
setTimeout ( ( ) => {
this . style. backgroundColor = "yellow" ;
} , 1000 )
} )
const arr = [ 1 , 6 , 9 , 10 , 100 , 25 ] ;
const result = arr. filter ( item => item % 2 === 0 ) ;
console. log ( result) ;
rest参数
function date ( ... args) {
console. log ( args) ;
}
date ( '阿娇' , '柏芝' , '思慧' ) ;
function fn ( a, b, ... args) {
console. log ( a) ;
console. log ( b) ;
console. log ( args) ;
}
fn ( 1 , 2 , 3 , 4 , 5 , 6 ) ;
扩展运算符
const kuaizi = [ '王太利' , '肖央' ] ;
const fenghuang = [ '曾毅' , '玲花' ] ;
const zuixuanxiaopingguo = [ ... kuaizi, ... fenghuang] ;
console. log ( zuixuanxiaopingguo) ;
const sanzhihua = [ 'E' , 'G' , 'M' ] ;
const sanyecao = [ ... sanzhihua] ;
console. log ( sanyecao) ;
const divs = document. querySelectorAll ( 'div' ) ;
const divArr = [ ... divs] ;
console. log ( divArr) ;
Symbol
let game = {
name: '俄罗斯方块' ,
up: function ( ) {
console. log ( "up" )
} ,
down: function ( ) {
console. log ( "down" )
}
} ;
let methods = {
up: Symbol ( "up" ) ,
down: Symbol ( "down" )
} ;
game[ methods. up] = function ( ) {
console. log ( "我可以改变形状" ) ;
}
game[ methods. down] = function ( ) {
console. log ( "我可以快速下降!!" ) ;
}
game. up ( ) ;
game. down ( ) ;
console. log ( game) ;
game[ methods. up] ( ) ;
game[ methods. down] ( ) ;
let symbolSay = Symbol ( 'say' ) , symbolZibao = Symbol ( 'zibao' ) ;
let youxi = {
[ symbolSay] : function ( ) {
console. log ( "我可以发言" )
} ,
[ symbolZibao] : function ( ) {
console. log ( '我可以自爆' ) ;
}
}
console. log ( youxi)
youxi[ symbolSay] ( ) ;
youxi[ symbolZibao] ( ) ;
迭代器
< script>
const banji = {
name: "终极一班" ,
stus: [
'xiaoming' ,
'xiaoning' ,
'xiaotian' ,
'knight'
] ,
[ Symbol. iterator] ( ) {
let index = 0 ;
let _this = this ;
return {
next: function ( ) {
if ( index < _this. stus. length) {
const result = { value: _this. stus[ index] , done: false } ;
index++ ;
return result;
} else {
return { value: undefined, done: true } ;
}
}
} ;
}
}
for ( let v of banji) {
console. log ( v) ;
}
for ( let v of banji. stus) {
console. log ( v) ;
}
< / script>
生成器
< script>
function * gen ( ) {
yield '一只没有耳朵' ;
yield '一只没有尾部' ;
yield '真奇怪' ;
}
let iterator = gen ( ) ;
iterator. next ( ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( ) ) ;
for ( let v of gen ( ) ) {
console. log ( v) ;
}
< / script>
< script>
function * gen ( arg) {
console. log ( arg) ;
let one = yield 111 ;
console. log ( one) ;
let two = yield 222 ;
console. log ( two) ;
let three = yield 333 ;
console. log ( three) ;
}
let iterator = gen ( 'AAA' ) ;
console. log ( iterator. next ( ) ) ;
console. log ( iterator. next ( 'BBB' ) ) ;
console. log ( iterator. next ( 'CCC' ) ) ;
console. log ( iterator. next ( 'DDD' ) ) ;
< / script>
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 * gen ( ) {
yield one ( ) ;
yield two ( ) ;
yield three ( ) ;
}
let iterator = gen ( ) ;
iterator. next ( ) ;
< script>
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 * gen ( ) {
let users = yield getUsers ( ) ;
console. log ( users) ;
let orders = yield getOrders ( ) ;
console. log ( orders) ;
let goods = yield getGoods ( ) ;
console. log ( goods) ;
}
let iterator = gen ( ) ;
iterator. next ( ) ;
< / script>
Promise
读取文件
const fs = require ( 'fs' ) ;
const p = new Promise ( function ( resolve, reject) {
fs. readFile ( "./resources/为学.md" , ( err, data) => {
if ( err) reject ( err) ;
resolve ( data) ;
} ) ;
} ) ;
p. then ( function ( value) {
console. log ( value. toString ( ) ) ;
} , function ( reason) {
console. log ( "读取失败!!" ) ;
} ) ;
Ajax请求
< script>
const p = new Promise ( ( resolve, reject) => {
const xhr = new XMLHttpRequest ( ) ;
xhr. open ( "GET" , "https://api.apiopen.top/getJ" ) ;
xhr. send ( ) ;
xhr. onreadystatechange = function ( ) {
if ( xhr. readyState === 4 ) {
if ( xhr. status >= 200 && xhr. status < 300 ) {
resolve ( xhr. response) ;
} else {
reject ( xhr. status) ;
}
}
}
} )
p. then ( function ( value) {
console. log ( value) ;
} , function ( reason) {
console. error ( reason) ;
} ) ;
< / script>
Promise-then方法
< script>
const p = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
resolve ( '用户数据' ) ;
} , 1000 )
} ) ;
p. then ( value=> {
} ) . then ( value=> {
} ) ;
< / script>
Promise-catch方法
< script>
const p = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
reject ( "出错啦!" ) ;
} , 1000 )
} ) ;
p. catch ( function ( reason) {
console. warn ( reason) ;
} ) ;
< / script>
读取多个文件
const fs = require ( "fs" ) ;
const p = new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/为学.md" , ( err, data) => {
resolve ( data) ;
} ) ;
} ) ;
p. then ( value => {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/插秧诗.md" , ( err, data) => {
resolve ( [ value, data] ) ;
} ) ;
} ) ;
} ) . then ( value => {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/观书有感.md" , ( err, data) => {
value. push ( data) ;
resolve ( value) ;
} ) ;
} )
} ) . then ( value => {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/观书有感2.md" , ( err, data) => {
value. push ( data) ;
resolve ( value) ;
} ) ;
} )
} ) . then ( value => {
console. log ( value. join ( '\r\n' ) ) ;
} ) ;
Set集合
声明
let s = new Set ( ) ;
let s2 = new Set ( [ '大事儿' , '小事儿' , '好事儿' , '坏事儿' , '小事儿' ] ) ;
console. log ( s2. size) ;
s2. add ( '喜事儿' ) ;
s2. delete ( '坏事儿' ) ;
console. log ( s2. has ( '糟心事' ) ) ;
s2. clear ( ) ;
for ( let v of s2) {
console. log ( v) ;
}
Set集合方法
let arr = [ 1 , 2 , 3 , 4 , 5 , 4 , 3 , 2 , 1 ] ;
let result = [ ... new Set ( arr) ] ;
console. log ( result) ;
let arr = [ 1 , 2 , 3 , 4 , 5 , 4 , 3 , 2 , 1 ] ;
let arr2 = [ 4 , 5 , 6 , 5 , 6 ] ;
let s2 = new Set ( arr2) ;
let result = [ ... new Set ( arr) ] . filter ( item => s2. has ( item) ) ;
console. log ( result) ;
let arr = [ 1 , 2 , 3 , 4 , 5 , 4 , 3 , 2 , 1 ] ;
let arr2 = [ 4 , 5 , 6 , 5 , 6 ] ;
let union = [ ... new Set ( [ ... arr, ... arr2] ) ] ;
console. log ( union) ;
let diff = [ ... new Set ( arr) ] . filter ( item => ! ( new Set ( arr2) . has ( item) ) ) ;
console. log ( diff) ;
Map
let m = new Map ( ) ;
m. set ( 'name' , '尚硅谷' ) ;
m. set ( 'change' , function ( ) {
console. log ( "我们可以改变你!!" ) ;
} ) ;
Class
class Shouji {
constructor ( brand, price) {
this . brand = brand;
this . price = price;
}
call ( ) {
console. log ( "我可以打电话!!" ) ;
}
}
let onePlus = new Shouji ( "1+" , 1999 ) ;
onePlus. call ( ) ;
console. log ( onePlus) ;
class Phone {
static name = '手机' ;
static change ( ) {
console. log ( "我可以改变世界" ) ;
}
}
let nokia = new Phone ( ) ;
console. log ( nokia. name) ;
console. log ( Phone. name) ;
继承
< script>
class Phone {
constructor ( brand, price) {
this . brand = brand;
this . price = price;
}
call ( ) {
console. log ( "我可以打电话!!" ) ;
}
}
class SmartPhone extends Phone {
constructor ( brand, price, color, size) {
super ( brand, price) ;
this . color = color;
this . size = size;
}
photo ( ) {
console. log ( "拍照" ) ;
}
playGame ( ) {
console. log ( "玩游戏" ) ;
}
call ( ) {
super . call ( ) ;
console. log ( '我可以进行视频通话' ) ;
}
}
const xiaomi = new SmartPhone ( '小米' , 799 , '黑色' , '4.7inch' ) ;
xiaomi. call ( ) ;
xiaomi. photo ( ) ;
xiaomi. playGame ( ) ;
< / script>
call ( ) {
super . call ( ) ;
console. log ( '我可以进行视频通话' ) ;
}
getter和setter
< script>
class Phone {
get price ( ) {
console. log ( "价格属性被读取了" ) ;
return 'iloveyou' ;
}
set price ( newVal) {
console. log ( '价格属性被修改了' ) ;
}
}
let s = new Phone ( ) ;
s. price = 'free' ;
< / script>
Math. * 及Number. * 方法拓展
对象方法拓展
Object.is
console. log ( Object. is ( 120 , 120 ) ) ;
console. log ( Object. is ( NaN , NaN ) ) ;
console. log ( NaN === NaN ) ;
Object.assign 对象的合并
const config1 = {
host: 'localhost' ,
port: 3306 ,
name: 'root' ,
pass: 'root' ,
test: 'test'
} ;
const config2 = {
host: 'http://atguigu.com' ,
port: 33060 ,
name: 'atguigu.com' ,
pass: 'iloveyou' ,
test2: 'test2'
}
console. log ( Object. assign ( config1, config2) ) ;
Object
host: "http://atguigu.com"
name: "atguigu.com"
pass: "iloveyou"
port: 33060
test: "test"
test2: "test2"
__proto__: Object
暴露语法
分别暴露
export let school = '***' ;
export function teach ( ) {
console. log ( "我们可以教给你开发技能" ) ;
}
统一暴露
let school = '***' ;
function findJob ( ) {
console. log ( "我们可以帮助你找工作!!" ) ;
}
export { school, findJob} ;
默认暴露
export default {
school: '***' ,
change: function ( ) {
console. log ( "我们可以改变你!!" ) ;
}
}
导入
< script type= "module" >
import * as m1 from "./src/js/m1.js" ;
import * as m2 from "./src/js/m2.js" ;
import * as m3 from "./src/js/m3.js" ;
m1. teach ( ) ;
m2. findJob ( ) ;
m3. default . change ( ) ;
< / script>
解构赋值
< script type= "module" >
import { school, teach} from "./src/js/m1.js" ;
import { school as guigu, findJob} from "./src/js/m2.js" ;
import { default as m3} from "./src/js/m3.js" ;
< / script>
简便形式
< script type= "module" >
import m3 from "./src/js/m3.js" ;
console. log ( m3) ;
< / script>
NPM包
< script src= "dist/bundle.js" > < / script>
ES7
includes
const mingzhu = [ '西游记' , '红楼梦' , '三国演义' , '水浒传' ] ;
console. log ( mingzhu. includes ( '西游记' ) ) ;
**
console. log ( 2 ** 10 ) ;
console. log ( Math. pow ( 2 , 10 ) ) ;
ES8
async
async function fn ( ) {
return new Promise ( ( resolve, reject) => {
resolve ( '成功的数据' ) ;
} ) ;
}
const result = fn ( ) ;
result. then ( value => {
console. log ( value) ;
} , reason => {
console. warn ( reason) ;
} )
await
< script>
const p = new Promise ( ( resolve, reject) => {
reject ( "失败啦!" ) ;
} )
async function main ( ) {
try {
let result = await p;
console. log ( result) ;
} catch ( e ) {
console. log ( e) ;
}
}
main ( ) ;
< / script>
async和await结合读取文件
const fs = require ( "fs" ) ;
function readWeiXue ( ) {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/为学.md" , ( err, data) => {
if ( err) reject ( err) ;
resolve ( data) ;
} )
} )
}
function readChaYangShi ( ) {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/插秧诗.md" , ( err, data) => {
if ( err) reject ( err) ;
resolve ( data) ;
} )
} )
}
function readGuanShu ( ) {
return new Promise ( ( resolve, reject) => {
fs. readFile ( "./resources/观书有感.md" , ( err, data) => {
if ( err) reject ( err) ;
resolve ( data) ;
} )
} )
}
async function main ( ) {
let weixue = await readWeiXue ( ) ;
let chayang = await readChaYangShi ( ) ;
let guanshu = await readGuanShu ( ) ;
console. log ( weixue. toString ( ) ) ;
console. log ( chayang. toString ( ) ) ;
console. log ( guanshu. toString ( ) ) ;
}
main ( ) ;
Ajax
function sendAJAX ( url) {
return new Promise ( ( resolve, reject) => {
const x = new XMLHttpRequest ( ) ;
x. open ( 'GET' , url) ;
x. send ( ) ;
x. onreadystatechange = function ( ) {
if ( x. readyState === 4 ) {
if ( x. status >= 200 && x. status < 300 ) {
resolve ( x. response) ;
} else {
reject ( x. status) ;
}
}
}
} )
}
sendAJAX ( "https://api.apiopen.top/getJoke" ) . then ( value=> {
console. log ( value) ;
} , reason=> { } )
async function main ( ) {
let result = await sendAJAX ( "https://api.apiopen.top/getJoke" ) ;
let tianqi = await sendAJAX ( 'https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P' )
console. log ( result) ;
console. log ( tianqi) ;
}
main ( ) ;
对象拓展
< script>
const school = {
name: "尚硅谷" ,
cities: [ '北京' , '上海' , '深圳' ] ,
xueke: [ '前端' , 'Java' , '大数据' , '运维' ]
} ;
console. log ( Object. keys ( school) ) ;
console. log ( Object. values ( school) ) ;
console. log ( Object. entries ( school) ) ;
const m = new Map ( Object. entries ( school) ) ;
console. log ( m. get ( 'cities' ) ) ;
console. log ( Object. getOwnPropertyDescriptors ( school) ) ;
const obj = Object. create ( null , {
name: {
value: '尚硅谷' ,
writable: true ,
configurable: true ,
enumerable: true
}
} ) ;
< / script>
ES9
对象展开
function connect ( { host, port, ... user} ) {
console. log ( host) ;
console. log ( port) ;
console. log ( user) ;
}
connect ( {
host: '127.0.0.1' ,
port: 3306 ,
username: 'root' ,
password: 'root' ,
type: 'master'
} ) ;
127.0 .0 .1
3306
Object
password: "root"
type: "master"
username: "root"
对象合并
const skillOne = {
q: '天音波'
}
const skillTwo = {
w: '金钟罩'
}
const skillThree = {
e: '天雷破'
}
const skillFour = {
r: '猛龙摆尾'
}
const mangseng = { ... skillOne, ... skillTwo, ... skillThree, ... skillFour} ;
命名捕获分组
let str = '<a href="http://www.atguigu.com">尚硅谷</a>' ;
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/ ;
const result = reg. exec ( str) ;
console. log ( result. groups. url) ;
console. log ( result. groups. text) ;
http: / / www. atguigu. com
尚硅谷
断言
let str = 'JS5211314你知道么555啦啦啦' ;
const reg = /\d+(?=啦)/ ;
const result = reg. exec ( str) ;
const reg = /(?<=么)\d+/ ;
const result = reg. exec ( str) ;
console. log ( result) ;
正则扩展
后边多一个?表示懒惰模式。
必须跟在* 或者+ 后边用
如:
如果用正则匹配src中内容非懒惰模式匹配
src= ".*"
匹配结果是:src= "test.jpg" width= "60px" height= "80px"
意思是从= "往后匹配,直到最后一个" 匹配结束
懒惰模式正则:
src= ".*?"
结果:src= "test.jpg"
因为匹配到第一个"就结束了一次匹配。不会继续向后匹配。因为他懒惰嘛。
. 表示除\n之外的任意字符
* 表示匹配0 - 无穷
+ 表示匹配1 - 无穷
< script>
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>` ;
const reg = / < li> . * ? < a> ( . * ? ) < \/ a> . * ? < p> ( . * ? ) < \/ p> / gs;
let result;
let data = [ ] ;
while ( result = reg. exec ( str) ) {
data. push ( { title: result[ 1 ] , time: result[ 2 ] } ) ;
}
console. log ( data) ;
< / script>
Array ( 2 )
0 : { title: "肖生克的救赎" , time: "上映日期: 1994-09-10" }
1 : { title: "阿甘正传" , time: "上映日期: 1994-07-06" }
length: 2
__proto__: Array ( 0 )
ES10
Object.fromEntries
< script>
const result1 = Object. fromEntries ( [
[ 'name' , '尚硅谷' ] ,
[ 'xueke' , 'Java,大数据,前端,云计算' ]
] ) ;
console. log ( result1) ;
const m = new Map ( ) ;
m. set ( 'name' , 'ATGUIGU' ) ;
const result2 = Object. fromEntries ( m) ;
console. log ( result2) ;
const arr = Object. entries ( {
name: "尚硅谷"
} )
console. log ( arr) ;
< / script>
trimStart 与 trimEnd
< script>
let str = ' iloveyou ' ;
console. log ( str) ;
console. log ( str. trimStart ( ) ) ;
console. log ( str. trimEnd ( ) ) ;
< / script>
flat 与 flatMap
< script>
const arr1 = [ 1 , 2 , 3 , 4 , [ 5 , 6 ] ] ;
const arr2 = [ 1 , 2 , 3 , 4 , [ 5 , 6 , [ 7 , 8 , 9 ] ] ] ;
console. log ( arr2. flat ( 2 ) ) ;
const arr3 = [ 1 , 2 , 3 , 4 ] ;
const result = arr3. flatMap ( item => [ item * 10 ] ) ;
console. log ( result) ;
< / script>
ES11
私有属性
< script>
class Person {
name;
#age;
#weight;
constructor ( name, age, weight) {
this . name = name;
this . #age = age;
this . #weight = weight;
}
intro ( ) {
console. log ( this . name) ;
console. log ( this . #age) ;
console. log ( this . #weight) ;
}
}
const girl = new Person ( '晓红' , 18 , '45kg' ) ;
girl. intro ( ) ;
< / script>
Promise.allSettled/all
< script>
const p1 = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
resolve ( '商品数据 - 1' ) ;
} , 1000 )
} ) ;
const p2 = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
reject ( '出错啦!' ) ;
} , 1000 )
} ) ;
const result = Promise. allSettled ( [ p1, p2] ) ;
const res = Promise. all ( [ p1, p2] ) ;
console. log ( result) ;
console. log ( res) ;
< / script>
String.prototype.matchAll
< script>
let str = `<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>` ;
const reg = / < li> . * ? < a> ( . * ? ) < \/ a> . * ? < p> ( . * ? ) < \/ p> / sg
const result = str. matchAll ( reg) ;
const arr = [ ... result] ;
console. log ( arr) ;
< / script>
可选链操作符?.
< script>
function main ( config) {
const dbHost = config? . db? . host;
console. log ( dbHost) ;
}
main ( {
db: {
host: '192.168.1.100' ,
username: 'root'
} ,
cache: {
host: '192.168.1.200' ,
username: 'admin'
}
} )
< / script>
动态 import
< button id= "btn" > 点击< / button>
< script src= "./js/app.js" type= "module" > < / script>
const btn = document. getElementById ( 'btn' ) ;
btn. onclick = function ( ) {
import ( './hello.js' ) . then ( module => {
module. hello ( ) ;
} ) ;
}
export function hello ( ) {
alert ( 'Hello' ) ;
}
BigInt
let max = Number. MAX_SAFE_INTEGER ;
console. log ( max) ;
console. log ( max + 1 ) ;
console. log ( max + 2 ) ;
console. log ( BigInt ( max) )
console. log ( BigInt ( max) + BigInt ( 1 ) )
console. log ( BigInt ( max) + BigInt ( 2 ) )