常用的对象的方法

[huangchucai]

常用的对象的方法

1. Object.create() 创建对象

1. 使用说明

   //指定原型对象和其属性创建一个新的对象
   
   //第一个参数是原型，第二个参数是一个对象，包含自身的属性(按照的是Object.defineProperties()的第二个值书写)
   var obj = Object.create({foo:1},{bar:{value:22},name:{value:'hcc'}});

2. 使用场景

   // 通常用于继承对象
   function Parent(name,age){
     this.name=name;
     this.age=age;
   }
   Parent.prototype.say=function(){console.log("my name is "+this.name)}
   function Child(name,age,sex){
     Parent.call(this,name,age); //继承属性
     this.sex=sex;
   }
   //这里重写了Child的原型，并指定了Child.prototype的__proto__指向Parent.prototype
   Child.prototype=Object.create(Parent.prototype)   
   Child.prototype.walking=function(){console.log(this.sex)}
   Child.prototype.constructor=Child;  //手动指定构造函数
   var c=new Child("hcc",24,"男")

2.Object.assign() 拷贝对象

1. 使用说明

   //Object.assign()方法将所有可枚举的属性值从一个或者多个源对象复制到目标对象。
   //返回一个目标对象
   var Obj =  Object.assign({},obj1,obj2,obj3.....)
   //第一个对象继承后面的多个对象 这里第一个对象也会被改变，返回一个新的对象。

2. 使用场景

   // 1.当传入的参数不完整的时候使用默认值
   var query = {pageSize: 4, pageNo: 2, id: 27702};
   var query2 = {pageSize: 8} //参数传递不全
   //使用默认的参数，后面的对象如果存在就覆盖前面的默认值，并返回新的参数对象。
   var params = Object.assign({pageSize: 8, pageNo: 1},query);  //{pageSize: 4, pageNo: 2, id: 27702}
   var params2 = Object.assign({pageSize: 8, pageNo: 1},query);  // {pageSize: 8, pageNo: 1}
   
   // 2.改变一个对象的值
   var o1 = {a: 1},o2={b:2},o3={c:3}
   var obj = Object.assign(o1,o2,o3);
   console.log(obj);// { a: 1, b: 2, c: 3 }
   console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
   
   // 3.对象的浅拷贝，如果属性是引用类型只会拷贝引用的值
   function test(){
     let a = {b:{c:4},d:{e:{f:1}}}
     let g = Object.assign({},a)
     let h = JSON.parse(JSON.stringify(a));
     
     g.d.e = 32
     console.log(g) // { b: { c: 4 }, d: { e: 32 } }
     console.log(a) // { b: { c: 4 }, d: { e: 32 } }
     console.log(h) // { b: { c: 4 }, d: { e: { f: 1 } } }
     
     h.d.e = 54  //改变h的值
     console.log(g) // { b: { c: 4 }, d: { e: 32 } }
     console.log(a) // { b: { c: 4 }, d: { e: 32 } }
     console.log(h) // { b: { c: 4 }, d: { e: 54 } }
   }

3. Object.keys 获取对象自身的key值，输出成一个数组

1. 使用说明

   let arr = Object.keys(obj)
   // 获取对象自身的属性值，不包括原型链上的属性

   Object.keys和for in的区别

2. 使用场景

   // 1. 获取对象的属性值
   let obj = {name: 'hcc',age: 24};
   let arr1 = Object.keys(obj);  //["name", "age"]
   // 2. 获取数组的索引
   console.log(Object.keys(arr1))  // [0,1]
   
   // 3.拼接字符串
   // 需求：一个对象里面的属性也是一个对象，需要里面对象的key值
   <p class="content"></p>
   <button class="btn">确定</button>
   
   <script>
     var obj ={
     5001:{name:'hcc1',age:24},
     5002:{name:'hcc2',age:25},
     5003:{name:'hcc3',age:26},
     5004:{name:'hcc4',age:27},
     5005:{name:'hcc5',age:28}
   }
   const items =Object.keys(obj).reduce(($medo,key) =>{
     const item=obj[key];
     const $item =$('<span></span>',{html: item.name,class: 'item' })
     return $medo.add($item)
   },$())
   $('.content').prepend(items);
   </script>

   4. Object.values 获取对象自身的value值，输出成一个数组

   1. 使用说明

      Object.values(obj)

   2. 使用场景

      // 1. 当我们要获取一个对象的value值
      var obj = {name:'hcc',age: 24,hobby:'moive' };
      Object.values(obj);  //["hcc", 24, "moive"]

   5. Object.defineProperties()

   1. 使用说明

      Object.defineProperties(obj,props)

      第一个参数是将被添加或者修改的属性的对象

      第二个参数是一个对象，表示将要添加的一个或多个键值对一直要添加属性的具体配置

      {

      ​ '属性名':{value:'...',writable:true},

      ​ '属性名':{value:'...',writable:true}

      }

   2. 属性的getter和setter

      • 一般用于局部变量
      • 给构造函数添加属性

      // get和set的方法不能和value以及writable一起使用
      var o ={},
      Object.defineProperty(o,'p',{
      	get(){
            console.log('调用属性后输出')
      	},
        	set(val){
            console.log(val+'赋值属性的时候调用')
        	}
      })
      o.p // '调用属性后输出'
      o.p = 'hcc' //hcc赋值属性的时候调用
      // 可以根据Object.getOwnPropertyDescriptor(对象, '属性名')得到相应的属性配置
      
      // 需求
      //给一个对象的属性值不能超过30，超过30的按照30来算
      var hcc = {} //全局对象
      {
      	var age = null  //局部变量
      	Object.defineProperty(hcc,'age',{
      		get(){
      			return age  //设置hcc.age的值
      		},
      		set(val){
      			age= val> 30?30:val //当赋值给hcc.age的值进行判定从而改变局部变量age的值 
      		}	
      	})
      }

   3. 使用场景

      var obj = {name:'hcc'}
      Object.defineProperties(obj,{
      'name':{value:'haaaaa',writable:true},
      'age':{value:24,writable:false}
      })

