抽出了一點時間, 整理了一下 js 數組與對象的一些小方法, 在開發中減少代碼量,大佬們勿噴, 歡迎補充 ! 週末愉快 !
數組方法
- fliter 方法
// filter 方法
// 遍歷數組, 返回滿足條件的數組,不會改變原數組;
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.filter((item, index) => {
return item > 3
})
console.log(arr, '原數組'); // 不變
console.log(newArr, '新數組'); // 4,5,6
- some 方法
// some 方法
// 遍歷數組 , 只要數組中有一項元素滿足的條件返回true, 全部不滿足返回false;
var arr = [1, 2, 3, 4, 5, 6]
var isTrueOrFalse = arr.some(item => {
return item > 4
})
console.log(isTrueOrFalse, "結果"); // true
- forEach 方法
// forEach 方法
// 遍歷數組 , 對每一個元素進行邏輯操作 , 不會改變原數組;
var arr = [1, 2, 3, 4, 5, 6]
var newArr = []
arr.forEach((item, index) => {
item = item + 1
newArr.push(item)
})
console.log(arr, '原數組'); // [1, 2, 3, 4, 5, 6]
console.log(newArr, '新數組'); // [2, 3, 4, 5, 6, 7]
- map 方法
// map方法
// 遍歷數組 , 返回一個滿足條件的新的數組 , 不會改變原數組;
var arr = [{
'name': '小周',
'phone': 110,
}, {
'name': '小王',
'phone': 111,
},
{
'name': '小李',
'phone': 112,
}
]
var newArr = arr.map((item, index) => {
return item.name
})
console.log(arr, '原數組'); // 不變
console.log(newArr, "新數組"); // ['小周' , '小王' , '小李']
- every 方法
// 遍歷數組每一項 , 只要一項不滿足條件 , 則返回false , 全部滿足返回true;與some方法相反;
var arr = [1, 2, 3, 4, 5, 6]
var isTrueOrFalse = arr.every(item => {
return item > 3
})
console.log(isTrueOrFalse, "布爾值"); // false
- find 方法
// find 方法
// find 方法會尋找滿足條件的第一個元素並返回 , 不會改變原數組;
var arr = [1, 2, 3, 4, 5]
var newArr = arr.find(item => {
return item > 1;
})
console.log(arr, '原數組'); // 不變
console.log(newArr, '新數組'); // 2
- reduce 方法
// reduce 方法
// 此方法傳入的參數須爲函數類型 , 可以在函數裏面進行邏輯德操作 , 數組調用後, 會返回一個函數邏輯操作之後的值 ,不會影響原數組;
var arr = [1, 2, 3]
// 函數
// function method(a,b){
// return a + b
// }
// 以上函數es6簡寫
var method = (a, b) => a + b
let newData = arr.reduce(method)
console.log(arr, '原數組1111'); // 不變
console.log(newData, "返回的新值 "); // 6 ;
對象方法
- Object.assign() 方法
// 參數一對象拼接參數二對象, 返回一個新對象;
// 注意 : 參數一對象會改變, 參數二對象不變;
// 這種方法相當於淺拷貝 , 拷貝之後的對象, 如果發生改變, 相應的原被拷貝的對象也會發生改變;
var obj1 = {
a: '小王',
b: '小李'
}
var obj2 = {
c: '小張',
d: '小劉'
}
var newObj = Object.assign(obj1, obj2)
console.log(obj1, "obj1"); // 與返回的新對象一樣 , 所有屬性都存在;原對象改變了;
console.log(obj2, "obj2"); // 不變, 還是的原對象裏面有的屬性;
console.log(newObj, "新對象"); // {c: "小張", d: "小劉", a: "小王", b: "小李"}
// +++++++
var obj3 = {
e: '小廖'
}
var newObj2 = Object.assign(newObj, obj3)
console.log(obj1, "obj1"); // {a: "小王", b: "小李", c: "小張", d: "小劉", e: "小廖"}
console.log(newObj, "newObj"); // {a: "小王", b: "小李", c: "小張", d: "小劉", e: "小廖"}
console.log(newObj2, "newObj2"); // {a: "小王", b: "小李", c: "小張", d: "小劉", e: "小廖"}
console.log(obj3, "obj3"); // {e:'小廖'}
- Object.is()方法
// Object.is()方法
// Object.is()方法類似於'===', 可以判斷兩個對象中的鍵與值是否相等,返回布爾值;
// 注意 : 需要把兩個對象轉換爲JSON字符串格式 , 再去判斷; 直接判等,爲false;
var obj1 = {
a: '小王',
}
var obj2 = {
a: '小王'
}
obj1 = JSON.stringify(obj1)
obj2 = JSON.stringify(obj2)
var isTrueOrFalse = Object.is(obj1, obj2)
console.log(isTrueOrFalse, "布爾值"); // true
// +++++
var obj3 = {
a: '小王',
b: '小劉'
}
obj3 = JSON.stringify(obj3)
var isTrueOrFalse2 = Object.is(obj1, obj3)
console.log(isTrueOrFalse2, "布爾值"); //false
- Object.keys()方法
// Object.keys()方法
// 1 : 傳入對象, 返回屬性名(鍵);
// 2 : 傳入字符串, 返回相對應的每一個的字符串的索引值作爲數組返回;
// 3 : 傳入數組 , 返回索引列表
// 4 : 傳入構造函數, 未實例前返回空數組 , 實例後返回構造函數的屬性名做爲數據形式返回;
var obj1 = {
name: '小李',
age: '20',
gender: '男'
}
// 1 : 傳入對象, 返回屬性名
var newArr = Object.keys(obj1)
console.log(newArr, "新數組"); // ["name", "age", "gender"]
// 2 : 傳入字符串, 返回相對應的每一個的字符串的索引值作爲數組返回;
var str = '趙麗穎'
var indexs = Object.keys(str)
console.log(indexs, "索引列表"); // [0 , 1, 2]
// 3 : 傳入數組 , 返回索引列表
var arr = ['小李', '20', '男']
var indexs = Object.keys(arr)
console.log(indexs, '索引列表'); // [0,1,2]
// 4: 傳入構造函數, 未實例前返回空數組 , 實例後返回構造函數的屬性名做爲數據形式返回;
function Person(name, age, gender) {
this.name = "小李"
this.age = "20"
this.gender = '男'
}
var newPerson = Object.keys(Person)
console.log(newPerson, "構造函數未實例"); // []
var person = new Person()
var newPerson = Object.keys(person)
console.log(newPerson, '構造函數已實例'); // ["name", "age", "gender"]
- Object.values()方法
// Object.values()方法
// Object.values()方法會把傳入進去的對象的屬性值按順序的以數組的形式返回;
var obj1 = {
name: '小李',
age: '20',
gender: '男'
}
var newObj = Object.values(obj1)
console.log(newObj, 'newObj'); // ["小李", "20", "男"]
var obj2 = {
1: '哈哈',
2: '嘻嘻',
3: '呵呵'
}
var newObj2 = Object.values(obj2)
console.log(newObj2, "newObj2"); //["哈哈", "嘻嘻", "呵呵"]
- Object.entries()方法
// Object.entries()方法
// Object.entries()方法會把傳進去的對象的鍵與值分別作爲數組中的一項 , 已數組的形式輸出;
var obj1 = {
name: '小李',
age: '20',
gender: '男'
}
var newArr = Object.entries(obj1)
console.log(newArr,'數組'); // [['name','小李'],['