​前端教学讲义：JS基础

讲义内容：JS 诞生的背景、基本类型、运算符

以下内容只涉及 ES5 标准，ES6 增加的新内容可以在网上查找到。

JS 诞生的背景

上世纪 90 年代网景公司开发的浏览器独步天下

一个叫做 Brendan Eich 的工程师受命于开发一款脚本语言，来增强浏览器的功能。

这名工程师花费了 10 天时间设计出了第一个版本，名叫 LiveScript。

后来因为当时 Java 正红，公司将其改名为 JavaScript，所以 JS 和 Java 其实没有什么关系。

这名工程师在设计语言之初有几个目标

• 简单易用，不需要专业的计算机知识就能使用
• 因为个人的喜爱，所以增加对函数式编程的支持
• 因为公司压力，所以也要支持面向对象

后来 JS 因为市场认同，打败了 VBScript，Java plugin 等一系列增强浏览器的方案，成了事实标准。

网景公司倒闭之后，JS 的标准制定由 ECMA（欧洲电脑制造商协会）制定，所以又叫做 ECMAScript， 新的标准叫做 ES6、ES7、ES2018 … 每年会收集各种语言规范建议，通过 草案、stage1、stage2 等几个阶段，并在浏览器中有实现后会成为正式标准。

所以 JS 具有以下特点：

• 向下兼容，包括兼容 bug（typeof null，大数）
• 奇怪、蹩脚的规范，从技术上来说缺点很多
• 运用场景广泛
• 迭代速度快，

会在项目里使用还在草案阶段的新语法

变种、超集、子集 很多（coffee script, typescript, Action Script, flow, AssembleScript)

基本类型

JS 中的基本类型有以下几种：

• undefined
• null
• Boolean
• Number
• String

另外有三种引用类型：

• Function
• Array
• Object

和 Java 一样，所有类型都是基于 Object（除了 undefined ?)

通过 「var」关键字声明一个变量，方法和大多数语言一样。

JS 是动态语言，变量不用区分类型，不同类型之间的变量可以相互赋值。

var foo = 1；
var bar;
var a, b, c;
bar = foo = “abcd”
undefined 和 null

当一个值没有初始值的时候，默认值为 undefined。

undefined 在 JS 中是个语言设计的缺陷例子。

undefined 的行为在大多数情况下和 null 一样，都是不可访问的值，但是在 typeof 的时候结果不同

var und;
var nl = null;
typeof und === ’undefined’
typeof nl == ‘object’

数字

Boolean， Number，String 的行为和大多数语言一样。

可以直接声明也可以通过构造函数、工厂模式声明，三者没什么区别。

var a = 123
var a = new Number(123)
var a = Number(123)

在 JS 中 数字的取值范围是 -253 - 1 到 253 - 1，范围小于 long 型，并且计算时有精度问题

1.2 / 0.2
// 5.999999999999999

声明数字的方式和其它语言类似，科学计数法、八进制、十六进制

var a = 1e3
// 1000
var a = 0o12
// 10
var a = 0xa
// 10

通过 「toString」方法可以转换成字符串，并设置进制

var a = 1000
a.toString(10)
// “1000”
a.toString(8)
// “1750”
a.toString(16)
// “3e8”

在 JS 中，有两个特殊的数字，NaN 和 Infinity。

当字符串或者其他类型转换成数字失败的时候，就会返回 NaN，但是 NaN 的类型依然是 number。

NaN 和任何数字计算后，结果都是 NaN。

当数字除以 0 的时候，就会返回 Infinity。

Number(undefined)
// NaN
Number(null) // 我也很费解，为什么 null 转换成数字就是 0
// 0 
Number("asdf")
// NaN
10 / 0
//Infinity

字符串

在 JS 中字符串是可变长，而且可以通过 「+」 操作符做拼接。

字符串在内容中应该是双字节储存，可以通过索引访问每个字符，而不是每个 byte。

