forEach
1.forEach没有返回值,本质上等同于 for 循环,对每一项执行 function 函数。
2.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
var colors = ["red","blue","green"]
//es5遍历数组的方法
for(var i = 0;i < colors.length;i++) {
console.log(colors[i])
}
//es6 forEach
colors.forEach(function(color,index) {
console.log(color,index)
})
//练习:遍历数组中的值,并计算总和
var numbers = [1,2,3,4,5];
var sum = 0
function add(number) {
sum += number
}
//在forEach中调动函数不需要写()哦,直接写函数名就可以了
numbers.forEach(add)
console.log(sum)
map
1.map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
2.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
- map() 不会改变原始数组。
3.使用map一定要return
//将数组中的值以双倍的值返回到新数组中
var numbers = [1,2,3];
var doubleNumbers = []
//用es5的方法
for(var i = 0; i < numbers.length;i++) {
doubleNumbers.push(numbers[i]*2)
}
console.log(doubleNumbers)
//es6 map的方法
var doubled = numbers.map(function(number,index) {
console.log(number,index)
return number * 2
})
console.log(doubled)
var cars = [
{model:"buick",price:"CHEAP"},
{model:"bmw",price:"expensive"}
];
var prices = cars.map(function(car) {
return car.price
})
console.log(prices)
filter
1.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
2.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
//假设有一个对象数组(A),获取数组中指定类型的对象放在b数组中
var porducts = [
{name:"cucumber",type:"vegetable"},
{name:"banana",type:"fruit"},
{name:"celery",type:"vegetable"},
{name:"orange",type:"fruit"}
]
var filteredProducts = [];
//使用es5的方法
for(var i = 0; i < porducts.length; i++) {
if(porducts[i].type === 'fruit') {
filteredProducts.push(porducts[i])
}
}
console.log(filteredProducts)
//使用es6 filter
var porducts2 = porducts.filter(function(product) {
return product.type === 'fruit'
})
console.log(porducts2) //0: {name: "banana", type: "fruit"} 1: {name: "orange", type: "fruit"}
//假设有一个对象数组(A),过滤掉不满足一下条件的对象 条件:蔬菜 数量大于0 价格小于10
var porducts = [
{name:"cucumber",type:"vegetable",quantity:0,price:1},
{name:"banana",type:"fruit",quantity:10,price:16},
{name:"celery",type:"vegetable",quantity:30,price:10},
{name:"orange",type:"fruit",quantity:3,price:6}
]
porducts = porducts.filter(function(product) {
return product.type == "vegetable" && product.quantity > 0 && product.price == 10
})
console.log(porducts) //{name: "celery", type: "vegetable", quantity: 30, price: 10}
//假设有两个数组(A,B),根据A中id值,过滤掉B数组不符合的数据
var post = {id:4,title:"javascript"};
var comments = [
{postId:4,content:"Angular4"},
{postId:2,content:"vue.is"},
{postId:3,content:"Node.js"},
{postId:4,content:"React.js"}
]
function commentsForPost(post,comments) {
return comments.filter(function(comment) {
return comment.postId === post.id;
})
}
console.log(commentsForPost(post,comments)) //0: {postId: 4, content: "Angular4"} 1: {postId: 4, content: "React.js"}
find
1.find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
2.find() 方法为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
3.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
//假设有一个对象数组(A),找到符合条件的对象
var users = [
{name:"jill"},
{name:"Alex"},
{name:"Bill"}
]
var user;
es5
for(var i = 0; i < user.length;i++) {
if(user[i].name === "Alex") {
user = user[i];
break;
}
}
//es6 find 找到符合条件以后就不再执行 , 只会找到第一次执行的东西
user = users.find(function(user) {
return user.name === "Bill";
})
console.log(user) //{name: "Bill"}
//假设有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
var posts = [
{id:1,title:"Node.js"},
{id:2,title:"React.js"}
];
var comment = {postID:1,content:"Hello World!"};
function postForComment(posts,comment) {
return posts.find(function(post) {
return post.id === comment.postID
})
}
console.log(postForComment(posts,comment)) //{id: 1, title: "Node.js"}
every&&some
every
1.every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
2.every() 方法使用指定函数检测数组中的所有元素,如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测,如果所有元素都满足条件,则返回 true。
3.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
some
1.some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
2.some() 方法会依次执行数组的每个元素,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,如果没有满足条件的元素,则返回false。
3.可传三个形参 第一个是当前元素 为必填,第二个是当前索引值 可以不填,第三个是当前元素所属的数组对象 可以不填
//计算对象数组中每个电脑的操作系统是否可用,大于16位操作系统表示可用,否则不可用
var computers = [
{name:"Apple",ram:16},
{name:"IBM",ram:4},
{name:"Acer",ram:32}
];
var everyComputersCanRunProgram = true;
var someComputersCanRunProgram = false;
es5
for(var i = 0; i < computers.length; i++) {
var computer = computers[i];
if(computer.ram < 16) {
// 只要一个对象为false 则都为false
everyComputersCanRunProgram = false
}else {
// 只要一个对象为ture 则都为true
someComputersCanRunProgram = true
}
}
console.log(everyComputersCanRunProgram,someComputersCanRunProgram)
//every:一假即假 some:一真即真
var every = computers.every(function(computer) { //必须要有返回值 用于检测数组所有元素是否都符合指定条件
return computer.ram > 16
})
var some = computers.some(function(computer) { //只要一个为真 就是真
return computer.ram > 16;
})
console.log(every,some)
//假设有一个注册页面,判断所有input内容的长度是否大于0
//se5
function Filed(value) {
this.value = value;
}
Filed.prototype.validate = function() {
return this.value.length > 0
}
var username = new Filed("henrywu");
var telephone = new Filed("8888888888")
console.log(username.validate());
console.log(telephone.validate())
// es6
var fields = [username,telephone];
var formIsValid = fields.every(function(field) {
return field.validate();
})
console.log(formIsValid)
reduce
1.reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
2.语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue),initialValue为初始值,可选填
//1,计算数组中所有值的总和
var numbers = [10,20,30]
var sum = 0
// es5
for(var i=0; i<numbers.length;i++) {
sum+=numbers[i]
}
console.log(sum)
es6
var sumValue = numbers.reduce(function(sum2,numbers) {
return sum2 + numbers
},0) //0为初始值
console.log(sumValue)
//2,将数组中对象的某个属性抽离到另外一个数组中
var primaryColor = [
{color:"red"},
{color:"yellow"},
{color:"blue"}
]
var colors = primaryColor.reduce(function(previous,primaryColor) { //第一个参数为初始值 第二个为数组中的每个item
previous.push(primaryColor.color)
return previous
},[])
console.log(colors)
//判断字符串中括号是否对称
function balabcedParens(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(balabcedParens("(((())))"));
获取索引值
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。