ES6系列---【ES6新语法】

1、ES6与JavaScript的区别

​ ES6仅仅是一种语法规范。JavaScript只是ES6的一种实现，具体实现到多少看浏览器厂家执行规范的程度。javascirpt 还包括DOM、BOM，另外JavaScript还可以应用与后台开发环境例如node。

2、let 与 const

ES6新增用于声明变量的语法。

2.1 let与var的区别

a) var 是函数作用域，let是块作用域

• let与var 用法是一样的

• let在 if、for循环等语句中声明的变量也是局部变量

• 优点：et声明的变量可以防止全局污染。容易产生bug

b) var 有变量提升，let不存在变量提升

• let变量声明必须先声明，再使用，否则报错；

• 优点：对于开发者来说，代码更严谨，报错更加一目了然，容易排除。

c) var 可以重复声明的，let在同一作用域下不能重复声明

• 函数的形参let 也不允许重复声明。

• 优点：在复杂的项目开发中，程序员重复声明变量在所难免，var的情况不报错，不易觉察，容易产生bug。let直接报错，比较直观容易排除

2.2 let变量在for循环中的应用

​ let变量在for循环中，分为父作用域和子作用域。for循环的圆括号中的变量是父作用域中，for循环的大括号实际为子作用域。

  var btns = document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        alert(i + 1);
      }
    }

3、const 常量

const常量用于项目中不经常会改变的内容。例如：地址，数据库账号，密码、圆周率PI

• const特征：

• 一旦被声明并赋值后不可再改动

• 声明和赋值必须同时进行

• 其他特征和let一样

• 约定俗称：常量名称大写

• 特殊说明：

  const常量对于复杂类型来说，只能保证保存地址的不能被更改，至于地址指向的内容是可以修改的。

4、et变量与顶级对象（window）解绑

• var 声明的全局变量，实际上是window对象的属性，这是JavaScript遗留的设计败笔
• 从ES6开始，let 声明的变量与window对象不再绑定

 let a = "ok";
 console.log( window.a ); //undefined

4、解构赋值

​ 解构赋值： ES6按照一定的模式，将结构化的数据（数组、对象）中的数据提取出来，赋值给变量

• 总结特征:

  • 必须有赋值运算符(等号)
  • 等号的前面是模式和变量
  • 等号的后面是数组或对象

• 数组解构赋值的几种情况

• 要解构的数据和变量一一对应

• 要解构的数据比变量多，没有影响

• 要解构的数据比变量少，解构失败变量的值为undefined

• 解构赋值允许使用 空的逗号实现缺省

• 解构赋值的默认值（当解构赋值失败时或者严格等于undefined时默认值生效）

let [x=1,y=x] = []; // x=1 y=1
let [x=1,y=x] = [2]; //x=2, y=2
let [x=1,y=x] = [1,2]; //x=1 y=2
let [x=y,y=1] = []; //报错，变量y未声明即使用了

• 对象解构赋值的情况

• 对象的解构赋值，因为对象中的属性没有次序，因此对象必须依靠键的匹配实现解构赋值。

• 对象解构赋值的默认值（当解构赋值失败时或者严格等于undefined时默认值生效）

// let {name:xxx,sex:yyy,age:zzz} = {name:"张三",age:20,sex:"男"}
  // console.log( xxx, yyy,zzz);
  // 实际可能写为：
  // let {name:name,sex:sex,age:age} = {name:"张三",age:20,sex:"男"}
  // console.log( name,sex,age);
  // ES6允许简化为：
  let {name,sex,age} = {name:"张三",age:20,sex:"男"}
  console.log( name,sex,age);

• 函数形参的解构赋值

  • 可利用数组实现解构赋值。注意声明函数时的形参此时不是数组，是模式和变量

   function fn([a,b,c]){
      console.log( a+b+c );
    }
    fn([2,3,4]); */
    // 相当于
    // let [a,b,c] =  [2,3,4]   
  

  • 利用对象实现函数解构赋值。注意，声明函数时的形参不是对象，是模式和变量

  function demo({x,y}){
      return x*y
    }
    console.log( demo({x:2,y:2}) ); */
    // 相当于
    // let {x,y} = {x:2,y:2}
  

  • 函数形参解构赋值时的默认值

  function fn({x=0,y=0}){
      return x*y
    } */
    // console.log( fn({x:1}) )
  

5、解构赋值应用场景

1） 交换变量的值

2） 获取函数的多个返回值