在浏览器中编码格式根据网页的编码格式而设置（在 node 中默认是 UTF8？)

在 JS 中，声明一个字符串通过单引号或者双引号都可以，二者没有区别。通常习惯是通过单引号访问，因为可以少按一个 shift。

var a = ‘123’
var b = “123”
a == b
a[0]  // 通过索引访问的结果仍然是个字符串
// “1”

函数

函数在 JS 中是一等公民，可以赋值给变量，有两种声明方式

function plus(a, b) { return a + b}
var plus = function(a, b) { return a + b }

第二种方法其实是将一个「匿名函数」复制给了变量 plus。

这两种方式在使用上没太大区别，除了在「声明前置」的场景下会有点区别

匿名函数还有一种方法叫做「立即执行函数」。

(function(a, b){ return a + b })(10, 20)
// 30

函数只会将 return 声明的表达式的值返回出去，在函数没有声明 return 的时候，默认返回 undefined

function plus (a, b) { a + b }
plus(1, 2)
// undefined

函数和作用域
函数和变量一样，可以在任何地方声明、使用，

每个函数独立出了一个作用域，作用域可以互相嵌套。

函数作为一个变量，本身也在父作用域下

function foo(b) {
    var a = 10
    // 这里属于 foo 的作用域，内部有 bar, b, a 三个变量
    function bar() {
        var c = 20;
        return a + b + c // 这里属于 bar 的作用域，因为在 foo 之内，所以可以访问 a 和 b
    }
    // 这里不能访问 c
    return bar();
}

由于 JS 在设计的时候，怕用户不理解变量需要先声明再使用，所以对变量会有「声明前置」，帮助大家提前声明所需要的变量。

下面我们用立即执行函数创建一个闭包来解释什么叫「声明前置」

(function() {
    console.log(fn, foo);
    function fn(a, b){ return a + b };
    var foo = 1234;
    console.log(fn, foo);
})()
// function (a, b){ return a + b } undefined
// function (a, b){ return a + b } 1234

上面的代码相当于：

(function() {
    function fn(a, b){ return a + b };
    var foo;
    console.log(fn, foo);•
    foo = 1234;
    console.log(fn, foo);
})()

如果我们用匿名函数赋值给一个变量，那么会有下面效果：

(function() {
    console.log(fn, foo);
    var fn = function(a, b){ return a + b };
    var foo = 1234;
    console.log(fn, foo);
})()

// undefined undefined
// function (a, b){ return a + b } 1234

上面的代码相当于：

(function() {
    var fn, foo;
    console.log(fn, foo);
    fn = function(a, b) { return a + b};
    foo = 1234;
    console.log(fn, foo);
})()

数组

在 JS 中数组是可变的，而且数组内可以放任何值。

数组的长度是最后一个元素的索引加一。

如果访问没有设置的元素，将会返回 unfined

var array = [];
array[0] = 1;
array[2] = “1234”;
array[4] = function(){};
// [1, undefined, “1234”, function(){}]
array[1]
// undefined

js 数组中自带了很多方法，方便我们对数组做操作，比如说 map， reduce 等等

[1, 2, 3].map(function(d) { return d + 1 })
// [2, 3, 4]
[1, 2, 3].reduce(function(r, d) { return r + d }, 0)
// 6

如果想要删除数组中的某个元素的话，我们可以用 delete 关键词，或者直接将索引的位置设置成 undefined

var array = [1, 2, 3]
delete array[1]
// [1, undefined, 3]

如果我们需要删除数组中某个元素，并且缩短数组长度的话，就需要用到 splice。

var array = [1, 2, 3]
array.splice(1, 1)
console.log(array)
// [1, 3]

一些常用的数组方法还有 slice, forEach, find, every, includes 等等

对象

和 java 一样，对象（Object） 是所有类型的基类。它类似 JSON 里的键值对结构体，可以动态的挂载任何属性。

声明的方法有两种，{} 和 new

