javaScript学习笔记（八）ES6(二)

一、剩余参数

1、认识剩余参数

剩余参数永远是数组，即使没有值，也是空数组

// 语法
        const add = (x, y, ...args) => {
            console.log(x, y, args)   // w 4 [5,45]
        }
        add('w', 4, 5, 45)

2、剩余参数注意事项

• 箭头函数的剩余参数 ：箭头函数的参数部分即使只有一个剩余参数,也不能省略圆括号
• 用剩余参数替代arguments获取实际参数
• 剩余参数的位置：剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

3、剩余参数的应用

剩余参数与解构赋值结合使用

        const [b, z, ...arge] = [2, 3, 4, 5, 6, 6]
        console.log(b, z, arge) //2 3 (4) [4, 5, 6, 6]

        const fn = ([a, ...rest]) => {
            console.log(a, rest)
        }
        fn([2, 3, 4, 5])
        const { a, bs, ...agr } = { a: 10, bs: 'M', l: 'T', k: '55' }
        console.log(agr) //{l: "T", k: "55"}

二、展开运算符的用法

基本用法：
console.log(Math.max(…[4, 3, 4, 5, 6])) //6

1、如何区分剩余参数和展开运算符

    展开运算符：[1, 3, 4]=> 1, 2, 3
    剩余参数：1, 2, 3=> [1, 2, 3]

2、数组展开运算符的应用

基本用法  const str=...[1,3,3,45]  //1,3,3,45

    //复制数组
        const nw = [2, 34, 4, 5]
        const ol = [...nw]
        ol[2] = 20000
        console.log(nw) // [2, 34, 4, 5]

 // 合并数组
        const c = [2, 3, 4, 54]
        const m = [2, 4, 5, 6,]
        console.log([...c, ...m]) //[2, 3, 4, 54, 2, 4, 5, 6]

        // 字符串转数组
        const str = 'HELLO'
        console.log([...str]) //["H", "E", "L", "L", "O"]

   //类数组转化为数组（argunments,NodeList）

        function fuu() {
            console.log([...arguments]) //[4, 34, 5, 7678]
        }
        fuu(4, 34, 5, 7678)
    //NodeList 
        console.log(document.querySelectorAll('p'));     //NodeList(3) [p, p, p]
        console.log([...document.querySelectorAll('p')]) //[p, p, p]

3、对象的扩展运算符

对象不能直接展开，需要在{}中展开

       const tem = {
            name: '校长',
            age: '500'
        }
        const tem1 = {
            name: '大锅',
            age: 80
        }
        // 新对象有全部的属性，属性相同，后者覆盖前者
        console.log({ ...tem, ...tem1 }) //{name: "大锅", age: 80}

1、对象展开注意事项

如果展开一个空对象，则没有任何效果
如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出

    console.log((.…1)//{}
    console.log(new Object(1));
    console.log(.…undefined })//{}
    console.log(4...null })//{}
    console.log((.…true})//{}

如果展开运算符后面是字符串，它会自动转成一 个类似数组的对象，因此返回的不是空对象

    console.log({...'HELLO'}) //{0: "H", 1: "E", 2: "L", 3: "L", 4: "O"}
    console.log({...[3,4,5,6]}) //{0: 3, 1: 4, 2: 5, 3: 6}

三、set和Map数据解构

Set

1、Set是什么

集合()
数组是一系列有序的数据集合:[1,3,4,55]
Set是一系类无序，没有重复值的数据集合

创建数组两种方式：[1,2,3,4],new.Array(1,3,4,5)
创建Set方式：const st = new Set(); // 语法

Set 没有下标去标示每一个值，所以Set是无序的，也不能像数组那样通过下标去访问Set的成员

2、Set实例的方法和属性

     1、方法（add）
        const s = new Set()
        s.add(1).add(3)
        console.log(s) //Set(2) {1, 3}
     2、has(is判断成员)
        console.log(s.has(2)) //false
        console.log(s.has(1)) //true
     3、delete(删除成员)
        // 使用 delete删时不存在的成员,什么都不会发生,也不会报错
        s.delete(1)
        console.log(s) //Set(1) {3}

      4、clear(全部删除)
        s.clear();
        console.log(s) //Set(0) {}

      5、forEach
        const obj = { name: '55' }
        // 非箭头函数,forEach参数二，可以改变this
        s.add(200).add(500).add(6)
        s.forEach((value, key, set) => {
            // Set中value=key
            console.log(value, set)
            console.log(this) //window
        })
      6、 属性(size)
        console.log(s.size) //3

