6.JavaScript常用语法参考一览表

JavaScript是一种动态类型语言(dynamically typed language)。这意味着你在声明变量时可以不必指定数据类型,而数据类型会在代码执行时会根据需要自动转换。语句的话建议以 ; 结尾。

1.注释

// 单行注释

/* 这是一个更长的,
   多行注释
*/

2.标识符

标识符必须以字母、下划线(_)或者美元符号($)开头;后续的字符也可以是字母、下划线(_)、美元符号($)和数字(0-9)。因为 JavaScript 语言是区分大小写的,所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。

3.语句块

{
   statement_1;   
   statement_2;
   statement_3;
   .
   .
   .
   statement_n;
}

示例:

while (x < 10) {
  x++;
}

这里{ x++; }就是语句块。

4.变量

变量可以保存任何类型的数据,分为不带关键字、带关键字var(函数作用域)和let(块作用域)三种类型。

如果只声明未初始化,则其值为 undefined

4.1不带关键字的变量(极不推荐)

不带关键字的变量当在函数内部声明或函数外部声明或代码块内声明都是全局变量,极不推荐

x = 8

4.2带var关键字的变量(怪异的作用域)

在函数之外声明的var变量,为 全局变量,因为它可被当前文档中的任何其他代码所访问。

在函数内部声明的var变量,为 局部变量,因为它只能在当前函数的内部访问。

var x = 8;      #声明局部变量或全局变量。

ECMAScript 6 之前的 JavaScript 没有 语句块 作用域,语句块中声明的变量的作用域即语句块所在函数(或全局作用域)的对应作用域。例如,如下的代码将在控制台输出 5,因为 x 的作用域是声明了 x 的那个函数(或全局范围)的作用域,而不是 if 语句块。

if (true) {
  var x = 5;
}
console.log(x); // 5

4.3带let关键字的变量(推荐)

在函数之外声明的let变量,为 全局变量;在函数内部声明的let变量,为 局部变量

如果使用 ECMAScript 6 中新增的 let 声明,上述行为将发生变化。let 声明的变量的范围是块作用域,而var声明的范围是函数作用域。

if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y 没有被声明

5.常量

可以用关键字 const 创建一个只读的常量。常量标识符的命名规则和变量相同:必须以字母、下划线(_)或美元符号($)开头并可以包含有字母、数字或下划线。

const PI = 3.14;

常量不可以通过重新赋值改变其值,也不可以在代码运行时重新声明。它必须声明时同时被初始化为某个值。

常量的作用域规则与 let 块级作用域变量相同。若省略const关键字,则该标识符将被视为变量。

在同一作用域中,不能使用与变量名或函数名相同的名字来命名常量。

6.数据类型和值

最新的 ECMAScript 标准定义了8种数据类型:

  • 七种原始值数据类型(primitive values):
    • 布尔值(Boolean),有2个值分别是:true 和 false.
    • Null , 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 NullNULL或变体完全不同。
    • Undefined ,和 Null 一样是一个特殊的关键字,undefined 表示声明了变量但未初始化。
    • 数字(Number),整数或浮点数,例如: 42 或者 3.14159。特殊值NaN(Not a Number)。
    • 任意精度的整数 (BigInt) ,可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
    • 字符串(String),字符串是一串表示文本值的字符序列,例如:”Howdy” 。
    • 符号(Symbol) ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。
  • 引用值数据类型(reference value):对象(Object)。

数据类型的值分为原始值(primitive values)和引用值(reference value)。

7.数组

数组(array)是一个有序的数据集合,我们可以通过数组名称(name)和索引(index)进行访问。

7.1创建数组(creating an array)

var arr = new Array(element0, element1, ..., elementN);
var arr = Array(element0, element1, ..., elementN);
var arr = [element0, element1, ..., elementN];

// var arr=[4] 和 var arr=new Array(4)是不等效的,
// 后者4指数组长度,所以使用字面值(literal)的方式应该不仅仅是便捷,同时也不易踩坑

7.2遍历数组(interating over array)

遍历数组元素并以某种方式处理每个元素是一个常见的操作。以下是最简单的方式:

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

7.3多维数组(multi-dimensional arrays)

数组是可以嵌套的, 这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript数组的这个特性, 可以创建多维数组。

以下代码创建了一个二维数组。

var a = new Array(4);
for (i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j < 4; j++) {
    a[i][j] = "[" + i + "," + j + "]";
  }
}

这个例子创建的数组拥有以下行数据:

Row 0: [0,0] [0,1] [0,2] [0,3]
Row 1: [1,0] [1,1] [1,2] [1,3]
Row 2: [2,0] [2,1] [2,2] [2,3]
Row 3: [3,0] [3,1] [3,2] [3,3]

8.条件判断

8.1if...else 语句

当一个逻辑条件为真,用if语句执行一个语句。当这个条件为假,使用可选择的 else 从句来执行这个语句。if 语句如下所示:

if (condition) {
  statement_1;
}else {
  statement_2;
}
if (condition_1) {
  statement_1;
}else if (condition_2) {
  statement_2;
}else if (condition_n_1) {
  statement_n;
}else {
  statement_last;
}

8.2switch 语句

switch 语句允许一个程序求一个表达式的值并且尝试去匹配表达式的值到一个 case 标签。如果匹配成功,这个程序执行相关的语句。switch 语句如下所示:

