JS-ES6

这篇文章是关于ES6（ECMAScript 2015）新特性的介绍和教学，作者通过具体的代码示例和解释，帮助读者理解和掌握这些新特性。下面是对文章中提到的ES6特性的总结和注释：

1. ES6 块级作用域 let
   ○ 在ES6之前，JavaScript只有全局作用域和函数作用域。let关键字的引入为JavaScript带来了块级作用域，这意味着变量只在定义它的代码块内有效。

{
  var a = "🍉";
  let b = "⛳";
}

console.log(a); // 🍉
console.log(b); // Uncaught ReferenceError: b is not defined
2. ES6 解构数组
○ 解构数组允许我们从数组中提取值并赋值给新的变量，使得代码更加简洁。

function breakfast() {
  return ['🍉', '🍔', '🍕'];
}
let [a, b, c] = breakfast();
console.log(a, b, c); // 🍉 🍔 🍕

3. ES6 解构对象
   ○ 类似于数组解构，对象解构允许我们从对象中提取属性并赋值给新的变量。

function breakfast() {
  return { a: '🍉', b: '🍕', c: '🍔' };
}
let { a, b, c } = breakfast();
console.log(a, b, c); // 🍉 🍕 🍔

4. ES6 模板字符串
   ○ 模板字符串允许嵌入表达式，字符串拼接更加方便。

let a = '🍉';
let b = '🖼️';
let d = `今天吃 ${a} 吃完看 ${b}`;
console.log(d); // 今天吃 🍉 吃完看 🖼️

5. ES6 默认参数
   ○ 函数参数可以设置默认值，当传递的参数未定义时使用默认值。

function say(str = '嘿嘿') {
  console.log(str);
}
say(); // 嘿嘿
say('❤️'); // ❤️

6. ES6 展开操作符
   ○ …可以用来展开数组或对象，使得操作更加便捷。

let arr = ['❤️', '😊', '😍'];
console.log(...arr); // ❤️ 😊 😍
let brr = ['王子', ...arr]; // ['王子', '❤️', '😊', '😍']

7. ES6 剩余操作符
   ○ 剩余操作符…用在函数参数上，可以收集剩余参数为一个数组。

function f1(a, b, ...c) {
  console.log(a, b, c);
}
f1('🍎', '🌈', '☃️', '㊙️'); // 🍎 🌈 [ '☃️', '㊙️' ]

8. ES6 函数名字
   ○ 使用.name属性可以获取函数的名字。

function f1() {}
let f2 = function () {};
let f3 = function f4() {};
console.log(f1.name); // f1
console.log(f2.name); // undefined
console.log(f3.name); // f4

9. ES6 箭头函数
   ○ 箭头函数提供了一种更简洁的函数语法，并且它不绑定自己的this，arguments，super或new.target。

let f1 = a => a;
let f2 = (a, b) => { return a + b; };
console.log(f1(10)); // 10
console.log(f2(10, 10)); // 20

10. ES6 对象表达式
    ○ ES6允许在对象字面量中使用属性名缩写和方法定义的简写。

let a = '㊙️';
let b = '☃️';
const obj = {a, b, say() {}};
console.log(obj); // { a: '㊙️', b: '☃️', say: [Function: say] }

11. ES6 恒量
    ○ 使用const关键字定义恒量，一旦赋值后不可更改。

const app = ['☃️', '🌈'];
app.push('🤣'); // 合法
app = 10; // TypeError: Assignment to constant variable.

12. ES6 对象属性名
    ○ 使用方括号[]定义对象属性名，可以包含特殊字符或空格。

et obj = {};
let a = 'little name';
obj[a] = '小王子';
console.log(obj); // { 'little name': '小王子' }