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));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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