es6学习：函数参数默认值、rest参数、扩展运算符和symbol数据类型

1. 函数参数默认值（es6允许给函数参数赋值初始值）

1.1 形参初始值  具有默认的参数，一般位置置后(潜规则)

    let add = (a, b, c = 10) => (a + b + c)
    let result1 = add(1, 2, 3)
    let result2 = add(1, 2)
    console.log(result1, result2) // 6  13

1.2 与解构赋值结合

    // 一般情况下的处理方式
    function connect1 (options) {
      let host = options.host
      let username = options.username
    }
    // 与解构赋值结合之后 
    function connect2 ({host="127.0.0.1", username, password, port}) {
      console.log(host, username, password, port) // loacalhost root root 3306
    }
    let connect =  ({
      host: 'loacalhost',
      username: 'root',
      password: 'root',
      port: 3306
    })
    connect2(connect)

      本人目前使用较多的还是一般情况下的处理方式，因为方便查看，但解构赋值结合后代码更简洁了。

2. rest参数

    es6引入rest参数，用于获取函数的实参，用来代替 arguments。

2.1 arguments    

    对于arguments，其是一个对应于传递给函数的参数的类数组对象，arguments对象不是一个Array。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。从打印的结果来看arguments代表

    其格式为object，是一个对象，打印arguments后从__proto__中可以看出其原型。获取的是函数的所有参数。使用方式为：

    // 获取实参的方式
    function date1 (a, b) {
      console.log(a, b)
      console.log(arguments) // 不是数组格式，原型是object类型。为对象
    }
    date1(1, 2, 3, 5, 6)

    对于argumens可以通过以下几种方式转化为真正的数组(就可以使用数组所包含的方法了)：：：》

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];

2.2 rest参数

    rest的格式为数组，数组对应的使用方法rest同样可以使用，无需转换，从输出打印的数据中可以看到rest的格式。

    // rest 参数
    function date2 (...args) {
      console.log(args) // args格式为数组  可以使用数组对应的方法，如filter some every map
    }
    date2(4, 5, 6)

    rest参数必须放在参数的最后，否则会报错。如果将...args放置在b之前，a之后，会报Uncaught SyntaxError: Rest parameter must be last formal parameter的错误，提示你rest参数必须放在最后。通过扩展运算符和解构赋值的特性，rest接收的参数是函数中参数分割后的剩余部分。

    // rest 参数必须要放到参数最后
    // 如
    function fn (a, b, ...args) {
      console.log(a, b, args)
    }
    fn(1,2,3,4,5,6)

3. 扩展运算符

    ...  扩展运算符能将 数组 转换为逗号分隔的 参数序列

    const boy1 = [1, 2, 3, 4, 5, 6]
    function test () {
      console.log(arguments)
    }
    test(boy1) // test( [1, 2, 3, 4, 5, 6] )
    test(...boy1) // test(1, 2, 3, 4, 5, 6)

3.1 合并数组

    const a = [1, 2, 3]
    const b = [3, 4, 5]
    const c = [...a, ...b] // 相当于 c = [1, 2, 3, 3, 4, 5]
    console.log(c)

3.2 数组的克隆

    const a = [1, 2, {'a': 3}]
    let c = [...a]
    console.log(c)
    c[0] = 0 // 深
    c[2].a = 2 // 浅
    console.log('a = ', a, 'c = ', c)

3.3 将伪数组转为真正的数组

    let divs = document.querySelectorAll('div')
    console.log(divs)
    let divArr = [...divs]
    console.log(divArr)

4. Symbol数据类型

      es6 引入一种新的原始数据类型Symbol，表示独一无二的值，是js语言中第七种数据类型，是一种给类似于字符串的数据类型。

      Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

     Symbol特点》》》

• Symbol的值是唯一的，用来解决命名冲突的问题
• Symbol值不能与其他数据进行运算（加、减、乘、除、比较、拼接、、、）
• Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect . ownKeys来获取对象的所有键名

