This is the fourth day of my participation in Gwen Challenge

Some operations on objects

  1. for... inSomething about the loop object.
const marven = { age: 20 }
// How do I iterate through the Marven object to get the following properties?

for(const key in marven) {
    console.log(`${key}: ${marven[key]} in marven`)}// age: 20 in marven
Copy the code

for… In traverses an object as well as its prototype chain. If you only want to traverse the object itself, you can do the following.

Object.prototype.name = 'Kev1nzh'
const marven = { age: 20 }

for(const key in marven) {
    console.log(`${key}: ${marven[key]} in marven`)}// age: 20 in marven
// Name: 12033 in Kev1nzh But the name attribute does not exist in the Marven object itself.


for(const key in marven) {
    if(marven.hasOwnProperty(key)) {
        console.log(`${key}: ${marven[key]} in marven`)}}// age: 20 in Marven only outputs the age attribute of the object itself.
Copy the code

But with my ocD, one less layer of nesting makes me happy.

Object.keys(marven).forEach(key= > {
    console.log(`${key}: ${marven[key]} in marven`)})// age: 20 in marven
Copy the code

Some operations on arrays

  1. filterThe syntax in ES5 is YYDS when dealing with filtering business code.
// Assuming input is entered, the front end filters the data.<input [(ngModel)] ="filterData.name" (ngModelChange) ="filterName()" /> 

<div *ngFor="left item of list">{{item.name}}</div>
Copy the code
function filterName () {
    const {name} = filterData
    const filteredList = backupList.filter(
        i= > i.name.toLocaleLowerCase().includes(name.toLocaleLowerCase())
    )
}

// The god of YYDS, a few lines of code can solve the simple filtering function.
Copy the code

2. Also filter, sometimes used to determine whether the resulting array element has a value. Take the following code for example.

async function resolvePlugins(.){
    / /... I did a bunch of things
    
    return [
        ...cssPostPlugin,
        ...postPlugins,
        ...buildPlugins,
    ].filter(Boolean)}// When a custom parameter is passed in, it can be run without ensuring that each element has a value.
Copy the code
  1. Arrays to undo this old thing,ECMAScript 2019In theflatIt just happens to work out perfectly.
let array = [1.2.3.4.4.4.3.1.6]

// (1) use indexOf or double loop to solve the problem of de-duplication (code skipped)

// (2) new Set ()
Array.from(new Set(array))  //[1, 2, 3, 4, 6] Does not solve the multi-layer array deduplicating.

// (3) array.prototyoe. flat multidimensional Array method can pass in parameter destruct depth default is 1
let array = [1.2.3.4.5.4.4.3.2[2.3.4.2[3.2.1.3]]]

Array.from(new Set(array.flat(Infinity))) / / [1, 2, 3, 4, 5]

// Use Set to unstack the array.
Copy the code

4. Processing of list highlighting after filtering.

Some need to filter the keywords in a paragraph of text, display the filtered results and also highlight the filtered keywords, so we do this.async filterHighight(word: string): void {
    // List of articles containing word keywords
    const filteredList: {id: number, article: string} []= getFilteredList(word)
    const highlightList = {id: number, articleGroup: string } [] = filteredList.map(({id, article}) = > {
        return {
            articleGroup: article.split(word).join(`<span class="highlight" >${word}</span>`),
            id
        }
    })
    
    this.list = highlightList
}
Copy the code

Then use rendering HTML directly on the page. I can put in a highlight style.

  1. Gets the most clicked list element in the list.
const maxCount = list.map(i= > i.count).reduce((pre, cur) = > {
    return Math.max(pre, cur)
})
const maxItem = list.find(i= > i.count === maxCount)
Copy the code

Call it a day.

The last

The above methods are basically used in the project, if there are more optimized solutions or new methods can be left in the comments below.

Give me a thumbs up before I leave.

In addition to recommend the new written Vite source code analysis, click my site jump

Better online document viewing experience

After reading helpful can enter github give me a 🌟 small star thank you!