var 和 let 的區(qū)別
var 只是聲明一個(gè)變量乍丈，可以是局部也可以是全局
let 只是局部變量骚勘，沒有變量提升，沒有預(yù)處理機(jī)制
暫時(shí)性死區(qū)
只要塊級(jí)作用域存在let命令舌胶，它所聲明的變量就綁定在這個(gè)區(qū)域升敲，不再受外部影響
let 不允許重復(fù)聲明 模塊內(nèi)部不允許答倡，各模塊之間可以
塊級(jí)作用域
ES5只有全局作用域和函數(shù)作用域
第一種場(chǎng)景 內(nèi)層變量會(huì)覆蓋外層變量
var time = new Date()
function fun() {
console.log(time) // 未定義
if (false) {
var time = '2020'
}
}
fun()
這種情況就是time 會(huì)優(yōu)先選擇模塊內(nèi)部的變量來使用
第二種場(chǎng)景 變量使用完，并沒有及時(shí)釋放內(nèi)存驴党，提升為全局變量
var string = "hello world";
for(var i=0;i<string.length;i++){
console.log(string[i]);
}
console.log('finished')
console.log(i) //i=12,i并沒有釋放
ES6就新增了塊級(jí)作用域 是let自己生成的
function fun() {
let num = 200;
if(true){
let num = 300;
}
console.log(num);
}
fun() //打印出200 如果是var 就打印出
const 生成的常量
const也存在塊級(jí)作用域 也有暫時(shí)性死區(qū) 也不可重復(fù)聲明
const 聲明的對(duì)象和數(shù)組 都是只讀
const對(duì)象凍結(jié)
const obj = Object.freeze()
obj.name = 'xx';
obj.age = 30;
console.log(obj.name); // undefined
console.log(obj.age); //undefined
console.log(obj); //Object
第二種
const obj = Object.freeze({
obj.name:'xx',
obj.age:30;
})
console.log(obj.name); // xx
console.log(obj.age); //30
console.log(obj); //Object
立即執(zhí)行函數(shù)
(function () {}() )
ES6的結(jié)構(gòu)賦值
數(shù)組解構(gòu)：
let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套數(shù)組解構(gòu) d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 數(shù)組拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不連續(xù)解構(gòu) i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解構(gòu) k=1, l=2
對(duì)象解構(gòu)：
let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解構(gòu) d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以聲明變量解構(gòu) g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解構(gòu) h='n' i='i' j='c' k='e'
變量賦值ES5
var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)
變量賦值ES6
const {userName, password} = {userName: 'aaaa', password: 123456}
console.log(userName)
console.log(password)
const [userName1, password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)
函數(shù)參數(shù)的定義
一般我們?cè)诙x函數(shù)的時(shí)候瘪撇，如果函數(shù)有多個(gè)參數(shù)時(shí)，在es5語法中函數(shù)調(diào)用時(shí)參數(shù)必須一一對(duì)應(yīng)港庄，否則就會(huì)出現(xiàn)賦值錯(cuò)誤的情況倔既，來看一個(gè)例子：需要一一對(duì)應(yīng)，這樣就會(huì)極易出現(xiàn)參數(shù)順序傳錯(cuò)的情況鹏氧，從而導(dǎo)致bug
ES5:
function personInfo(name, age, address, gender) {
console.log(name, age, address, gender)
}
personInfo('xy', 18, 'heze', 'man')
ES6:
function personInfo({name, age, address, gender}) {
console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'heze', name: 'xy', age: 18})
交換變量的值
ES5：
var a=1, b=2, c
c = a
a = b
b = c
console.log(a, b)
ES6：
let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)
函數(shù)的默認(rèn)參數(shù)
ES5
function saveInfo(name, age, address, gender) {
name = name || 'xy'
age = age || 18
address = address || 'heze'
gender = gender || 'man'
console.log(name, age, address, gender)
}
saveInfo()
ES6
function saveInfo({name= 'xy', age= 18, address= 'heze', gender= 'man'} = {}) {
console.log(name, age, address, gender)
}
saveInfo()
字符串的結(jié)構(gòu)賦值
和數(shù)組一樣渤涌，因此也有l(wèi)ength屬性
const [a,b,c,d,e] = 'HELLO';
console.log(a); //H
console.log(b); //E
console.log(c); //L
console.log(d); //L
console.log(e); //O
const {length:len} = 'HELLO';
console.log(len) // 5
或者
const {length} = 'HELLO';
console.log(length) // 5
從函數(shù)返回多個(gè)值
function fun(){
return [1,2,3]
}
可以這樣寫
console.log(fun())
但是我們要取第二個(gè)，就需要提前定義一個(gè)數(shù)組來接收把还，再循環(huán)
這時(shí)候就需要用到解構(gòu)賦值,比較方便
var [x,y,z] = fun()
console.log(x);
console.log(y);
console.log(z);
function fun(){
return {
name:'xy',
age:'18'
}
}
var [name,age] = fun()
console.log(name);
console.log(age);
Map 結(jié)構(gòu)
let map = new Map();
let obj = {
name: 'Leon',
sex: 'male'
};
map.set(obj,'myObject');
map.get(obj); // "myObject"
map.has(obj) //true
map.delete(obj) //true
map.has(obj) // false
實(shí)例的屬性和操作方法
set(key,value):
set方法設(shè)置鍵名key對(duì)應(yīng)的鍵值為value实蓬，然后返回整個(gè) Map 結(jié)構(gòu)。
let map = new Map();
map.set('dsssddddddddsdsdsdssfw',8);
map.set({a:1},'ddsdsds');
get(key):
獲取key的值
map.get('dsssddddddddsdsdsdssfw')//8
has(key)
has方法返回一個(gè)布爾值吊履，表示某個(gè)鍵是否在當(dāng)前 Map 對(duì)象之中安皱。
map.has('dsssddddddddsdsdsdssfw'); //true
delete(key)
delete方法刪除某個(gè)鍵，返回true艇炎。如果刪除失敗练俐，返回false。
map.delete('dsssddddddddsdsdsdssfw');
map.has('dsssddddddddsdsdsdssfw')//false
clear()
清空Map對(duì)象
map.size // 2
map.clear()
map.size // 0
遍歷方法
方法 作用
keys() 返回鍵名的遍歷器
values() 返回鍵值的遍歷器
entries() 返回所有成員的遍歷器
forEach() 遍歷 Map 的所有成員
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
Map與其他數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換
Map轉(zhuǎn)為數(shù)組：
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
數(shù)組 轉(zhuǎn)為 Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
Map 轉(zhuǎn)為對(duì)象
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
對(duì)象轉(zhuǎn)為 Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
