ES6学习笔记（二）

1、函数参数的默认值

es6的函数参数默认值

      function fn(形参1=默认值,形参2=默认值){}

      箭头函数：(形参1=默认值,形参2=默认值)=>{}

    function fn(a, b) {
      console.log(a, b, 'fn'); //1 2
    }
    fn(1, 2)

    /* 
      参数没有传递实参时就会用默认值
      参数传递实参时就使用所传递的值
    */
    function fun(a = 10, b) {
      console.log(a, b, 'fun');  //10 undefined
    }
    fun()

    /* 
      箭头函数
        若箭头函数只有一个形参，但设置了默认值，就不能省略小括号
    */
    var func = (a = 'hello') => { console.log(a); }
    func(123) // 123
    func() // hello

---

2、 扩展运算符

es6的扩展运算符

      ...作用于数组和对象

      作用：作为展开运算符使用；作为合并运算符使用

    // 作为展开运算符展开数组
    var arr = [10, 20, 30]
    console.log(...arr); //10 20 30
    // 展开后可作为方法的实参使用
    var res = Math.max(...arr)
    console.log(res); //30
    // 展开后作为新数组的元素
    var newArr = [1, 2, 3, ...arr]
    console.log(newArr); //[1, 2, 3, 10, 20, 30]
    // 合并数组
    var arr2 = [7, 8, 9]
    var newArr2 = [...arr, ...arr2]
    console.log(newArr2); //[10, 20, 30, 7, 8, 9]


    // 展开对象
    var obj = { name: 'blue', age: 11 }
    var o = {
      a: 1,
      b: 2,
      ...obj
    }
    console.log(o); //{a: 1, b: 2, name: 'blue', age: 11}


    // 作为合并运算符使用
    function fn(...arg) {
      console.log(arg); //[1, 2, 3, 4, 100]
    }
    fn(1, 2, 3, 4, 100)

    // 箭头函数
    var fun = (n, ...arg) => {
      console.log(n); //1
      console.log(arg); //[2, 4]
    }
    fun(1, 2, 4)

---

3、解构赋值

es6的解构赋值

      作用：快速的从数据集合中获取数据

        解构数组

                语法：var [变量1,变量2] = 数组

        解构对象

                语法：var {键} = 对象

    var arr = ['blue', 'yellow', 'red', 'green']
    var [e] = arr
    console.log(e); //blue

    var arr = [1, 2, [3, 4, [5, [6]]]]
    var [a1, b1, c1] = arr
    console.log(a1, b1, c1); //1 2 [3, 4, Array(2)]

    var [a, b, [c, d, [e]]] = arr
    console.log(e); //5
    console.log(a, b, c, d, e); //1 2 3 4 5

    // 有数组[m,n] ===> 想得到：[n,m]
    var m = 100
    var n = 200
    var [m, n] = [n, m]
    console.log(n, 'n'); //100
    console.log(m, 'm'); //200

    // 解构对象
    var o = { a: 1, b: 2 }
    var { a, b } = o
    console.log(b); //2

    // 解构多级对象
    var info = {
      name: 'blue',
      love: { friend: 'red', friend1: 'yellow' }
    }
    var { name, friend } = info
    console.log(name); //blue
    console.log(friend); //undefined

    var { name, love: { friend } } = info
    console.log(friend); //red

    var friend1 = info.love.friend1
    console.log(friend1); //yellow

---

4、对象的简写

    对象的简写

      对象中当属性名和属性值变量名同名时，可只写一个属性名

    var name = 'blue'
    var age = 11
    var obj = {
      name: name,  // ===> 可简写成：name,
      age: age,  // ===> 可简写成：age
      // fn: function () { console.log('hello'); }
      fn() { console.log('hello'); } //简写
    }
    console.log(obj); //Object对象
    obj.fn() // hello

---

5、Set类型

    Set类型

      Set类型类似数组类型，是值的集合

      Set类型里的值是不会重复的

        Set常用的方法和属性有：size、add()、delete()、has()、clear()

    var arr = ['a', 'b', 123, true]
    var mySet = new Set(arr)
    console.log(mySet); // {'a', 'b', 123, true}

    // set常用的方法和属性
    // 1、size：返回Set实例的成员总数
    console.log(mySet.size); //4

    // 2、add：添加某一个值，返回Set结构本身
    mySet.add('c')
    console.log(mySet); //{'a', 'b', 123, true, 'c'}

    // 3、delete：删除某个值
    mySet.delete('a')
    console.log(mySet); //{'b', 123, true, 'c'}

    // 4、has：查找是否存在该值，返回布尔值(false：不存在，true：存在)
    console.log(mySet.has('a')); //false
    console.log(mySet.has('c')); //true

    // 5、clear：清空
    mySet.clear()
    console.log(mySet); //Set(0) {size: 0}

    // 数组去重
    var arr = [1, 2, 1, 3, 4, 5, 2, 4]
    var newSet = new Set(arr)
    var result = [...newSet]
    console.log(result); //[1, 2, 3, 4, 5]

