es6那些事儿

一、参考链接

http://www.ecma-international.org/ecma-262/6.0/index.html
http://www.ecma-international.org/ecma-262/7.0/index.html
http://www.ecma-international.org/ecma-262/8.0/index.html
http://es6.ruanyifeng.com/
https://developer.mozilla.org/zh-CN/

二、安装依赖

cnpm i -D babel-preset-env babel-loader babel-core babel-polyfill babel-plugin-transform-runtime

查看浏览器对es6的支持情况

cnpm i -g es-checker
es-checker

三、文件配置

//webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

四、声明变量
1、关键字
var
function
let
const
import
class
2、var，let，const
var声明的变量存在变量提升，会初始化为undefined；
let声明的变量不存在变量提升，会保持为未初始化的状态。let声明块级作用域，不存在变量提升，暂时性死区(封闭性作用域)，不允许重复声明。尽量避免在块级作用域内声明函数，如果确实需要，也应该写函数表达式，而不是写函数声明。
const声明的变量不是值不能修改，而是变量指向的内存地址不能修改。声明块级作用域，不存在变量提升，暂时性死区(封闭性作用域)，不允许重复声明。
3、全局变量和顶层对象

顶层对象，在浏览器环境指的是window对象，在Node指的是global对象。es5中，全局变量是顶层对象的属性，es6中不是。

//获取顶层对象
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

五、变量的解构赋值
变量的解构赋值，等号右边可能是数组，对象，字符串，数值，布尔值。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
1、数组

let [a, b, c] = [4, 5, 6];

只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

let [k = 1] = [undefined];
let [x, y, z] = [1,,5];

2、对象

let { m, n } = { m: "aaa", n: "bbb" };
let { l = "ccc", m = l } = { m: "aaa", n: "bbb" }; //默认值设置成功，m为"aaa"
let { m: l } = { m: "aaa", n: "bbb" }; // 模式匹配成功，l为"aaa"

3、字符串

let [a, b, c] = "hello";
let { length: len } = "hello"; // len为5

4、数值和布尔

let { toString: s } = 12; //s === Number.prototype.toString
let { toString: s } = true; //s === Boolean.prototype.toString

5、函数

//函数参数的默认值是空对象，函数设置了对象解构赋值的默认值。
function fn1({x = 0, y = 0} = {}) {
  return [x, y];
}
console.log(fn1({})); //[0, 0]

//函数参数的默认值是有具体属性的对象，函数没有设置对象解构赋值的默认值。
function fn2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
console.log(fn2({})); //[undefined, undefined]
console.log(fn2({x:2,y:5}));

六、字符串的扩展
1、一些函数

'hello'.includes('l'); //true
'hello'.startsWith('h'); //true
'hello'.endsWith('o'); //true
'hello'.repeat(3); //"hellohellohello"
'hello'.padStart(8,'hi,'); //"hi,hello"
'hello'.padEnd(11,',world'); //"hello,world"

2、模板字符串

let name = "camille";
console.log(
  `hello，my name is ${name}`
);

let h = document.querySelector('body');
h.innerHTML = `<h1 style="color:red">您好</h1>`;

3、标签模板
标签模板是函数调用的另一种形式，即模板字符串跟在函数名后面。这里的标签指的是函数，模板字符串就是函数的参数。

//过滤HTML字符串，防止用户输入恶意内容。
function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);

    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    s += templateData[i];
  }
  return s;
}

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

console.log(message);

七、函数的rest参数和数组的扩展操作符
咋一看，都是3个点，函数的rest参数可以把参数序列转换为数组。数组的扩展操作符，...可以把数组转换为参数序列，[...]把具有iterator接口的对象转换为数组，[...]把字符串转换为数组。

八、在html中写es6

<script type="text/babel">
   // 你的ES6代码
</script>