var 和 let 的区别
var 只是声明一个变量，可以是局部也可以是全局
let 只是局部变量，没有变量提升，没有预处理机制
暂时性死区
只要块级作用域存在let命令，它所声明的变量就绑定在这个区域，不再受外部影响
let 不允许重复声明 模块内部不允许，各模块之间可以
块级作用域
ES5只有全局作用域和函数作用域
第一种场景 内层变量会覆盖外层变量
var time = new Date()
function fun() {
console.log(time) // 未定义
if (false) {
var time = '2020'
}
}
fun()
这种情况就是time 会优先选择模块内部的变量来使用
第二种场景 变量使用完，并没有及时释放内存，提升为全局变量
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就新增了块级作用域 是let自己生成的
function fun() {
let num = 200;
if(true){
let num = 300;
}
console.log(num);
}
fun() //打印出200 如果是var 就打印出
const 生成的常量
const也存在块级作用域 也有暂时性死区 也不可重复声明
const 声明的对象和数组 都是只读
const对象冻结
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
立即执行函数
(function () {}() )
ES6的结构赋值
数组解构：
let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2
对象解构：
let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解构 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)
函数参数的定义
一般我们在定义函数的时候，如果函数有多个参数时，在es5语法中函数调用时参数必须一一对应，否则就会出现赋值错误的情况，来看一个例子：需要一一对应，这样就会极易出现参数顺序传错的情况，从而导致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)
函数的默认参数
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()
字符串的结构赋值
和数组一样，因此也有length属性
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
从函数返回多个值
function fun(){
return [1,2,3]
}
可以这样写
console.log(fun())
但是我们要取第二个，就需要提前定义一个数组来接收，再循环
这时候就需要用到解构赋值,比较方便
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 结构
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
实例的属性和操作方法
set(key,value):
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。
let map = new Map();
map.set('dsssddddddddsdsdsdssfw',8);
map.set({a:1},'ddsdsds');
get(key):
获取key的值
map.get('dsssddddddddsdsdsdssfw')//8
has(key)
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
map.has('dsssddddddddsdsdsdssfw'); //true
delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。
map.delete('dsssddddddddsdsdsdssfw');
map.has('dsssddddddddsdsdsdssfw')//false
clear()
清空Map对象
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与其他数据结构的转换
Map转为数组：
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
数组 转为 Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
Map 转为对象
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)
对象转为 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})
