JavaScript基础

JavaScript 从 Java 中借用其大部分语法,但也受 Awk,Perl 和 Python的影响。因此本篇博客基于对Java和Python的认识来记录JavaScript的差异点。

[0x00] let,var,const

  • var 的方式是为了兼容旧版。因为var定义变量, 会提升作用域,var定义的变量,都是全局作用域。

  • let 是ES6引入的,如果没有特殊原因, 变量都应该是用let来定义

  • const是定义常量

[0x01] JavaScript数据类型

JavaScript总共有六种基本数据类型

  • Boolean. 布尔值,truefalse.
  • null. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 nullNullNULL或其他变量完全不同。
  • undefined. 变量未定义时的属性。
  • Number. 表示数字,例如: 42 或者 3.14159。
  • String. 表示字符串,例如:”Howdy”
  • Symbol ( 在 ECMAScript 6 中新添加的类型).。一种数据类型,它的实例是唯一且不可改变的。

在bool运算中,null和undefined都等价于false

除了六种基本数据类型之外,还有复合的object类型。

[0x02] 字符串单引号,双引号和倒引号

  • 字符串可以用双引号,也可以用单引号, 没有任何区别
  • 倒引号定义的字符串可以写在多行
  • 倒引号定义的字符串可以插值,使用 ${name}的方式,把变量插入到字符串中,借鉴于Perl

${name}代码

let x = 'world'
let z = `hello ${x}`
console.log(z)  // 输出hello world

[0x03] 自增自减运算符

两个连续加号表示自增操作,两个连续减号表示自减操作。借鉴于Java。

以自增操作为例:

  • 加号在后,表示先求值,后自增

  • 加号在前,表示先自增,后求值

[0x04] 双等号和三等号

console.log( ‘3’ == 3); // == 转化为相同类型之后再比较值,也就是不比较类型

console.log( ‘3’ === 3); // === 值和类型都比较,所以常用===

!= 和 !== 的规则同 == 和 === 的规则

[0x05] 作用域

  • Python的作用域以def为最小单位
  • 从ES6开始, es开始支持块级作用域。JavaScript的大括号就会开始一个新的语句块
let x = 3; {
    let x = 4;
    console.log(`x in block is ${x}`);  // x=4
}
console.log(`x is ${x}`)  // x=3

let x = 3; {
	x = x + 1
    console.log(`x in block is ${x}`)  // x=3 外层变量可以传入内层
}
console.log(`x is ${x}`)  // x=3

[0x06] 分支

if语句

  • if 语句可以不带else子句

  • if 语句可以带else子句实现双分支

  • if 语句可以带else if 子句实现多分支

if (condition_1) {
  statement_1;
}
[else if (condition_2) {
  statement_2;
}]
...
[else if (condition_n_1) {
  statement_n_1;
}]
[else {
  statement_n;
}]

switch语句

和java类似

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

[0x07] 循环

  • c风格for循环

  • for..in循环

  • for..of循环

  • for each..in循环:目前已禁用

  • do..while循环

  • while循环

c风格for循环和两种while循环的区别都是c语言风格的,Java也类似。再次单独介绍for..in和for..of循环

for..in和for..of循环

for of是ES6新加的语法,用来遍历数组元素值,而for in是用来遍历对象的索引。代码如下:

// for in会遍历对象所有的属性,即会遍历数组的元素以及属性
let myArray = [1, 2, 3, 4, 5, 6, 7]
myArray.name = "数组"
for (let index in myArray) {
    console.log(myArray[index]);  // 会输出myArray的name属性
}

// for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name
let myarray = [1, 2, 3, 4, 5, 6, 7]
myarray.name = '数组'
for (let value of myarray) {
    console.log(value)
}

[0x08] 解构

JavaScript的解构借鉴于Python,但是和Python相比JavaScript的解构更加强大。

Array解构

// 普通解构
arr = [1, 2]
const [a, b] = arr
console.log(a, b)  // 输出1 2


// 普通解构支持默认值
arr = [1]
const [a=3, b=4] = arr
console.log(a, b)  // 输出1 4

Object解构

Python不支持字典解构,但是JavaScript支持的对象解构就包含字典解构,只是在JavaScript中不叫字典。

// object 解构
obj = {
    a: 1,
    b: 2,
    c: 3
}
const {a: A, b: B, c: C} = obj
console.log(A, B, C)  // 输出1 2 3

// object 解构支持默认值
obj = {
    a: 1,
    b: 2,
    c: 3
}
const {a: A, b: B, c: C, d: D = 18} = obj
console.log(A, B, C, D)  // 输出1 2 3 18

嵌套解构

// 嵌套解构
arr = [1, [2, 3], 4]
const [a, [b, c ,d = 18]] = arr
console.log(a, b, c, d)  // 输出1 2 3 18

更复杂的嵌套解构如下(MDN上的一个例子):

// 解构Json文件
const metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

const {title: Title, translations: [{title: TransTitle}]} = metadata
console.log(Title, TransTitle)  // 输出Scratchpad JavaScript-Umgebung

参考资料

  1. MDN-JavaScript指南
  2. W3S-JavaScript 教程
  3. MDN-解构赋值

JavaScript基础
https://suncle.me/posts/2847555892/
作者
Suncle Chen
发布于
2017年4月18日
许可协议