Basic syntax of JS in JavaScript series

DOGIOOH 2020-11-13 01:49:51
basic syntax js javascript series

JavaScript Series of JS introduction / Basic grammar

01 JavaScript introduction

JavaScript It's object-based and event driven , Script language with security performance

Common misconceptions about : We usually think JavaScript And Java There's a connection , As a matter of fact ,JavaScript Except in grammar Java, The rest of it doesn't matter .

JavaScript Key points in the development process

  • 1995 year , Netscape Brendan Eich It only took 10 It took days to design JavaScript Language .
  • 1997 year ,ECMA The organization has customized JavaScript The standard of language , go by the name of ECMAScript standard , It's also ECMAScript The first edition of the standard .
  • ECMAScript 6 standard ( abbreviation ES6) Already in 2015 year 6 Officially released in .

JavaScript Implementation principle of

  • JavaScript Is a single thread scripting language , No compilation required , Explain and execute .JS You don't have to run it in a browser , As long as there is JS The engine can , The most typical example is NodeJS, Using Google's v8 engine , bring JS Run completely out of browser . When the browser reloads the document , First of all, we need to correct HTML To analyze , The browser is parsing HTML When you file ,“ From top to bottom ” load , Parsing and rendering during loading . During parsing , If an external resource is requested , Such as images 、CSS、iconfot etc. , These request processes are asynchronous , Does not affect the HTML Continue loading and parsing of documents . Encountered during document loading JS file ,HTML The document immediately suspends the rendering thread ( Load parse render synchronously ), After suspend , Wait until the JS After the file is loaded and the parsing is finished , To recover HTML Rendering thread of document . because JS It may change DOM structure , The most obvious example is document.write. That means : stay JS Before execution , All subsequent downloads of resources may not be necessary or meaningful , This is the same. JS The root cause of blocking subsequent resource downloads , therefore , Development process , Often JS Put the code in HTML At the end of the document .
  • JS The execution mechanism of is a main thread + A task queue . The synchronization task is the task executed on the main thread , Asynchronous tasks are tasks placed in the task queue . In the main thread are synchronization tasks , In the execution stack, the stack is executed , Asynchronous tasks are first handled by the corresponding modules, such as Timer modular , It must wait for the trigger conditions such as time to arrive ,callback Will be placed in the task queue , Once the tasks in the execution stack are completed , It will go to the task queue to execute the various items in the queue callback.callback queue The middle finger is “ Task queue ”, It can also be understood as message queuing ,“ news ” It can be understood as : Callback functions added when registering asynchronous tasks . It should be noted that : If the synchronous task in the execution stack is not completed, the asynchronous task in the task queue will not be executed callback Of , Even if it's over time .

02 JavaScript Basic grammar

JavaScript Grammar and Java Language is similar to , Each statement is marked with ; end , Use... For statement block {...}. however ,JavaScript It is not mandatory to add... At the end of each statement ;, The browser is responsible for executing JavaScript The engine of the code will automatically add... At the end of each statement ;. Give Way JavaScript The engine automatically semicolons in some cases will change the semantics of the program , Results in inconsistent results with expectations

JavaScript The core syntax in consists of variables 、 data type 、 Array 、 Operation symbol 、 Control statement 、 notes 、 Input / Output 、 Grammatical conventions make up

  • Variable
var// Keywords used to declare variables
// Declare variables before assigning values
var x;
// Declare and assign variables at the same time
var x=5;
// Variables can be used without declaration , But this method is easy to make mistakes
// Variable itself type is not fixed , therefore JavaScript It's dynamic language
var s=1;

  • data type

    JavaScript The data types in are :undefined null number boolean string Array Object

    undefined : Variable has no initial value , It's only useful to determine if a function parameter is passed .
    null : Represents a null value , And undefined The values are equal . It and 0 And empty strings '' Different ,0 It's a number ,'' The length is 0 String , and null Express “ empty ”.
    number : JavaScript Don't distinguish between integers and floating-point numbers , Unified use Number Express
    boolean : ture / false
    string : Single quote ' Or double quotes " Any text enclosed .
    Array : JavaScript The array of can include any data type
    Object : JavaScript Object is a set of keys - An unordered set of values , Keys are all string types , Value willing is any data type .
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    var str = "JavaScript";
    var num = 10;
    var u;
    var arr=[1,2,3,str];
    var date = new Date();
    // Output at console
    console.log(typeof str);
    console.log(typeof num);
    console.log(typeof u);
    console.log(typeof arr);
    console.log(typeof date);

  • String type

    • JavaScript The string of is used '' or "" The enclosed characters indicate . If ' It's also a character , Then you can use "" Cover up , But if the string contains both ' Contain, " You need to use escape characters \ To mark .

    • Template string : To connect multiple strings , It can be used + Connection No . If there are many variables that need to be connected , use + The number is more troublesome ,ES6 Added a template string , use ${ Variable name } Express , Can automatically replace variables in string .

    • Common methods :

      • charAt(index) : Returns the specified location string
      • indexOf(str,index) : Find the first occurrence of a specified string in the string
      • substring(index1,index2): Return at specified index index1 and index2 String between ,[index1,index2)
      • split(str) : Split a string into an array of strings

  • Array

    • How to create an array :

      • var arr = [1,2,3 ];

      • var arr =new Array(5);



      • var arr = new Array(1,2,3);

    • Array common methods :

      • attribute length: Sets or returns the number of elements in an array
      • join() : Put all the elements of the array into a string , Delimit by passed in delimiters
      • sort() : Sort the array
      • push() : Add one or more elements to the end of the array , Return to the new length

  • Program instance :
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
var str="apple,banana,orange,watermelon,peach";
var arr=str.split(",");
console.log("====== adopt split Split into arrays ========")
console.log("======= adopt join Turn into string========");
var str1 = arr.join("-");
console.log("======== adopt push Additive elements ===============")

  • Operator

    • && Operation is with operation , Only for true,&& The result is true
    • || Operation is or is , As long as one of them is true,|| The result is true
    • ! Operation is not operation , It's a monocular operator , hold true become false,false become true
    • The comparison operators are :> >= < <= == It should be noted that == Will automatically convert the data type and then compare , A lot of times , It's going to get very weird results , and === Data types are not automatically converted , If the data types are not consistent , return false, If the same , Compare again .
    • An equal comparison of floating-point numbers : To compare whether two floating-point numbers are equal , Only the absolute value of their difference can be calculated , See if it is less than a certain threshold .
    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

  • Logic control statement
    • if Conditional statements
    • switch Multi branch statement
    • for、while Loop statement
    • for-in( In fact, it's equivalent to Java Enhancement cycle in for( : )in amount to :)

  • Break the loop
    • break; Out of the loop
    • continue; Jump out of a cycle

  • notes
    • Single-line comments ://
    • Multiline comment :/*… */

  • Pop up tips
    • alert(“ Prompt information ”)
    • prompt(“ Prompt information ”,“ The default information of the input box ”)

  • Grammatical conventions
    • The code is case sensitive
    • Variable , Names of objects and functions
      • JS Keywords in lowercase
      • Built in objects start with uppercase letters
      • The name of an object is usually lowercase
      • Method naming rules and Java identical
    • A semicolon


  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple