美文网首页
JS对象方法速查

JS对象方法速查

作者: Wo信你个鬼 | 来源:发表于2019-12-13 14:46 被阅读0次

1.对象合并


// 1️⃣ ES6方法

let obj1 = {
    a:1,
    b:{ 
        b1:2 
    }
}

let obj2 = { c:3, d:4 }

console.log({...obj1, ...obj2}) // {a: 1, b: {…}, c: 3, d: 4}
// 支持无限制合并,但如果对象之间存在相同属性,则后面属性会覆盖前面属性。*请注意,这仅适用于浅层合并。


// 2️⃣ Obj.assign():可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象
let o1 = { a: 1 };
let o2 = { b: 2 };

let obj = Object.assign(o1, o2);
console.log(obj); // { a: 1, b: 2 }
console.log(o1);  // { a: 1, b: 2 }, 且 **目标对象** 自身也会改变(也就是assign第一个对象)
console.log(o2); // { b: 2 } 不改变

// 备注:Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值
// 备注:数组合并用 concat() 方法


// 3️⃣ $.extend()

2.浅拷贝,深拷贝


/**
 * 此函数,可以完全生成一个新的拷贝对象,也可以将一个对象中的属性拷贝到另一个对象中去
 * @parmas {Object} 需要被拷贝的对象
 * @parmas {Object} 可选,目标对象,如果不填直接返回一个对象
 */

function deepClone(origin, target = {}) {

    // 循环遍历对象的属性
    for (key in origin) {
        
        let isType = Object.prototype.toString.call(origin[key])

        // 克隆对象类型
        if (isType === '[object Object]') {
            target[key] = {}
            deepClone(origin[key], target[key])
            continue
        }

        // 克隆数组类型
         if (isType === '[object Array]') {
            target[key] = []
            deepClone(origin[key], target[key])
            continue
        }

        // 克隆 Set 类型
      
        // 克隆 Map 类型

        // 克隆其他类型

        // 克隆基础类型
        target[key] = origin[key]
    
    }

    return target
}

let zhu = {
  name: '朱昆鹏',
  technology: ['css', 'html', 'js'],
  girlfriend: {
    name: 'lyt'
  }
}

let zhuClone = deepClone(zhu) // zhuClone 内容完全和 zhu 一样

let zhuTest = { test: '测试' }
let zhuTestClone = deepClone(zhuTest, zhu) // zhuTestClone 不仅有 zhu所有内容,还有 zhuTest 的内容



// JSON.parse(JSON.stringify(obj) 方法进行拷贝,了解就行
const obj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(JSON.parse(JSON.stringify(obj)); // {name: "axuebin"} ???
// undefined、function、symbol 会在转换过程中被忽略,所以就不能用这个方法进行深拷贝


// 浅拷贝
function clone(origin, target = {}) {
    let target = {};
    for (const key in origin) {
        target[key] = origin[key];
    }
    return target;
};

3.拓展:首层浅拷贝


function shallowClone(source) {
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for (let keys in source) { // 遍历目标
    if (source.hasOwnProperty(keys)) {
      targetObj[keys] = source[keys];
    }
  }
  return targetObj;
}

const originObj = {
  a:'a',
  b:'b',
  c:[1, 2, 3],
  d:{ dd: 'dd' }
};

const cloneObj = shallowClone(originObj);
console.log(cloneObj === originObj); // false
cloneObj.a = 'aa';
cloneObj.c = [1, 1, 1];
cloneObj.d.dd = 'surprise';

console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}
console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'surprise'}}

4.判断对象是否为空对象


// 参考:https://www.cnblogs.com/HKCC/p/6083575.html

if (JSON.stringify(对象) === '{}') {
  console.log('空');
}

5.判断对象中属性的个数

let obj = {name: '朱昆鹏', age: 21}

// ES6
Object.keys(obj).length // 2

// ES5
let attributeCount = obj => {
    let count = 0;
    for(let i in obj) {
        if(obj.hasOwnProperty(i)) {  // 建议加上判断,如果没有扩展对象属性可以不加
            count++;
        }
    }
    return count;
}

attributeCount(obj) // 2

6.JS 对象转 url 查询字符串

const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})
// name=Jhon&age=18&address=beijing

7.对象遍历

let objs = {
    1: {
        name: '朱昆鹏'
    },
    2: {
        name: '林雨桐'
    }
}

Object.keys(objs).forEach( ket => {
  console.log(key,objs[key])
})

// 1 {name: '朱昆鹏'} 2 {nama:'林雨桐'}

相关文章

  • JS对象方法速查

    1.对象合并 2.浅拷贝,深拷贝 3.拓展:首层浅拷贝 4.判断对象是否为空对象 5.判断对象中属性的个数 6.J...

  • JS方法速查DOM

    1.常用DOM接口 2.判断当前位置是否为页面底部 3.全屏 1.进入全屏 退出全屏 全屏事件

  • js对象和jq对象的相互转换

    js对象转换为jq对象 把js对象用$()包裹起来,如$(js对象) 转换之后可以使用jq对象的任何方法 jq对象...

  • JS数组方法速查

    1.数组去重 2.数组合并 3.数组排序(sort) 4.多维数组转一维数组(flat) 5.过滤数组(filte...

  • 2019-11-27

    1.js 对象属性 2.js 对象方法 3.对象访问器 4.对象构造器 5.对象构造器加属性 6.对象方法 7.j...

  • js判断一个对象Object是否为空对象

    js判断空对象的方法判断一个js对象是否是空对象isEmptyObjectauthor: @TiffanysBea...

  • JavaScript笔记(一)

    一、面向对象面向过程的区别 1、什么是js对象 js对象:属性和方法的集合,js所有数据都可以看成对象...

  • Javascript的Number对象

    js内置对象之Number Number 对象的属性 Number对象的方法 Number方法详解 Number....

  • react 对象动态添加属性 setState

    // js 对象动态添加 js对象动态添加 //总结,给对象动态添加变量属性的方法如下: //obj[变量]=变...

  • js与ES6对象常用方法区别

    js与ES6对象常用方法区别js中对象方法 Object.assign//用于克隆 Object.is()…用于判...

网友评论

      本文标题:JS对象方法速查

      本文链接:https://www.haomeiwen.com/subject/qppfnctx.html