05-实现数组的方法

image.png

1.数组的去重

  • 方式一
var arr = [1, 2, 3, 4, 3, 2, 1];
var newArr = [];
for (var i = 0, bool = false; i < arr.length; i++) {
    for (var j = 0, bool = false; j < newArr.length; j++) {
        if (arr[i] === newArr[j]) {
            bool = true;
            break;
        }
    }
    if (!bool) {
        newArr.push(arr[i])
    }
}
console.log(newArr)//[ 1, 2, 3, 4 ]
  • 方式二
Array.prototype.distinct = function () {
    var arr = this,
        result = [];
    for (var i = 0, obj = {}; i < arr.length; i++) {
        if (!obj[arr[i]]) { //如果能查找到，证明数组元素重复了
            obj[arr[i]] = 1;
            result.push(arr[i]);
        }
    }
    return result;
};
var a = [1, 2, 3, 4, 5, 6, 5, 3, 2, 4, 56, 4, 1, 2, 1, 1, 1, 1, 1, 1,];
console.log(a.distinct()); //[1,2,3,4,5,6,56]
  • 方式三
let array = [12, 23, 12, 15, 25, 23, 25, 14, 16]

let arr = [...new Set(array)]
let arr1 = Array.from(new Set(array))

console.log(arr,arr1)
  • 方式四
let arr = [12, 23, 12, 15, 25, 23, 25, 14, 16]
// 拿当前项和后面的内容比较
for (let i = 0; i < arr.length - 1; i++) {
    let item = arr[i], args = arr.slice(i + 1)
    if (args.indexOf(item) > -1) {
        // 包含，把当前项删除
        arr.splice(i, 1)
    }
}
console.log(arr)

  • 数组中含有对象时的去重

    var arr = [{ a: 1, b: 2}, { a: 1, b: 2}, { a: 2, b: 2}, 
           { a: 1, b: 4}, { a: 4, b: 2}, { a: 1, b: 4}, ]

var arr1 = [];
for (var i = 0; i < arr.length; i++) {
    for (var j = 0, bool = false; j < arr1.length; j++) {
        if (JSON.stringify(arr[i]) === JSON.stringify(arr1[j])) {
            bool = true;
            break;
        }
    }
    if (!bool) arr1.push(arr[i]);
}
console.log(arr1);

//0: {a: 1, b: 2}
//1: {a: 2, b: 2}
//2: {a: 1, b: 4}
//3: {a: 4, b: 2}

  • 去掉arr数组中，含有arr1的项

    var arr = [1,2,3,4,5,6];
var arr1 = [2,3,5];
var arr2 = [];
for(var i = 0; i < arr.length; i++){
    for(var j = 0, bool = false; j < arr1.length; j++){
        if(arr[i] === arr1[j]){
            bool = true;
            break;
        }
    }
    if(!bool) arr2.push(arr[i]);   
}
console.log(arr2);

2.数组的拼接concat()

将当前数组与多个元素或者多个数组连接形成新数组，原数组不变，返回新数组

var arr = [1,2,3,4];
var arr1 = arr.concat(5,6);
var arr1 = arr1.concat([6,7],[8,9]);
console.log(arr1,arr);  // [1, 2, 3, 4, 5, 6,6, 7, 8, 9]  [1, 2, 3, 4]
  • 复制原数组成为新数组
var arr = [1,2,3,4];
var arr1 = arr.concat();
  • 实现concat()方法(原生concat不能做深层次的赋值)
function concat1(array) {
    //布尔值为非的6种情况： "" undefiend null 0 NaN false 
    //|| 不是数组：对象 字符串 数字
    if (!array || !Array.isArray(array)) return [];
    var arr1 = [];
    //下面通过循环的方式，给数组赋值，而不是引用赋值
    for (var i = 0; i < array.length; i++) {
        arr1.push(array[i]);
    }
    if (arguments.length === 1) return arr1;
    for (var j = 1; j < arguments.length; j++) {
        // if(Object.prototype.toString.call(arguments[j])==="[object Array]")
        if (Array.isArray(arguments[j])) { //ES6
            for (var l = 0; l < arguments[j].length; l++) 
                arr1.push(arguments[j][l]);
        } else {
            arr1.push(arguments[j]);
        }
    }
    return arr1;
}

