天天看點

數組的some,every,find,map,filter,reduce,forEach比較

不改變原數組,不建立新數組:some,every,find

不改變原數組,建立新數組:map,filter,reduce

周遊:forEach

some:

若目标數組中有一個或一個以上的對象符合條件的傳回true,否則傳回false

var computers = [{
		name: "Apple",
		ram: 8
	},
	{
		name: "IBM",
		ram: 4
	},
	{
		name: "Acer",
		ram: 32
	},
];
var some = computers.some(function(computer) {
	return computer.ram > 16;
});
console.log(some); //true
console.log(computers); //[{ name: "Apple", ram: 8 },{ name: "IBM", ram: 4 },{ name: "Acer", ram: 32 }]
           

every:

若目标數組中每一個對象都符合條件則傳回true,否則傳回false

var computers = [{
		name: "Apple",
		ram: 8
	},
	{
		name: "IBM",
		ram: 4
	},
	{
		name: "Acer",
		ram: 32
	},
];
var every = computers.every(function(computer) {
	return computer.ram > 16;
});
console.log(every); //false

           

find:

在數組中找到符合要求的對象 和filter的差別就是找到符合要求的對象就停止尋找了,傳回的是一個對象,而filter傳回的是所有符合要求的對象組成的新數組

//假定有一個對象數組,找到符合條件的對象
var users = [{
		name: 'Jill'
	},
	{
		name: 'Alex',
		id: 1
	},
	{
		name: 'Bill'
	},
	{
		name: 'Alex'
	},
];
var user = users.find(function(user) {
	return user.name === 'Alex';
});
console.log(user); //[{ name: 'Alex', id: 1 }]
//假定有一個對象數組(A),根據指定對象的條件找到數組中符合條件的對象
var posts = [{
		id: 1,
		title: "Node.js"
	},
	{
		id: 2,
		title: "React.js"
	},
];
var comment = {
	postId: 1,
	content: 'hello'
};

function postForComment(posts, comment) {
	return posts.find(function(post) {
		return post.id === comment.postId
	})
};
console.log(postForComment(posts, comment)); //{ id: 1, title: "Node.js" }
           

filter:

filter為“過濾”。數組filter後,傳回過濾後的新數組

//假定有一個對象數組(A),擷取數組中指定類型的對象放到B數組中
var products = [{
		name: "cucumber",
		type: "vegetable"
	},
	{
		name: "banana",
		type: "fruit"
	},
	{
		name: "celery",
		type: "vegetable"
	},
	{
		name: "orange",
		type: "fruit"
	},
];
var filtered = products.filter(function(product) {
	return product.type === "vegetable"
});
console.log(filtered); //[{ name: "cucumber", type: "vegetable" }, { name: "celery", type: "vegetable" }]
console.log(products) //[{ name: "cucumber", type: "vegetable" },{ name: "banana", type: "fruit" },{ name: "celery", type: "vegetable" },{ name: "orange", type: "fruit" }]

//假定有一個對象數組(A),過濾掉不滿足以下條件的對象
//條件:蔬菜 數量大于0 價格小于10
var products = [{
		name: "cucumber",
		type: "vegetable",
		quantity: 0,
		price: 1
	},
	{
		name: "banana",
		type: "fruit",
		quantity: 10,
		price: 16
	},
	{
		name: "celery",
		type: "vegetable",
		quantity: 30,
		price: 8
	},
	{
		name: "orange",
		type: "fruit",
		quantity: 3,
		price: 6
	},
];
filters = products.filter(function(product) {
	return product.type === 'vegetable' &&
		product.quantity > 0 &&
		product.price < 10
});
console.log(filters); //[{ name: "celery", type: "vegetable", quantity: 30, price: 8 }]

           

map:

原數組被“映射”成對應新數組,傳回一個新數組

//假定有一個數值數組(A),将A數組中的值以雙倍的形式放到B數組
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(number) {
	return number * 2;
})
console.log(doubled); //[2,4,6,8,10]


//假定有一個對象數組(A),将A數組中的對象某個屬性的值存儲到B數組中
var cars = [{
		model: 'Buick',
		price: 'cheap'
	},
	{
		model: 'BMW',
		price: 'expensive'
	},
];
var prices = cars.map(function(car) {
	return car.price;
});
console.log(prices) //(2) ["cheap", "expensive"]

           

reduce:

常用于疊加,可以代替forEach等

//計算數組中所有值的總共
var numbers = [10, 20, 30];
var sumValue = numbers.reduce(function(sum, number) {
	return sum += number;
}, 0);//這裡的0是sun的初始值,如果是100,則sumValue就是160了
console.log(sumValue); //60

//使用reduce能同時實作map和filter,reduce能周遊數組兩遍
const numberss = [10, 20, 30, 40];
const doubleedOver50 = numberss.reduce((finalList, num) => {
	num = num * 2;
	if (num > 50) {
		finalList.push(num);
	}
	return finalList;
}, []);
console.log(doubleedOver50); //[60,80]

//将數組中對象的某個屬性抽離到另外一個數組中
var primaryColors = [{
		color: 'red'
	},
	{
		color: 'yellow'
	},
	{
		color: 'blue'
	},
];
var color = primaryColors.reduce(function(previous, primaryColor) {
	previous.push(primaryColor.color);
	return previous;
}, []);
console.log(color); //["red", "yellow", "blue"]


// 判斷字元串括号是否對稱,遇到(時加1,遇到)時減1
function balancedParens(string) {
	return !string.split("").reduce(function(previous, char) {
		if (previous < 0) {
			return previous
		}; //若")"比"("先出現
		if (char == "(") {
			return ++previous
		};
		if (char == ")") {
			return --previous
		};
		return previous;
	}, 0);
};
console.log(balancedParens(")((()))")); //false
           

foreach:

ES6新增的一種循環

var colors = ['red', 'blue', 'green']
colors.forEach(function(color) {
	console.log(color); //red blue green
})
           

繼續閱讀