美文网首页
深入之数组方法的实现原理

深入之数组方法的实现原理

作者: 明里人 | 来源:发表于2019-08-15 20:56 被阅读0次
map的用法和实现原理:

map即映射,将原数组映射返回新数组。

用法:

let arr = [1,2,3];
arr1 = arr.map(item => item * 2); // [2,4,6]

实现原理:

Array.prototype._map = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
            
    let newArr = [];
    for (var i = 0; i < this.length; i ++) {
        newArr.push(callback && callback(this[i], i, this));
    }
    return newArr;
}
filter的用法和实现原理:

filter即过滤,将原数组根据条件过滤返回新数组

用法:

let arr = [2,4,6,8];
let arr1 = arr.filter(function(item) {
  return item > 5;
})
console.log(arr1); // [6,8]

实现原理:

Array.prototype._filter = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
            
    let newArr = [];
    for (var i = 0; i < this.length; i ++) {
        callback(this[i], i, this) && newArr.push(this[i]);
    }
    
    return newArr;
}
find的用法和实现原理:

查询数组第一个符合条件的元素,并返回该元素。

用法:

let arr = [2,4,6,8];
let value = arr.find(function(item) {
  return item > 5;
})
console.log(value); // 6;

实现原理:

Array.prototype._find = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
            
    let currentVal;
    for (var i = 0; i < this.length; i ++) {
        if (callback(this[i], i, this)) {
            currentVal = this[i];
            break;
        }
    }
    return currentVal;
}
reduce的用法和实现原理

reduce方法接收一个函数作为累加器,数组中每个值从左到右开始缩减,最终成为一个值。

用法:

let arr = [2,4,6,8];
let value = arr.reduce((prev, curr, index, arr) => {
  return prev + curr;
}, 0);
console.log(value); // 20

实现原理:

Array.prototype._reduce = function(callback, initVal) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
            
    for (var i = 0; i < this.length; i ++) {
        initVal = callback(initVal, this[i], i, this);
    }
    return initVal;
}
some的用法和实现原理:

只要有一个元素满足条件就返回true。

用法:

let arr = [1,2,3,4];
let value = arr.some(item => item > 3);
console.log(value); // true

实现原理:

Array.prototype._some = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
    
    let flag = false;
    for (var i = 0; i < this.length; i ++) {
        if (callback(this[i], i, this)) {
            flag = true;
            break;
        }
    }
    return flag;
}
every的用法和实现原理:

数组中每一个元素满足条件就返回true。

用法:

let arr = [2,4,6,8];
let value = arr.every(item => item > 2);
console.log(value); // false

实现原理:

Array.prototype._every = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not a function');
            
    let flag = true;
    for (var i = 0; i < this.length; i ++) {
        if (!callback(this[i], i, this)) {
            flag = false;
            break;
        }
    }
    
    return flag;
}
利用reduce实现map:
Array.prototype._map = function(callback) {
    if (typeof callback === 'function') {
        return this.reduce((prev,curr,index,arr) => {
            prev.push(callback(curr,index,arr));
            return prev;
        },[])
    } else {
        throw new Error(callback + ' is not function');
    }
}
利用reduce实现filter:
Array.prototype._filter = function(callback) {
    if (typeof callback !== 'function') throw new TypeError(callback + ' is not function');
            
    return this.reduce((prev, curr, index, arr) => {
        callback(curr, index, arr) ? prev.push(curr) : null;
        return prev;
    },[])
}
利用reduce求最大值和最小值:
let arr = [1,2,3,4,5];
console.log(arr.reduce((prev, curr) => Math.max(prev, curr))); // 5
console.log(arr.reduce((prev, curr) => Math.min(prev, curr))); // 1
利用reduce实现数组去重:
let arr = [1,2,1,2,1,2,3,4,1,3,2,3,5];
let arr2 = arr.reduce((prev,curr) => {
    !prev.includes(curr) && prev.push(curr);
    return prev;
},[]);
利用reduce扁平化数组:
function fun(arr) {
    if (!Array.isArray(arr)) throw new TypeError(arr + ' is not Array');
            
    return arr.reduce((prev, curr) => {
        return Array.isArray(curr) ? prev.concat(fun(curr)) : prev.concat(curr) // concat也可以拼接元素,并返回拼接后的数组,push只能返回添加的元素
    },[])
}
实现一个flat:
// 递归实现
Array.prototype.flat= function() {
    return [].concat(...this.map(item => (Array.isArray(item) ? item.flat() : [item])));
}
// 迭代实现
function flatten(arr) {
    let arrs = [...arr]; 
    let newArr = [];
    while (arrs.length) {
        let item = arrs.shift();  // 这里使用前删
        if (Array.isArray(item)) {
            arr.unshift(...item); // 这里使用前增
        } else {
            newArr.push(item); // 这里按顺序添加到新数组中
        }
    }
    return newArr;
}

相关文章

网友评论

      本文标题:深入之数组方法的实现原理

      本文链接:https://www.haomeiwen.com/subject/qzqtsctx.html