ES6新增解构赋值、方法、map 和 set

1.解构赋值:对对象和数组进行解构,对变量进行赋值(大概意思)


var arr = [1,3,4,5]
   var [a,b,...rest] = arr
  //如果将剩余的内容用展开符书写会再次行成一个新的数组 c可以换成任何变量
 //  数组是按位置进行解构 多余变量会输出undefind
   console.log(a,b,rest); // 控制台打印出1,3,[4,5]

   var obj = {
    name:'张三',
    age:21,
    weigth:80
   }
//    对象则是按照属性名解构
   var {name:res,age,weigth} = obj
   console.log(name,age,weigth);
//上面这只是复杂数据类型只有一层简单的数据类型,用起来相对简单,那如果出现了复杂数据类型嵌套,解构还能满足吗,我们试试看//
  var obj = {
      uname: "张三",
      age: 21,
      shcool: {
        name: "北大",
        address: "北京"
      }
    }

    let { uname, age, shcool, shcool: { name, address } } = obj
    console.log(uname, age, shcool, name, address)//控制台打印发现可以拿到name和address 

2.对象的方法:这里只列举几个,不一一说了

(1) Object.entries(): 把对象转成键值对的数组

(2) Object.definedProperty() 监听对象属性的变化,vue2的数据响应式原理。

(3) Object.assign() 合并对个对象为一个对象

(4) Object.values() 把对象的值序列化为数组

(5) Object.keys() 把对象的属性名序列化为数组

(6)  Object.is()

 var obj = {uname:'张三'}
   //给对象添加属性
    Object.defineProperty(obj,"age",{
        value:21,
        enumerable:true, //是否可枚举 true为允许,false为不可以
        writable:true, //是否可编写
        configurable:true //是否可删除
    })
   //以数组形式返回内容
    var result2 = Object.entries(obj)
    console.log(result2); //在控制台打印以数组嵌套数组的形式
    //Object.freeze 表示将该对象冻结,可读,可枚举,不可修改,不可删除  (可枚举就是可遍历)
      Object.freeze(obj)
     // Object.seal 表示将该对象封闭, 可读,可枚举,可修改,不可删除
    //  Object.seal(obj)
   // Object.getOwnPropertyDescriptor用来检测对象属性的描述符,一参为目标对象,二参为属性名
     var result = Object.getOwnPropertyDescriptor(obj,"uname")
    // configurable 表示可不可以删除  值都为布尔值
    // enumerable 表示可不可以遍历 
    // writable 表示可不可以修改
      console.log(result);
    
     var result2 = Object.entries(obj)
    console.log(result2);
    var obj2 = {
        uname:"张三",
        age:21
    }
    var obj3 = {
        sex:'男',
        height:170
    }
    // 可以将对象2和对象3合并为一个对象 相同属性会覆盖
     console.log(Object.assign(obj2,obj3)); 
       //将对象的属性值转换成数组的形式
       console.log(Object.values(obj2));
       console.log(Object.values(obj3));
        // 将对象的属性名转换成数组的形式
       console.log(Object.keys(obj3));

3.map:   Map和Object有点类似,都是键值对来存储数据,和Object不同的是,JavaScript支持的所有类型都可以当作Map的key (下面举例了一些简单的方法)

 // 如果是传递参数以二维数组的形式
    var dic = new Map([["name","李四"],["sex","男"]])
    // 添加数据必须以key,value的形式添加,key可以为任何数据类型
    // 添加
      dic.set('name',"张三")
      dic.set({name:"战三",age:21},"我是个对象")
      dic.set(function(){},"我是个函数")
      // 删除
      dic.delete('name')
      // 遍历
      dic.forEach(item=>{
        console.log(item);
      })
      console.log(dic);

set: Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

 var myset = new Set("赵六")
    // 传递字符串会将字符串一一分开存储
    // add可以添加任何数据类型,但是一般不添加复杂数据类型,
    // 复杂数据类型在使用delete的时候删除不了
       myset.add("name")
       myset.add([33,44,55])
       console.log(myset); //返回name
       console.log(myset); //返回value值为数组
       myset.delete([33,44,55])//发现删除不了
       console.log(myset);
      //  因为set本身的特性,key不能重复,经常用set方法实现去重
       var str = "adcjcdiosol"
    //将set转为数组再进行拼接
    var str2 = [...new Set(str)].join('')
    console.log(str2);

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值