关于ES6语法的 一些新的特性

1.新的变量声明 ：let ：块级作用域，解决全局污染问题

const ：常量 ，如π：3.1415927

class ：类 。var：弱类型  funciton ：方法 ， import ： 导入参数 export 导出参数（方法如下）

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
    return x * x;
}
//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); //
console.log(diag(4, 3)); //

2.ES 6 的解构赋值  ：let [a,b,c]=[1,2,3]  等价于 let a=1 ; let b=2 ;let c=3

3.字符串的扩展

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

模板字符串的替换 引入了 ${ 变量名 } 来占位字符串中的变量；如：

//before ES5
$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
//now ES6
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

标签模板：

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

alert`123`
// 等同于
alert(123)

var a = 5;
var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

string.raw()

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

函数的扩展：

• 允许赋默认值
• 与解构赋值默认值结合

  function foo({x, y = 5}) {
    console.log(x, y);
  }
  
  foo({}) // undefined, 5
  foo({x: 1}) // 1, 5
  foo({x: 1, y: 2}) // 1, 2
  foo() // TypeError: Cannot read property 'x' of undefined

• rest 参数 

  function add(...values) {
    let sum = 0;
    for (var val of values) {
      sum += val;
    }
    return sum;
  }
  add(2, 5, 3) //

• 箭头函数 （个人最喜欢这一点）相当于后端的lambda表达式其实是一种语法糖

  var f = v => v;
  等价于
  var f= function（v）{
  return v;
  }
  
  var f = () => 5;
  // 等同于
  var f = function () { return 5 };
  
  var sum = (num1, num2) => num1 + num2;
  // 等同于
  var sum = function(num1, num2) {
    return num1 + num2;
  };
  
  //小案例将数字字符串转换成数字数组

  var datas= '1,3,0,0,0,0,0,0,0,0';
  datas = datas.split(",");
  var IntArr=datas.map(data=>{console.log(data); return +data;});//保存转换后的整型字符串
  console.log(datas); // console.log`${datas}`
  console.log(IntArr);

  箭头函数有几个使用注意点。

  （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

  （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

  （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

  （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

数组的扩展：

• 扩展运算符：

  扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
  console.log(...[1, 2, 3])
  // 1 2 3
  
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  
  [...document.querySelectorAll('div')]
  // [<div>, <div>, <div>]

  function f(v, w, x, y, z) { }
  var args = [0, 1];
  f(-1, ...args, 2, ...[3]);

• 数组的合并

  // ES5
  [1, 2].concat(more)
  // ES6
  [1, 2, ...more]
  
  var arr1 = ['a', 'b'];
  var arr2 = ['c'];
  var arr3 = ['d', 'e'];
  
  // ES5的合并数组
  arr1.concat(arr2, arr3);
  // [ 'a', 'b', 'c', 'd', 'e' ]
  
  // ES6的合并数组
  [...arr1, ...arr2, ...arr3]
  // [ 'a', 'b', 'c', 'd', 'e' ]

• 扩展运算符可以与解构赋值结合起来，用于生成数组。

  const [first, ...rest] = [1, 2, 3, 4, 5];
  first //
  rest  // [2, 3, 4, 5]
  
  const [first, ...rest] = [];
  first // undefined
  rest  // []
  
  const [first, ...rest] = ["foo"];
  first  // "foo"
  rest   // []
  
  //如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

• 字符串转数组

  [...'hello']
  // [ "h", "e", "l", "l", "o" ]

对象的扩展：

• 属性和函数的简写

  function f(x, y) {
    return {x, y};
  }
  
  // 等同于
  
  function f(x, y) {
    return {x: x, y: y};
  }
  
  f(1, 2) // Object {x: 1, y: 2}
  
  var o = {
    method() {
      return "Hello!";
    }
  };
  
  // 等同于
  
  var o = {
    method: function() {
      return "Hello!";
    }
  };