Because of some changes in work and life , Recently, the frequency of writing articles has dropped a little , I'm really sorry , But I believe it will recover soon , Thank you for your attention and support .

This article is mainly for you to share JavaScript There are some methods and techniques in the process of coding , Although sometimes all roads lead to Rome , But maybe there will always be the shortest way to go . I hope that through the following points JavaScript Tips let your code “ Change numerous for brief , Simplify to refine ”.

Learn and use skillfully

1. new Set()

Someone may know ES6 New data structures are provided in Set, But maybe not many people can use it flexibly . utilize Set Data structure we can easily duplicate an array , such as :

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set); // Array.from Method can Set Structure to array . console.log(newArr); // [1, 2, 3]

2. Object.assign()

Object.assign() It's also ES6 Extension methods for objects provided in , But it can only copy one layer , such as :

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2); console.log(obj3); // {a: 1, b: 2}

3. map()

map Method is used to traverse the array , There is a return value , You can operate on each item of the array and generate a new array , Sometimes it can replace for and forEach loop , Simplify the code , such as :

let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map((e, i) => e * 10); // Multiply each item of the array by 10
console.log(newArr3); // [10, 20, 30, 40, 50]

4. filter()

filter Method is also used to traverse arrays , seeing the name of a thing one thinks of its function , It's filtering arrays , Trigger a callback function after each element , By judgment , Keep or remove the current item , Finally, a new array is returned , such as :

let arr4 = [1, 2, 3, 4, 5];
let newArr4 = arr4.filter((e, i) => e % 2 === 0); // modulus , The filtering remainder is not 0 Number of numbers
console.log(newArr4); // [2,4]

5. some()

some Method is used to traverse the array , Trigger a callback function after each element , Return as long as one of the conditions is met true, Otherwise return to false, Be similar to || Compare , such as :

let arr5 = [{result: true}, {result: false}];
let newArr5 = arr5.some((e, i) => e.result); // Just one for true, That is to say true
console.log(newArr5); // true


every Method is used to traverse the array , Trigger a callback function after each element , As long as one does not meet the condition, it returns false, Otherwise return to true, Be similar to && Compare , such as :

let arr6 = [{result: true}, {result: false}];
let newArr6 = arr6.every((e, i) => e.result); // Just one for false, That is to say false
console.log(newArr6); // false

7. ~~ Operator

~ Symbols used in JavaScript It has the effect of bitwise negation ,~~ That is to say, it is reversed twice , The operation value of bit operation is required to be integer , The result is also an integer , So after the bit operation will automatically become an integer , You can remove the decimal part skillfully , Be similar to parseInt, such as :

let a = 1.23;
let b = -1.23; console.log(~~a); // 1
console.log(~~b); // -1

8. || Operator

Clever use || Operator we can set default values for variables , such as :

let c = 1;
let d = c || 2; // If c The value of is true Then take the existing value , Otherwise 2 console.log(d); // 1

9. … Operator

… The operator is ES6 Methods used to deconstruct arrays in , Can be used to quickly get array parameters , such as :

let [num1, ...nums] = [1, 2, 3];
console.log(num1); // 1
console.log(nums); // [2, 3]

10. Ternary operator

This operator should be familiar to everyone , It can be simplified in the case of dictation if else Writing , such as :

let e = true,
f = ''; if (e) {
f = 'man';
} else {
f = 'woman';
} // Equate to
f = e ? 'man' : 'woman';


This article only lists JavaScript It's quite common in grammar 10 The method of improving coding efficiency is briefly described , Of course, each knowledge point can be expanded and explored accordingly , I hope you can learn skillfully and use skillfully at the same time .