---

6、Map类型

    Map类型

      类似对象类型，里面是一些键值对

        键值对是有序的，键名可以是任意类型

        Map常用的方法和属性有：size、set(键名,值)、get(键名)、delete(键名)、clear()

    var arr = [1, 2, 3]
    var myMap = new Map([
      ['name', 'blue'], //'键名'：name  值：blue
      ['age', 11],  //'键名'：age   值：11
      [1, 999], //'键名'：1 值：999
      [undefined, 23], //'键名'：undefined  值：23
      [true, 888], //'键名'：true 值：888
      [arr, function () { }] //'键名'：arr  值：function
    ])
    console.log(myMap);

    // map常用属性和方法
    // 1、size：查看键值对个数
    console.log(myMap.size); //6

    // 2、set：添加键值对
    myMap.set(null, 'answer')
    console.log(myMap);

    // 3、get：获取值(通过键名查找特定数值并返回)
    console.log(myMap.get(true)); //888

    // 4、delete：删除键值对(通过键名移除对应数据)
    myMap.delete(undefined)
    console.log(myMap);

    // 5、clear：清空
    myMap.clear()
    console.log(myMap);

Set和Map都是es6新增的数据结构

      Set是类数组结构，值是唯一的

      Map类似对象，也是键值对的集合，但键的类型范围不局限于字符串

        相比于Object类型的'键值对'    map结构提供了一个'值值对'

Set和Map的区别

      1、Map是键值对，Set是值的集合

      2、Map通过get方法获取值

      3、都可以通过迭代器进行for...of遍历

      4、Set值是唯一的，可数组去重，Map没有格式限制，可数据存储

---

7、for in和for of

for in 可以遍历对象和数组

for of 可以遍历数组、Map类型和Set类型

      相同点：都可以遍历数组

      不同点：for in可以遍历对象，for of不可以

    var arr = ['blue', 'red', 'yellow']
    var obj = { name: 'blue', age: 11 }

    // for in和 for of遍历数组
    for (var value in arr) {
      console.log(value); //0 1 2
    }
    for (var value of arr) {
      console.log(value); //blue red yellow
    }

    // for in和 for of遍历对象
    for (var value in obj) {
      console.log(value); //name age(对象里的键)
      console.log(obj[value]); //blue 11(对象里面的值)
    }
    /* for (var value of obj) {
      console.log(value); //Uncaught TypeError: obj is not iterable
    } */

---

8、模块化语法

 使用type=‘module’将js文件导入

  <script type="module">
    // 使用模块化语法导入js模块
    // 当使用模块化语法时，每个文件都被当作独立的文件看待===>一个文件就是一个作用域
    // 每个模块里的数据只能自己模块使用
    import { rander, rander2 } from './public.js'
    console.log(rander2); //返回rander2函数

    // 导入外部js文件并对其重命名
    import { rander as n } from './public.js'
    console.log(n);
  </script>

<-- public.js文件 -->
export function rander(m, n) {
  var min = Math.min(m, n)
  var max = Math.max(m, n)
  // 向上取整，小数部分清零，向整数进1
  min = Math.ceil(min)
  // 向下取整，小数部分清零
  max = Math.floor(max)
  return min + Math.floor(Math.random() * (max - min + 1))
}

export function rander2(m, n) {
  var min = Math.min(m, n)
  var max = Math.max(m, n)
  // 向上取整，小数部分清零，向整数进1
  min = Math.ceil(min)
  // 向下取整，小数部分清零
  max = Math.floor(max)
  return min + Math.floor(Math.random() * (max - min + 1))
}

// 通过import拿到js文件需要使用export default 传输出去

---

9、模板字符串

 模板字符串 `${}`

    var str = 'green'
    var age = 11
    var info = str + age
    console.log(info); //green11
    console.log(str + '今年已经' + age + '岁了');
    console.log(`${str}明年就${age + 1}岁了`);