directory

  • The introduction

    1. Converting strings to hump format (medium)
    2. String character statistics (Getting started)
    3. Bold text (medium)
    4. Paragraph identification (simple)
    5. Set the text color.
    6. Finding the location of an array element (easy)
    7. Array summation (getting started)
    8. Removing an element from an array (easy)
    9. Removing an element from an array (medium)
    10. Adding elements (easy)

The introduction

Niuke.com this front-end written test database, it can be said that the 60 is the most basic, but also inspect things more miscellaneous, have time 4 days almost can brush, consolidate the foundation or some use. Finish the problem review can be done all morning. Now I combine my answers with other people’s answers and make a summary here, which is also the result of sorting out my knowledge.

  • Front-end brush question – niuke.com front-end question bank 60 details (a)
  • Front-end brush question – niuke.com front-end question bank 60 details (two)
  • Front-end brush question – niuke.com front-end question bank 60 details (three)
  • Front-end brush question – niuke.com front-end question bank 60 details (four)
  • Front-end brush question – niuke.com front-end question bank 60 details (five)
  • Front-end brush question – niuke.com front-end question bank 60 details (six)

The title

11. Convert strings to hump format

CSS often has characters like background-image that are connected by -. When setting the style through javascript, you need to convert the style to backgroundImage format. Please complete the conversion function

  1. Capitalize the first letter of the second non-empty word with a – delimiter
  2. -webkit-border-image The conversion result is webkitBorderImage

Input: ‘font-size’ Output: fontSize

function cssStyle2DomStyle(sName) {
    let arr = sName.split(The '-')
    for(let i = (arr[0]?1 : 2); i < arr.length; i++) {
        arr[i] = arr[i].slice(0.1).toUpperCase()+arr[i].slice(1)}return arr.join(' ')}Copy the code

Related knowledge:

  • Common methods for arrays
    • split/join
    • ToUpperCase () — toUpperCase converts lowercase characters toUpperCase and toLowerCase converts uppercase characters toLowerCase
    • slice

12. String character statistics

Count the occurrence frequency of each character in a string. Return an Object, key, and value

  1. There is no restriction on the order of keys
  2. The input string argument will not be empty
  3. Ignore blank words

Output: {h: 1, e: 1, L: 3, O: 2, w: 1, r: 1, d: 1}

function count(str) {
    let obj = {}
    for (let i = 0; i < str.length; i++) {
        // Remove whitespace characters
        if(str[i] ! = =' ') {
            // If it has the property +1, if it does not set the value to 1
            obj[str[i]] = obj.hasOwnProperty(str[i]) ? obj[str[i]] + 1 : 1}}return obj
}
Copy the code

Related knowledge:

  • Object assignment

13. Bold words

The description of the topic uses a label to bold display the three words “niuke.com”

<! -- Method 1: HTML -->
<p><strong>Cattle from</strong>A programmer must have a job search tool</p>

<! -- method 2: js-->Let p = document. GetElementByTagName (" p ") let the text = p.i nnterHTML p.i nnterHTML = text. Replace (' cattle from ', '<strong>Cattle from</strong>')
Copy the code

Related knowledge:

  • Gets the element and its content
  • Bold tag

14. Paragraph identifying

Please display the following sentence in paragraph form in your browser: “Niuke is a professional platform focused on the learning and growth of programmers.”

<! -- Method 1: HTML -->
<p>Niuke is a professional platform focusing on the learning and growth of programmers.</p>

<! -- method 2: js-->Let p = document.createElement('p') p.innerhtml = 'Niuker.com is a professional platform that focuses on the learning and growth of programmers. ' document.querySelector('body').append(p)Copy the code

Related knowledge:

  • Create the label createElement
  • Add elements to body append()

15. Set text color

Please use the embedded style to set all p tags to red text

