1. Exponential representation

// Longhand
for (var i = 0; i < 10000; i++) { ... }
// Shorthand
for (var i = 0; i < 1e4; i++) {
Copy the code

2. Default parameter values

//Longhand
function add(test1, test2) {
  if (test1 === undefined)
    test1 = 1;
  if (test2 === undefined)
    test2 = 2;
  return test1 + test2;
}
//shorthand
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3
Copy the code

3. Extension operator simplification

//longhand // joining arrays using concat const data = [1, 2, 3]; const test = [4 ,5 , 6].concat(data); //shorthand // joining arrays const data = [1, 2, 3]; const test = [4 ,5 , 6, ...data]; console.log(test); [4, 5, 6, 1, 2, 3] We can also clone using the extended operator. //longhand // cloning arrays const test1 = [1, 2, 3]; const test2 = test1.slice() //shorthand // cloning arrays const test1 = [1, 2, 3]; const test2 = [...test1];Copy the code

4. Template literals

If you’re tired of using + to concatenate multiple variables into a single string, this simplification trick will be a headache free.

//longhand
const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
//shorthand
const welcome = `Hi ${test1} ${test2}`;
Copy the code

5. Cross-line string

We can do this when dealing with cross-line strings in our code.

//longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`
Copy the code

6. Assign object attributes

let test1 = 'a'; 
let test2 = 'b';
//Longhand 
let obj = {test1: test1, test2: test2}; 
//Shorthand 
let obj = {test1, test2};
Copy the code

7. Convert strings into numbers

//Longhand let test1 = parseInt('123'); Let test2 = parseFloat (' 12.3 '); //Shorthand let test1 = +'123'; Let test2 = + '12.3';Copy the code

8. Deconstruct assignments

//longhand
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
//shorthand
const { test1, test2, test3 } = this.data;
Copy the code

9. Array find simplification

The find method is useful when we have an array of objects and want to find specific objects based on their properties.

const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]
function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }
Copy the code

10. Conditional lookup simplification

If we want to call different methods based on different types, we can use multiple else if statements or switches, but is there a better simplification technique?

// Longhand if (type === 'test1') { test1(); } else if (type === 'test2') { test2(); } else if (type === 'test3') { test3(); } else if (type === 'test4') { test4(); } else { throw new Error('Invalid value ' + type); } // Shorthand var types = { test1: test1, test2: test2, test3: test3, test4: test4 }; var func = types[type]; (! func) && throw new Error('Invalid value ' + type); func();Copy the code

10. Simplified bitwise operation of indexOf

When looking for a value in an array, we can use the indexOf() method. But there’s a better way. Let’s look at this example.

//longhand if(arr.indexOf(item) > -1) { // item found } if(arr.indexOf(item) === -1) { // item not found } //shorthand if(~arr.indexOf(item)) { // item found } if(! ~ arr.indexof (item)) {// item not found} The bitwise (~) operator will return true (except -1), and the reverse only needs to be done! ~. Alternatively, you can use the include() function. if (arr.includes(item)) { // true if the item found }Copy the code

11.Object.entries()

This method converts an object to an array of objects.

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/
Copy the code

12.Object.values()

This is also a new feature introduced in ES8 and functions like Object.entries(), but without the keys.

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/
Copy the code

13. Double bitwise operation

// Longhand Math.floor(1.9) === 1 // true // Sleep ~~1.9 === 1 // trueCopy the code

14. Repeat the string multiple times

We can use a for loop to repeatedly manipulate the same character, but there is an easier way.

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);
Copy the code

15. Find the maximum and minimum value of the array

const arr = [1, 2, 3]; Math. Max (... arr); / / 3 Math. Min (... arr); / / 1Copy the code

16. Get the character of the string

let str = 'abc';
//Longhand 
str.charAt(2); // c
//Shorthand 
str[2]; // c
Copy the code

17. Exponential power simplification

/ / longhand math.h pow (2, 3); // 8 //shorthand 2**3 // 8Copy the code

The last

In order to help you better review the key knowledge and prepare for the interview more efficiently, the electronic draft of “Front-end Engineer Interview Manual” is specially organized.

Content includes HTML, CSS, JavaScript, ES6, computer networking, browsers, engineering, modularity, Node.js, frameworks, data structures, performance optimization, projects, etc. (The data in this paper are suitable for 0-2 years)

It includes questions asked by first-tier Internet companies such as Tencent, Bytedance, Xiaomi, Ali, Didi, Meituan, 58, Pindoduo, 360, Sina, Sohu and so on, covering the primary and intermediate front-end technology points.

Front end test summary

JavaScript

performance

linux

Front-end data summary

The full PDF is free to share, just like it,Just click here and get it for free.

I always think the technical interview is not an exam. You memorize the questions before the exam, and you are given a paper to answer and hand in.

First of all, technical interview is a process of knowing oneself and the gap between oneself and the outside world.

And, more importantly, technical interview is a two-way understanding process, to make them find the best in you, also want to try to find the best in each other, because he is likely to be after your colleagues and leadership, so, the interviewer asks: do you have any questions, don’t say no, going to try to understand his work, understand the team atmosphere.

Looking for a job is nothing more than to see three points: with what person, what to do, how much money, to give these three in their heart division of a proportion.

Finally, I wish you all can find your ideal home in this unfriendly environment