ES6数组操作方法forEach,map,filter...

407 阅读3分钟

es6数组方法


1、forEach

var colors = ['red','blue','green']

//原始遍历方法
for(var a = 0;a < colors.length;a ++){
    console.log(colors[a]);
}


colors.forEach(function(color){
    
})

//练习:遍历数组中的值,并计算总和

var numbers = [1,2,3,4,5];

var sum = 0;

function adder(number){
    sum += number;
}

numbers.forEach(adder)

2、map

//1、把一个数组里面的元素x2放到新数组中
let Arr1 = [1,2,3];

let newArr = Arr1.map((arr)=>{
    return arr * 2;
})


newArr.forEach((arr) => {
    
})

//2、假设有一个对象数组A,姜A数组中某个属性的值存储到数组B中

var persons = [
    {name:'zlk',price:123},
    {name:'zlk2',price:1231},
    {name:'zlk3',price:12312}
]

let newPerson = persons.map((person) =>{
    return person.name;
})

3、filter

//demo1:假设有一个数组对象A,将数组A中制定类型的对象放到数组B中

let products = [
    {name:'apple',type:'fruit'},
    {name:'celery',type:'vegetables'},
    {name:'cucumber',type:'vegetables'},
    {name:'banana',type:'fruit'}
]

let vegetables = products.filter((vegetable)=> {
    return vegetable.type == 'vegetables';
})




//demo2:假设有一个数组A,筛选掉不满足以下条件的对象
//条件:蔬菜 数量大于0,价格小于10
let products2 = [
    {name:'apple',type:'fruit',quantity:10,price:1},
    {name:'celery',type:'vegetables',quantity:5,price:10},
    {name:'cucumber',type:'vegetables',quantity:23,price:3},
    {name:'banana',type:'fruit',quantity:5,price:15}
]

let vegetables2 = products2.filter((vegetable) => {
    return vegetable.type == 'vegetables' 
    && vegetables.quantity > 0
    && vegetables.price < 10
})



//demo3:根据一个数组的id筛选掉另一个数组中不满足条件的元素
let post = {id:4,title:'es6'};

let comments = [
    {postId:4,centent:'Angular4'},
    {postId:3,centent:'Vue.js'},
    {postId:4,centent:'Node.js'},
    {postId:2,centent:'React.js'},
]

function commentsForPost(post,comments){
    return comments.filter((comment) => {
        return comment.postId == post.id;
    })
}

4、find:找到一个之后就不会去再找了

//demo1:假设有一个数组A,找到符合条件的对象
let users = [
    {name:'zlk',age:'12'},
    {name:'lkz',age:'15'},
    {name:'zkl',age:'17'},
    {name:'zlk',age:'19'}

]

let user = users.find((user)=>{
    return user.name = 'zlk';
})



//demo2:假设有一个数组对象A,根据制定对象的条件找到数组中符合条件的对象

let users2 = [
    {uId:1,name:'zlk',age:'12'},
    {uId:2,name:'lkz',age:'15'},
    {uId:3,name:'zkl',age:'17'},
    {uId:4,name:'zlk',age:'19'}

]

let user2 = {id:2,name:'wyf'};

function userForUsers(user2,users2){
    return users2.find((user) =>{
        return user.uId == user2.id 
    })
}

5、Some和Every

/**
 * Every 一假即假
 * Some 一真即真
 */
let every = users2.every((user)=>{
    return user.age > 17;
})



let some = users2.some((user) =>{
    return user.age > 17;
})



//demo 假设有一个注册页面,判断input的值不为空
function regest(value){
    this.value = value;
}

regest.prototype.validate=function(){
    return this.value.length > 0;
}

let username = new regest('');
let pwd = new regest('111222');
let phone = new regest('1201245102');

let values = [username,pwd,phone];

let checkInfo = values.every((value) =>{
    return value.validate();
})
console.log('checkInfo: ', checkInfo);

if(checkInfo){
    console.log("注册成功!");
}else{
    console.log("请检查信息是都正确!");
}

6、reduce:可以替代掉map,forEach等

//demo:计算数组中所有数的总和:提示forEach

let sumArr = [10,20,30];
let sum2 = 0;
sumArr.forEach(arr => {
    return  sum2 += arr;
});

console.log(sum2);

sum2 = sumArr.reduce((sum2,num) =>{
    return sum2 + num;
},0);

console.log(sum2);

//demo2:将数组中的某个属性抽离到另一个数组中:提点map
let permaryColor = [
    {color:'red'},
    {color:'green'},
    {color:'yellow'}
]

let newColorArr = permaryColor.map((color)=>{
    return color.color;
})
console.log("---------map-----------");
console.log(newColorArr);
console.log("---------reduce-----------");
let newArrColor = [];
let newColorArrForReduce = permaryColor.reduce((newArrColor,oldColr) => {
    console.log(oldColr.color);
    newArrColor.push(oldColr.color);
    return newArrColor;
},[]);

console.log(newColorArrForReduce);


//demo3:判断字符串中的括号是否对称

let str = '())()()())()(())';

function balancedParens(string){
    return !string.split("").reduce((pervious,char) =>{
       if(pervious < 0){return pervious};
        if(char == "("){
            return ++pervious;
        }
        if(char == ")"){
            return --pervious;
        }
        return pervious;
    },0);
}

console.log(balancedParens(str));