細心使用es6的語法

語言: CN / TW / HK

let/const

  • 塊作用域裏,和函數作用域類似,存在變量提升
  • let/const作用於塊作用域
  • let也存在變量提升,但是 JS 不允許你在聲明語句前使用,聲明語句前都是暫時性死區
  • const聲明必須賦值,普通值不可被修改,引用類型的值不可修改引用指向,但是可以對其中的屬性修改
  • let/const 可以替換掉var
 console.log(name)
 var name =1
{
  // 這裏會報錯喲,因為塊作用域存在變量提升,但是這裏是暫時性死區,訪問不到name
 console.log(name)
 let name =2
}
// 依舊是1,塊作用域有自己的變量
console.log(name)
// 報錯,沒賦值
const a
const b =1
const obj = {a: 1}
// 報錯,修改引用指向
obj = {b: 1}
const arr= [1,2]
// 這樣是沒問題的
arr[1]=3

複製代碼

解構

  • 數組可以佔位解構,注意嚴格和位置有關
  • 對象和位置無關,和屬性名稱有關,可以重命名屬性名稱,也可解析嵌套結構
// 佔位賦值
const [a, , c] = [1, 2, 3];
// 位置無關,屬性名有關,可以重新命名新變量
const { name, age: newAge } = { age: 10, name: "yan" };
// 10
console.log(newAge);

const school = {
  classes: {
    stu: { name: "Bob", age: 24 }
  }
};
// 可嵌套結構
const {
  classes: {
    stu: { name, age }
  }
} = school;
// 24
console.log(age);
複製代碼

擴展運算符...

  • 對象中的擴展運算符,常用於取出參數對象中的所有可遍歷屬性,拷貝到當前對象之中
  • 數組中擴展運算,可以將一個數組轉為用逗號分隔的參數序列,一般用途如下:
    • 把數組變成函數的參數
    • 合併數組
    • 利用 rest 參數(把零散的參數合併成一個數組,很適合用來處理參數不固定)
    • 把類數組(類數組是有 length 屬性的對象)轉化為數組
const me = { name: "yan", age: 24 };
const meCopy = { ...me };
// { name: "yan", age: 24 }
console.log(meCopy);
// ha he xi
console.log(...["ha", "he", "xi"]);

function multiple(x, y) {
  return x * y;
}
const arr = [2, 3];
// 6
multiple(...arr);

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
// 合併數組
const newArr = [...arr1, ...arr2];

// rest參數,很適合用來處理參數不固定
function add(...args) {
  let result = 1;
  for (var val of args) {
    result += val;
  }
  return result;
}
// 10
add(1, 2, 3, 4);

const arrayLike = { 0: "Bob", 1: "Lucy", 2: "Daisy", length: 3 };
// 類數組轉化成數組,下面還有兩種瞭解下
const arr = [...arrayLike];
// const arr = Array.prototype.slice.call(arrayLike);
// const arr = Array.from(arrayLike);
複製代碼

模板字符``

  • 可用${}這樣簡單的方式嵌入變量
  • 在模板字符串中,空格、縮進、換行都會被保留 (超合適寫 DOM 節點)
  • 模板字符串完全支持“運算”式的表達式,你可以在${}裏完成一些計算
let name = 'yan'
let newName = `${name} jiang`
let list = `
<ul>
  <li>列表項1</li>
  <li>列表項2</li>
</ul>
`;
console.log(message); // 順利輸出,不存在報錯

function add(a, b) {
  // 可做計算
  const finalString = `${a} + ${b} = ${a + b}`;
  console.log(finalString);
}
// 輸出 '1 + 2 = 3'
add(1, 2);
複製代碼

字符串的實用方法

  • 存在性判定。以前只能用indexOf>-1,現在可靈活使用includes、startsWith、endsWith
  • 自動重複。repeat方法讓同一個字符串被連續複製多次
const son = 'ha'
const father = 'xi he ha'
 // true
father.includes(son)
// false
father.startsWith(son)
// true
father.endsWith(son)

const sourceCode = 'repeat '
// 複製3次
const repeated = sourceCode.repeat(3)
// 'repeat repeat repeat '
console.log(repeated)
複製代碼