常用的对象的方法
1. Object.create() 创建对象
-
使用说明
//指定原型对象和其属性创建一个新的对象 //第一个参数是原型，第二个参数是一个对象，包含自身的属性(按照的是Object.defineProperties()的第二个值书写) var obj = Object.create({foo:1},{bar:{value:22},name:{value:'hcc'}});
-
使用场景
// 通常用于继承对象 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() 拷贝对象
-
使用说明
//Object.assign()方法将所有可枚举的属性值从一个或者多个源对象复制到目标对象。 //返回一个目标对象 var Obj = Object.assign({},obj1,obj2,obj3.....) //第一个对象继承后面的多个对象 这里第一个对象也会被改变，返回一个新的对象。 -
使用场景
// 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值，输出成一个数组
-
使用说明
let arr = Object.keys(obj) // 获取对象自身的属性值，不包括原型链上的属性 -
使用场景
// 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值，输出成一个数组
-
使用说明
Object.values(obj)
-
使用场景
// 1. 当我们要获取一个对象的value值 var obj = {name:'hcc',age: 24,hobby:'moive' }; Object.values(obj); //["hcc", 24, "moive"]
5. Object.defineProperties()
-
使用说明
Object.defineProperties(obj,props)
第一个参数是将被添加或者修改的属性的对象
第二个参数是一个对象，表示将要添加的一个或多个键值对一直要添加属性的具体配置
{
'属性名':{value:'...',writable:true},
'属性名':{value:'...',writable:true}
}
-
属性的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的值 } }) } -
使用场景
var obj = {name:'hcc'} Object.defineProperties(obj,{ 'name':{value:'haaaaa',writable:true}, 'age':{value:24,writable:false} })
-
es5的数组的方法
1. Array.prototype.reduce(callback,[初始值])
- 不会改变原数组
- 通过累加器，将数组转换成单个值
-
回调函数有四个默认参数
- 初始值或者上一次回调函数返回的值
- 当前值
- 当前值的索引
- 执行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的区别
-
some()直到数组中的某一项使回调函数为true,就立即返回为true，所以常用在是否存在符合条件的值 -
every()数组中的每一项都需要使回调函数为true, 所以常用在是否所有元素都满足条件 - 如果要适合记忆，可以把
some()理解为逻辑运算中的或，而every()则是与
5.Array.prototype.find(callback)和Array.prototype.findIndex(callback)
- find()返回对应的元素 findIndex()返回对应的索引
- 回调函数接受三个参数
- 当前项
- 当前项的索引
- 当前数组
这两个 ES6 的新特性类似于some()，但对于符合条件的元素，返回值不是布尔类型。不一样的地方在于，find() 返回的是这个元素的值（或 undefined），而 findIndex() 返回的是这个元素的索引（或 -1）。
更新于2017年7月6号
