Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

This is the second in a series of articles on the soul of native JavaScript.

Portal: Native JavaScript soul Torture, how much can you answer (1)

In addition, I grab the latest front-end interview 500 questions in my spare time, if there is a need for this knowledge, you can go to the following link for.

Portal:

  • The latest front-end JS written test 100 questions (8K reading, 320+ likes)
  • JS interview hot spots (1.9k 阅读 volume, 72 likes)

JavaScript operators

16. Do you know|| 与 &&Is the return value rule for?

  • Short circuit effect: && and | | short circuit will occur

    • &&Only if both operands aretrue, the result of condition judgment istrue, if operand one isfalse, does not judge operand two.
    • ||As long as one of the two operands istrue, the result of the conditional judgment istrue, so operand one istrue, operand two is not judged.

  • Return value rule

    • || 和 &&Operand one is executed firstconditionalIf it is not a Boolean, cast to a Boolean first, and then perform the condition judgment.
    • for||If the result of the condition judgment istrueReturns the value of the first operand iffalseReturns the value of the second operand.
    • &&On the contrary, if the condition judgment result istrueReturns the value of the second operand iffalseReturns the value of the first operand.
    • || 和 &&Returns the value of one of their operands, not the result of a conditional judgment

  • < 3 (2) | | (3 (2) the return value is how much?

17. 1 + - + + + - + 1So what’s the answer?

The +/- sign usually has three uses in JavaScript:

  • Ordinary addition and subtraction: binary operators
  • ++/--: autoincrement and autodecrement, unary operator
  • +/-: positive and negative, unary operators

The above expression does not involve increment and decrement. Unary operators have higher precedence than binary operators. The above expression is executed in the following order: 1 + (- (+ (+ (+ (+ 1)))))) —-> 1 + 1 = 2

18. Can you make correct increases and subtractions?

  • ++/--Before, add/subtract before use
  • ++/--In the back, use first and then add/subtract

Answer: what is the value of y?

var x = 1;
var y = x + ++x + 3 * (x = ++x + x + x++ + 1)
          + x++ + 3;
console.log(y); 
Copy the code

Let’s dissect this long expression:

The first x value is zero1The second autoincrement, x is equal to x2Plus plus x plus x plus x plus plus x1Assign the result of the operation to x ++x, x =3
    x = 3X ++ is equal to x3
    ++x + x + x++ + 1 = 3 + 3 + 3 + 1 = 10X ++ is equal to x4Assign the value of the expression to x, where x is assigned by4into10X ++ is equal to x10So now all of our variables are solved for y is equal to theta1 + 2 + 3*10 + 10 + 3 = 46X ++, the final value of x is zero11
Copy the code

Object. Is () is different from ===

== differs from ===

  • = = =Is strict equality, requiring data types and values to be equal;= =You just have to have the same values.
  • = =Implicit type conversions occur,= = =Implicit type conversions do not occur.

Object.is() differs from === :

Object.is() is generally the same as === when used for equality judgment. It handles special cases such as +0 and -0 are no longer equal and two nans are equal.

20. You knownewDo operators have two priorities?

In MDN’s description of the new operator, the syntax is:

    new constructor[([arguments])]
Copy the code

([arguments]) means that by default, new constructor(… Args) and New Constructor, and the former takes precedence over the latter. More detailed priorities are shown below:

It is important to distinguish the new reference list from the no-reference list in order to accurately and thoroughly understand the following classic interview question.

function Foo(){
    getName = function(){ console.log(1); };
    return this;
}
Foo.getName = function(){ console.log(2); };
Foo.prototype.getName = function(){ console.log(3); };
var getName = function(){ console.log(4); };
function getName(){ console.log(5)}; Foo.getName(); getName(); Foo().getName(); getName();new Foo.getName();
new Foo().getName();
Copy the code

21.(ES6+) Optional link operator (? .). And null-value merge operators (??)

Speaking of operators, let’s open our eyes by mentioning the two newest extenders.

Optional link operators (? .).

When you use? If the current value is false, the execution is stopped and undefined is returned.

In everyday programming, if you want to read the objects within the attributes, often need to determine whether the object exists, for example, read the message. The body. The user. The firstName, the safe way

const firstName = (message 
                && message.body
                && message.body.user
                && message.body.user.firstName)
