Web全栈20210320-es6语法,对象的扩展，symbol，对象新增方法，set、map

对象的扩展
1-1 属性的简洁表示法

//es5
    var nick = "张三";
    var obj = {
    
    
        name: nick
    }

    console.log(obj);
    //es6
    let name = "小黑";
    let stu = {
    
    
        name
    }
    console.log(stu);

1-2 es6 对象中函数的简写

   let a = 0;
        let b = 10;
        let stus = {
    
    
            //es5 函数写法
            sleep: function () {
    
    

            },
            //es6函数简写
            eat() {
    
    
                return {
    
    
                    a, b
                }
            }
        }

1-3 es6 里面的getter setter 访问器针对属性获取或者设置

 let animal = {
    
    
                _name: '',
                set name(n) {
    
    
                    console.log("设置_name");
                    this._name = n;
                },
                get name() {
    
    
                    console.log("获取属性_name");
                    return this._name
                }
            }

            console.log(animal);
            animal.name = "小黑";
            console.log(animal.name);

1-4对象获取值的方式 2 对象点属性对象[key]

   let s = {
    
     a: 1 }
        console.log(s.a);
        console.log(s['a']);

1-5对象的常规属性定义

   let o = {
    
    };
        o.age = 20;
        o['sex'] = "男";
        console.log(o);

1-6对象的属性可以接入字面量的方式定义
//(对象的属性可以是变量通过解析变量产生对象的属性)

   let proresn = "name";
    let prorex = "eat";

1-7解析属性变量使用[] 包变量

  let list = {
    
    
            [proresn]: "",
            [prorex]() {
    
    
                console.log('执行字面量函数');
            }
        }
        console.log(list);
        //如何使用
        console.log(list[prorex]());
        //对象属性上的name属性
        //获取的是函数名称
        //没用不用记
        console.log(list[prorex].name)

1-8如何获取get set访问器的name属性

let f = {
    
    
        set age(n) {
    
    
            this._age = n;
        },
        get age() {
    
    
            return this._age;
        }
    }
    //下面报错  get  set  访问器的name属性不能直接获取
    //console.log(f.age.name);

    //得先获取到整个访问器
    let descript = Object.getOwnPropertyDescriptor(f, 'age');
    console.log(descript);
    console.log(descript.get.name);
    console.log(descript.set.name);

    //获取对象属性的一些配置参数
    let people = {
    
    
        name: "小花",
        age: 20
    }

1-9获取people对象name属性的相关配置

  var desc = Object.getOwnPropertyDescriptor(people, 'name');
        console.log(desc);

        //设置对象属性的相关配置
        Object.defineProperty(people, 'name', {
    
    
            enumerable: false
        });

        var desc1 = Object.getOwnPropertyDescriptor(people, 'name');
        console.log(desc1);

1-10不可枚举的属性有以下几种情况忽略改属性

for (let key in people) {
    
    
        console.log(key);
    }
    //configurable  默认true  允许删除对象属性  false不允许
    delete people.age;
    console.log(people);

1-11 es6 对象的遍历

//对对象的属性设置不可枚举  不能获取到
    let qw = {
    
    
        name: "xiao",
        age: 10,
        sex: '女',
        [Symbol('age')]() {
    
    
            console.log("第一无二的方法");
        }
    }
    for (let key in qw) {
    
    
        console.log(key);
    }
          //Object.keys();  返回所有key集合
            console.log(Object.keys(qw));

            console.log(Object.getOwnPropertyNames(qw));

        //返回symbol数据类型的key值
        console.log(Object.getOwnPropertySymbols(qw));

symbol 定义第一无二变量，通过symbol函数方式产生变量，增的数据类型
-原因是对象的属性名称可能会冲突引入了symbol数据类型
–对象的属性名可能存在两种类型
// 1.直接是字符串 2.symbol类型的名称
//通过symbol函数产生的变量
2-1不能直接转化成字符串，如果symbol函数的参数不是字符串会默认执行toString() 获取字符串

let s3 = Symbol(str);
        console.log(s3);//Symbol(abc)
        console.log(s3.toString()); //"symbol(abc)"

2-2 //es9 更新了一个属性描述唯一变量
//description 在 Symbol.prototype.description 原型上面
console.log(s7.description); //直接获取字符串值

2-3 symbol变量也可以作为对象的属性

let aa=Symbol();
let objstu={
    
    
    [aa]:'aaa'
}
console.log(objstu);

console.log(objstu[aa]);//undefined

2-4 创建两个空的symbol() 变量两个是不恒等的

  // let k1=Symbol();
    // let k2=Symbol();
    // k1===k2  //false

2-5 想要使用同一个symbol值 true，使用Symbol.for() 返回同一个symbol值

 let k2=Symbol.for('abc');
    let k3=Symbol.for('abc');
    console.log(k2===k3);//true

2-6symbol.keyFor() 获取登记过的symbol变量值

  let k4=Symbol('abc');
    let k5=Symbol.for('abc');
    //console.log(k4===k5);//false

symbol.for() 使用同一个symbol变量
使用该方法会去symbol的注册表住一个key值在去声明的时候会去找对应的key 如果没有重新生成

 console.log(Symbol.keyFor(k4));//undefined  直接生成一个对应的symbol变量
    console.log(Symbol.keyFor(k5));//abc  返回的就是key 原始字符串

对象的新增方法，
3-1Object.is();

  es5  判断两个值相等  ==  ===
        //检测的变量存在值类型和引用类型
        //这个方法内部使用的是===
        console.log(Object.is(10, '10'));
        console.log(Object.is({
    
    }, {
    
    }));//false

3-2对象合并 Object.assign(); //1. 合并之后的目标 2. 合并对象之一 3.合并对象之一
//不同属性叠加相同属性后覆盖前

   let h1 = {
    
     a: 1, b: 2 };
    let h2 = {
    
     a: 2, c: 3 };
    let target = {
    
    };
    console.log(Object.assign(target, h1, h2));//返回值是合并之后的对象
    console.log(target);

浅拷贝

  const obj1 = {
    
     a: 1, b: {
    
     c: 1 } };
    const obj2 = Object.assign({
    
    }, obj1);

    obj1.b.c = 2;
    console.log(obj2.b.c)

object.assign 对象替换

let o1 = {
    
     a: 1, b: 2, c: 3 };
let o2 = {
    
     a: 'abc', b: 'def' };
console.log(Object.assign(o1, o2));

数据合并是按照索引合并的

  let o3 = [1, 2, 3];
    let o4 = [4, 5];
    console.log(Object.assign(o3, o4));

使用
对象添加属性

  let work = {
    
    };
    console.log(Object.assign(work, {
    
     a: 1, b: 2 }));

使用object.assign 给原型对象上添加

  let p={
    
    };
    p.sort=function (){
    
    }
    Array.prototype.mySort = function () {
    
    

    }
    console.log(Array.prototype)
    Object.assign(Array.prototype,{
    
    
        myPai:function (){
    
    

        }
    });
    console.log([]);

 //Object.keys()  获取所有的key
        //Object.values()  获取所有的值
        //Object.entries()  获取键值的
        let km={
    
    a:1,b:2,c:3}
        //比较常用
        console.log(Object.keys(km));//返回的是key的集合
        console.log(Object.values(km))//返回值的集合
        console.log(Object.entries(km));//返回的是二位数组  key：value的集合

set 数据结构类似数组要求是内部的值不能重复是唯一的，Set 是构造函数，使用的时候 new，

//数组去重
        let a=[1,1,2,3,3,2,5,4,6,5,4];
        let arr=new Set(a);
        console.log(arr);

