Js array method forEach, filter, map, some, every, find, findIndex

Js data processing operation array

This is a personal understanding of array manipulation. The purpose is to make it easier for you to manipulate arrays

forEach

ForEach is a process that loops through an array.

Parameter 1 is each piece of data in the array
Argument 2 is the index of the array
Argument 3 is the array itself

const arr = [{name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'}]；
arr.forEach((item,idx) = > console.log(I was `${item.name}At the end of the array${idx}A `))

/* * I am the third digit in the array * I am the fourth digit in the array * I am the fifth digit in the array */
Copy the code

So how do you implement an array’s own forEach

Determine parameter 1 function
On top of the array prototype you write the method you want to implement which is myForEach

This = [{name: '{name: '}}, {name: '{name: '}}, {name: '{name: '}'}]

//2, the parameter cb is the function we passed and we need to call the output

Array.prototype.myForEach = function(cb) {
    console.log(this.'this')
    for (let i = 0; i < this.length; i++) {
         cb(this[i], i, this)}}const arr1 = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
 
 arr1.myForEach((item,idx) = > {
    console.log(I was `${item.name}At the end of the array${idx}A `)})/* output * I am a third, in the 0th bit of the array * I am a fourth, in the first bit of the array * I am a fifth, in the second bit */
Copy the code

Next let’s improve our myforEach break;

Array.prototype.myForEach = function(cb) {
    if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')
    console.log(this.'this')
    for (let i = 0; i < this.length; i++) {
        if(! cb(this[i], i, this)) {
            break; }}}const arr1 = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
 
 arr1.myForEach((item,idx) = > {
    if(idx === 1) return false;
    console.log(I was `${item.name}At the end of the array${idx}A `)})/ / output:
// I am the 0th bit in the array

// Nothing else will be printed
Copy the code

filter

Filter is used to filter arrays

Parameter 1 Indicates the data item
Parameter 2 Index
Return a new array without changing the original array

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const filterArr = arr.filter(item= > item.name === 'Joe')
// Output [{name: 'three '}]
Copy the code

Implement a myFilter yourself

Determine parameter 1 function
On top of the array prototype, write the method that you want to implement which is myFilter
Returns a new filtered array

Array.prototype.myFilter = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myFilter api only support function! ')
       let arr = []; 
       for (let i = 0; i < this.length; i++) {
           if(cb(this[i], i, this)) {
             arr.push(this[i]); }}return arr;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const filterArr = arr.myFilter((item,idx) = > item.name === 'Joe')
console.log(filterArr,'filterArr')

// Output [{name: 'three '}]
Copy the code

map

Parameter 1 Indicates the data item
Parameter 2 Index
Returns a new array that you want to define

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const newArrMap = arr.map(item= > item.name);
console.log(newArrMap)
// Output [' Zhang SAN ', 'Li Si ',' Wang Wu ']
Copy the code

Implement your own myMap

Determine parameter 1 function
On top of the array prototype, write the method that you want to implement which is myMap
Returns a new filtered array

Array.prototype.myMap = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')
       let arr = []; 
       for (let i = 0; i < this.length; i++) {
           const newItem = cb(this[i], i, this);
           arr.push(newItem);
       }

       return arr;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const newArrMap = arr.myMap((item,idx) = > item.name)
console.log(newArrMap,'newArrMap')
// Output [' Zhang SAN ', 'Li Si ',' Wang Wu ']
Copy the code

some

Parameter 1 Indicates the data item
Parameter 2 Index
Return true if one is true, false if all are false;

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const result1 = arr.some(item= > item.name === 'Joe');
console.log(result1)
/ / output true
 
const result2 = arr.some(item= > item.name === 'zhao four');
console.log(result2)
/ / output is false
Copy the code

Implement your own some

Determine parameter 1 function
On top of the array prototype, write the method that you want to implement which is mySome
Return true if one is true, false if all are false;

Array.prototype.mySome = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')

       let result = false;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            result = true;
            break; }}return result;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const result1 = arr.mySome((item,idx) = > item.name === 'Joe')
