zoukankan      html  css  js  c++  java
  • 8个常用的JavaScript数组方法

    数组(Array)是JavaScript中内置的全局对象,在构建诸如商品列表等组件(Component)时,时常用到。除了常见的pushpopindexOf等方法,JS还提供了一些诸如过滤、规约等流处理方法,非常类似于Java的Stream库。

    const students = [
        { name: 'Alice', score: 100 },
        { name: 'Bob', score: 90 },
        { name: 'Trunp', score: 80 },
        { name: 'Biden', score: 70 },
        { name: 'Joe', score: 60 },
        { name: 'Sunshine', score: 50 },
        { name: 'Elon', score: 40 },
        { name: 'Jack', score: 30 },
    ];
    

    filter

    过滤方法,返回符合条件的元素。

    //返回成绩大于75的高分学生
    const highScores = students.filter(stu => stu.score > 75);
    console.log(highScores);
    

    结果:

    [
        { name: 'Alice', score: 100 },
        { name: 'Bob', score: 90 },
        { name: 'Trunp', score: 80 }
    ]
    

    更好的是,由于const类型的值,都是不可变量,因此这些操作的返回的都是一个新对象,并不会影响到原值。

    map

    将数组内的item转化成另一种对象,类似于Java的Fucntion<T,R>接口。

    //返回全部对象的name属性
    const names = students.map(stu => stu.name);
    console.log(names);
    

    结果:

    [ 'Alice','Bob', 'Trunp','Biden','Joe', 'Sunshine','Elon','Jack']
    

    find

    类似于filter方法,但返回第一个符合条件的元素。filter返回一个数组,find返回一个object。

    //返回name长度为4的第一个对象
    const foundedOne = students.find(stu=>stu.name.length === 4);
    console.log(foundedOne);
    

    结果:

    { name: 'Elon', score: 40 }
    

    由结果可见,虽然elonjack都符合条件,但只返回了elon

    forEach

    遍历数组内全部元素。

    //打印元素
    students.forEach(item=>console.log(`stu-name=${item.name},stu-score=${item.score}`));
    

    结果:

    stu-name=Alice,stu-score=100
    stu-name=Bob,stu-score=90
    stu-name=Trunp,stu-score=80
    stu-name=Biden,stu-score=70
    stu-name=Joe,stu-score=60
    stu-name=Sunshine,stu-score=50
    stu-name=Elon,stu-score=40
    

    some

    当数组中有一个符合条件,则返回true,否则返回false

    //是否至少有一个name为Jack的
    const isSome = students.some(item=>item.name === 'Jack');
    console.log(isSome);
    

    结果:true

    every

    功能类似于some,但要求每一个元素都符合条件才返回true

    //是否score都大于70
    const isEvery = students.every(item=>item.score > 70);
    console.log(isEvery);
    

    结果:false

    reduce

    规约函数。在MDN中给出的API可以简化为,reduce(callback(accumulator,current),initValue)。它有两个参数,第一个是回调函数,第二个initValue是初始值,可选的。current表示数组内的元素,即当前值。

    值得一说的是accumulator这个参数,它是中间态的值,一个累加器。换句话数,reduce函数是有状态的,即非纯函数,在多线程执行的时候,需要做一致性处理,否则可能会得到意外值。当然JavaScript是单线程执行的,所以可不考虑,但是用到类似于Java的语言中则需小心。

    //求取全部score之和
    const result = students.reduce(
        (accumulator, current) => accumulator + current.score,
        0
    );
    console.log(result);
    

    以上函数中,我们通过accumulator加上每一个元素值,获得最终结果。

    结果:520

    includes

    是否包含指定的元素值。

    const isIncludes = students.includes({ name: 'Jack', score: 30 });
    console.log(isIncludes);
    

    结果:false

    虽然提供了和最后一个元素的一摸一样的{name: 'Jack', score: 30},但仍然返回false,说明两个对象不是指向同一个引用。

    以上,都是很实用的方法,他们使得原来需要很多语句才能做的事情,通过一个简单的调用,即可得出结果。

  • 相关阅读:
    拆点问题
    黑球白球
    3n+1b 备忘录方法
    实体entity、JavaBean、Model、POJO、domain的区别
    DB中的读写分离
    Jmeter干货 不常用却极其有用的几个地方
    自动化测试 自动化框架需要满足的事项
    自动化测试面试题库
    测试工程师面试准备之----测试基础
    别人的面试经历 软件测试工程师
  • 原文地址:https://www.cnblogs.com/Franken-Fran/p/JS_8Methods.html
Copyright © 2011-2022 走看看