3）利用解构赋值实现ajax封装函数

  // 利用解构赋值实现ajax封装函数。可灵活使用解构赋值的默认值，这样调用函数时只需要传递必要的参数即可
  function sendAjax({type="get",url,data=null,dataType="json",timeout="5000"}) {
    $.ajax({
      type: type, //请求的方法 get post
      url: url,  //请求的地址
      data: data, // 请求时发送的数据
      dataType: dataType, //期望返回的数据类型
      // ajax成功后的回调函数
      success: function (response) {
        console.log(respnse);
      },
      // 失败时的回调函数
      error: function (err) {
        console.log(err);
      }
    });
  }
  // 函数调用时传递实参为一个对象
  sendAjax({url:"http://baidu.com/01.json"});
  sendAjax({url:"http://baidu.com/02.json"});

以上代码进一步优化为：

将封装函数保存为外部js, 需要时引用：

  // 利用解构赋值实现ajax封装函数。可灵活使用解构赋值的默认值，这样调用函数时只需要传递必要的参数即可
  function sendAjax({type="get",url,data=null,dataType="json",timeOut="5000"},callback) {
    $.ajax({
      type: type, //请求的方法 get post
      url: url,  //请求的地址
      data: data, // 请求时发送的数据
      dataType: dataType, //期望返回的数据类型
      // ajax成功后的回调函数
      success: function (response) {
        // console.log(respnse);
        callback(response)
      },
      // 失败时的回调函数
      error: function (err) {
        console.log(err);
      }
    });
  }

<script src="./sendAjax.js"></script>
<script>
sendAjax({type:"post",url:"http://api.shenzhou888.com.cn/v2/ecapi.banner.list"},function(data){
    // 渲染页面代码
    console.log( data );
  });
</script>

6、字符串扩展--模板字符串

​ ES6可以使用模板字符串(``) 代替原来的繁琐的拼字符串渲染页面的方式。可以使用 ${ } 来嵌套变量或js表达式。

  let str = `<ul>
      <li><span class="name">姓名:</span><span class="uname">${student.name}</span></li>
      <ul>
        <li>${ "语文:"+ student.score[0]}</li>
        <li>${ "数学:"+ student.score[1]}</li>
        <li>${ student.score[2]}</li>
      </ul>
      <li>性别:${ student.sex }</li>
    </ul>`;

    let box = document.getElementById("box");
    box.innerHTML = str;

7、ES6对象扩展

• 允许属性名简写

  let name = "jack";
  let sex = "男"
  let obj = {
    name,
    sex,
    say(){
      console.log( name );
    }
  }

• ES6支持对象的键为表达式

let city = {};
  for(let i=0;i<26;i++){
    console.log( String.fromCharCode(i+65) );
    let key = String.fromCharCode(i+65);
    city[key] = [];
  }

• 几个静态方法
  • Object.assign() 对象的合并
  • Object.keys() 获取对象上所有的键，以数组的形式返回
  • Object.values() 获取对象上所有的值，以数组的形式返回

  // 对象的合并，第一个参数为合并的目标对象
  let obj1 ={ name:"jack"};
  let obj2 = { sex:"男"};
  Object.assign(obj1, obj2);

  console.log( obj1 );

8、数组扩展

• Array.from() 将类数组对象转换为真正的数组

  // nodelist, htmlCollection, argument 类数组对象
// 典型的类数组对象的形式：
  let obj = {
    "0":"hello",
    "1":"world",
    "length":2
  }
  console.log( obj );
  console.log( Array.from(obj) );

• includes()

​ 用来查找数组中是否存在指定的值，有就返回true, 没有返回false。与indexOf的功能类似。

  // includes() 用来查找数组中是否存在指定的值，有就返回true, 没有返回false。解决了indexOf()对NaN无效的bug
  let arr = [2,3,4,5,NaN];
/*   if( arr.indexOf(NaN) != -1 ){
    console.log("找到了");
  }else{
    console.log("没找到");
  } */
  if( arr.includes(NaN) ){
    console.log("找到了");
  }else{
    console.log("没找到");
  }

9、函数扩展

ES6可以使用箭头（=>）来简化函数的声明。

• 特征： 用 => 替换了 function

• =>的后面：

  • 如果函数体内只有一行代码，大括号可省略
  • 如果只有一行代码而且是return语句，return 也可省略
  • 如果只有一行代码而且是retrun一个对象，为了避免歧义，要使用圆括号包起来

• =>的前面:

  • 如果只有一个形参，圆括号也可以省略
  • 如果有多个或者没有形参，圆括号不能省略

• 箭头函数中的this指向规律

• ES6之前的普通函数中this指向规律：

  1）在全局函数或定时器的回调函数中this指向 window

  2）在事件处理函数中this指向事件源

  3）在对象的方法中this指向对象本身

  4）可使用call/apply/bind 改变this指向