3、Set 构造函数的参数

     数组方式
        const ar = new Set([1, 32, 3, 4, 5, 1])
        console.log(ar) //Set(5) {1, 32, 3, 4, 5}
     字符串
        const ar1 = new Set('HELLO')
        console.log(ar1) //Set(4) {"H", "E", "L", "O"}
        // arguments
        function fun() {
            console.log(new Set(arguments)) //Set(4) {14, 3, 4, 5}
        }
        fun(14, 3, 4, 5)
     NodeList
        const ar2 = new Set(document.querySelectorAll('p'))
        console.log(ar2) //Set(3) {p, p, p}
        //Set
        const a = new Set([2, 4, 5, 6])
        const b = new Set(s) //复制
        console.log(b)

4、Set注意事项

1、判断重复值
console.log(1 === 1) //true
console.log(NaN ）=== NaN) // false
//Set对重复值的判断基本遵循严格相等(===)//但是对于NaN的判断与 ===不同， Set中NaN等于NaN

5、使用场景

1）数组或者字符串去重

 console.log([...new Set([1, 1, 3, 4, 5, 33, 3])]) //(5) [1, 3, 4, 5, 33]

2）不需要通过下标访问，可使用forEach遍历
3)为了使用Set 提供的方法和属性过（add delete clear has forEach size等）
4) 字符串去重

        const str = new Set('bbdshdhhfss')
        console.log([...str].join('')) //bdshf

Map

1、认识Map(映射)

Map和对象都是键值对的集合

 const m = new Map() // 语法

2、Map和对象的区别

对象一般用字符串当键值
const person={name:"",age:"30"}

基本数据类型:数字、字符申,布尔值、undefined, nul ;  
引用数据类型:对象(1.1、函数、Set, Map等) ===>以上都可以作为Map的键值;
const objs = { name: '512', [{}]: 'Objeck' }

const m = new Map()
m.set({ name: '25' }, 18)
m.set(true, 18)
m.set([1, 2, 3, 4], 18)
console.log(m)  //Map(3) {{…} => 18, true => 18, Array(4) => 18}

3、Map实例方法属性和方法

     添加(set)
        //使用set添加的新成员,键如果已经存在,后添加的键值对覆盖已有的
        m.set('age', 18)

      获取(get)
        console.log(m.get('age')) //18

     has
        console.log(m.has('age'))// true

      删除(delete)
        m.delete('age')

     清除（clear）
        m.clear()
     遍历（forEach）

     属性（size）

4、Map构造函数参数（数组，Set、Map）

Map数组只能传二维数组，而且必须体现出键和值

       console.log(new Map([['name', '校长'], ['age', '19']])) //Map(2) {"name" => "校长", "age" => "19"}
      //Set、Map 作为参数
        const bb = new Map([['name', '校长'], ['age', '19']])
        const aa = new Set([['name', '校长'], ['age', '19']])
        console.log(new Map(bb)) //Map(2) {"name" => "校长", "age" => "19"}
        console.log(new Map(aa)) //Map(2) {"name" => "校长", "age" => "19"}

5、注意事项

1).判断键名是否相同的方式 //基本遵循严格相等（=== ) //例外就是NaN,Map中NaN也是等于Nan //console.log(NaN===NaN):

        const m=new Map:
        m.set(NaN,1).set(NaN,2);
        console.log(m);

2)什么时候使用Map:如果只是需要key->value的结构， 或者需要字符串以外的值做键， 使用Map更合适

6、Map应用

        const [p1, p2, p3] = document.querySelectorAll('p')
        const p = new Map([[p1, 'red'], [p2, 'yellow'], [p3, 'grenn']])
        p.forEach((item, el) => {
            el.style.color = item
        })