快速入门
生命变量用 var ,语句块用花括号,注释类似C,可以用 // 或者 /**/
数据类型
JavaScript 的数据类型有 Number 、字符串、布尔型、数组和对象等。
JavaScript 不区分整数和浮点数,数值的运算符类似C。
字符串可以用双引号或者单引号引起来。
布尔值为 true 或者 false ,运算符类似C。
比较运算符
JavaScript的相等比较运算符有两种,一种是==,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;另一种是===,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。这是JavaScript的设计缺陷,在实际使用中都应该用 === 。
注意:NaN 在比较的时候是不能用 === 的,因为 NaN 不等于任何一个指,NaN === NaN 会返回 false 。判断是否为 NaN 只能用 isNaN() 函数。
此外还要注意浮点数的比较,因为浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:
1 / 3 === (1 - 2 / 3); // false
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
null 和 undefined
JavaScript 中的 null 类似 Python 中的 None ,表示空值。
JavaScript 中的 undefined 表示未定义,但用处不太大,仅仅在判断函数参数是否传递的情况下有用。
字符串
字符串用单引号或者双引号引起来,转义则使用反斜杠 \ 。使用 \x 可以后接十六进制,用 \u 跟一个 Unicode 字符。
多行字符串
多行字符串可以用反引号引起来,比如:
`这是一个
多行
字符串`;
字符串常用函数有:
- 字符串拼接用加号+
- 字符串长度用 length 属性,例如 str.length
- 用中括号下标可以取出某个位置的字符,比如 str[2]
- toUpperCase() 或 toLowerCase() 能把字符串转位全大写或全小写
- indexOf() 函数可以搜索字符串出现的位置(区分大小写),失败返回 -1
- substring(start, end) 选出从start位置开始到end位置(不包括end)的子串
数组
Array 中可以包含任意类型的元素,用 length 可以获得其元素个数。通过设置 length 可以延长或截断数组,但不建议这么做。
与String类似,Array也可以通过 indexOf() 来搜索一个指定的元素的位置,没找到返回 -1 。
使用 slice 可以截取数据的一部分,返回 一个新的数组 。
使用 push和pop 可以向数组尾部添加和弹出元素,使用 unshift和shift 可以向数组头部添加或移出元素。
使用 sort 可以对数组元素进行排序,使用 reverse 可以把数组元素颠倒,这两个函数都是 破坏性 的!
使用 concat 可以把两个数组拼接起来。
join可以用一个分隔符把数组的元素串联起来。
splice
splice 是数组的万能操作函数,可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素,如:
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
splice 的第一个参数是开始的位置,第二个参数是删除元素的个数,随后的元素是要插入的元素。这个函数也是 破坏性 的!
对象
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。例如:
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
属性名如果包含特殊符号,需要用引号引起来,且在访问的时候就不能用 . 来访问,必须用中括号的方式,例如:
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
console.log(xiaohong['middle-school'])
判断一个对象是否拥有某个属性,可以使用 in ,例如:
'name' in xiaoming; // true
'grade' in xiaoming; // false
要判断一个属性是否是对象自身拥有的,而不是继承得到的,可以用 hasOwnProperty() 方法:
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
Map
Map 是键值对的类型,与JS对象有所不同的是,对象的键只能是字符串,而Map则无此限制。
初始化 Map 可以传入一个二维数组,或者设置一个空 Map 再 set 值;取得值则用 get 方法;判断有无某个键用 has 方法,删除用 delete 方法。
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.set('John', 97)
m.delete('Tracy')
m.has('Adam') // false
m.get('Bob') // 75
Set
Set 是集合,其中不能有重复元素,可以用一维数组来初始化集合,使用 add 往里加元素,使用 delete 删除元素,用 has 来判断是否有某个元素,例如:
s = new Set(["Alice", "Bob"])
s.add("Charlie")
s.delete("Bob")
s.has("Bob") // false
注意!! Map和Set是ES6标准新增的数据类型!
循环
JavaScript 除了支持类似C语言的for、while、do...while 循环外,还支持 for ... in 循环来遍历对象或数组,例如:
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
for (var x in person) {
text += person[x];
}
console.log(text) // JohnDoe25
var a = [1, 2, 3];
for (var x in a) {
console.log(x);
}
条件判断
JavaScript 的条件判断用 if ... else if ... else 。
iterable
由于遍历Map和Set无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的 for ... of 循环来遍历。
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
console.log(x);
}
for (var x of s) { // 遍历Set
console.log(x);
}
for (var x of m) { // 遍历Map
console.log(x[0] + '=' + x[1]);
}
for...in 循环存在一些历史遗留问题,而 for ... of 循环则解决了这些问题。
更好的方法直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数,该函数的第一个参数是元素,第二个元素是当前索引,第三个参数是集合对象本身。例如:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以 忽略它们 。例如,只需要获得Array的element:
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
console.log(element);
});