Front-end-JavaScript basics

Introduction

What is JavaScript?

JavaScript ( JS ) is a lightweight, interpreted or just-in-time compiled programming language function first

function priority : A function in a programming language can be used as a parameter to pass to other functions, can be used as the return value of another function, and can also be assigned to a variable.

interpreted type : compiled type language, the compiled type needs to pre-encode the source code into intermediate code, and then interpret and run by the interpreter. The interpreted type does not need to be compiled in advance, and is translated and run by the interpreter when the program is running.

The JavaScript standard is ECMAScript As of 2012, all modern browsers fully support ECMAScript 5.1, and older browsers support at least the ECMAScript 3 standard.

The well-known ES6 is the sixth edition of ECMAScript released by ECMA International on June 17, 2015. The official name of this version is ECMAScript 2015.

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources

scenes to be used

With the rise of the Internet, the use of JavaScript has gone beyond the browser.

1. browser platform . With the advent of HTML5, the browser itself has become more and more powerful, so JavaScript can call many system functions, such as operating local files, operating pictures, calling cameras and microphones, and developing more rich client products.
2. server application . The emergence of node allows JavaScript to be used to develop server-side applications, and also makes JavaScript a language that can simultaneously develop front and back ends.
3. mobile application . js is also becoming the development language of mobile applications. For example, the React Native project compiles components written in JavaScript into native components.
4. desktop application . JavaScript can even develop desktop applications, such as electronjs.
5. database operation . In some Nosql data, JavaScript is supported as an operating language, like mongodb.

Basic grammar

variable

Variables are references to values. JavaScript variable names are case sensitive. A and a are two different variables.

var total; // 未赋值的变量是 undefined，它是个特殊的值，表示无定义。
total = 1;
var a,b; // 一个var后可以声明多个变量。

Variable promotion

You may be surprised that there is no error when executing the following code. Because the JavaScript engine works by parsing the code first, obtaining all declared variables, in other words, all variable declaration statements are promoted to the head of the code.

console.log(a);
var a = 1;

variable rule

• The first character is any Unicode letter (including English letters and letters in other languages), as well as the dollar sign ( $ ) and the underscore ( _ )
• For the second and subsequent characters, in addition to Unicode letters, dollar signs, and underscores, the numbers 0-9 can also be used.

In addition, Chinese can also declare variables, except for the following reserved words

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

Statement

The execution unit line of the JavaScript program. Generally, one line is one statement. If there are multiple statements in one line, we use ; indicate the end of the statement.

var total = 1 + 1; // 声明了一个变量total，然后将1+1的运算结果赋值给它。

Comment

// 这是单行注释

/*
 这是
 多行
 注释
*/

block

JavaScript uses braces to wrap multiple statements to represent a block. Note var do not constitute a separate scope, which is different from java.

{
  var a = 1;
}
a // 1

conditional statement

// if结构
if (m === 1){ // 往往由一个条件表达式产生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else结构
if (m === 1){
  语句;
}else{
    语句;  
} 

// if/else if.../else 结构 m==1 m==2 其它
if (m === 1) {
} else if(m === 2){
}else {
}

switch structure

switch (m) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

Note the difference between == and ===

When using == to compare two variables, implicit type conversion occurs, for example, automatically converting a string type to a numeric type.

In order to avoid the problems caused by implicit conversion, we use === for strict comparison.

Ternary operator

Ternary operators can also be used for logical judgments.

(条件) ? 表达式1 : 表达式2

loop statement

var i = 0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}
// 区别上面，它至少会执行一次
var i = 0;
do {
  console.log('i 当前为：' + i);
} while (i < 100);

for loop statement

• Initialization expression: Determine the initial value of the loop variable and execute it only once at the beginning of the loop.
• Conditional expression: At the beginning of each round of loop, this conditional expression must be executed, and the loop will continue only if the value is true.
• Increment expression: the last operation of each loop, usually used to increment loop variables.

for (初始化表达式; 条件; 递增表达式) {
  语句
}

break and continue

break statement is used to jump out of a code block or loop, and continue is to end the current loop and jump to the next time.

type of data

null and undefined

● The variable is not initialized: undefined.

● Variable is not available: null.

Value

Integers and floating point numbers, in JavaScript, all numbers are stored as 64-bit floating point numbers, even integers.

1 === 1.0 // true

Numerical precision: According to the international standard IEEE 754, the 64 binary bits of JavaScript floating-point numbers, starting from the leftmost side, are composed like this.

• Bit 1: Sign bit, 0 represents a positive number, 1 represents a negative number
• 2nd to 12th (11 in total): Exponential part
• 13th to 64th (52 digits in total): decimal part (ie significant digits)

Numerical range: The length of the exponent part of a 64-bit floating-point number is 11 binary digits, which means that the maximum exponent part is 2047 (2 to the 11th power minus 1). The range beyond which it cannot be represented.

Numerical base:

• Decimal: Value without leading 0.
• Octal: The value with the prefix 0o or 0O , or the value with the leading 0 and the eight Arabic numerals that only use 0-7.
• Hexadecimal: 0x with prefix 061712c1bc0607 or 0X .
• Binary: 0b with prefix 061712c1bc0646 or 0B .

NaN

NaN is a special value of JavaScript, which means "Not a Number", which mainly occurs when there is an error in parsing a string into a number.

string

The characters enclosed by single and double quotation marks are strings.

Double quotation marks can be used inside single quotation marks. Single quotation marks can be used inside double quotation marks.

'abc' "abc" "'a'" // 字符串

// 字符串换行
var str = 'String \
String \
String';

Escapes:

• \0 ：null（\u0000）
• \b : Back key ( \u0008 )
• \f : form feed ( \u000C )
• \n : Newline character ( \u000A )
• \r : Enter key ( \u000D )
• \t : Tab character ( \u0009 )
• \v : vertical tab character ( \u000B )
• \' : Single quote ( \u0027 )
• \" : Double quotes ( \u0022 )
• \\ : Backslash ( \u005C )

Character set: javaScript uses the Unicode character set. Inside the JavaScript engine, all characters are represented by Unicode.

object

var obj = { // 对象声明
  a: '1',
  b: '2'
};

// 对象属性读取
obj.a 
obj['a']

// 删除对象属性
delete obj.a

// 判断属性是否存在
'a' in obj 

//对象遍历
for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}

function

function keyword declaration.

function foo(s) {
  console.log(s);
}
// 表达式形式
var foo = function(s) {
  console.log(s);
};

Function constructor

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

Function name promotion: JavaScript engine treats function names as variable names, so function command to declare a function, the entire function will be promoted to the head of the code just like a variable declaration.

foo();
function foo() {console('ok')}

There are still quite a lot of knowledge points about JavaScript functions, which will be sorted out separately for the function.

array

Array belongs to a special kind of object.

typeof [1, 2, 3] // "object"

length: JavaScript uses a 32-bit integer to store the number of elements in the array. This means that there are only 4294967295 (2^ length ) members of the array, which means that the maximum value of the attribute 061712c1bc0c33 is 4294967295.

Array traversal

var a = [1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}

summary

To review the main points of this article, please leave a message for exchange.

• Introduction to JavaScript.
• Basic JavaScript syntax.
• type of data.