es5的数组的方法

1. Array.prototype.reduce(callback,[初始值])

• 不会改变原数组
• 通过累加器，将数组转换成单个值
• 回调函数有四个默认参数
  • 1. 初始值或者上一次回调函数返回的值
  • 1. 当前值
  • 1. 当前值的索引
  • 1. 执行reduce的数组
• 如果没有传递初始值，那么数组的第一个元素就是默认的初始值，遍历将从第二个元素开始遍历

// 最好是传递初始值（init）
// 1. 数组的累加
var arr = [1,3,4,56]
arr.reduce((acc,cur,idx,arr)=>{
  	console.log(idx) //从数组的索引0开始遍历数组
	return acc+cur //acc是0
},0)
arr.reduce((acc,cur,idx)=>{
  console.log(idx); // 从数组的索引为1的开始遍历数组
  return acc+cur; //acc为1
})
// 2.将数组转换成对象
// a.把数组的索引当成val,内容当成key，返回一个对象
function optionObject(arr){
  //obj：{} key:数组元素 val：索引
  arr.reduce((obj,key,val)=>{
  	obj[key] = val;
    return obj;
  },{})
}
// b.数组的前一项作为key,后一项作为value
function arrToObj(arr){
  var obj={};
  arr.reduce((key,val)=>{
    obj[key]=val;
    return obj
  })
}

2. Array.prototype.filter(callback)

• 返回一个新的数组
• 过滤数组的每一项，返会通过的元素成一个新的数组
• 回调函数有三个参数
  • 数组的当前项
  • 当前项的索引
  • 整个数组

//过滤小于10的值
var arr = [1,23,45,66,3]
arr.filter((item)=>{
	return item> 10
}) // [23, 45, 66]

3. Array.prototype.find(callback)

• 返回符合规则的第一个数组选项
• 回调函数有三个参数
  • 当前项
  • 当前项的索引
  • 当前数组

[1,2,34,124,5,24].find((item)=>{
	return item> 20
}) //返回34

4.Array.prototype.some(callback)

• 返回一个布尔值，只要有元素能够匹配就返回true

• 回调函数有三个参数

  • 当前项
  • 当前项的索引
  • 当前数组

  [2, 5, 8, 1, 4].some((item)=>{
    return item>10 
  })  //返回false
  [2, 5, 8, 1, 14].some((item)=>{
    return item>10 
  })  //返回true

总结： find和some的区别

1. some()直到数组中的某一项使回调函数为true,就立即返回为true，所以常用在是否存在符合条件的值
2. every() 数组中的每一项都需要使回调函数为true, 所以常用在是否所有元素都满足条件
3. 如果要适合记忆，可以把some()理解为逻辑运算中的或，而every()则是与

5.Array.prototype.find(callback)和Array.prototype.findIndex(callback)

• find()返回对应的元素 findIndex()返回对应的索引

• 回调函数接受三个参数

  • 当前项
  • 当前项的索引
  • 当前数组
    这两个 ES6 的新特性类似于 some() ，但对于符合条件的元素，返回值不是布尔类型。不一样的地方在于，find() 返回的是这个元素的值（或 undefined），而 findIndex() 返回的是这个元素的索引（或 -1）。

  ​

[huangchucai]

更新find()和findIndex()