学习JavaScript（一）

快速入门

生命变量用 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);
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,490评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,581评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,830评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,957评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,974评论 6赞 393
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,754评论 1赞 307
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,464评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,357评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,847评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,819评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,482评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2赞 355