let變量聲明及聲明特性
let a;
let b,c,d;
特性：
1.變量不能重復(fù)聲明
2.塊級(jí)作用域 全局 函數(shù) eval
if else while for
{
let girl = '張一'
}
console.log(girl) //報(bào)錯(cuò) girl is nod defined
3.不存在變量提升
4.不影響作用域鏈
const聲明常量及其特點(diǎn)
const SCHOOL = '學(xué)校'
特點(diǎn)：
1.一定要賦初始值
2.一般常量使用大寫（潛規(guī)則）
3.常量的值不能修改
4.塊級(jí)作用域
5.對(duì)于數(shù)組和對(duì)象的元素修改，不算做對(duì)常量的修改蜻牢，不會(huì)報(bào)錯(cuò)
變量的解構(gòu)賦值
ES6 允許按照一定模式從數(shù)組和對(duì)象中提取值消返，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)賦值
1.數(shù)組的解構(gòu)
[a,b,c] = [1,2,3]
console.log(a,b,c)
2.對(duì)象的解構(gòu)
let person = {
name:'張三',
age:18
}
let {name,age} = person
console.log(name,age)
模板字符串
ES6引入新的聲明字符串的方式 ``
let str = haha
特性
1.內(nèi)容中可以直接出現(xiàn)換行符
let str = `<ul>
<li>111</li>
<li>222</li>
</ul>`
2.變量拼接
let name = '張三'
console.log(我的名字是${name})
對(duì)象的簡(jiǎn)化寫法
ES6允許在大括號(hào)里面祝迂，直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法
這樣的書寫更加簡(jiǎn)潔
let name = '尚硅谷'
let change = function(){
console.log('change')
}
let person = {
name,
change,
//函數(shù)簡(jiǎn)寫
improve(){
console.log('improve')
}
}
console.log(person)
箭頭函數(shù)以及聲明特點(diǎn)
let fn = (a,b) => {
return a+b
}
console.log(fn(1,2))
特點(diǎn)：
1.this是靜態(tài)的器净，this始終指向函數(shù)聲明時(shí)所在的作用域下的this的值
2.不能作為構(gòu)造實(shí)例化對(duì)象
不能用new
3.不能使用arguments變量
4.箭頭函數(shù)的簡(jiǎn)寫
//省略小括號(hào)
let add = n => {
return n+n
}
//省略花括號(hào)
let pow = (n) => n*n
箭頭函數(shù)適合與this無關(guān)的回調(diào)型雳，定時(shí)器，數(shù)組的方法回調(diào)
箭頭函數(shù)不適合與this有關(guān)的回調(diào)山害，事件回調(diào)纠俭，對(duì)象的方法
rest參數(shù)
ES6引入rest參數(shù)，用于獲取函數(shù)的實(shí)參浪慌，用來代替arguments
rest參數(shù)必須要放到最后
function fn(a,b,...args){
console.log(args) //[3,4,5]
}
fn(1,2,3,4,5)
擴(kuò)展運(yùn)算符
...
//數(shù)組的合并
const arr1 = [1,2]
const arr2 = [3,4]
const arr = [...arr1,...arr2]
console.log(arr)
//數(shù)組的克隆
const arr3 = ['E','G','M']
const arr4 = [...arr3]
console.log(arr4)
//將偽數(shù)組轉(zhuǎn)為真正的數(shù)組
const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)
Symbol的介紹與創(chuàng)建
ES6 引入了一種新的原始數(shù)據(jù)類型 Symbol,表示獨(dú)一無二的值冤荆。它是JavaScript 語言的第七種數(shù)據(jù)類型,是一種類似于字符串的數(shù)據(jù)類型。
Symbol 特點(diǎn)
- Symbol的值是唯一的,用來解決命名沖突的問題
- Jymbol值不能與其他數(shù)據(jù)進(jìn)行運(yùn)算
- Symbol 定義的對(duì)象屬性不能使用 for ... in 循環(huán)遍歷,但是可以使用Reflect.ownKeys 來獲取對(duì)象的所有鍵名
對(duì)象添加Symbol類型的屬性
let game = {
up(){
console.log('up')
},
down(){
console.log('down')
}
}
let methods = {
up:Symbol(),
down:Symbol()
}
game[methods.up] = function(){
console.log('new up')
}
game[methods.down] = function(){
console.log('new down')
}
console.log(game)
let person = {
name:'張三',
[Symbol('say')]:function(){
console.log('say')
}
}
console.log(person)
迭代器
迭代器(Iterator)是一種接口,為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制权纤。
任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口,就可以完成遍歷操作钓简。
- ES6創(chuàng)造了一種新的遍歷命令for ... of循環(huán),Iterator 接口主要供for ... of消費(fèi)
- 原生具備 iteiator接口的數(shù)據(jù)(可用for of 遍歷)
a) Array
b) Arguments
c) Set
d) Map
e)String
f)TypedArray
g) NodeList - 工作原理
a)創(chuàng)建一個(gè)指針對(duì)象,指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
b)第一次調(diào)用對(duì)象的next方法,指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
c) 接下來不斷調(diào)用next方法,指針一直往后移動(dòng),直到指向最后一個(gè)成員
d)每調(diào)用next方法返回一個(gè)包含value和done屬性的對(duì)象
注：需要自定義遍歷數(shù)據(jù)的時(shí)候乌妒，要想到迭代器
解決回調(diào)地獄問題
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()
}
//調(diào)用生成器函數(shù)
let iterator = gen()
iterator.next()
Promise
Promise是ES6引入的異步編程的新解決方案。語法上Promise是一個(gè)構(gòu)造函數(shù),
用來封裝異步操作并可以獲取其成功或失敗的結(jié)果外邓。
- Promise 構(gòu)造函數(shù):Promise(excutor)份
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
let data = '數(shù)據(jù)讀取成功'
resolve(data)
// let error = '數(shù)據(jù)讀取失敗'
// reject(error)
},1000)
})
p.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
Promise封裝AJAX請(qǐng)求
const p = new Promise((resolve,reject)=>{
const xhr =new XMLHttpRequest()
xhr.open('GET','http://jsonplaceholder.typicode.com/posts')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
resolve(xhr.response)
}else{
reject(xhr.response)
}
}
}
})
p.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
Set 集合介紹與API
let s = new Set()
let s2 = new Set([1,2,2,3,4,5,5,]) //自動(dòng)去重
//元素個(gè)數(shù)
console.log(s2.size)
//添加新的元素
s2.add('new')
//刪除元素
s2.delete('new')
//檢測(cè)
console.log(s2.has(2))
//清空
// s2.clear()
console.log(s2)
for( let v of s2){
console.log(v)
}
集合實(shí)踐
let arr = [1,2,3,4,5,4,3,2,1]
//1.數(shù)組去重
let newArr = [...new Set(arr)]
console.log(newArr)
//2.交集
let arr2 = [4,5,6,5,6]
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(result)
//3.并集
let result2 =[...new Set( [...arr,...arr2])]
console.log(result2)
//4.差集
let chaArr = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
let chaArr2 = [...new Set(arr2)].filter(item => !(new Set(arr).has(item)))
console.log(chaArr,chaArr2)
Map
ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)撤蚊。它類似于對(duì)象,也是鍵值對(duì)的集合。但是“鍵”的范圍不限于字符串,各種類型的值(包括對(duì)象),都可以當(dāng)作鍵损话。Map也實(shí)現(xiàn)了 iterator 接口,所以可以使用「擴(kuò)展運(yùn)算符』和【for ... of .... 』進(jìn)行遍歷侦啸。Map的屬性和方法:
- size 返回Map的元素個(gè)數(shù)|
- set 增加一個(gè)新元素,返回當(dāng)前Map
- get 返回鍵名對(duì)象的鍵值
- has 檢測(cè)Map中是否包含某個(gè)元素,返回boolean 值
- clear 清空集合,返回 undefined
let m = new Map()
m.set('name','尚硅谷')
m.set('age',18)
m.set([1,2,3],{a:1,b:2})
console.log(m.get('age'))
console.log(m.has('age'))
// m.delete('age')
// m.clear()
console.log(m)
console.log(m.size)
class介紹與初體驗(yàn)
ES6 提供了更接近傳統(tǒng)語言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板。通過class關(guān)鍵字,可以定義類丧枪」馔浚基本上,ES6的class可以看作只是一個(gè)語法糖,它的絕大部分功能,ES5都可以做到,新的class 寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已豪诲。
知識(shí)點(diǎn):
- class 聲明類
- constructor 定義構(gòu)造函數(shù)初始化
- extends 繼承父類
- super 調(diào)用父級(jí)構(gòu)造方法
- static 定義靜態(tài)方法和屬性
- 父類方法可以重寫
//ES5
function Phone(brand,price){
this.brand = brand
this.price = price
}
Phone.prototype.call = function(){
console.log('我可以打電話')
}
let xiaomi = new Phone('小米',4999)
xiaomi.call()
console.log(xiaomi)
//ES6
class Phone{
//構(gòu)造方法 名字不能修改
constructor(brand,price){
this.brand = brand
this.price = price
}
// 方法必須使用該語法顶捷，不能使用ES5的對(duì)象完整形式
call(){
console.log('我可以打電話')
}
}
let HUAWEI = new Phone('華為',6999)
HUAWEI.call()
console.log(HUAWEI)
class的類繼承
class SmartPhone extends Phone{
constructor(brand,price,color){
super(brand,price)
this.color = color
}
photo(){
console.log('我可以拍照')
}
}
let oneplus = new SmartPhone('1+',4999,'白色')
oneplus.photo()
console.log(oneplus)
數(shù)值擴(kuò)展
Number.EPSILON
Number.isFinite 檢測(cè)一個(gè)數(shù)值是否為有限數(shù)
Number.isNaN 檢測(cè)一個(gè)數(shù)值是否為NaN
Number.parseInt 字符串轉(zhuǎn)整數(shù)
Number.parseFloat
Number.isInteger 判斷一個(gè)數(shù)是否為整數(shù)
Math.trunc 將數(shù)字的小鼠部分抹掉
Math.sign 判斷一個(gè)數(shù)到底為正數(shù) 負(fù)數(shù) 還是零
對(duì)象方法擴(kuò)展
Object.is 判斷兩個(gè)值是否完全相等
Object.assign 對(duì)象的合并
Object.setPrototypeOf 設(shè)置原型對(duì)象 Object.getPrototyeOf 獲取原型
console.log(Object.is(120,120))
const config1 = {
host:'localhost',
port:3306,
name:'root',
pass:'root',
b:200
}
const config2 = {
host:'http://atguigu.com',
port:33060,
name:'atguigu.com',
pass:'iloveyou',
a:100
}
console.log(Object.assign(config1,config2))
const school = {
name:'尚硅谷'
}
const cities = {
xiaoqu :['北京']
}
Object.setPrototypeOf(school,cities)
console.log(school)
console.log(Object.getPrototypeOf(school))
ES6模塊暴露數(shù)據(jù)語法匯總
m1.js
//分別暴露
export let school = '尚硅谷1'
export function change(){
console.log('m1')
}
m2.js
//統(tǒng)一暴露
let school = '尚硅谷2'
function findJob(){
console.log('m2')
}
export {school,findJob}
m3.js
//默認(rèn)暴露
export default{
school : '尚硅谷3',
change(){
console.log('m3')
}
}
html
<script type="module">
//1.通用的導(dǎo)入方式
//引入m1.js 模塊內(nèi)容
import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"
console.log(m1)
//2.解構(gòu)賦值的形式
import {school,change} from './src/js/m1.js'
import {school as guigu,findJob} from './src/js/m2.js'
import {default as m3} from './src/js/m3.js'
console.log(school,change,guigu,findJob)
console.log(m3)
//3.簡(jiǎn)便形式 針對(duì)默認(rèn)暴露
import m3 from './src/js/m3.js'
console.log(m3)
</script>
瀏覽器使用ES6模塊化方式二
app.js
//入口文件
//模塊引入
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import * as m3 from './m3.js'
console.log(m1,m2,m3)
html
<script src="./src/js/app.js" type="module"></script>
ES7新特性
includes 之前用 indesOf
const arr = [1,22,333,444]
console.log(arr.includes(1))
** 次方
console.log(2 ** 3)
console.log(Math.pow(2,3))
ES8新特性
async await
async和 await 兩種語法結(jié)合可以讓異步代碼像同步代碼一樣
async 函數(shù)
- async函數(shù)的返回值為 promise對(duì)象,
- promise 對(duì)象的結(jié)果由async函數(shù)執(zhí)行的返回值決定
await 表達(dá)式
1.await必須寫在async函數(shù)中
2.await 右側(cè)的表達(dá)式一般為promise對(duì)象
3.await返回的是promise成功的值
4.await的 promise失敗了,就會(huì)拋出異常,需要通過try ... catch捕獲處理
async 與 await 結(jié)合發(fā)送AJAX請(qǐng)求
//發(fā)送AJAX請(qǐng)求，返回的結(jié)果是Promise對(duì)象
function sendAJAX(url){
return new Promise((resolve,rejcet)=>{
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)
}
}
}
})
}
//promise then方法測(cè)試
// sendAJAX('http://jsonplaceholder.typicode.com/posts').then(value=> {
// console.log(value)
// }, reason => {
// console.log(reason)
// })
//async await 測(cè)試
async function main(){
let result = await sendAJAX('http://jsonplaceholder.typicode.com/posts')
let result2 = await sendAJAX('http://jsonplaceholder.typicode.com/posts/2')
console.log(result2)
}
main()
ES8對(duì)象方法擴(kuò)展
Object.keys()
Object.values()
Object.entries()
const school = {
name:'尚硅谷',
cities:['北京','上海']
}
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('name'))
ES10 字符串方法擴(kuò)展
trimStart trimEnd
ES10 數(shù)組方法擴(kuò)展
flat 將多維數(shù)組轉(zhuǎn)化為低位數(shù)組
flatMap
const arr1 = [1,2,3,4,[5,6,[7,8]]]
//參數(shù)為深度 是一個(gè)數(shù)字
console.log(arr1.flat(2))
const arr2 = [1,2,3,4]
const result = arr2.flatMap(item => [item * 10])
console.log(result)
ES10 Symbol.prototype.description
let s = Symbol('尚硅谷')
console.log(s.description)
ES11 私有屬性
class Person {
//公有屬性
name;
//私有屬性
#age;
#weight;
constructor(name, age, weight){
this.name = name
this.#age = age
this.#weight = weight
}
}
const girl = new Person('小紅', 18, '45kg')
console.log(girl)
console.log(girl.#age) //報(bào)錯(cuò)
ES11 Promise.allSettled
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('商品數(shù)據(jù) - 1')
},1000)
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('商品數(shù)據(jù) - 2')
},1000)
})
const result = Promise.allSettled([p1,p2])
// const result = Promise.all([p1,p2]) //兩個(gè)任務(wù)必須都成功
result.then(value => {
console.log(value)
},reason => {
console.log(reason)
})
console.log(result)
ES11 動(dòng)態(tài)import
//import * as m1 from './hello.js'
import('./hello.js').then(module => {
module.hello()
})
ES11 BigInt類型
//大整形
let n = 521n;
console.log(n, typeof(n))
//函數(shù)
let n2 = 123;
console.log(BigInt(n2))
// console.log(BigInt(1.2)) //報(bào)錯(cuò)
//大數(shù)值運(yùn)算
let max = Number.MAX_SAFE_INTEGER
console.log(BigInt(max) + BigInt(1))
console.log(BigInt(max) + BigInt(2))
