常用的對象的方法
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號
?
