JavaScript基础

职场亮哥

发布于 2020-10-10 14:59:21

6260

发布于 2020-10-10 14:59:21

文章被收录于专栏：职场亮哥职场亮哥

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

[0x00] let,var,const

var 的方式是为了兼容旧版。因为var定义变量，会提升作用域，var定义的变量，都是全局作用域。
let 是ES6引入的，如果没有特殊原因，变量都应该是用let来定义
const是定义常量

[0x01] JavaScript数据类型

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

Boolean. 布尔值，true 和 false.
null. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或其他变量完全不同。
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

参考资料

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除

python