ES5数组方法的简单实现、及ES6数组的方法简单介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37615202/article/details/88429703

 先插一个题外话,判断一个数组是不是空数组或者一个对象是不是空对象

var a = []
if (Object.prototype.toString.call(a) === '[object Array]' && a.length === 0) {
    console.log('this is empty array')
}


var obj1 = {};
if (JSON.stringify(obj1) === '{}') {
    return console.log('this is empty array') // 如果为空,返回false
}

function checkNullObj(obj) {
    return Object.keys(obj).length === 0
}

checkNullObj(ob1);
function proxy(fn, obj) {
    return function () {
        fn.apply(obj, arguments);
    };
}

/* Array 相关 */
function filter(arr, callback) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (callback(arr[i], i)) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

//forEach 的时候无法使用break  但是可以用try catch中的throw new Error来停止
function forEach(arr, callback) {
    for (var i = 0; i < arr.length; i++) {
        callback(arr[i], i);
    }
}
function map(arr, callback) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        newArr.push(callback(arr[i], i));
    }
    return newArr;
}
function findIndex(arr, callback) {
    for (var i = 0; i < arr.length; i++) {
        if (callback(arr[i], i)) {
            return i;
        }
    }
    // eslint-disable-next-line
    return undefined;
}
function find(arr, callback) {
    for (var i = 0; i < arr.length; i++) {
        if (callback(arr[i], i)) {
            return arr[i];
        }
    }
    // eslint-disable-next-line
    return undefined;
}
function indexOf(arr, item) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === item) {
            return i;
        }
    }
    return -1;
}
function some(arr, callback) {
    for (var i = 0; i < arr.length; i++) {
        if (callback(arr[i], i)) {
            return true;
        }
    }
    return false;
}

ES6:

Array.from()   该方法用于将两类对象转为真正的数组: 类似数组的对象(nodelist & arguments) & 可遍历(iterable)对象包括ES6的(set map)

let arraylike = {
    '0': 1,
    '1': 2,
    '2': 3,
    length: 3
}

//es5的写法
let arr1 = [].slice.apply(arraylike);
console.log(arr1);
//es6的写法
let arr2 = Array.from(arraylike);
console.log(arr2);

Array.of() 用于将一组值转换为数组

//es5
console.log(Array()); // []
console.log(Array(3));// [, , ,]
console.log(Array(1,3,3)); // [1,3,3]
//es6
console.log(Array.of()); // []
console.log(Array.of(3));// [3]
console.log(Array.of(1, 3, 3)); // [1,3,3]

上面的都是数组的方法,下面的是数据实例的方法

copyWithin():

Array.prototype.copyWithin(target, start = 0, end = this.length)

  • target: true 从该位置开始替换数据
  • start: false 默认为0 从该位置读取数据,如果为负值,表示倒数。
  • enf: false 到该位置停止读取数据,默认等于数组的长度。如果为负值。表示倒数
//eg
console.log([1, 2, 3, 4, 5, 6].copyWithin(0, 3, 4)); //[4,2,3,4,5,6]
console.log([1, 2, 3, 4, 5, 6].copyWithin(0, -2, -1)); //[5,2,3,4,5,6]

find() findIndex()

find 方法用于找出符合条件的数组成员。他的参数是一个回调函数。直到找出第一个返回值位 true的成员。然后返回改成员

findIndex 方法用于找出符合条件的数组成员。他的参数是一个回调函数。直到找出第一个返回值位 true的成员的位置

console.log([1, 2, -1, -3].find(n => n < 0));  // -1
console.log([1,2,-1,-3].findIndex( n => n<0)); // 2

//有BUG   慎用
console.log([{ 3: 'a' }, { 2: 'b' }, { 1: 'c' }].find(function(val, index, arr) {
    return  JSON.stringify(val) === JSON.stringify({ 1: 'c' })
}));
console.log([{ 3: 'a' }, { 2: 'b' }, { 1: 'c' }].findIndex(function (val, index, arr) {
    return JSON.stringify(val) === JSON.stringify({ 1: 'c' })
}));

fill()

console.log(['a', 'b', 'c'].fill(7));  //[7,7,7]
console.log(['a', 'b', 'c'].fill(7,1,2)); // ['a',7,'c']

includes()

console.log(['a', 'b', 'c'].includes(7));  //false
console.log(['a', 7, 'c'].includes(7));    //true

猜你喜欢

转载自blog.csdn.net/weixin_37615202/article/details/88429703
今日推荐