概述

1. 简介

JavaScript语言的每一个值都属于一个数据类型.共有六种数据类型

  • 数值 (number) 整数和小数
  • 字符串 (string) 文本,如 Hello World
  • 布尔值
  • undefined 未定义或不存在
  • null 表示空值
  • 对象(object)
    • 狭义的对象 (object)
    • 数组 (array)
    • 函数 (function)

通常,数值、字符串、布尔值是原始类型的值. 对象是合成类型的值,undefined和null是两个特殊的值.

typeof 运算符

JS有三种方法,可以确定值是什么类型

  • typeof运算符
  • instanceof 运算符
  • Object.prototype.toString 方法

typeof 运算符可以返回一个值的数据类型

typeof 123 // number
typeof '123' // string
typeof false // boolean
typeof function f() {} // function
typeof undefined // undefined

字符串

字符串可以视作字符数组,可用数组的方括号运算符,用来返回某个位置的字符.

var s = 'hello';
s[0] // h
s[1] //e
s[100] // undefined

length 属性

length属性返回字符串的长度,该属性是无法改变的

var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5

字符集

JS中使用 Unicode 字符集.引擎内部,所有的字符都用 Unicode表示.

Base64转码

JS原生提供两个Base64相关的方法 btoa()atob(), 这两个方法只适合 ASCII 编码的字符

var string = 'Hello world';
btoa(string); // SGVsbG8gd29ybGQ=
atob('SGVsbG8gd29ybGQ=') // Hello World
btoa('你好') // 报错

关于两个函数的命名解释:
atob stands for ASCII to binary
e.g.: atob("ZXhhbXBsZSELCg==") == "example!^K"
btoa stands for binary to ASCII
e.g.: btoa("\x01\x02\xfe\xff") == "AQL+/w=="

要将非ASCII码字符转为Base64编码, 中间需要插入转码环节

function b64Encode(str) {
return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
return decodeURIComponent(atob(str));
}

对象

概述

1.1 生成方法

对象是JS语言的核心,也是重要的数据类型. 对象是一组‘key-value’的集合,一种无序的复合数据的集合.

var obj = {
foo: 'hello',
bar: 'world'
}

属性的操作

属性的读取

读取对象的属性,有两种方法,一种是使用点运算度,还有一种是方括号运算符

var obj = {
p: 'Hello World'
}

obj.p // hello world
obj['p'] // hello world

属性的查看

查看一个对象本身所有的属性, 可以用 Object.keys 方法

var obj = {
key1: 1,
key2: 2
}

Object.keys(obj);

属性的删除 delete() 命令

delete 用于删除对象的属性,删除成功后返回true

var obj = {P: 1};
Object.keys(obj) // ['p']

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []
``

> 注: 如果对象没有某个属性, 使用delete删除这个属性,还是会返回true, 所以不能根据delete的结果来认定某个属性是否存在.只有当属性存在,且不能删除时,使用delete才会返回 fasle.
> delete 只能删除对象本身的属性,无法删除对像继承过来的属性