<! -- Method 1: Inline style -->
<p style="color:red;">Welcome to niuke</p>
<p style="color:red;">Here, we provide you with the database of IT famous enterprises' written interview questions</p>
<p style="color:red;">We are here to meet our friends</p>
<p style="color:red;">QQ group number: 272820159</p>
<! -- Method 2: CSS style -->
<style>
    p {
        color: red;
    }
</style>
<p>Welcome to niuke</p>
<p>Here, we provide you with the database of IT famous enterprises' written interview questions</p>
<p>We are here to meet our friends</p>
<p>QQ group number: 272820159</p>

<! -- method 1: js-->
let p = document.querySelectorAll('p')
for(let i = 0; i < p.length; i++) {
    p[i].style.color = 'red'
}
Copy the code

Related knowledge:

  • Get all p elements: querySelectorAll
  • Give the element a style: dom.style.color

16. Find the location of an array element

Find the position of item in the given array arR. Return the position of item in the array if there is an item in the array, otherwise return -1. Input: [1, 2, 3, 4], 3 Output: 2

// Method 1: simply traverse
function indexOf(arr, item) {
    for(let i = 0; i < arr.length; i++) {
        if(arr[i] === item) return i
    }
    return -1
}

// Method 2: ES6 new array method
function indexOf(arr, item) {
    return arr.findIndex(val= > val === item)
}
Copy the code

Related knowledge:

  • Array traversal
  • Function return value

17. Array sum

Calculate the sum of all elements in the given array ARR input description: All elements in the array are of type Number input: [1, 2, 3, 4] Output: 10

// Method 1: simple method, ordinary for loop is not described here
function sum(arr) {
    let count = 0
    arr.forEach((value, index) = > {
        count+=value
    })
    return count
}

// Method 2: reduce
function sum(arr) {
    return arr.reduce((prev, item) = > item + prev,0)}Copy the code

Related knowledge:

  • Array traversal
  • reduce

18. Removes an element from an array

Remove all elements in array ARR whose value is equal to item. [1, 2, 3, 4, 2], 2 output: [1, 3, 4]

// Method 1: simply traverse
function remove(arr, item) {
    let newArr = []
    arr.forEach(value= >{
        if(value ! == item) newArr.push(value) })return newArr
}

// Method 2: filter method
function remove(arr, item) {
    return arr.filter(val= >val ! == item) }// Use splice to delete the new array
function remove(arr, item) {
    let newArr = arr.slice(0)
    for(let i = newArr.length - 1; i >= 0 ; i--) {
        if(newArr[i] === item) newArr.splice(i, 1)}return newArr
}
Copy the code

Related knowledge:

  • Which array methods are changed in the original array and which return a new array?

The API that returns the new array slice map filter reduce concat… Push \ unshift \ shift \ pop \ splice \ sort \ reverse…

19. Removes an element from an array

[1, 2, 2, 3, 4, 2, 2]; [1, 3, 4, 2, 2]; [1, 3, 4]

// Iterate backwards regardless of the array length
function removeWithoutCopy(arr, item) {
    for(let i = arr.length - 1; i >= 0; i--) {
        if(item === arr[i]) arr.splice(i,1)}return arr
}
Copy the code

Related knowledge:

  • Traversal + changes the array length

20. Add elements

Add item to the end of array arr. [1, 2, 3, 4], 10 output: [1, 2, 3, 4, 10]

// Method 1: Simple iteration
function append(arr, item) {
    let newArr = []
    arr.forEach(val= > newArr.push(val))
    newArr.push(item)
    return newArr
}

// Slice
function append(arr, item) {
    let arr1 = arr.slice(0)
    arr1.push(item)
    return arr1
}

/// method 3: concat
function append(arr, item) {
    return arr.concat(item)
}
Copy the code

Related knowledge:

  • Merges new elements and returns a new array

Many of these methods are array methods, so be very familiar with them. I’m going to rearrange the array methods here.

An array method commonly used in Javascript