This is the 9th day of my participation in Gwen Challenge

Array Cardio Day 2

1. Effect display

This is a continuation of the day 4 challenge. It is also an Array exercise and continues to familiarize yourself with some(), every(), find(), splice(), and slice() methods. The document provides arrays of people and Comments that you can manipulate, simulating people information and comment data. Practice the array’s various methods based on these arrays, opening the HTML file and viewing the output in the Console panel.

Practice effect

Second, the implementation

The final code

Iii. Summary and review

So this is basically an exercise for two arrays, so let’s get down to business, so what are we going to do with two arrays?

1. Is there anyone older than 19? 2. Is everyone an adult?

Find the comment with ID 823423. Delete comment with ID 823423 • Get the position of the element with this ID in the array • Use the position to remove the child element • or concatenate a new array

Process decomposition

1. For the People array

(1) Is there anyone older than 19?

// Array.prototype.some() // is at least one person 19 or older?
    const ans = people.some(p= >{
      return new Date().getUTCFullYear() - p.year >= 19
    })
    console.log(ans);   // true
Copy the code

(2) Is everyone an adult?

// Array.prototype.every() // is everyone 19 or older?
    const ans1 = people.every(p= >{
      return new Date().getUTCFullYear() - p.year >= 19
    })
    console.log(ans1);   // false
Copy the code
  1. For the Comments array

Find the comment with ID 823423

    // Array.prototype.find()
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    const ans2 = comments.find( comment= > comment.id === 823423);

    console.log(ans2);  // {text: "Super good", id: 823423}
Copy the code

Find is like filter, but instead returns just the one you are looking for

(2) Delete the comment with ID 823423

① Get the position of the element corresponding to this ID in the array

    // Array.prototype.findIndex()
    // Find the comment with this ID

    const ans3 = comments.findIndex( comment= > comment.id === 823423);

    console.log(ans3);   / / 1
Copy the code

② Use position to delete the child element

// delete the comment with the ID of 823423
    
    //slice,splice
    
    comments.splice(ans3,1);

    console.log(comments);      // [{ text: 'Love this!', id: 523423 },{ text: 'You are the best', id: 2039842 },{ text: 'Ramen is my fav food ever', id: 123523 },{ text: 'Nice Nice Nice!', id: 542328 }]
Copy the code

③ Or concatenate new arrays

// delete the comment with the ID of 823423
    
    //slice,splice

    const ans4 = comments.slice( 0, ans3);
    const ans5 = comments.slice(ans3 + 1);

    console.log(ans4,ans5,comments);
Copy the code

At this point, we find that our array is split into two segments, and we merge the two segments:

const ans4 = comments.slice( 0, ans3);
    const ans5 = comments.slice(ans3 + 1);

    const ans6 = [...ans4,...ans5];

    console.log(ans6,comments);
Copy the code

4. Key and difficult points

Some () and every()

The every() and some() methods are all iteration methods of arrays in JS.

  • Every () runs the given function on each item in the array, and returns true if the function returns true for each item.
  • Some () runs a given function on each item in the array, returning true if the function returns true for any item.

The difference is that some is always looking for a value that matches the condition, and once it does, it doesn’t iterate. Every starts with iteration, and if one fails, the iteration will not continue.

Note: every() does not check for empty arrays.

Find and fineIndex ()

ES6 adds find() and findIndex functions to Array.

  • The find() function is used to find the target element and returns that element if it is found, undefined if it is not.
  • The findIndex() function also finds the target element and returns its location if it finds it, or -1 if it doesn’t.

Slice and splice

About the difference between these two, I see someone has summed up very comprehensive, HERE I borrow flowers to offer Buddha, we study together.

Address: blog.csdn.net/xiaoqingpan… .

Here’s one thing to note:

The slice() method does not alter the Array, but returns a subarray. If you want to delete an element from the Array, you should use array.splice ().


That’s all for today’s exercise