switch (expression) {
   case label_1:
      statements_1
      [break;]
   case label_2:
      statements_2
      [break;]
   ...
   default:
      statements_def
      [break;]
}

9.循环语句

9.1for 语句

一个 for 循环会一直重复执行,直到指定的循环条件为 false。

for ([initialExpression]; [condition]; [incrementExpression])
  statement

9.2do...while 语句

do...while 语句一直重复直到指定的条件求值得到假值(false)。 一个 do…while 语句看起来像这样:

do
  statement
while (condition);

9.3while 语句

一个 while 语句只要指定的条件求值为真(true)就会一直执行它的语句块。一个 while 语句看起来像这样:

while (condition)
  statement

9.4label 语句

一个 label 提供了一个让你在程序中其他位置引用它的标识符。例如,你可以用 label 标识一个循环, 然后使用 break 或者 continue 来指出程序是否该停止循环还是继续循环。

label 语句的语法看起来像这样:

label :
   statement

9.5break 语句

在语法中,被 [] 包裹的内容是可省略的,也就是 label 可以省略。若省略,则终止当前所在的循环或 switch;若不省略,则终止指定的 label 语句。

break [label];

9.6continue 语句

continue 语句可以用来继续执行(跳过代码块的剩余部分并进入下一循环)一个 whiledo-whilefor,或者 label 语句。

  • 当你使用不带 label 的 continue 时, 它终止当前 whiledo-while,或者 for 语句到结尾的这次的循环并且继续执行下一次循环。
  • 当你使用带 label 的 continue 时, 它会应用被 label 标识的循环语句。

continue 语句的语法看起来像这样:

continue [label];

9.7for...in 语句

for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。

for (variable in object) {
  statements
}

9.8for...of 语句

for...of 语句在可迭代对象(包括ArrayMapSetarguments 等等)上创建了一个循环,对值的每一个独特属性调用一次迭代。

for (variable of object) {
  statement
}

10.函数

10.1定义函数

一个函数定义(也称为函数声明,或函数语句)由一系列的function关键字组成,依次为:

  • 函数的名称。
  • 函数参数列表,包围在括号中并由逗号分隔。
  • 定义函数的 JavaScript 语句,用大括号{}括起来。

例如,以下的代码定义了一个简单的square函数:

function square(number) {
  return number * number;
}

10.2递归

函数可以调用其本身

function factorial(n){
  if ((n == 0) || (n == 1))
    return 1;
  else
    return (n * factorial(n - 1));
}

10.3嵌套函数和闭包

你可以在一个函数里面嵌套另外一个函数。嵌套(内部)函数对其容器(外部)函数是私有的。它自身也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的表达式(通常是函数)。

既然嵌套函数是一个闭包,就意味着一个嵌套函数可以”继承“容器函数的参数和变量。换句话说,内部函数包含外部函数的作用域。

可以总结如下:

  • 内部函数只可以在外部函数中访问。
  • 内部函数形成了一个闭包:它可以访问外部函数的参数和变量,但是外部函数却不能使用它的参数和变量。

下面的例子展示了嵌套函数:

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41

由于内部函数形成了闭包,因此你可以调用外部函数并为外部函数和内部函数指定参数:

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); // 可以这样想:给一个函数,使它的值加3
result = fn_inside(5); // returns 8

result1 = outside(3)(5); // returns 8

10.4闭包

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套,并且内部函数可以访问定义在外部函数中的所有变量和函数,以及外部函数能访问的所有变量和函数。

但是,外部函数却不能够访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一定的安全性。

此外,由于内部函数可以访问外部函数的作用域,因此当内部函数生存周期大于外部函数时,外部函数中定义的变量和函数的生存周期将比内部函数执行时间长。当内部函数以某一种方式被任何一个外部函数作用域访问时,一个闭包就产生了。

var pet = function(name) {          //外部函数定义了一个变量"name"
  var getName = function() {            
    //内部函数可以访问 外部函数定义的"name"
    return name; 
  }
  //返回这个内部函数,从而将其暴露在外部函数作用域
  return getName;               
};
myPet = pet("Vivie");
    
myPet();                  

关于闭包详见:Javascript中的闭包的讲解

11.运算符

  • 赋值运算符(Assignment operators)
  • 比较运算符(Comparison operators)
  • 算数运算符(Arithmetic operators)
  • 位运算符(Bitwise operators)
  • 逻辑运算符(Logical operators)
  • 字符串运算符(String operators)
  • 条件(三元)运算符(Conditional operator)
  • 逗号运算符(Comma operator)
  • 一元运算符(Unary operators)
  • 关系运算符(Relational operator)

详细讲解见:Javascript运算符参考一览表

12.引用类型和对象

引用类型 又称为 对象定义,也被称为 ,引用类型的值(又名 引用值 对象 )是引用类型的一个实例。引用类型描述的是一类对象所具有的属性和方法。

12.1创建实例

a.操作符new创建法

创建Object引用类型的新实例,使用new操作符后跟 构造函数Object() 创建,然后把该实例保存在person变量中。

var person = new object();  
person.name = "Nicholas";
person.age = 29;
b.对象字面量创建法

我们定义(创建)了一个 JavaScript 对象:

var person = {name : "Nicholas",age : 62};

12.2访问对象属性和方法

objectName.propertyName
objectName.methodName()

12.3常见对象

Object对象

Array对象

Date对象

RegExp对象

Function对象

Boolean对象

Number对象

String对象

Global对象

Math对象

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/basic/js/1939.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注