Copy the code

But if there is (? .). , the above code can be simplified as

constfirstName = message? .body? .user? .firstNameCopy the code

Null-value merge operator (??)

Null-value merge operator (??) Is a logical operator that returns the right-hand operand if the left-hand operand is null or undefined, otherwise returns the left-hand operand

?? And | | is a bit like, but the | | is false value judgment,?????? Null and undefined

/ / true value
const a = 1 ?? 'Default value'
console.log(a)    / / 1

/ / false values
const a = ' ' ?? 'Default value'
console.log(a)    / /"

//null
const a = null ?? 'Default value'
console.log(a)    // 'default'

//undefined
const a = undefined ?? 'Default value'
console.log(a)    // 'default'
Copy the code

See blog: javaScript Operator Tricks you didn’t know about

JavaScript string text

String(‘1’), new String(‘1’), ‘1’

In JavaScript, we have three ways to define strings.

var str = '1';
var str1 = String('1');
var str2 = new String('1');
Copy the code

Is there any difference between the three definitions of ‘1’? Let’s test with the === operator and the Typeof operator.

console.log(str === str1)  // true
console.log(str1 === str2) // false
console.log(str === str2)  // false

console.log(typeof(str))  // string
console.log(typeof(str1)) // string
console.log(typeof(str2)) // object
Copy the code

The new String(‘1’) looks like this:

[[PrimitiveValue]] stores the original value of the String.

23. String is a primitive type, so why can we call string methods?

