【ES6】

一、什么是ES6

　　ES6（ECMAScript 6），简单来说就是JavaScripe的标准。不在赘述ES5和ES6区别，可以使用Babel将ES6转成ES5，提高可用性。

二、let和const命令

　　1、let和const命令声明变量没有变量提升，也就是说这种代码是不能正常执行的。

<script>
console.log(a);
let a = 10;
</script>

　　可以看到控制台打印ReferenceError

ReferenceError: Cannot access 'a' before initialization
    at ImportAndExportView.vue:4:13

　　2、let和const命令是块级作用域，对于也就是说变量a只在if块中起作用。

<script>
if (1 == 1) {
  let a = 10;
}
console.log(a);
</script>

　　可以看到控制台打印ReferenceError

main.js:14 ReferenceError: a is not defined

　　3、let和const命令不能重复声明

 　　4、const和let的区别在于const声明常量，声明之后对于基本属性，值不变，对于对象，可以修改属性。

一般来说，const使用的最多，除非确定是个变量，就使用let。

三、模板字符串

　　模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量　　　

<script>
// 自动识别多行数据
console.log(`string text line 1
string text line 2`);

// 字符串中嵌入表达式用$
let name = "Bob",
  time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
</script>

四、解构赋值

　　解构赋值是对赋值运算符的一种扩展，它针对数组和对象进行操作。

　　1、对对象进行解构赋值

<script>
let cla = {
  type: "12",
  name: "name",
};

// //不使用解构赋值
// let type = cla.type;
// let name = cla.name;

//使用解构赋值
let { type, name } = cla;

console.log(type, name);

//不完全解构
let obj = {
  a: {
    name: "123",
  },
  b: [],
  c: "hello,world",
};
// let { a } = obj;

//省略变量
let { a, ...res } = obj;
console.log(res);

//使用默认值
let { x, b = 30 } = { x: 20 };
</script>

　　2、对数组解构赋值

<script>
//对数组解构
let arr = [1, 2, 3];
// let [a, b] = arr;

//可嵌套
let [a, [b]] = [1, [2], 3];
console.log(a, b);
</script>

五、函数

　　1、带参数默认值的函数

<script>
//1设置默认参数
function add(a = 10, b = 20) {
  return a + b;
}

console.log(add());
//30
console.log(add(20));
//40

//2设置默认参数为函数
function add2(a = 10, b = getVal(5)) {
  return a + b;
}
function getVal(val) {
  return val + 5;
}

console.log(add2());
//20

//3剩余参数
//必须放在函数形参最后边
let book = {
  title: "eeee",
  auth: "123",
};

let { log } = console;
log(pick(book, "title", "auth"));

function pick(obj, ...keys) {
  console.log(keys);
  let result = Object.create(null);
  for (let i = 0; i < keys.length; i++) {
    result[keys[i]] = obj[keys[i]];
  }
  return result;
}
</script>

六、扩展运算符、箭头函数

<script>
//扩展运算符
//剩余运算符允许把后续剩余参数合并到一个数组中

//扩展运算符
//把一个数组分割，并将各个项作为分离的参数
const arr = [10, 20, 30, 40, 50];
const { log } = console;
// log(Math.max(...arr));
// 50

//箭头函数
//使用=>定义函数  function(){} 等于 () => {}
// let add = (a, b) => {
//   return a + b;
// };

//有些括号可以省略
let add = (val) => val;
log(add(3));
</script>

　　关于箭头函数的this指向问题：

　　this 永远指向 调用 包含 自己（this本身） 的 函数 对应的对象。举个例子

<script>
function test() {
  var a = 1;
  console.log(this.a);
}

test();
</script>

　　函数在最外层直接运行，调用test函数的地方是 window。因为外部window没有变量a，所以会报以下错误：

TypeError: Cannot read properties of undefined (reading 'a')

　　再看一个例子

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        console.log(this.name)
    }
}

obj.show(); // America

　　调用函数的是obj对象，所以this指向obj对象，obj对象中有属性‘name’，所以控制台打印America。

　　再看一则例子：

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        return function(){
            console.log(this.name);
        }
    }
}

var a = obj.show();
a(); // China

　　当a调用show方法时，a变量变成匿名函数。当调用a方法时，this指向window，那么window中的name值'China'，就被打印出来。

　　那么箭头函数解决了关于this的什么问题呢？

<script>
let PageHandle = {
  id: 123,
  init: function () {
    document.addEventListener("click", function (event) {
      // this.doSomeThings is not a function
      //   console.log(this);
      this.doSomeThings(event.type);
    });
  },
  doSomeThings: function (type) {
    console.log(`事件类型:${type},当前id:${this.id}`);
  },
};

PageHandle.init();
</script>

　　这段代码在点击页面时，会给出

Uncaught TypeError: this.doSomeThings is not a function
    at HTMLDocument.

　　这是因为调用this方法的类并非PageHandle，而是document。如果使用箭头函数，就可以消解这个问题

<script>
let PageHandle = {
  id: 123,
  init: function () {
    document.addEventListener("click", (event) => {
      // this.doSomeThings is not a function
      //   console.log(this);
      this.doSomeThings(event.type);
    });
  },
  doSomeThings: function (type) {
    console.log(`事件类型:${type},当前id:${this.id}`);
  },
};

PageHandle.init();
</script>

　　这是因为箭头函数没有this指向，它会捕获外部对象，所以this指向PageHandle。

七、迭代器Intertator用法

　　迭代器，又叫遍历器，作用是遍历不同数据结构，通常和生成器组合使用。

<script>
const items = ["one", "two", "three"];

//创建新的迭代器
const it = items[Symbol.iterator]();
console.log(it.next()); //{"value": "one","done": false} done 为false表示遍历继续，done为true表示遍历完成
console.log(it.next());
console.log(it.next());
console.log(it.next()); // done 变为 true
</script>

　　关于迭代器，在ES6中有语法糖for...of