JavaScript Learn and use more related articles skillfully

  1. JavaScript Learn and use skillfully

    About WeChat official account : Front end hula hoop (Love-FED) My blog : Rob's blog Know about columns : Front end hula hoop Preface Because of some changes in work and life , Recently, the frequency of writing articles has dropped a little , I'm really sorry , But I believe it will recover soon , ...

  2. Simple learning Python Chapter two __ Learn data structure and file operation skillfully

    #cnblogs_post_body h2 { background: linear-gradient(to bottom, #18c0ff 0%,#0c7eff 100%); color: #fff ...

  3. Skillful learning DBhelper

    I've been teaching important people to learn these days , She belongs to the super white , The super one . In the process of teaching her I found some knowledge points No matter how you teach, you won't .DBhelper I just don't know how to remember . At that time I thought Jiege ( gemee ) A series of big talk , And his book writer ...

  4. Learn mathematics skillfully JCF(Java Collections framework)

    I wonder if you still remember the collection we learned in high school , mapping , function , Math is really awesome , Take it and study it java Collection classes , It's easy to understand the knowledge . This article is suitable for beginners java Collection class white , It is also suitable for the learners who lack knowledge , At the same time, the interviewer can ...

  5. JavaScript How to learn

    well , I recently received a Web project , But to be honest , I haven't had much contact in the last two years Web Programming , hear Web Technology has changed a lot . I hear you know the most about new technology here Web Development Engineer ? To be exact , I am a 「 Front end engineer ...

  6. JavaScript Guidance recommendation

    Basically starting js While studying , It may feel confusing , At the beginning, it was from some simple form verification and copying other people's effect code , And then take your time to get to know . I think js It needs a certain language programming foundation , I think as we go deeper ,JS It's not easy to understand , individual ...

  7. JavaScript I learned 8. Changeable this--- Function execution context

    This is the course notes of teacher Jin Xuliang's Netease cloud class , recorded , As a reminder . Function execution context When the function runs , adopt this, Function to get information about the external environment it needs to run ( For example, the value of a variable , Reference to another object, etc ). this quote ...

  8. JavaScript I learned seven

    This is the course notes of teacher Jin Xuliang's Netease cloud class , recorded , As a reminder . An array is “ Polymorphic array " , You can put anything //JavaScript Polymorphic arrays in var arr = ["one", 2 ...

  9. Javascript Object factory functions and constructors

    This is the course notes of teacher Jin Xuliang's Netease cloud class , recorded , As a reminder . summary Use object literal , Or dynamically add new members to empty objects , Is the easiest way to create objects . However , In addition to these two common ways of creating objects ,JavaScript ...

Random recommendation

  1. APP The online certificate is invalid : solve

    forward :http://www.cnblogs.com/pruple/p/5523767.html forward :http://blog.csdn.net/sunnyboy9/article/details/50 ...

  2. [ turn ]VS2005 Debug Prompt when " Can't find MSVCR80D.dll" Solutions for

    Summarize the various solutions as follows : reason :( I don't know what I'm talking about ) because VS.net 2005 A new DLL programme , Make a exe And one more manifest file ( It's usually embedded in a file , So I can't see , But you can also not embed , this ...

  3. CreateThread function &&CString::GetBuffer function

    For these two common windows I've learned the following functions : // The simplest way to create a multithreaded instance #include <stdio.h> #include <windows.h> // Subthread functions ...

  4. c# Introductory example

    1. summary C# It's a language ,.net It's a platform , It supports C# perhaps VB.Net Write code 2. notes If the amount of annotation is less, use  //   start , A lot of use   /*    */     Express Output results 3. Namespace So-called n ...

  5. codeforces 622A Infinite Sequence

    A. Infinite Sequence time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. Web Scale IT And 6 Kind of DevOps Tools

    At the beginning of the New Year , In summing up the past year IT As the industry changes and develops , Many enterprises pay more attention to the industry trend in the next year or even several years .Gartner On 2014 Published an article in Gartner Says By 2017 Web-Scale ...

  7. AngularJS Custom form validation

    <!doctype html> <html ng-app="myApp"> <head> <script src="G:\\So ...

  8. mvc What's the difference between a three-tier architecture and a three-tier architecture

    Original address :http://zhidao.baidu.com/question/82001542.html?qbl=relate_question_3&word=MVC%20%CA%FD%BE%D ...

  9. ( 5、 ... and ) know Android Medium Service

    One . Use Service 1. Right click java Folder , Choose new Service, Then rewrite the onStartCommand function , Just execute startService function ,onStartCommand Will be executed ...

  10. margin Overlay the top and bottom of two adjacent elements margin It's superimposed

    <!doctype html><html><head><meta charset="utf-8"><title> Untitled article ...