console.log(concat1(arr, 4, 5, 6, [1, 2, 3], [4, 5, 6], {a: 1,  b: 2}));
// [1, 2, 3, 4, 4, 5, 6, 1, 2, 3, 4, 5, 6, {a:1,b:2}]

3. join()方法

将数组中所有元素连接为一个字符串。

//以某个符号连接数组的元素,形成字符串
var arr = [1, 2, 3, 4, 5];
var str = arr.join("#");
console.log(str);   //1#2#3#4#5

//默认使用逗号连接数组元素,形成字符串
var arr = [1, 2, 3, 4, 5];
var str = arr.join();
console.log(str);   //1,2,3,4,5

//使用空字符连接将会形成元素紧密连接的字符串
var arr = [1, 2, 3, 4, 5];
var str = arr.join("");
console.log(str);   //12345
  • 实现join()方法
function join1(array, separator) {
    var str = "";
    if (!array || !Array.isArray(array)) return str;
    //如果没有给分隔符，默认为","分隔
    if (separator === undefined) separator = ",";
    separator = String(separator);
    for (var i = 0; i < array.length; i++) {
        if (i === array.length - 1) {
            str += array[i];
            break;
        }
        str += array[i] + separator;
    }
    return str;
}
console.log((join1([1, 2, 3], null);    //1null2null3
console.log(join1([1, 2, 3], { a: 1, b: 2}));  //1[object Object]2[object Object]3

4. splice方法

将数组从第一个参数开始到第二个参数结束之前的内容截取形成一个新数组返回,原数组不变

var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.slice(1,3);  
console.log(arr1);      //[2,3]

var arr1 = arr.slice();//如果没有任何参数就会从头截取到尾部
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

var arr1 = arr.slice(1);//如果第二个参数没有,就会从开始截取到尾部
console.log(arr1);  //[2, 3, 4, 5, 6]
  • 将参数转换为正向数值时,前面的必须小于后面
var arr1=arr.slice(-3,-1);//如果是负数就会从后向前数,然后再截取
console.log(arr1);  //[4, 5]
  • 实现slice方法
var arr = [1, 2, 3, 4, 5, 6];

function slice1(array, start, end) {
    if (!array || !Array.isArray(array)) return [];
    start = Number(start);
    end = Number(end);
    if (isNaN(start)) start = 0;
    if (isNaN(end)) end = array.length;
    if (start < 0) start = array.length + start;
    if (end < 0) end = array.length + end;
    var arr = [];
    for (var i = start; i < end; i++) {
        arr.push(array[i]);
    }
    return arr;
}
console.log(slice1(arr, -3, -1));   //[4, 5]

5.forEach遍历数组

  1. 遍历数组,回调函数中有三个参数,每个元素,下标,原数组
  2. 遍历一个元素,就执行该函数一次
  3. forEach只能遍历数组,不能返回
var arr = [11,22,33];
arr.forEach(function(item, index, array){
    console.log(item, index, array);
})
//11 0  [11, 22, 33]
//22 1  [11, 22, 33]
//33 2  [11, 22, 33]
  • 实现forEach
function forEach1(array,fn){
    for(var i = 0; i < array.length; i++){
        //因为forEach在遍历的时候，不会遍历undefined
        if(array[i] === undefined) continue;
        fn(array[i], i, array);
    }
}
forEach(arr,fn1);
function fn1(item,index,arr){
    console.log(item,index,arr);
}

6. map遍历数组

  1. 遍历数组,并且使用return返回新元素到新数组中

  2. 新数组的长度与原数组的长度相同,如果没有使用return,就会返回默认的undefined

  • 返回数组中的偶数项
var arr = [2, 3, , 4, 5, 6];
var arr1 = arr.map(function(item){
    if(item % 2 === 0) return item;
})
console.log(arr1);
  • 实现map——桥接模式
var arr = [2, 3, 4, 5, 6];
function map1(array,fn){
    var arr = [];
    for(var i = 0; i < array.length; i++){
        if(array[i] === undefined) continue;
        arr[i] = fn(array[i],i,array);
    }
    return arr;
}

var arr1 = map1(arr,function(item, index, arr){
    return item + 1;
})
console.log(arr1);

7. indexOf()方法

查找某个元素的下标 ；如果返回-1代表没有找到，返回正数就是对应下标

有两个参数，参数1为要查找的元素，参数2为从哪个位置开始查找(可省略)

var arr=[1,2,3,4,5,6];
console.log(arr.indexOf(4));    //3
console.log(arr.indexOf(7));    //1

if (arr.indexOf(3) > -1) {
    console.log("找到了")
}

if (arr.indexOf(3) === -1) {
    console.log("没有找到")
}
if (arr.indexOf(3) < 0) {
    console.log("没有找到");
}
if (~arr.indexOf(3)) {
    console.log("找到了");
}
if (!~arr.indexOf(3)) {
    console.log("没找到");
}
  • 用indexOf去重
var arr = [1, 2, 3, 4, 2, 1, 3, 4, 2, 1, 5, 7, 8, 2, 3, 4, 5, 1];
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
    if (arr1.indexOf(arr[i]) < 0) arr1.push(arr[i]);
}
console.log(arr1);  // [1, 2, 3, 4, 5, 7, 8]
  • 查找某个元素，在数组中的位置，返回其下标
//查找2在数组中的下标位置
var arr = [1, 2, 3, 4, 2, 1, 3, 4, 2, 1, 5, 7, 8, 2, 3, 4, 5, 1];
var index = -1;
//从arr数组中，找元素2所在的下标
while ((index = arr.indexOf(2, index + 1)) > -1) {
    console.log(index);     //
}

//方法二
var index = arr.indexOf(2);
while (index > -1) {
    console.log(index);
    index = arr.indexOf(2, index + 1);
}

8. some()方法

判断数组中，是否有满足回调函数中的条件；有则返回true

var arr = [1, 2, 3, 4, 2, 1, 3, 4, 2, 1, 5, 7, 8, 2, 3, 4, 5, 1];
var bool = arr.some(function(item, index, arr) {
    return item > 2;
});
console.log(bool);
  • 实现some()
function some1(array, fn) {
    for (var i = 0; i < array.length; i++) {
        if (array[i] === undefined) continue;
        if (fn(array[i], i, array)) return true;
    }
    return false;
}

var bool = some1(arr, function(item) {
    return item > 2;
})
console.log(bool);

9.every()方法

如果遍历数组后有一个不满足回调函数的条件,就跳出返回false,否则返回ture;

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

var bool = arr.every(function (item, index, arr) {
    return item > 2
})
console.log(bool)//false
  • 实现every()
var arr = [1, 2, 3, 4, 2, 1, 3, 4, 2, 1, 5, 7, 8, 2, 3, 4, 5, 1];
function every1(array, fn){
    for(var i = 0; i < arr.length; i++){
        if(array[i] === undefined) continue;
        if(!fn(array[i], i, array)) return false;
    }
    return true;
}
var bool = every1(arr, function(item){
    return item > 5;
})
console.log(bool);

10.filter()方法

创建一个新的数组，通过检查过滤出数组中符合条件的所有元素。

var arr = [1, 2, 3, 4, 5, 6, 7];
var arr1 = arr.filter(function(item, index, arr) {
    return item % 2 === 0;
});
console.log(arr1);
  • 实现filter()
var arr = [1, 2, 3, 4, 5, 6, 7];
function filter1(array, fn) {
    var arr = [];
    for (var i = 0; i < array.length; i++) {
        if (array[i] === undefined) continue;
        if (fn(array[i], i, array)) arr.push(array[i]);
    }
    return arr;
}
var arr1 = filter1(arr, function(item, index, arr) {
    return item % 2 === 0;
})
console.log(arr1);
  • 利用filter查找数组中是否包含某个对象
var arr=[
    {id:1001,name:"a"},
    {id:1002,name:"b"},
    {id:1003,name:"c"},
    {id:1004,name:"d"},
    {id:1005,name:"e"},
];

var arr1 = arr.filter(function(item) {
    return item.id === 1003;
});
if (arr1.length === 0) console.log("没找到");
if (arr1.length > 0) console.log(arr1[0]);

11. reduce()方法

  1. 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  2. reduce() 对于空数组不会执行回调函数
  3. reduce (回调函数（归并值，数组元素，索引值，数组），归并初始值)

有归并初始值时，从数组有第0项遍历；没有归并初始值时，从数组的第1项遍历；

  • 归并求数组项的和
// 如果没有给归并初始值,value归并值就是数组的第0项,然后从第一项开始遍历
// 如果给了归并初始值,value就是这个归并初始值,然后从第0项开始遍历
var arr = [2,6,1,7,3,5,9];
var s = arr.reduce(function(value, item, index, arr) {
    return value + item;
});
console.log(s); //33
  • 归并求数组项的最大值
var arr = [2,6,1,7,3,5,9];
var max = arr.reduce(function(value, item) {
    return value > item ? value : item;
})
console.log(max);   //9
  • 利用归并求购物车中商品的总价
var arr = [{ id: 1001, select: true, name: "a", price: 23.6, num: 1},
           { id: 1002, select: false,name: "b",price: 18,num: 2}, 
           { id: 1003, select: true, name: "c", price: 36.5,num: 1},
           { id: 1004, select: false, name: "d",price: 15.6, num: 2} ];
var sum = arr.reduce(function(value, item) {
    if (item.select) return value + item.price * item.num;
    return value;
}, 0)
console.log(sum);
  • reduce用于筛选
var arr = [{ id: 1001, select: true, name: "a", price: 23.6, num: 1},
           { id: 1002, select: false,name: "b",price: 18,num: 2}, 
           { id: 1003, select: true, name: "c", price: 36.5,num: 1},
           { id: 1004, select: false, name: "d",price: 15.6, num: 2} ];
var item = arr.reduce(function(value, item) {
    if (item.id === 1003) return item;
    return value;
}, null)
console.log(item);
  • 重写reduce()
var arr = [1, 2, 3, 4, 5, 6, 7];
function reduce1(arr, fn, initValue) {
    var i = 0;
    // 如果没有归并的初始值
    if (initValue === undefined) {
        i = 1;
        initValue = arr[0];
    }
    for (; i < arr.length; i++) {
        initValue = fn(initValue, arr[i], i, arr);
    }
    return initValue;
}

var sum = reduce1(arr, function(value, item, index, arr) {
    return value + item;
});
console.log(sum);   //33

12. reverse()方法

将数组中元素的位置颠倒，并返回该数组。

var arr = [1, 2, 3, 4, 5, 6, 7];
var arr1 = arr.reverse();
console.log(arr === arr1);  //true
function reverse1(arr) {
    //前后两两交换， 中间的不变
    for (var i = 0; i < parseInt(arr.length / 2); i++) {
        var temp = arr[i];
        arr[i] = arr[arr.length - i - 1];
        arr[arr.length - i - 1] = temp;
    }
    return arr;
}
console.log(reverse1(arr));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352

推荐阅读更多精彩内容

  • 第四天 数组【悟空教程】
    第四天 数组【悟空教程】 第04天 Java基础 第1章数组 1.1数组概念 软件的基本功能是处理数据，而在处理数...
    Java帮帮阅读 1,596评论 0赞 9
  • JS2
    第五章******************************************************...
    fastwe阅读 678评论 0赞 0
  • Swift
    SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,830评论 0赞 6
  • 关于数组的一些不low的操作
    1.扁平化n维数组 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].f...
    VivaLaVida_692c阅读 568评论 0赞 0
  • 数组练习题
    1.用js实现随机选取10~100之间的10个数字，存入一个数组，并排序 //要是获取不重复的，则对随机数...
    persistlu阅读 5,572评论 0赞 0