4.1 创建Symbol

    let s = Symbol()
    console.log('s:::', s)
    console.log(typeof s)

      内部实现了唯一性，外部不可见。

    let s1 = Symbol('for test')
    console.log('s1:::', s1) // s1::: Symbol(for test)
    let s2 = Symbol('for test')
    console.log('s2:::', s2) // s2::: Symbol(for test)
    console.log(s1 === s2) // false

      通过Symbol.for()创建(通过字符串得出唯一的值，字符串相同，值相同，如下)

    let s1 = Symbol.for('for test')
    console.log('s1:::', s1) // s1::: Symbol(for test)
    let s2 = Symbol.for('for test')
    console.log('s2:::', s2) // s2::: Symbol(for test)
    console.log(s1 === s2) // true

4.2 不能与其他数据进行运算

let result1 = s + 100 // Uncaught TypeError: Cannot convert a Symbol value to a number
let result2 = s > 100 // Uncaught TypeError: Cannot convert a Symbol value to a number
let result3 = s + s // Uncaught TypeError: Cannot convert a Symbol value to a number

4.3 数据类型

      USONB

• u     undefined
• s     string  symbol
• o     object
• n     null   number
• b     boolean

4.4 Symbol的使用

      向对象中添加方法。如果在不知道对象中有无某个方法，却想用时，可以通过symbol添加对应的方法而不会与原有的产生冲突。（其调用和使用不太明白）

    let game = {
      up: function () {
        console.log('原来的up')
      },
      down: function () {
        console.log('原来的down')
      },
      name: 'test'
    }
    // 声明一个对象
    let methods = {
      up: Symbol(),
      dowm: Symbol()
    }
    game[methods.up] = function () {
      console.log('----')
    }
    game[methods.dowm] = function () {
      console.log('++++')
    }
    console.log(game[methods.up])
    console.log(game.up)

      除此之外还有：

    let game = {
      [Symbol('up')]: function () {
        console.log('独一无二的up')
      },
      [Symbol('down')]: function () {
        console.log('独一无二的down')
      },
      name: 'test-symbol'
    }
    console.log(game)

4.5 Symbol 内置值（作用于对象）

 

Symbol.hasInstance	一个确定一个构造器对象识别的对象是否为它的实例的方法。被 instanceof 使用。
Symbol.isConcatSpreadable	一个布尔值，表明一个对象是否应该flattened为它的数组元素。被 Array.prototype.concat() 使用。
Symbol.unscopables	拥有和继承属性名的一个对象的值被排除在与环境绑定的相关对象外
Symbol.match	一个用于对字符串进行匹配的方法，也用于确定一个对象是否可以作为正则表达式使用。被 String.prototype.match() 使用。
Symbol.replace	一个替换匹配字符串的子串的方法。被 String.prototype.replace() 使用。
Symbol.search	一个返回一个字符串中与正则表达式相匹配的索引的方法。被String.prototype.search() 使用。
Symbol.split	一个在匹配正则表达式的索引处拆分一个字符串的方法.。被 String.prototype.split() 使用。
Symbol.iterator	一个返回一个对象默认迭代器的方法。被 for...of 使用。
Symbol.toPrimitive	一个将对象转化为基本数据类型的方法。
Symbol.toStringTag	用于对象的默认描述的字符串值。被 Object.prototype.toString() 使用。
Symbol.species	一个用于创建派生对象的构造器函数。

      比如Symbol.hasInstance

    class AAA {
      static [Symbol.hasInstance] (param) {
        console.log('param:::', param)
        console.log("instanceof方法被使用")
        // return true    加了这一行代码  console.log(a instanceof AAA)的返回结果变为true
      }
    }
    let a = {
      name: 'lala',
      write: function () {
        console.log('书写')
      }
    }
    console.log(a instanceof AAA) // false

      比如Symbol.isConcatSpreadble，值为false时，数组作为一个整体进行合并。

    const arr1 = [1, 2, 3]
    const arr2 = [3, 4, 5]
    console.log(arr1.concat(arr2))
    arr2[Symbol.isConcatSpreadable] = false
    console.log(arr1.concat(arr2))

 

 

---

进入下一篇... ...