常用的方法

常用的对象的方法

1. Object.create() 创建对象

  1. 使用说明

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

    // 通常用于继承对象
    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值
    

    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 
    })  //返回false
    

总结: 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)。

更新于2017年7月6号

你可能感兴趣的:(常用的方法)