0
点赞
收藏
分享

微信扫一扫

原生javaScript中Array数组对象的常用方法合集filter(),sort(),join(),push(),pop(),unshift(),shift(),reverse(),concat

乌龙茶3297 2022-04-30 阅读 90

今天学习vue的时候操作到了数组,用到了过滤filter(),排序sort(),太久没用到过,居然忘记有这个东西了(-_-||),借此机会重新查阅文档学习并且记录下数组的方法。
数据处理一般是后端进行操作,前端用的非常之少,所以导致我对数组的方法太过陌生。
但是应用层面来讲,较少数据直接渲染给用户看,也是可以直接使用数组方法对数据进行操作的。所以,数组方法还是必须掌握的。
整理不易,望收藏,给予肯定谢谢~
filter() 过滤筛选符合条件的数据返回一个新数组

    const arrs = [{
        name: 'lian',
        age: 15
    }, {
        name: 'hao',
        age: 19
    }, {
        name: 'wei',
        age: 21
    }];
    console.log(arrs.filter((arr) => {
        return arr.age > 18
    }));
    // console export: [{name: 'hao',age: 19}, {name: 'wei',age: 21}];

sort() 对数组的数据排序 ,会改变原始数组

    const arrs = [{
        name: 'lian',
        age: 15
    }, {
        name: 'hao',
        age: 19
    }, {
        name: 'wei',
        age: 21
    }];
    console.log(arrs.sort((a, b) => {
        return a.age - b.age //升序
    }));
    // console export: 
    /* 0: {
        name: 'lian',
        age: 15
    }
    1: {
        name: 'hao',
        age: 19
    }
    2: {
        name: 'wei',
        age: 21
    }*/
    console.log(arrs.sort((a, b) => {
        return b.age - a.age //降序
    }));
    // console export: 
    /* 0: {name: 'wei', age: 21}
    1: {name: 'hao', age: 19}
    2: {name: 'lian', age: 15} */

join() 把数组中数据拼接成字符串:

    const arrs = ["lian", "hao", "wei"];
    console.log(arrs.join("-"));
    // console export: lian-hao-wei

push() 向数组末尾添加数据

	let arrs = ["lian", "hao", "wei"];
    arrs.push("csdn");
    console.log(arrs);
    // console export: ["lian", "hao", "wei","csdn"]

pop() 删除最后一个数组数据。result:return被删除最后一个数据,原数组改变

    let arrs = ["lian", "hao", "wei"];
    console.log(arrs.pop("wei"));
    // console export: ["wei"] 
    console.log(arrs);
    // console export: ["lian", "hao"]

unshift() 向数组开头添加数据。result:return新数组长度

    let arrs = ["lian", "hao", "wei"];
    console.log(arrs.unshift("csdn"));
    // console export: 4
    console.log(arrs);
    // console export: ["csdn","lian", "hao", "wei"]

shift() 删除第一个数组数据。result:return被删除的数据

    let arrs = ["lian", "hao", "wei"];
    console.log(arrs.shift());
    // console export: lian
    console.log(arrs);
    // console export: ["hao", "wei"]

reverse() 颠倒数组

    let arrs = ["lian", "hao", "wei"];
    console.log(arrs.reverse());
    // console export: ["wei", "hao","lian"]
    console.log(arrs);
    // console export:v["wei", "hao","lian"]

concat() 连接拼接数组,原数组不改变。此方法亦可以拼接字符串

    let arrs = ["lian", "hao", "wei"];
    let newArrs = arrs.concat("cs", "dn", ["ok"], {
        name: "lian"
    })
    console.log(newArrs);
    // console export: ["lian", "hao", "wei","cs","dn","ok",{name:"lian"}];
    console.log(arrs);
    // console export: ["lian", "hao", "wei"]

slice() 截取指定索引下标范围内的数据,原数组不改变

    let arrs = ["lian", "hao", "wei"];
    let newArrs = arrs.slice(0, 2)
    console.log(newArrs);
    // console export: ["lian", "hao"];
    console.log(arrs);
    // console export: ["lian", "hao", "wei"]

splice() 删除跟添加数据,可以说是push(),unshift(),pop(),shift()这四个方法的自定义方法。
下边是splice() 的删除操作:

    let arrs = ["lian", "hao", "wei"];
    let newArrs = arrs.splice(0, 1) //删除索引值0开头(包括0)后的一个数据
    console.log(newArrs);
    // console export: ["lian"];
    console.log(arrs);
    // console export: ["hao", "wei"]

下边是splice() 的添加操作:

    let arrs = ["lian", "hao", "wei"];
    let newArrs = arrs.splice(1, 0, "csdn") //在索引值为1的位置追加数据,0代表删除0位
    console.log(newArrs);
    // console export: [];
    console.log(arrs);
    // console export: ["lian","csdn" "hao", "wei"]

举报

相关推荐

0 条评论