This is design in JavaScript. JavaScript provides three special reference types (PrimitiveValue) for primitive manipulation, Number, String, and Boolean, whose [[PrimitiveValue] properties store their values. Methods and attributes of primitive types are borrowed from the corresponding wrapper class.

Let’s face it:

var str = 'zcxiaobao'
str2 = str.toUpperCase()
Copy the code

In fact, the js engine does this internally:

var str = 'zcxiaobao'
// Call the method to create an instance of String
new String(str)
// call the method on the instance and return the value
str2 = new String(str).toUpperCase()
// Destroy the instance
Copy the code

24. Can I change the length of a string by changing the string.length size? Why is that?

Let’s start with an example:

var str = '123456';
str.length = 0;
console.log(str, str.length); / / 6 123456
Copy the code

Obviously, changing str.length does not change the length of the string.

New String(STR). Length. The length of the new String(STR) is changed.

Extension: Does changing the length of the String generated by new String() take effect? Why is that?

If you change the above code, STR is generated by new String, will changing the length attribute take effect?

var str = new String('123456');
str.length = 0;
console.log(str, str.length); // String {"123456"} 6
Copy the code

The answer is that it failed.

The String generated by new String() is an object type. The length attribute is probably configured to be writable. Test the above hypothesis:

Object.getOwnPropertyDescriptor(str, 'length')
/* { value: 6, writable: false, enumerable: false, configurable: false } */
Copy the code

The length property of the String generated by new String() is not only unwritable, but also unenumerable and unconfigurable.

25. What is the difference between slice(),substring(), and substr()?

The basic use

  • substringThe: method returns a subset of a string from the start index to the end index, or from the start index to the end of the string.
str.substring(indexStart, [indexEnd])
Copy the code

Matters needing attention:

  1. substringIntercepting a string[indexStart, indexEnd)In a string
  2. If any parameter is greater thanstringName.lengthIs regarded asstringName.length
  3. If indexStart is greater than indexEnd, subString is executed as if the two arguments were swapped. See the example below.
const str = "123456"
console.log(str.substring(0.1) === str.substring(1.0)) // true
Copy the code
  • Substr: method returns a string of characters from the specified position up to the specified number of characters.
str.substr(start, [length])
Copy the code

Matters needing attention

  1. substr()fromstartThe acquisition length islengthCharacter (interception stops if it reaches the end of the string).
  2. ifstartIs positive and greater than or equal to the length of the string, thensubstr()Returns an empty string.
  3. ifstartIs negative, then the value is calculated after adding the length of the string. (If the value is still negative after adding the length of the string, the value is changed from0Start intercepting).
  4. iflength 为 0Or negative,substr()Returns an empty string. iflengthIf omitted, willsubstr()The character is extracted to the end of the string.
  • sliceThe: method extracts a portion of a string and returns a new string without changing the original string.
str.slice(beginIndex[, endIndex])
Copy the code

Matters needing attention

  1. ifbeginIndexIs negative, then the value is calculated after adding the length of the string. (If the value is still negative after adding the length of the string, the value is changed from0Start intercepting).
  2. ifbeginIndexIs greater than or equal to the length of the stringslice() returns an empty string.
  3. ifendIndexIf omitted, willslice()The character is extracted to the end of the string. If it’s negative, it’s treated asstrLength + endIndexAmong themstrLengthIs the length of the string.

The three difference

methods parameter describe
slice slice(begin, end) Returns a substring from begin to end (without end)
substring substring(start, end) Returns a substring from start to end (without end)
substr substr(start, length) Returns a substring of length starting at the start position
  1. slice 和 substringThe parameters are both start and end indexes, butsliceThe argument can be negative,substringThe parameter is less than0, will be regarded as0
  2. substrUnlike the other two, the two parameters are the starting index and the length of the character to be included in the generated string.

26. You really get itJSON.stringifyYet?

The basic use

Json. stringify converts arrays or objects into JSON strings. Json. parse converts JSON strings into arrays or objects. Based on these two methods, many uses can be generated, such as:

  • Deep copy of objects (disadvantages: circular references, etc.)
  • localStorageCan only access content in string format, so save before converting toJSONStrings, when taken out, are converted to arrays or objects.

Learn throughJSON.stringfy

Grammar:

JSON.stringify(value[, replacer [, space]])
Copy the code

Parameters:

  • value: will be serialized into oneJSONValue of a string.
  • replacer(Optional) :
    • If the parameter is a function, each attribute of the serialized value is converted and processed by the function during serialization;
    • If the parameter is an array, only the property names contained in the array will be serialized to the finalJSONString;
    • If the parameter isnullOr not, all attributes of the object are serialized.
  • space: Specifies a blank string for indentation to beautify the output

(Important) nine features:

Pay special attention to features 1, 3, and 5

  1. Booleans, numbers, and string wrapper objects are automatically converted to their original values during serialization.
  2. All tosymbolProperties that are property keys are completely ignored, even thoughreplacerThey are mandatory in the parameter.
  3. Executing this method on objects that contain circular references (objects that refer to each other in an infinite loop) throws an error.
  4. NaN 和 InfinityThe value of the format andnullWill be regarded asnull.
  5. undefined, any function andsymbolValue:
  • Occurrence of an attribute value in a non-array object is ignored during serialization
  • Is converted to when it appears in an arraynull
  • When converted separately, returnsundefined
  1. Convert value if anytoJSON()Method that defines what values will be serialized.
  2. DateDate is calledtoJSON()Convert it tostringString (same asDate.toISOString()), so it is treated as a string.
  3. Other types of objects, includingMap/Set/WeakMap/WeakSetOnly enumerable attributes are serialized
  4. Properties of non-array objects are not guaranteed to appear in a serialized string in a particular order.

JavaScript array text

27. Do the array methods modify the original array? Those who don’t?

This is a frequent test point, bovine guest in the front end test questions, the problem repeatedly appeared.

  1. A method of changing its own value
pop push shift unshift splice sort reverse
/ / ES6 added
copyWithin
fill
Copy the code
  1. A method that does not change its own value
join // Returns a string
forEach // No return value
concat map filter slice // Returns a new array
every some // Returns a Boolean value
reduce // Does not necessarily return what
indexOf lastIndexOf // Return a numeric value (index value)
/ / ES6 added
find findIndex
Copy the code

28.shift 与 unshiftWhat are the return values of?

  1. unshift()Insert elements at the beginning of the array,shift()Deletes the first element of the array
  2. For both return values, go directly to the test code:
const arr = [1.2.3.4.5]
undefined
console.log(arr.unshift(0)) / / 6
console.log(arr.shift()) / / 0
Copy the code

Unshift returns the length of the inserted element, shift returns the value of the deleted element.

By analogy, push returns the length of the inserted element, and POP returns the value of the deleted element.

29.new Array() 与 Array.of()What is the difference between?

  1. Array.of()Method creates a new array instance with a variable number of arguments, regardless of the number or type of arguments. It’s like tonew ArrayIs extremely similar in function. WhyES6New method added?

The reason for this is that new Array(n), which has only one parameter, is not an Array containing only n, but a 1 * n Array with all values undefined. See the specific test:

Array.of(7);       / / [7]
Array.of(1.2.3); / / [1, 2, 3]

Array(7);          // [,,,,,,]
Array(1.2.3);    / / [1, 2, 3]
Copy the code

30. What is the difference between includes and indexOf?

The basic use

  1. indexOf: Returns the element inarrayIf the location does not exist- 1
  2. includes: Determines whether an element exists

The difference between

  1. includesCan detectNaN
var arr = [NaN]
console.log(arr.indexOf(NaN))   // -1
console.log(arr.includes(NaN))  // true
Copy the code
  1. includesThe return value istrue/false, when determining whether an element exists in an array,includesIs more readable

31.splice()Precautions for deleting elements

Let me make a hypothetical scenario, so you can understand why this is a problem.

Now that I have an array [1,-1,2,-1,-5], I want to delete all negative numbers, so I write the following code:

const arr = [1, -1, -2.1, -5]
for(let i = 0; i<arr.length; i++) {
    if (arr[i] < 0) {
        arr.splice(i, 1)}}console.log(arr) // [1, -2, 1]
Copy the code

The above code feels fine, why is -2 not deleted?

I’m going to do splice, and I’m going to print out the value of the element at the current I position, and you should understand that.

for(let i = 0; i<arr.length; i++) {
    if (arr[i] < 0) {
        arr.splice(i, 1)
        console.log(a[i]) // -2 undefined}}Copy the code

After I delete -1, the current I value is -2, so I ++ is empty. So if splice deletes elements in an array, be careful where the callback I is located.

32. Can you use array higher-order functions

Portal: in half an hour, A bag will teach you how to rip higher-order functions

33. Can you rip array higher-order functions by hand?

Portal: in half an hour, A bag will teach you how to rip higher-order functions

34. Do you know how forEach breaks out of a loop?

break return

The forEach loop cannot be broken by a break return.

  • break
var arr = [1.2.3.4]
arr.forEach((val, key) = > {
    // Uncaught SyntaxError: Illegal break statement
    if (key > 1) {
        break
    }
    console.log(val)
})
Copy the code

Break cannot be used in forEach.

  • return
var arr = [1.2.3.4]
arr.forEach((val, key) = > {
    console.log('key = ', key)
    if (key > 1) {
        return
    }
    console.log(val)
})
Copy the code

The output

key =  0
1
key =  1
2
key =  2
key =  3
Copy the code

Although two Val’s are not printed, the loop continues four times, and the return cannot break forEach, just like a continue.

try catch

A try catch can interrupt a forEach, and it’s the only way to interrupt a forEach.

Use try to monitor code blocks and throw exceptions where interrupts are needed. See the following cases for details:

var arr = [1.2.3.4]
try {
    arr.forEach(function (val, key) {
        console.log('key = ', key)

        if (key > 1) {
            throw Error(a); }})}catch (e) {}
Copy the code

The output

key =  0
key =  1
key =  2
Copy the code

Official recommendation: every/some

Portal: Array.prototype.forEach

There is no way to abort or break out of the forEach() loop except by throwing an exception. The forEach() method is not the tool to use if you need to break or break out of a loop.

ForEach can be replaced with some and every: every terminates the loop when return false is encountered. Some terminates the loop when it hits return True. See the following cases for specific use:

var arr = [1.2.3.4]
arr.some((val, key) = > {
    console.log('key = ', key);
    if (key > 1) {
        return true}})Copy the code

35. How to implement array out of order

Portal: Out-Of-order JavaScript topics

36. How to implement array deduplication

Do you know how many ways to de-duplicate an array?

Using doublefor 和 splice

function unique(arr){            
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]==arr[j]){         
            // The first is the same as the second, and the splice method deletes the second
                arr.splice(j,1);
                // delete after note callback jj--; }}}return arr;
}
Copy the code

useindexOf 或 includesAdd new array

/ / use indexof
function unique(arr) {
    var uniqueArr = []; / / the new array
    for (let i = 0; i < arr.length; i++) {
        if (uniqueArr.indexOf(arr[i]) === -1) {
            // Indexof returns -1 to indicate that the element does not exist in the new array
            uniqueArr.push(arr[i])// Push an element that is not in the new array}}return uniqueArr;
}
/ / use includes
function unique(arr) {
    var uniqueArr = []; 
    for (let i = 0; i < arr.length; i++) {
        //includes checks whether the array has a value
        if(! uniqueArr.includes(arr[i])) { uniqueArr.push(arr[i])//}}return uniqueArr;
}
Copy the code

sortAfter sorting, use the idea of fast or slow Pointers

function unique(arr) {
    arr.sort((a, b) = > a - b);
    var slow = 1,
        fast = 1;
    while (fast < arr.length) {
        if(arr[fast] ! = arr[fast -1]) {
            arr[slow ++] = arr[fast];
        }
        ++ fast;
    }
    arr.length = slow;
    return arr;
}
Copy the code

The sort method is used to sort from smallest to largest (returning a new array), and without the above callbacks in its arguments the sorting error occurs at two digits or more (if omitted, the elements are sorted by the Unicode point of each character in the converted string). The two-digit number is converted to a string of length two for calculation.

ES6To provide theSetduplicate removal

function unique(arr) {
    const result = new Set(arr);
    return [...result];
    // Use the extension operator to convert a Set data structure into an array
}
Copy the code

Elements in a Set occur only once, that is, the elements in a Set are unique.

Use hash tables to store whether elements are present (ES6To provide themap)

function unique(arr) {
    let map = new Map(a);let uniqueArr = new Array(a);// The array is used to return the result
    for (let i = 0; i < arr.length; i++) {
      if(map.has(arr[i])) {  // If there is a key value
        map.set(arr[i], true); 
      } else { 
        map.set(arr[i], false);   // If there is no key valueuniqueArr.push(arr[i]); }}return uniqueArr ;
}
Copy the code

Map objects hold key-value pairs, similar to objects. However, map keys can be of any type, and object keys can only be strings.

You can also use ordinary objects as hash tables if the array contains only numbers.

filterCooperate withindexOf

function unique(arr) {
    return arr.filter(function (item, index, arr) {
        // Current element, the first index in the original array == current index value, otherwise return current element
        // If it is not a duplicate item, discard it
        returnarr.indexOf(item) === index; })}Copy the code

Here’s an example of a possible question:

const arr = [1.1.2.1.3]
arr.indexOf(arr[0= = =])0 // The first occurrence of 1
arr.indexOf(arr[1])! = =1 // show that there is a 1 before
Copy the code

reduceCooperate withincludes

function unique(arr){
    let uniqueArr = arr.reduce((acc,cur) = >{
        if(! acc.includes(cur)){ acc.push(cur); }returnacc; }, [])// [] as the initial value of the first argument to the callback function
    return uniqueArr
}
Copy the code

37. How to implement array flattening

Portal: The interviewer repeatedly asked: array flat method to achieve

38. How to convert a class array to an array?

Array.prototype.slice.call()

const arrayLike = {
    0: '111'.1: '222'.length: 2
}
console.log(Array.prototype.slice.call(arrayLike)) / / / "1", "2"
Copy the code

Array.from()

Array.from is a new method in ES6 that converts both array-like objects and iterable objects into true arrays.

const arrayLike = {
    0: '1'.1: '2'.length: 2
}
console.log(Array.from(arrayLike)) / / / "1", "2"
Copy the code

(...).Expansion operator

The extension operator calls the traverser interface, which cannot be transformed if an object is not deployed.

We can’t use the normal class array above… Operator.

const arrayLike = {
    0: '1'.1: '2'.length: 2
}
// Uncaught TypeError: arrayLike is not iterable
console.log([...arrayLike]) / / / "1", "2"
Copy the code

If you deploy a traverser interface, such as an array of arguments classes, you can use the extension operator.

function fn() {
    console.log([...arguments])
}
fn(1.2.3) / / [1, 2, 3]
Copy the code

Past wonderful articles

  • Cow guest latest front-end JS written test 100 questions
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • JavaScript precompilation learning
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem

After the language

If you feel that this article has some help for you, I hope you can point a like, encourage and encourage bag, bag will continue to work hard. In addition, if you have any questions about this article, or do not understand part of the article, you can reply to me in the comment section, let’s discuss together, learn together, progress together!

If you feel confused in the comments section, you can also add my wechat or QQ for detailed communication, and the name is battlefield small bag.