const result2 = arr.mySome((item,idx) = > item.name === 'zhao four')
console.log(result1, 'result1');
console.log(result2, 'result2');
/ / output true
/ / output is false
Copy the code

every

Parameter 1 Indicates the data item
Parameter 2 Index
Return true if some are true, false if one is false;

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const result1 = arr.every(item= >item.name ! = ='Joe');
console.log(result1,'result1')
//arr has a span equal to three returns false
/ / output is false
const result2 = arr.every(item= >item.name ! = ='zhao four');
//arr all is not equal to zhao si returns true
console.log(result2,'result2')
/ / output true
Copy the code

Implement a myEvery of your own

Determine parameter 1 function
On top of the array prototype, write the method you want to implement, which is myEvery
Return true if some are true, false if one is false;

 Array.prototype.myEvery = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')

       let result = true;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(! newItem) { result =false;
            break; }}return result;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const result1 = arr.myEvery((item,idx) = >item.name ! = ='Joe')
const result2 = arr.myEvery((item,idx) = >item.name ! = ='zhao four')
console.log(result1, 'result1');
console.log(result2, 'result2');
Copy the code

find

Parameter 1 Indicates the data item
Parameter 2 Index
Returns undefined if the data is not found

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const findItem1 = arr.find(item= > item.name === 'Joe');
console.log(findItem1);
// Output: {name: zhang SAN}

const findItem2 = arr.find(item= > item.name === 'zhao four');
console.log(findItem2);
// Output: undefined
Copy the code

Implement your own myFind

Determine parameter 1 function
Write the method you want to implement on top of the array prototype which is myFind
Returns undefined if the data matching the condition is not found;

   Array.prototype.myFind = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')

       let findItem;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            findItem = this[i];
            break; }}return findItem;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});
const findItem1 = arr.myFind((item,idx) = > item.name === 'Joe')
const findItem2 = arr.myFind((item,idx) = > item.name === 'zhao four')
console.log(findItem1, 'result1');
// Output: {name: zhang SAN}
console.log(findItem2, 'result2');
// Output: undefined
Copy the code

findindex

Parameter 1 Indicates the data item
Parameter 2 Index
A search for a matching index cannot be found. -1 is returned

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const findItem1 = arr.findIndex(item= > item.name === 'Joe');
console.log(findItem1);
// Output: 0

const findItem2 = arr.findIndex(item= > item.name === 'zhao four');
console.log(findItem2);
// Output: -1
Copy the code

Implement your own myFindIndex

Determine parameter 1 function
So on top of the array prototype, I’m going to write the method that I want to implement which is myFindIndex
When an index matching the criteria is not found, -1 is returned.

   Array.prototype.myFindIndex = function(cb) {
       if(typeof(cb) ! = ='function') throw new Error('myForEach api only support function! ')

       let index = -1;
       for (let i = 0; i < this.length; i++) {
          const newItem = cb(this[i], i, this);
          if(newItem) {
            index = i;
            break; }}return index;
}

const arr = new Array({name: 'Joe'}, {name: 'bill'}, {name: 'Cathy'});

const findItem1 = arr.myFindIndex((item,idx) = > item.name === 'Joe')
const findItem2 = arr.myFindIndex((item,idx) = > item.name === 'zhao four')
console.log(findItem1, 'result1');
// Output: 0
console.log(findItem2, 'result2');
// Output: -1
Copy the code

Conclusion:

Hey hey see here hope to help you write about the function of several loop array and their own implementation of the method has any problems, can be optimized point can be a piece of communication to discuss a

Source code: post later

Js array method forEach, filter, map, some, every, find, findIndex

Js data processing operation array

forEach

filter

map

some

every

find

findindex

Related Posts

Quick git code submission

# VUe-based architecture design

There are 3 ways to implement triangles in pure CSS