```js
var obj = {};
delete obj.toString() // true
obj.toString() // function toString() {}

属性是否存在: in 运算符

in运算付检查对象是否包含某个属性 (检查的是key, 不是value), 如果包含就返回 true, 否则返回 false.

var obj = {P: 1};
'p' in obj // true
'toString' in obj // true

// 如果只想检查对象本身的属性,可以使用hasOwnProperty() 方法判断一下

属性的遍历: for … in … 循环

for…in… 循环用来遍历一个对象的全部属性

var obj = {a:1, b:2, c:3};

for (var i in obj) {
console.log('key: ', i);
console.log('value: ', obj[i]);
}

for.in遍历所有可遍历的属性,会跳过不可遍历的属性
不仅遍历对象自身的属性,还遍历继承的属性

举例来说,对象都继承了toString属性,但是for…in循环不会遍历到这个属性。


var obj = {};

// toString 属性是存在的
obj.toString // toString() { [native code] }

for (var p in obj) {
console.log(p);
} // 没有任何输出

上面代码中,对象obj继承了toString属性,该属性不会被for…in循环遍历到,因为它默认是“不可遍历”的。关于对象属性的可遍历性,参见《标准库》章节中 Object 一章的介绍。

如果继承的属性是可遍历的,那么就会被for…in循环遍历到。但是,一般情况下,都是只想遍历对象自身的属性,所以使用for…in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。

var person = { name: '老张' };

for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
// name

函数

1. 函数的声明

  • function 命令
  • 函数表达式
  • Function 构造函数
// function 命令
function print(s) {
console.log(s);
}

// 函数表达式
var print = function(s) {
console.log(s);
}

// Function 构造函数 - 基本不用
var add = new Function(
'x',
'y',
'return x + y'
);

// 等同于
function add(x, y) {
return x + y;
}

如果函数被重复声明了,后面的声明会覆盖前面的声明

function f() {
console.log(1);
}

function f() {
console.log(2);
}

2. 第一等公民

JS将函数看作是一个值,与其他值(数值,字符串, 布尔值等)地位相同.凡是可以使用值的地方都可以使用函数.

函数的属性和方法

函数的name属性返回函数的名字

function f1() {}

f1.name

函数的 length 属性,返回函数定义的参数个数

function f(a,b) {}

f.length;

toString()可以返回函数的源码,对于原生的函数返回function (){[native code]}

函数的作用域

在 ES5 的规范中,JavaScript 只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。ES6 又新增了块级作用域,本教程不涉及。

对于顶层函数来说,函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。

函数内部的变量提升

与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。

函数本身的作用域

函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在的作用域无关。

函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域

参数的省略

function f(a, b) {
return a;
}

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

上面代码的函数f定义了两个参数,但是运行时无论提供多少个参数(或者不提供参数),JavaScript 都不会报错。省略的参数的值就变为undefined。需要注意的是,函数的length属性与实际传入的参数个数无关,只反映函数预期传入的参数个数。

但是,没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。

arguments 对象

由于 JavaScript 允许函数有不定数目的参数,所以需要一种机制,可以在函数体内部读取所有参数。这就是arguments对象的由来。

arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推。这个对象只有在函数体内部,才可以使用。

闭包 (简单理解:定义在一个函数内部的函数)

闭包(closure)是 JavaScript 语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

理解闭包,首先必须理解变量作用域。前面提到,JavaScript 有两种作用域:全局作用域和函数作用域。函数内部可以直接读取全局变量。

var n = 999;

function f1() {
console.log(n);
}
f1() // 999

但是,函数外部无法读取函数内部声明的变量。

function f1() {
var n = 999;
}

console.log(n)

上面代码中,函数f1内部声明的变量n,函数外是无法读取的。

如果出于种种原因,需要得到函数内的局部变量。正常情况下,这是办不到的,只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。


function f1() {
var n = 999;
function f2() {
  console.log(n); // 999
}
}

上面代码中,函数f2就在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是 JavaScript 语言特有的”链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}

var result = f1();
result(); // 999

上面代码中,函数f1的返回值就是函数f2,由于f2可以读取f1的内部变量,所以就可以在外部获得f1的内部变量了。

闭包就是函数f2,即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中,只有函数内部的子函数才能读取内部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点,就是它可以“记住”诞生的环境,比如f2记住了它诞生的环境f1,所以从f2可以得到f1的内部变量。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在。请看下面的例子,闭包使得内部变量记住上一次调用时的运算结果。

function createIncrementor(start) {
return function () {
return start++;
};
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

上面代码中,start是函数createIncrementor的内部变量。通过闭包,start的状态被保留了,每一次调用都是在上一次调用的基础上进行计算。从中可以看到,闭包inc使得函数createIncrementor的内部环境,一直存在。所以,闭包可以看作是函数内部作用域的一个接口。

为什么会这样呢?原因就在于inc始终在内存中,而inc的存在依赖于createIncrementor,因此也始终在内存中,不会在调用结束后,被垃圾回收机制回收。

闭包的另一个用处,是封装对象的私有属性和私有方法。


function Person(name) {
var _age;
function setAge(n) {
_age = n;
}
function getAge() {
return _age;
}

return {
name: name,
getAge: getAge,
setAge: setAge
};
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

上面代码中,函数Person的内部变量_age,通过闭包getAge和setAge,变成了返回对象p1的私有变量。

注意,外层函数每次运行,都会生成一个新的闭包,而这个闭包又会保留外层函数的内部变量,所以内存消耗很大。因此不能滥用闭包,否则会造成网页的性能问题。

立即调用的函数表达式(IIFE)

在 JavaScript 中,圆括号()是一种运算符,跟在函数名之后,表示调用该函数。比如,print()就表示调用print函数。

有时,我们需要在定义函数之后,立即调用该函数。这时,你不能在函数的定义之后加上圆括号,这会产生语法错误。

function(){ /* code */ }();
// SyntaxError: Unexpected token (

产生这个错误的原因是,function这个关键字即可以当作语句,也可以当作表达式。
解决方法就是不要让function出现在行首,让引擎将其理解成一个表达式。最简单的处理,就是将其放在一个圆括号里面。

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

推而广之,任何让解释器以表达式来处理函数定义的方法,都能产生同样的效果,比如下面三种写法。

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

数组

array 是按次序排列的一组值.每个值的位置都有编号(从0开始), 这个数组用方括号来表示, 任何类型的数据都可以放入数组

var arr = [1,2,3];