es6新特性

ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

以下是一些常用到的es6新特性：

1、 let const 的概念以及与var的区别

详情跳转至var、let、const的区别

2、模板字符串（就是反引号引起来的字符串）

例如：

  <script>
      let  people={
          name:"xiaoming",
          age:12,
        }
        console.log("我是"+people.name+",今年"+people.age+"岁");//我是xiaoming,今年12岁
        // 使用模板字符串 是用`${}`
        console.log(`我是${people.name},今年${people.age}岁`);//我是xiaoming,今年12岁
    </script>

<script>
        // 最终内容是一个值都可以注入模板字符串
        const sex ="nan";
        const xiao =function(sex){
            return sex="nan"?"男":"女"
        }
        console.log(`${xiao(sex)}`);//男
</script>

//例3（可带标签，实现换行等）
document.write (`  <table border="1" cellspacing="0" cellpadding="20">
        <tr>
            <td>模板字符串1</td>
        </tr>
        <tr>
            <td>模板字符串2</td>
        </tr>
  </table> `);

结果：

3、展开数组

作用：可以对数组元素进行展开

const arr = ['foo','bar','styring']
console.log(...arr) //结果：foo bar styring

4、对象字面量简写

ES6中，当对象键名与对应值名相等的时候，可以进行简写。方法也能够进行简写。

• 注意：简写的对象方法不能用作构造函数，否则会报错

const  num = '124'
const  obj = {
	name:'toney',
  // num: num,  //可简写如下：
  num,  
}
console.log(obj.num)  //124

5、箭头函数

详情跳转至箭头函数

6、函数传递参数的时候的默认值

  <script>
    function test(a=1){ //默认值
    console.log(a);
}
test()  // 1
test(2)  // 2
  </script>

注意： 如果调用函数的时候没有给定形参，那么输出的结果就是默认值1，如果给定了形参，那么就输出传的形参。

7、解构赋值

作用：快速从对象或数组中获取到成员
例1:

  <script>

let obj = {
  name : 'jack',
  age:18,
}

let { name,age } = obj //解构赋值

console.log(name,age);  //jack 18

  </script>

例2：

  <script>
const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}
const { classes: { stu: { name } }} = school
       
       console.log(name)  // Bob
  </script>

有时会遇到一些嵌套程度非常深的对象，可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据为止。

例3：

  <script>
function test(){
  let arr =['jack', 'rose', 'mackerel']
  let[a,b,c] = arr
  console.log(a,b,c);
}
test()
  </script>