ECMASript 6 新特性(ES6)
1.1 let關鍵字
let 關鍵字用來聲明變量，使用 let 聲明的變量有幾個特點：
- 不允許重復聲明
//錯誤寫法 不允許重復聲明
let test = "gl";
let test = "star";
- 塊兒級作用域
//塊級作用域 if else while for都屬于塊級作用域
{
let test = "測試";
}
consle.log(test); //這條語句會報錯
//注:在塊級作用域內定義的let變量，在塊級作用域之外是不允許使用;var可以使用
- 不存在變量提升
//var 存在變量提升
consle.log(sing); //控制臺打印出"唱歌"的字樣
var sing = "唱歌";
//let 不存在變量提升
consle.log(sing); //控制臺報錯,如下圖
let sing = "唱歌";
在這里插入圖片描述
- 不影響作用域鏈
//let不會影響作用域鏈
{
let name = "張三";
function fn(){
consle.log(name); //去上一級作用域找name變量
}
fn(); //控制臺正常輸出"張三"
}
1.2 const 關鍵字
const 關鍵字用來聲明常量(值不能被修改的叫常量)， const 聲明有以下特點
- 聲明必須賦初始值
const TEST; //錯誤寫法，必須賦初始值
const TEST = 5; //正確寫法
- 標識符一般為大寫(潛規則)
//標識符一般大寫,代碼規范
const A = 100;
//小寫也沒有錯
const a = 100;
- 不允許重復聲明
//錯誤寫法 不允許重復聲明
const TEST= "gl";
const TEST= "star";
- 值不允許修改
//錯誤寫法 不允許修改值
const TEST= "gl";
TEST= "star"; //報錯
- 塊兒級作用域
//塊級作用域 if else while for都屬于塊級作用域
{
const TEST= 100;
}
consle.log(TEST); //這條語句會報錯
//注:在塊級作用域內定義的const常量，在塊級作用域之外是不允許使用;var可以使用
<font color="red" size=4>注意: 對象屬性修改和數組元素變化不會出發 const 錯誤
應用場景：聲明對象類型使用 const，非對象類型聲明選擇 let</font>
1.3 let const var 的區別
在這里插入圖片描述
1.4 變量的解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱
為解構賦值。
//數組的解構賦值
const arr = ['張學友', '劉德華', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
consle.log(zhang); //控制臺打印"張學友"
consle.log(liu); //控制臺打印"劉德華"
consle.log(li); //控制臺打印"黎明"
consle.log(guo); //控制臺打印"郭富城"
//-------------------------------------------------------------
//對象的解構賦值
const lin = {
name: '林志穎',
tags: ['車手', '歌手', '小旋風', '演員'],
car:function(){
consle.log("我是車手");
}
};
let {name, tags, car} = lin;
consle.log(name); //控制臺打印"林志穎"
consle.log(tags); //控制臺打印['車手', '歌手', '小旋風', '演員']這個數組
car(); //控制臺打印"我是車手"
//復雜解構
let wangfei = {
name: '王菲',
age: 18,
songs: ['紅豆', '流年', '曖昧', '傳奇'],
history: [
{name: '竇唯'},
{name: '李亞鵬'},
{name: '謝霆鋒'}
]
};
let {songs: [one, two, three], history: [first, second, third]} =
wangfei;
注意：頻繁使用對象方法、數組元素，就可以使用解構賦值形式
1.5 模板字符串
模板字符串（template string）是增強版的字符串， 用反引號（`）標識，特點：
- 字符串中可以出現換行符
- 可以使用 ${xxx} 形式輸出變量
// 定義字符串，可以出現換行
let str = `<ul>
<li>大傻</li>
<li>二傻</li>
<li>三傻</li>
<li>四傻</li>
</ul>`;
// 變量拼接
let star = '我';
let result = `${star}不是傻子`; //result的值是字符串變量"我不是傻子"
注意：當遇到字符串與變量拼接的情況使用模板字符串
1.6 簡化對象寫法
ES6 允許在大括號里面，直接寫入變量和函數，作為對象的屬性和方法。這
樣的書寫更加簡潔。
let name = '小高';
let skills= '我會前端開發';
let improve = function () {
console.log('努力提高自己');
}
//屬性和方法簡寫
let obj= {
name, //相當于name:name，輸出小高
skills, //相當于skills:skills,輸出我會前端開發
improve,
change() {
console.log('你一定可以蛻變')
}
};
<font color="red">注意：對象簡寫形式簡化了代碼，所以以后用簡寫就對了</font>
1.7 箭頭函數
ES6 允許使用「箭頭」 （=>）定義函數。
/**
* 1. 通用寫法
*/
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
箭頭函數的注意點:
- 如果形參只有一個，則小括號可以省略
- 函數體如果只有一條語句，則花括號可以省略，函數的返回值為該條語句的
執行結果 - <font color="red"> 箭頭函數 this 指向聲明時所在作用域下 this 的值</font >
-
箭頭函數不能作為構造函數實例化
在這里插入圖片描述 -
不能使用 arguments
在這里插入圖片描述 - 下面是箭頭函數簡寫的幾種情況
/**
* 2. 省略小括號的情況，當形參只有一個的時候
*/
let fn2 = num => {
return num * 10;
};
/**
* 3. 省略花括號的情況,
* 當代碼體只有一條語句，而且語句的執行結果就是函數的返回值
*/
let fn3 = score => score * 20;
/**
* 4. this 指向聲明時所在作用域中 this 的值
*/
let fn4 = () => {
console.log(this);
}
let school = {
name: '小高',
getName(){
let fn5 = () => {
console.log(this);
}
fn5();
}
};
注意：箭頭函數不會更改 this 指向，用來指定回調函數會非常合適
1.8 rest 參數（剩余參數）
ES6 引入 rest 參數，用于獲取函數的實參，用來代替 arguments
/**
rest參數
* 作用與 arguments 類似
*/
function add(...args){
console.log(args);
}
add(1,2,3,4,5); //args打印出來是一個數組
/**
* rest 參數必須是最后一個形參
*/
function minus(a,b,...args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
//args里的值:[2,3,4,5,19]
在這里插入圖片描述
<font color="red">注意： rest 參數非常適合不定個數參數函數的場景</font>
1.9 spread 擴展運算符（...）
擴展運算符（spread）也是三個點（...）。它好比 rest 參數的逆運算，將一
個數組轉為用逗號分隔的參數序列，對數組進行解包。
/**
* 展開數組
*/
let tfboys = ['德瑪西亞之力','德瑪西亞之翼','德瑪西亞皇子'];
function fn(){
console.log(arguments);
}
fn(...tfboys);
/**
* 展開對象
*/
let skillOne = {
q: '致命打擊',
};
let skillTwo = {
w: '勇氣'
};
let skillThree = {
e: '審判'
};
let skillFour = {
r: '德瑪西亞正義'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};
/*
*數組的合并
*/
const one = ["一","二"];
const two = ["三","四"];
const hebin = [...one,...two];
consle.log(hebin ); //=>相當于["一","二","三","四"]
/*
*數組的克隆
*/
const one = ["一","二"];
const kelong = [...one];
consle.log(kelong);//=>相當于["一","二"]
在這里插入圖片描述
1.10 Symbol
1.10.1 Symbol 基本使用
ES6 引入了一種新的原始數據類型 Symbol，表示獨一無二的值。它是
JavaScript 語言的第七種數據類型，是一種類似于字符串的數據類型。
Symbol 特點
- Symbol 的值是唯一的，用來解決命名沖突的問題
- Symbol 值不能與其他數據進行運算
- Symbol 定義 的 對象屬 性 不能 使 用 for…in 循 環遍 歷 ，但 是可 以 使 用Reflect.ownKeys 來獲取對象的所有鍵名
//創建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1); //打印輸出 Symbol "symbol"
//添加標識的 Symbol
let s2 = Symbol('高');
let s2_2 = Symbol('高');
console.log(s2 === s2_2); //false
//使用 Symbol for 定義
let s3 = Symbol.for('高官厚祿');
let s3_2 = Symbol.for('高官厚祿');
console.log(s3 === s3_2); //true
<font color="red">注: 遇到唯一性的場景時要想到 Symbol</font>
1.10.2 Symbol 內置值
除了定義自己使用的 Symbol 值以外， ES6 還提供了 11 個內置的 Symbol 值，指向語言內部使用的方法。 可以稱這些方法為魔術方法，因為它們會在特定的場景下自動執行。
| 內置值 | 場景 |
|---|---|
| Symbol.hasInstance | 當其他對象使用 instanceof 運算符，判斷是否為該對象的實例時，會調用這個方法 |
| Symbol.isConcatSpreadable | 對象的 Symbol.isConcatSpreadable 屬性等于的是一個布爾值，表示該對象用于 Array.prototype.concat()時，是否可以展開。 |
| Symbol.species | 創建衍生對象時，會使用該屬性 |
| Symbol.match | 當執行 str.match(myObject) 時，如果該屬性存在，會調用它，返回該方法的返回值。 |
| Symbol.replace | 當該對象被 str.replace(myObject)方法調用時，會返回該方法的返回值。 |
| Symbol.search | 當該對象被 str. search (myObject)方法調用時，會返回該方法的返回值。 |
| Symbol.split | 當該對象被 str. split (myObject)方法調用時，會返回該方法的返回值。 |
| Symbol.iterator | 對象進行 for...of 循環時，會調用 Symbol.iterator 方法，返回該對象的默認遍歷器 |
| Symbol.toPrimitive | 該對象被轉為原始類型的值時，會調用這個方法，返回該對象對應的原始類型值。 |
| Symbol. toStringTag | 在該對象上面調用 toString 方法時，返回該方法的返回值 |
| Symbol. unscopables | 該對象指定了使用 with 關鍵字時，哪些屬性會被 with環境排除。 |
<font size=4>相關推薦：wantLG的《普歌-碼上鴻鵠團隊復習總結：js 高級 ECMAScript 6（es6新特性）(下)》</font>
- 作者：wantLG
- 本文源自：wantLG的《普歌-碼上鴻鵠團隊復習總結：js 高級 ECMAScript 6（es6新特性）(上)》
- 本文版權歸作者和CSDN共有，歡迎轉載，且在文章頁面明顯位置給出原文鏈接，未經作者同意必須保留此段聲明，否則保留追究法律責任的權利。