• ES6中箭头函数的this指向规律：

  1）定义好箭头函数后，this的指向就确定了，与call/apply等没有关系

  2）永远指向其上层环境（环境指的的是函数内或全局下，只有这两种情况，其他的大括号不能称为环境）

  function Person(){
    let fn1 = ()=>{
      console.log( this );
    }
    fn1();
  }
// 1、Person当普通函数调用时
  // Person();
// 2、Person当构造函数使用时,构造函数中的this发生了改变，指向创建的新对象。那么箭头函数中的this也指向新创建的对象。
  new Person();

• 箭头函数的不适应用的情况：

​ 1）事件处理函数中；

​ 2）对象的方法中；

​ 3）构造函数中

函数形参的默认值

  // 函数形参的默认值
  function fn(name="杨营"){
    // if(!name){
    //   name = "杨营";
    // }
    // name = name || "杨颖";  //短路语法
    console.log(`我是:${name}` );
  }
  fn("刘子琪")

rest剩余参数运算符 和 spread 扩展运算符

rest 剩余参数，用于获取多余（全部）的实参并放入一个数组中。

  // rest剩余参数运算符(...)，只出现在函数形参声明处，作用可代替arguments，实现将实参转换为数组
  function fn(...c){
    console.log( Array.from(arguments)  );
    console.log( c );
  }
  fn(1,2,3,4,5,6)

spread扩展运算符(...)，作用是将结构化的参数（数组，对象）转换为逗号分隔的参数序列。类似rest的逆运算。

/*   let arr = [2,3,4,5]
  console.log( ...arr );
 */
  // 应用场景1 -- 函数传参
/*   let arr = [2,5,0,9];
  console.log( Math.min(...arr) );  */
  // 应用场景2--数组合并
  let arr1 = [2,3,4,5];
  let arr2 = ["hello","ok"];
  let arr3 = [...arr1,...arr2];
  // 对象合并
  let obj1 = {
    name:"jack"
  }
  let obj2 = {
    age:20
  }
  let obj3 = {
    ...obj1,
    ...obj2
  }
  console.log( obj3 );

10、symbol 类型

​ symbol是ES6新增的数据类型，string、number、boolean、null、undefined、object、symbol。

  // symbol类型，作用是产生一个永不和其他symbol相同的独一无二的值。
  // 创建symbol时可添加一个参数，起到在控制台输出时的区分作用，类似于程序中的注释，对程序的执行没有任何影响
  let s1 = Symbol("老大");
  let s2 = Symbol("老二");
  console.log(typeof s1); 
  console.log( s1 == s2 ); //永远false
  console.log(s1,s2);

11、set数据类型

​ set 是ES6新增的类似数组的数据结构。特点：set中的成员永远是唯一，允许重复。set的主要作用是过滤数组中重复的项。

  // set 数据类型,类似数组的数据结构，作用：可以过滤到数组中重复的项
  let arr = [2,3,2,4,3,0,1,4];
  let s1 = new Set(arr);
  console.log( s1 );
  console.log( Array.from(s1) );

set 自有的属性和方法：

size set中成员的个数

add() 添加某个值

delete() 删除某个值

has() 返回一个布尔值，表明是否包含有某个值

clear() 清除set中所有成员

12、Map数据类型

​ Map是ES6新增的类似对象的数据结构，也是键值对的集合。

• 特点：键的范围不限于字符串，可以是各种类型的值都可以当做键，比object提供的‘字符串一值’的对应更加完善

• set 自有的属性和方法：

  • size 类似数组的length属性：size用于返回Map集合的内容长度
  • set(key,value)：添加一个键值数据
  • get(key):根据key获取value
  • has(key):返回布尔值，表明是否包含有某个值
  • delete(key):根据指定的key删除数据
  • clear():清除Map中所有成员,没有返回值

  //Map基本使用
  let m = new Map();
  m.set('c', 'content')
  m.get('c')//content
  m.size//1
  m.has('c') // true
  m.delete('c')
  m.has('c')
  m.clear()
  

  //Map结构和数组结构之间的转换
  let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]);
  [...map.keys()]// [1, 2, 3]
  [...map.values()]// ['one', 'two', 'three']
  [...map.entries()]// [[1,'one'], [2, 'two'], [3, 'three']]
  [...map]// [[1,'one'], [2, 'two'], [3, 'three']]
  

• Map 循环遍历

  Map 原生提供三个遍历器:

  • keys()：返回键名的遍历器。
  • values()：返回键值的遍历器。
  • entries()：返回所有成员的遍历器

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator 属性），就是 entries 方法。
map[Symbol.iterator] === map.entries // true

​

​