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>

ECMA

es6那些事儿