let
- ES6中創(chuàng)建變量使用
let - 作用域只限制于當(dāng)前代碼塊
- 使用let聲明的變量作用域不會(huì)被提升
- 在相同的作用域下不能聲明相同的變量
- for循環(huán)體現(xiàn)let的父子作用域
1:作用域只限制于當(dāng)前代碼塊
{
var str = '張三';
console.log(str); // 張三
let str1 = '李四';
console.log(str1); // 李四
}
console.log(str); // 張三
console.log(str1); // str1 is not defined
2:使用let聲明的變量作用域不會(huì)被提升
{
console.log(str); // undefined
var str = '張三';
console.log(str1); // str1 is not defined
let str1 = '李四';
}
3:在相同的作用域下不能聲明相同的變量
{
var str = '張三';
var str = '李四';
console.log(str); // 李四
let str1 = '張三';
let str1 = '李四';
console.log(str1);
// Identifier 'str1' has already been declared（標(biāo)識(shí)符'str1'已經(jīng)被聲明）
}
4. for循環(huán)體現(xiàn)let的父子作用域
{
for (let i = 0; i < 5; i ++) {
let i = 20;
console.log(i); // 會(huì)打印5次20
}
}
const
- ES6中創(chuàng)建常亮使用
const - 只在當(dāng)前代碼塊中有效
- 作用域不會(huì)被提升
- 不能重復(fù)聲明
- 聲明的常亮必須賦值
解構(gòu)賦值
- ES6允許按照一定模式從數(shù)組和對(duì)象中提取值對(duì)變量進(jìn)行賦值芒填，這被稱(chēng)之為解構(gòu)賦值
基本用法
let [name, age, height] = ['cwz', 8, 1.88];
console.log(name);
console.log(age);
console.log(height);
對(duì)象解構(gòu)賦值
let {name, age, friends, animation} = {
name : '張三',
age : '18',
friends : ['lulu', 'xixi', 'ququ'],
animation : {
up : 'shang',
down : 'xia'
}
}
console.log(name);
console.log(age);
console.log(friends);
console.log(animation);
數(shù)組的解構(gòu)賦值
let[arr1, [arr2, arr3,[arr4, arr5]]] = [1, [2, 3, [4, 5]]];
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
基本類(lèi)型的解構(gòu)賦值
let [a,b,c,d,e] = '我是程序員';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
數(shù)據(jù)集合 - set
特點(diǎn)
- 類(lèi)似于數(shù)組小染，沒(méi)有重復(fù)的元素;
- 用于去除重復(fù)的數(shù)據(jù);
- key和value都是相等的;
let set = new Set(['1', '2', '3']);
console.log(set.size); // 3
// 添加元素
set.add('cwz').add('zy');
console.log(set); // Set(5) {"1", "2", "3", "cwz", "zy"}
// 刪除指定元素元素
set.delete('cwz');
console.log(set); // Set(4) {"1", "2", "3", "zy"}
// 判斷是否存在某個(gè)元素
console.log(set.has('zy')); // true
console.log(set.keys()); // SetIterator {"1", "2", "3", "zy"}
console.log(set.values()); // SetIterator {"1", "2", "3", "zy"}
// 清除所有元素
set.clear();
console.log(set); //Set(0) {}
數(shù)據(jù)集合 - map
特點(diǎn)：
- 類(lèi)似于對(duì)象溯祸，本質(zhì)上是鍵值對(duì)的集合
- ‘鍵’不局限于字符串，各種類(lèi)型的值圾笨，包括對(duì)象都可以當(dāng)做鍵
- 是一種更加完善的Hash結(jié)構(gòu)的實(shí)現(xiàn)
let obj1 = {'name' : "cwz"}, obj2 = {'name' : 'zy'};
const map = new Map([
['name', 'cwz'],
['age', 18],
['height', 1.88],
[obj1, '110'],
[obj2, '120'],
[10, 1]
]);
console.log(map);
let obj1 = {'name' : "cwz"}, obj2 = {'name' : 'zy'};
const map = new Map([
['name', 'cwz'],
['age', 18],
['height', 1.88],
[obj1, '110'],
[obj2, '120'],
[10, 1]
]);
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
遍歷
let obj1 = {'name' : "cwz"}, obj2 = {'name' : 'zy'};
const map = new Map([
['name', 'cwz'],
['age', 18],
['height', 1.88],
[obj1, '110'],
[obj2, '120'],
[10, 1]
]);
map.forEach(function (value, index) {
console.log(index+ ':' +value);
})
symbol
- 在ES5中對(duì)象的屬性名都是字符串容易造成屬性名沖突。
- 在ES6中引入了原始的數(shù)據(jù)類(lèi)型
symbol，表示獨(dú)一無(wú)二的值苦始。 - 對(duì)象的屬性名可以有兩種類(lèi)型：
- 字符串類(lèi)型
- symbol類(lèi)型
let str1 = Symbol('name');
let str2 = Symbol('name');
console.log(str1 === str2); // false
const obj = {};
obj[Symbol('name')] = '張三';
obj[Symbol('name')] = '李四';
console.log(obj);
class
class Person {
constructor (name, age) {
this.name = name;
this.age = age;
}
print(){
console.log('我的名字是：'+ this.name +'今天'+ this.age + '歲');
}
}
let person = new Person('張三', 18);
console.log(person);
person.print();
數(shù)組的拓展
let liArr = document.querySelectorAll("li");
// Array.isArray : 判斷是否是數(shù)組
console.log(Array.isArray(liArr)); // false
// Array.from() : 轉(zhuǎn)成數(shù)組
let arr = Array.from(liArr);
console.log(Array.isArray(arr)); // true
// Array.of : 轉(zhuǎn)成數(shù)組
console.log(Array.of(1, 2, 3, 4, 5, '一', '二', '三'));// [1, 2, 3, 4, 5, "一", "二", "三"]
對(duì)象的拓展
// Object.assign() : 可以合成一個(gè)對(duì)象
let obj1 = {'name' : 'cwz'};
let obj2 = {'age' : 18};
let obj3 = {'gender' : 'man'};
let obj4 = {'friend' : 'zy'};
let obj = {};
console.log(Object.assign(obj, obj1, obj2, obj3, obj4));;
// 延展操作符...
let str = '今天天氣很好!';
let strArr = [...str];
console.log(strArr);
// 延展操作符... 去重功能
let myArr = [1,2,10, '張三', 20, 2, 1];
console.log([...new Set(myArr)]); // [1, 2, 10, "張三", 20]
箭頭函數(shù)
// 箭頭函數(shù) ()=>{}
let sum = (sum1, sum2) => {return sum1 + sum2};
console.log(sum(10, 20)); // 30