var a = {}
var b = new Object()
a.num = 1
a.str = "1234"
console.log(a)
// { num: 1, str: "1234"}

对象（Object）有点类似 Java 里的 HashMap，但 Key 只能是字符串。可以通过类似数组索引的方式来访问对象上的键。

这种方法和点操作符是一样的效果，当键名由一些特殊的字符组成的时候，我们可以通过索引方式访问。

var obj = {value: 1234}
console.log(obj["value"])
// 1234

这样声明或者访问会报错：

var obj = { some-value: 1234 }
obj.some-value

我们需要让编译器知道 some-value 是一个键名，所以需要将它们用引号括起来

var obj = { "some-value": 1234 }
obj["some-value"]

当一个对象中挂载了一个函数，在函数中可以通过 this 来访问对象内的其他属性，this 也可以理解为「执行上下文」

function fn () { console.log(this.value) }
var obj = { fn: fn, value: 1234 }
obj.fn() // 此时 fn 的执行上下文就是 obj
// 1234

var otherObj = { fn: fn, value: "abcd"}
otherObj.fn() // 此时 fn 的执行上下文就是 otherObj
// "abcd"

由于函数和数组是所有类型的基类，所以可以像对象一样随意的扩展属性。

但是字面量（如数字、布尔值、字符串、null、undefined） 是不能随意扩展的。

function plus(a, b) { return a + b}
plus.value = 1234
plus(12, plus.value)
// 1246
 
var array = []
array.value = 1234
console.log(array.value)
// 1234
 
var a = true;
a.value = 1234
console.log(a.value)
// undefined

运算符

JS 的运算符和其他语言基本类似，就+-*%/这些，外加一些二进制操作符。

但因为 JS 弱类型的特性，有些场景是其他语言没有的，比如一个数字加一个字符串，结果是什么？

1+"2"
// "12"

这种场景还可以理解，数字和字符串相加的时候，数字通过调用 toString 被转换成了字符串。

1 + {}
// "1[object Object]"

数字和对象相加的时候，对象和数字都调用了 toString，被转换成了字符串

{} + []
// 0

但是空对象和空数组相加结果却是 0，我也不知道为什么

var obj = {}
if (obj) console.log("obj is true")
// "obj is true"

obj == true
// false

上面这个例子中，obj 是个空对象，在 if 条件判断中被当作真值，但是和 true 对比的时候却返回 false。

JS 的隐式转换规则很诡异，很多都是为了兼容早期版本中错误的实现，这里没必要细究转换规则是什么。

我们只需要记住以后用严格相等符（===）作对比，避免不同类型的变量相互运算。

"1" == 1
// true

"1" === 1
// false

循环

JS 的循环和其它类似，也都是 for， do..while 这种写法。

但是，我们一般不用 for 作循环，而是用数组方法 forEach，map（因为 for 写起来很麻烦，而且还需要单独声明一个变量）

[1, 2, 3].forEach(function(value) {
  return value + 1;
})
// [2, 3, 4]

另外还可以通过 for...in 来遍历一个对象

var obj = {a:1, b:2, c: 3}
for (var key in obj) {
  console.log(key)
}
// "a"
// "b"
// "c"

但我们一般也不这么用，而是用 Object.keys 取得包含对象所有键的数组

var obj = {a:1, b:2, c: 3}
Object.keys(obj)
// ["a", "b", "c"]
 
Object.keys(obj).forEach(console.log)
// "a"
// "b"
// "c"

课后习题

第一题：JS 的运用领域都有哪些，作为弱类型的语言执行效率如何，为什么？

第二题：typeof 关键字的返回值有几种结果?

第三题：下面两种写法有什么区别

{
  0: "a",
  1: "b",
  2: "c"
}

["a","b","c"]

第四题：下面代码的运行时会不会报错，this 指向哪里？

function fn () { console.log(this.value) }
fn()

第五题：声明的变量是如何被回收的