Day 10 - JavaScript(1) : 变数与资料类型

前言

今天先介绍一下JavaScript的一些背景, 再说一下JavaScript的变数与资料类型。

JavaScript是一种Programming language, 无论是前端还是後端, 都能够看到它的身影。 而JavaScript的演化过程, 绝对是比HTML精彩。

• 1995年 - Netscape的LiveScript
• 1996年 - Microsoft的JScript
• 1997年 - 由ECMA标准化, 标准为ECMAScript language specification
• 1998年 - ECMAScript 3
• 2009年 - ECMAScript 5
• 2015年 - 广为人知的ECMAScript 6
• ...

变数

在JavaScript中, 有2种方法可以帮助我们宣告变数: var跟let。

var num1 = 1;
let num2 = 2;

console.logo(num1); // 1
console.logo(num2); // 2

而2者有什麽不同呢? 其中一个分别就是Hoisting。使用var的时候, var的变数宣告会被移动到程序区块的顶端, 而let则不会。

例如:

num = 6;
console.log(num + 7); // 13
var num;

会变成

var num; // 提升到顶端
num = 6;
console.log(num + 7); // 13

若使用let的话, 会有什麽效果呢?

num = 6;
console.log(num + 7); // error: Cannot access 'num' before initialization
let num; // 不会提升到顶端

正因为code的顺序与实际运行有所不同, var尽可能就不用。

资料类型

JavaScript支援以下资料类型

• number
  • 数值
  • 例如: 123, -3.14, 1e10
• boolean
  • 真假值
  • 例如: true, false
• string
  • 字串
  • 例如: 'hi', "hello", `good job`
• symbol
  • 用於产生唯一值(unique value)
  • Symbol('123') === Symbol('123') // false
• undefined
  • 未被定义
• null
  • 空值
• object
  • 资料的集合
  • 例如: {age: 10, name: 'Peter'}
• array
  • 阵列
  • 例如: ['a', 'b', 'c']
• function
  • 函数
  • 例如: function print() { console.log('hello'); }

资料类型看似简单, 但也有几个点要注意。

在Object中的undefined

undefined如果为Object中的某个值, 那麽, 其对应的键值应该被理解为未定义。

例如

{
  name: "Peter",
  age: undefined
}

应被理解为

{
  name: "Peter"
}

这2个Object虽然并不相等, 但对於其他不支援Undefined的Programming language来说, 如C#, 它们是一样的, 所以, 这样的理解有助我们日後与其他系统交流。

Array 跟 Object

如果我们巧妙的利用这两个资料类型, 它们大多情况下都可以表达出一样的资料。

const peter = [];
const mary = {};

peter.name = "Peter";
peter[999] = "text";

mary.name = "Mary";
mary[999] = "test";

那麽, 应该在什麽时候用Array或是Object, 又或者, 2者的分别是什麽?

1. Array是iterable, Object则不是

若果要对资料进行Loop的话, 使用Array比较方便。

const people = ['Peter', 'Mary'];

for (const person of people) {
    console.log(person); // output: Peter...Mary
}

const peopleInObject = {0: 'Peter', 1: 'Mary'};

for (const person of Object.values(peopleInObject)) {
    console.log(person); // output: Peter...Mary
}

2. Array的键会影响Array长度

const myArray = [];

myArray[999] = 10;

console.log(myArray.length); // 1000

for (const element of myArray) {
  // 这里会Loop 1000次
}

结语

今天先到这里, 明天说一下函数。