ECMAScript 6内容整理（更新中...）

let var const 区别

var

1. var可以重复声明
   2. 作用域： 全局作用域 和 函数作用域
   3. 会进行预解析（变量声明提前）

let

1. 同一作用域下不能重复声明
   2. 作用域： 全局作用域 和 块级作用域
   3. 不进行预解析

const

1. 常量不能重新赋值
   2. 不能重复声明
   3. 块级作用域
   4. 不进行预解析

块级作用域

在{}中通过let const声明的变量和常量，只能在{}内使用，无法在{}外部使用

解构赋值

对象

• 声明的变量名必须和对象里面的名一致

let obj = {
  a: 1,
  b: 2
}
let { a, b } = obj; //a:1, b:2

数组

let arr = ["a", "b", "c"];
let [e, f] = arr; //e: a, f: b

/* 
 交换a b的值
*/
let a = 0;
let b = 1;
[a, b] = [b, a];

展开运算符

数组

let arr = [1,2,3,4];
let arr1 = ["a", "b", ...arr, "c", "d"]; //["a", "b", 1, 2, 3, 4, "c", "d"]
// 剩余参数
let [a, b, ...c] = arr;
console.log(a, b, c); //a: 1, b: 2, c: [3, 4]

对象

ler obj = {
  a: 1,
  b: 2
};
let obj1 = {
  ...obj,
  c: 3,
  d: 4
}
console.log(obj1); //{ a:1, b: 2, c: 3, d: 4 }
// 剩余参数
let {a, b, ...c} = obj1;
console.log(a, b, c); //1 2 { c: 3, d: 4 }

let obj = {
    a: 1,
    b: 2
}
/*
 情况一:
 修改obj1会影响到obj
*/
let obj1 = obj;
obj1.a = 10;
console.log(obj); //{ a: 10, b:2 }
/*
 情况二:
 修改obj1不会影响到obj
*/
let obj1 = { ...obj };
obj1.a = 10;
console.log(obj); //{ a:1, b:2 }

Set

构造函数 用来构建某一类型的对象 - 对象实例化

方法：size() clear() delete() add() has()

let arr = [2,1,2,1,3,'b',2,4,5,6,1];
let s = new Set(arr);
console.log(s); // {2,1,3,4,5,6}
console.log(s.size()); // size 数值的个数
console.log(s.clear()); // 清空所有值
console.log(s.delete('b')); //删除某一项内容
s.add(5).add(6).add(7);    // 添加一项内容
console.log(s.has('b')); //是否包含某一项内容

Map

方法：clear() delete() get() has() set()

let arr = [
  ["a", 1],
  ["c", 2],
  ["c", 3],
]
let m = new Map(arr);
console.log(m); // {"a" => 1, "b" => 2, "c" => 3}
console.log(m.clear()); // 清空所有值
console.log(m.delete("a")); // 删除某一项值
console.log(m.get("a")); // 获取某一项值
console.log(m.has("a")); // 是否包含某一项值
m.set("a", 2).set("d", 4); // {"a" => 2, "b" => 2, "c" => 3, "d" => 4}

函数新增方法

箭头函数写法：

let fn = num => num * 2; // 形参 => 返回值
let fn = (num1, num2) => num1 * num2; // (形参， 形参) => 返回值
let fn = () => "返回值"; // () => 返回值
let fn = () => {
  console.log('执行语句');
}
fn(); // () => { 执行语句 }

不定参

function fn () {
  console.log(arguments);
}
fn(1,2,3,4,5); // 1,2,3,4,5
let fn1 = () => {
  console.log(arguments);
}
fn1(1,2,3,4,5); // arguments is not defined 说明箭头函数没有arguments

rest参数（剩余参数）

let fn = (a, b, ...arg) => {
  console.log(a, b, arg);
}
fn(1,2,3,4); // 1 2 [3,4]

箭头函数的 this 问题

箭头函数本身没有 this ，调用箭头函数 this 时，指向其声明时，所在作用域的 this；

document.onclick = function () {
  let fn = () => {
        console.log(this); // 指向document
  }
  function fn1 () {
    console.log(this); // 指向window
  }
}
fn();

let fn;
let fn2 = function () {
  console.log(this);
  fn = () => {
    console.log(this);
  }
}
fn2 = fn2.bind(document.body); // 执行后指向body，否则指向window
fn2();
fn();

参数默认值

形参可以设置默认值

let fn = (a = 1, b = 3) => {
  console.log(a * b);
}

数组新增方法

Array.from

Array Array.from(arrayLike[, mapFn[, this.Arg]])
参数：
    arrayLike 类数组
可选参数：
    mapFn类似map方法，循环类数组时的回调函数，返回值组成新数组
  thisArg mapFn 函数执行时的 this 指向
返回值：
    根据 arrayLike 生成的新数组

Array.isArray

Boolean Array.isArray(data) 检测数据是否是个数组
参数：
    data 要检测的数据
返回值：
    true 数组， false 非数组

Array.of

Array Array.of(element0[, element1[, ...[, elementN]]]) 将参数转成一个数组
参数：
    elementN 要放入数组中的数据
返回值：
    新数组

Array.find

Value arr.find(callback[, thisArg]) 查找数组中满足要求的第一个元素的值
参数：
    callback
      在数组每一项上执行的函数，接受3个参数：
        element
          当前遍历到的元素
      index[可选]
                当前遍历到的索引
      array[可选]
                数组本身
可选参数：
    thisArg
      执行回调时作用 this 的对象
返回值：
    数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

Arrat.findIndex

Index arr.findIndex(callback[, thisArg]) 查找数组中满足要求的第一个元素的值的索引
参数：
    callback
      针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数：
    element
        当前元素
    index
        当前元素的索引
    array
        调用findIndex的数组
可选参数：
    thisArg
      执行callback时作为this对象的值
返回值：
    满足要求值的索引

Array.flat

Array arr.flat([depth]) 扁平化多维数组
可选参数：
    depth
      指定要提取嵌套数组结构深度，默认值为1
       如果depth：Infinity 有多少层提取多少层
返回值：
    一个包含将数组与子数组中所有元素的新数组

Array.flatMap

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])
参数：
    callback
      可以生成一个新数组中的元素的函数，可以传入三个参数：
    currentValue
        当前正在数组中处理的元素
    index 可选
        可选的 数组中正在处理的当前元素的索引
    array 可选
        可选的 被调用的 map 数组
可选参数：
    thisArg
      执行 callback 函数时 使用 this 值
返回值：
    一个包含将数组与子数组中所有元素的新数组

Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false

arr.includes(valueToFind[, fromIndex])
参数：
    valueToFind
      查找需要的元素值
      注：使用includes()比较字符串和字符时是区分大小写的
  fromIndex
      从fromIndex索引开始查找valueToFind。如果为负值，则按升序从array.length + fromIndex     的索引开始搜索（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
返回值：
    返回一个布尔值 Boolean ，如果在数组中找到了（如果传入了 fromIndex ，表示在 fromIndex 指定的索引范围中找到了）则返回 true 。