8 common JavaScript array methods

Array is a built-in global object in JavaScript. It is often used when building components such as commodity list. In addition to the common push, pop, indexOf and other methods, JS also provides some Stream processing methods such as filtering and convention, which is very similar to Java Stream library.

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

Filter method to return qualified elements.

//Return students with high scores above 75
const highScores = students.filter(stu => stu.score > 75);
console.log(highScores);

result:

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

What's more, since the values of const type are all non variables, the return of these operations is a new object and will not affect the original value.

map

Convert the item in the array into another object, similar to Java's fuction < T, R > interface.

//Returns the name attribute of all objects
const names = students.map(stu => stu.name);
console.log(names);

result:

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

find

Similar to the filter method, but returns the first qualified element. Filter returns an array and find returns an object.

//Returns the first object with a name length of 4
const foundedOne = students.find(stu=>stu.name.length === 4);
console.log(foundedOne);

result:

{ name: 'Elon', score: 40 }

It can be seen from the results that although elon and jack meet the conditions, only elon is returned.

forEach

Traverse all elements in the array.

//Print element
students.forEach(item=>console.log(`stu-name=${item.name},stu-score=${item.score}`));

result:

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

When one of the arrays meets the conditions, it returns true; otherwise, it returns false.

//Is there at least one with the name Jack
const isSome = students.some(item=>item.name === 'Jack');
console.log(isSome);

Result: true

every

The function is similar to some, but each element is required to meet the conditions before returning true.

//Are the score s greater than 70
const isEvery = students.every(item=>item.score > 70);
console.log(isEvery);

Result: false

reduce

Specification function. The API given in MDN can be simplified to reduce(callback(accumulator,current),initValue). It has two parameters. The first is the callback function, and the second initValue is the initial value. It is optional. Current represents the elements in the array, that is, the current value.

It is worth mentioning that the parameter accumulator is the value of the intermediate state, an accumulator. In other words, the reduce function is stateful, that is, it is not a pure function. Consistency processing needs to be done when multithreading is executed, otherwise unexpected values may be obtained. Of course, JavaScript is executed in a single thread, so it can not be considered, but you should be careful when using a language similar to Java.

//Find the sum of all score s
const result = students.reduce(
    (accumulator, current) => accumulator + current.score,
    0
);
console.log(result);

In the above functions, we add each element value through the calculator to obtain the final result.

Result: 520.

includes

Whether to include the specified element value.

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

Result: false.

Although the same {name: 'Jack', score: 30} as the last element is provided, false is still returned, indicating that the two objects do not point to the same reference.

The above are all very practical methods. They make the original things that need a lot of statements to do, and the results can be obtained through a simple call.