//遍历 for of forEach
//不能使用
// arr.map((it,index)=>{
// console.log(it);
// });
//无长度属性
// console.log(arr.length);//undefined
// for(var i=0;i<arr.length;i++)
// {
// console.log(arr[i]);
// }
// console.log(arr.entries())
// for(let kay in arr.entries())
// {
// console.log(kay);
// }
//可以遍历
// for(let value of arr)
// {
// console.log(value);
// }

    //可以遍历
    arr.forEach((item)=>{
        console.log(item);
    });

    //size  返回集合大小
    console.log(arr.size);

    //set  集合原型对象上的方法
    //add  delete  clear  has
    let sets=new Set([1,2,3,4,5]);
    sets.add('a');//添加元素
    console.log(sets.has('a'));//检测  返回true  false
    console.log(sets.delete('a'));//删除某个元素  返回bool
    //清除整个集合
    sets.clear();
    console.log(sets);

    //set 集合遍历的几个方法
    //keys()  返回集合所有键的 遍历器

    let setarr=new Set([1,2,3,4,5]);
    //返回集合的key
    console.log(setarr.keys())

    for(let key of setarr.keys())
    {
        console.log(key)//值
    }

    //values()  返回集合所有的值
    console.log(setarr.values());
    //注意：  set集合  应为是类数组  所以keys  values 返回一致

    for(let key of setarr.values())
    {
        console.log(key)//值
    }

    //entries()  方法  返回集合的key:value值

    console.log(setarr.entries());
    for(let key of setarr.entries())
    {
        console.log(key)//值
    }

    //set集合使用扩展运算符
    console.log(...setarr);

    //数组去重
    let m=[11,1,1,1,2,3,2,4];
    let m1=[...new Set(m)];
    console.log(m1);


    //weakSet  类似set  也是不能重复的
    //区别 ：weakSet 不能放值  只能放对象

    let h=[[1,2],[3,4]];
    let weak=new WeakSet(h);


    //weakSet  三个操作方法
    //add  has  delete
    weak.add({});
    weak.add([5,6]);
    let so={};
    weak.add(so);
    console.log({}==={});
    console.log(weak.has([5,6]));
    console.log(weak.has(so));
    console.log(weak);

    //weakSet不能遍历
    // for(let key of weak)
    // {
    //     console.log(key);
    // }

//map 数据结构
//存储的是对象解构以键值对的方式存储
//用法类似set

    //创建map结构
    //map是构造函数  传递参数只能是数组类型的键值形式
    let so1=[
        ["name","xiaoxiao"],
        ["sex","男"]
    ]
    let maparr=new Map(so1);
    //size
    console.log(maparr.size);

    //set 给map集合添加键值
    maparr.set("age",20);
    maparr.set("address",123);
    //get  通过键获取值
    console.log(maparr.get("name"));

    //检测是否存在
    console.log(maparr.has("sex"));
    //delete 根据键删除值
    console.log(maparr.delete("address"));
    //全部清除
    //maparr.clear();
    console.log(maparr);

    //map集合的遍历
    for(let item of maparr)
    {
        console.log(item);// 集合型的键值对
    }

    //keys  values  entries

    console.log(maparr.keys());
    for(let key of maparr.keys()){
        console.log(maparr.get(key));
    }

    console.log(maparr.values());
    for(let value of maparr.values()){
        console.log(value);
    }

    console.log(maparr.entries());
    for(let item of maparr.entries()){
        console.log(item);
    }

    maparr.forEach((item)=>{
        console.log(item);//值
    });

    //map集合转化为数组  使用...
    console.log(...maparr);

    //map转对象
    let mapobj={};
    for(let item of maparr)
    {
        mapobj[item[0]]=item[1];
    }
    console.log(mapobj);

    console.log(Object.entries(mapobj));


    //map转json  先将map转为对象  在转json
    console.log(maparr);
    console.log(JSON.stringify(mapobj));

    let json={"a":"1","b":"2"};
    let ay=[];
    for(let key in json)
    {
        console.log(key);
        ay.push([key,json[key]]);
    }
    //[['a',1],['b',2]]
    console.log(new Map(ay));


    //weakmap  类似map
    //weakmap中的key只能是对象（除过null）
    //key对象不能被默认回收
    let weakmap=new WeakMap();
    console.log(weakmap);

总结:1.backgroud-position
2.jquery 的dom获取是静态的
3. get set访问器
4.js里面存在7个数据类型
6. 自己实现Object.is()方法的内部原理

//    Object.prototype.myis=function (x,y){
    
    
//        console.log('执行');
//         if(x===y)
//         {
    
    
//             return true;
//         }
//         else{
    
    
//             return false;
//         }
//    }

//    Object.myis({
    
    },{
    
    });


// Object.defineProperty(Object, 'is', {
    
    
//     value: function (x, y) {
    
    
//         console.log(111);
//         if (x === y) {
    
    
//             return true;
//         }
//         else {
    
    
//             return false;
//         }
//     }
// });
// console.log(Object.is({
    
    },{
    
    }));

console.log(Object.is(NaN, NaN));

Web全栈20210320-es6语法,对象的扩展，symbol，对象新增方法，set、map

猜你喜欢