[JavaScript知识库]javascript中数组方法map、some、every、filter的封装。

开篇

• 在Javascript中，我们要对数组操作，可以用到很多已经封装好的函数进行使用比如： map、filter、some、every。

1. Map

当我们要修改数组中一些数据的时候，可以使用map方法来修改。


方法介绍：该方法可以改变原来数组里面的内容。


问题：将 [‘🍓’,‘🍋’,‘🍒’,‘🍑’,‘🍊’,‘🍉’] 添加价格。
答案：[‘2￥🍓’,‘3￥🍋’,‘4￥🍒’,‘5￥🍑’,‘6￥🍊’,‘7￥🍉’];

var fruits = ['🍓','🍋','🍒','🍑','🍊','🍉'];
// --------------------------------------------------
var newFruits = fruits.map(function (item,index) {  
	return `${index + 2}￥` + item
})
// --------------------------------------------------
console.log(newFruits)

2. filter

当我们要将一个数据里的东西筛选出来的时候，就可以用到filter。


方法介绍：该方法可以对数组里面的数据进行筛选，返回值为一个筛选完的新数组。


问题：将大于16岁的对象输出出来。


数据：
var play = [{
name: ‘小李’, age: 18, eat: ‘🍓’,
}, {
name: ‘张三’, age: 12, eat: ‘🍋’,
}, {
name: ‘奥里给’, age: 99, eat: ‘💨’,
}, {
name: ‘小张’, age: 16, eat: ‘🍉’
}, {
name: ‘小米’, age: 16, eat: ‘🍒’
}];

var play = [{
   name: '小李', age: 18, eat: '🍓',
}, {
    name: '张三', age: 12, eat: '🍋',
}, {
    name: '奥里给', age: 99, eat: '💨',
}, {
    name: '小张', age: 16, eat: '🍉'
}, {
    name: '小米', age: 16, eat: '🍒'
}]; 

var newArr = play.filter(function (item) {
	return item.age > 18;
})

console.log(newArr);

3.some

当我们需要快速查询一个商品的时候，我们就可以使用some方法。


方法介绍：该方法返回值如果为 true 则停止执行，返回 true。


问题：判断数据里面是否有短裤🩳。


数据：
var shop = [{ id: 1, name: ‘比基尼’, goods: ‘👙’ }, { id: 2, name: ‘长裤’, goods: ‘🧦’ }, { id: 3, name: ‘短裤’, goods: ‘🩳’ }, { id: 4, name: ‘裙子’, goods: ‘👗’ }, { id: 5, name: ‘帽子’, goods: ‘👒’ }];

var shop = [{ id: 1, name: '比基尼', goods: '👙' }, { id: 2, name: '长裤', goods: '🧦' }, { id: 3, name: '短裤', goods: '🩳' }, { id: 4, name: '裙子', goods: '👗' }, { id: 5, name: '帽子', goods: '👒' }];

var result = shop.some(function (item,index) {
	console.log(item);
    return item.name == '短裤';
});

console.log(result); // true

4. every

当我们要查找同学们的试卷中是否有不及格的同学的时候可以使用 every。


方法介绍：该方法返回值如果为 false 则停止执行，返回 false，如果为 true一直进行下去。


问题：查找数据源中是否有不及格的同学🧑🏼。


数据：
var test = [{ name: ‘小张’, grade: 100 }, { name: ‘小米’, grade: 99 }, { name: ‘小雷’, grade: 1 }, { name: ‘小烽’, grade: 20 }, { name: ‘小广’, grade: 0 }];

var test = [{ name: '小张', grade: 100 }, { name: '小米', grade: 99 }, { name: '小雷', grade: 1 }, { name: '小烽', grade: 20 }, { name: '小广', grade: 0 }];

var resulte = test.every(function (item) {
    console.log(item);
    return item.grade > 60;
})

console.log(resulte); // false

一：map🍫的封装

var arr = [1, 2, 35, 6, 7];
[].__proto__.forMap = function (callBack) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {

        newArr[i] = callBack(this[i], i, this);
    }

    return newArr;
}

var b = arr.forMap(function (item, index, arr) {
    return 'ID:' + item + '🌙';
})

console.log(b); // ["ID:1🌙", "ID:2🌙", "ID:35🌙", "ID:6🌙", "ID:7🌙"]

二：filter🍬的封装

var arr = [1, 2, 35, 6, 7];
[].__proto__.forFilter = function (callBack) {
    var newArr = [];
    var flag = null;
    for (var i = 0; i < this.length; i++) {
        flag = callBack(this[i], i, this);
        if (flag) {
            newArr.push(this[i]);
        }
    }
    return newArr;

}

var b = arr.forFilter(function (item, index, arr) {
    return item > 1;
})

console.log(b); // [2, 35, 6, 7]

三：some🍭的封装

[].__proto__.forSome = function (callBack) {
    var flag = null;
    for (var i = 0; i < this.length; i++) {
        flag = callBack(this[i], i, this);
        if (flag) {
            return true;
        }
    }
    return false;
}

var b = arr.forSome(function (item, index, arr) {
    console.log(item);
    return item > 1;
})

console.log(b); // true

四：every🍡的封装

[].__proto__.forEvent = function (callBack) {
    var flag = null;
    for (var i = 0; i < this.length; i++) {
        flag = callBack(this[i], i, this);
        if (!flag) {
            return false;
        }
    }

    return true;

}

var b = arr.forEvent(function (item, index, arr) {
    console.log(item);
    return item >= 1;
})

console.log(b); // false