1.注释的代码块在JavaScript之中是不会运行的。注释是一个非常好的方式让你自己以及其他人明白这段代码是怎么运行的。
JavaScript中的注释方式有以下两种:
使用 //
来告诉JavaScript来忽略当前行的代码
// This is an in-line comment.
你也可以使用多行注释来注释你的代码,以/*
开始,用*/
来结束,就像下面这样:
/* This is a
multi-line comment */
2.数据类型 JavaScript提供七种不同的data types(数据类型),它们是undefined
(未定义),null
(空),boolean
(布尔型),string
(字符串),symbol
(符号),number
(数字), and object
(对象)。
Variables
(变量)允许计算机以一种动态的形式来存储和操作数据,通过操作指向数据的指针而不是数据本身来避免了内存泄露,
通过在变量的前面使用关键字var
,我们告诉 JavaScript 来创建或者declare(声明)一个变量,就像这样:
var ourName;
上面代码的意思是创建一个名为ourName
的variable
(变量),在JavaScript中我们使用分号来结束一段声明。
undefined
。当你对一个值为
undefined
的变量进行运算操作的时候,算出来的结果将会是
NaN
,
NaN
的意思是
"Not a Number"
。当你用一个没有
定义
的变量来做字符串连接操作的时候,它会如实的输出
"undefined"
。
3.
在 JavaScript 中,你可以通过在引号前面使用 反斜杠(\
) 来转义引号。
var sampleStr = "Alan said, \"Peter is learning JavaScript\".";
这标志着提醒 JavaScript 单引号或双引号并不是字符串的结尾,而是出现在字符串内的字符。所以,如果你要打印字符串到控制台,你将得到:
Alan said, "Peter is learning JavaScript".
在 JavaScript 中的 字符串 要用单引号或双引号来包裹它,只要你在开始和结束都使用相同类型的引号,单引号和双引号的功能在JavaScript中是相同的。
使用转义字符可能导致难以阅读。这时候可以使用单引号。
'This string has "double quotes" in it. And "probably" lots of them.'
4.
[]叫中括号,{}叫大括号,()叫小括号。
JavaScript中只有字符串类型,没有字符类型。那么如何获取到字符串中的某个字符呢?
例如, 在单词 "Charles" 中索引0上的字符为 "C",所以在 var firstName = "Charles"
中,你可以使用 firstName[0]
来获得第一个位置上的字符。
5字符串定义后无法改变该值,但可以重新使变量指向另一个字符串,如本来String a指向hello,hello无法改变,只能使a指向blue
6.数组
使用 数组
,我们可以在一个地方存储多个数据。
你以左方括号[
开始定义一个数组,以右方括号]
结束定义,并把每个条目之间用逗号隔开,就像这样:
var sandwich = ["peanut butter", "jelly", "bread"]
。
你也可以在数组中包含其他数组,就像这样:[["Bulls", 23], ["White Sox", 45]]
。这被称为一个多维数组。
在数组里移入移除数据
一个简单的方法将数据追加到一个数组的末尾是通过 push()
函数。
.push()
接受把一个或多个参数,并把它“推”入到数组的末尾。
var arr = [1,2,3];
arr.push(4);
// 现在arr的值为 [1,2,3,4]
改变数组中数据的另一种方法是用 .pop()
函数。
.pop()
函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。
数组中任何类型的条目(数值,字符串,甚至是数组)可以被“抛出来” 。
举个例子, 对于这段代码
var oneDown = [1, 4, 6].pop();
现在 oneDown
的值为 6
,数组变成了 [1, 4]
。
pop()
函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢?
这就是 .shift()
的用武之地。它的工作原理就像 .pop()
,但它移除的是第一个元素,而不是最后一个。
你不仅可以 shift
(移出)数组中的第一个元素,你也可以 unshift
(移入)一个元素到数组的头部。
.unshift()
函数用起来就像.push()
函数一样, 但不是在数组的末尾添加元素,而是在数组的头部添加元素。
7.函数
在 JavaScript 中,我们可以把代码的重复部分抽取出来,放到一个函数(functions)中。
这是一个函数(function)的例子:
function functionName() {
console.log("Hello World");
}
你可以通过函数名称functionName
加上后面的小括号来调用这个函数(function),就像这样:
functionName();
8.运算符
严格相等运算符(===
)是相对于相等操作符(==
)的一种操作符。与相等操作符不同的是,它会同时比较元素的值和数据类型
。
严格不相等运算符(!==
)与全等运算符是相反的。这意味着严格不相等并返回false
的地方,用严格相等运算符会返回 true
,反之亦然。严格相等运算符不会转换值的数据类型。
例如
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
9.switch语句:
如果switch
语句中的case
分支的break
语句漏掉了,后面的 case
语句会一直执行直到遇到break
。如果你有多个输入值和输出值一样,可以试试下面的switch
语句:
switch(val) {
case 1:
case 2:
case 3:
result = "1, 2, or 3";
break;
case 4:
result = "4 alone";
}
分支1、2、3将会产生相同的输出结果。
10.比较大小,可以直接返回true false值
所有的比较操作符返回的都是一个boolean值,要么是 true
要么是false
。
使用 if/else
语句来做比较然后返回true
或false
已经成为大家的共识:
function isEqual(a,b) {
if (a === b) {
return true;
} else {
return false;
}
}
因为===
总是返回true
或 false
,所以我们可以直接返回比较的结果:
function isEqual(a,b) {
return a === b;
}
11.对象
对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的。
这是一个示例对象:
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};
对象适合用来存储结构化数据,就和真实世界的对象一模一样,比如一只猫。
有两种方式访问对象属性,一个是点操作符(.
),一个是中括号操作符([]
)。
当你知道属性的名称的时候,使用点操作符。
这是一个使用点操作符读取对象属性的例子:
var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2
第二种访问对象的方式就是中括号操作符([]
),如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([]
)。
这是一个使用中括号操作符([]
)读取对象属性的例子:
var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。
这有一个使用变量来访问属性的例子:
var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"
还有更多:
var myDog = "Hunter";
var dogs = {
Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
}
var breed = dogs[myDog];
console.log(breed)// "Doberman"
提示:当我们通过变量名访问属性的时候,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。
var testObj = {12: "Namath",
16: "Montana",
19: "Unitas"
};
var playerNumber=16;
var player = testObj[playerNumber];
你也可以像更改属性一样给对象添加属性。
看看我们是如何给ourDog
添加"bark"
属性:
ourDog.bark = "bow-wow";
或者
ourDog["bark"] = "bow-wow";
任务
给myDog
添加一个"bark"
属性,设置它的值为狗的声音,例如:"woof"。
我们同样可以删除对象的属性,例如:
delete ourDog.bark;
对象和字典一样,可以用来存储键/值对。如果你的数据跟对象一样,你可以用对象来查找你想要的值,而不是使用switch或if/else语句。当你知道你的输入数据在某个范围时,这种查找方式极为有效。
这是简单的反向字母表:
var alpha = {function phoneticLookup(val) {
1:"Z",
2:"Y",
3:"X",
4:"W",
...
24:"C",
25:"B",
26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"
var value = 2;
alpha[value]; // "Y"
var result = "";
var phoneticLookup={
"alpha":"Adams",
"bravo":"Boston",
"charlie":"Chicago",
"delta":"Denver",
"echo":"Easy",
"foxtrot":"Frank",
" ":"undefined"
};
result=phoneticLookup[val];
return result;
}
phoneticLookup("charlie");
有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)
方法来检查对象是否有该属性。如果有返回true
,反之返回false
。
举例
var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false
13.随机数
- 用
Math.random()
生成一个随机小数。 - 把这个随机小数乘以
20
。 - 用
Math.floor()
向下取整 获得它最近的整数。
记住 Math.random()
永远不会返回 1
。同时因为我们是在用 Math.floor()
向下取整,所以最终我们获得的结果不可能有 20
。这确保了我们获得了一个在0到19之间的整数。
把操作连缀起来,代码类似于下面:
Math.floor(Math.random() * 20);
我们先调用 Math.random()
,把它的结果乘以20,然后把上一步的结果传给 Math.floor()
,最终通过向下取整获得最近的整数。
我们之前生成的随机数是在0到某个数之间,现在我们要生成的随机数是在两个指定的数之间。
我们需要定义一个最小值和一个最大值。
下面是我们将要使用的方法,仔细看看并尝试理解这行代码到底在干嘛:
Math.floor(Math.random() * (max - min + 1)) + min
Regular expressions
正则表达式被用来根据某种匹配模式来寻找strings
中的某些单词。
举例:如果我们想要找到字符串The dog chased the cat
中单词the
,我们可以使用下面的正则表达式:/the/gi
我们可以把这个正则表达式分成几段:
/
是这个正则表达式的头部
the
是我们想要匹配的模式
/
是这个正则表达式的尾部
g
代表着global
(全局),意味着返回所有的匹配而不仅仅是第一个。
i
代表着忽略大小写,意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。
我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。
特殊选择器中的一种就是数字选择器\d
,意思是被用来获取一个字符串的数字。
在JavaScript中, 数字选择器类似于: /\d/g
。
在选择器后面添加一个加号标记(+
),例如:/\d+/g
,它允许这个正则表达式匹配一个或更多数字。
尾部的g
是'global'的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。
我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。
特殊选择器中的一种就是数字选择器\d
,意思是被用来获取一个字符串的数字。
在JavaScript中, 数字选择器类似于: /\d/g
。
在选择器后面添加一个加号标记(+
),例如:/\d+/g
,它允许这个正则表达式匹配一个或更多数字。
尾部的g
是'global'的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。
var testString = "There are 3 cats but 4 dogs.";
// 请只修改这条注释以下的代码
var expression = /\d+/g; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 digitCount 存储 testString 中匹配到 expression 的次数
var digitCount = testString.match(expression).length;
我们也可以使用正则表达式选择器 \s
来选择一个字符串中的空白。
空白字符有 " "
(空格符)、\r
(回车符)、\n
(换行符)、\t
(制表符) 和\f
(换页符)。
空白正则表达式类似于:
/\s+/g
var testString = "How many spaces are there in this sentence?";
// 请只修改这条注释以下的代码
var expression = /\s+/g; // 请修改这一行
// 请只修改这条注释以上的代码
// 用 spaceCount 存储 testString 中匹配到 expression 的次数
var spaceCount = testString.match(expression).length;
你可以用正则表达式选择器的大写版本 来转化任何匹配。
举个例子:\s
匹配任何空白字符,\S
匹配任何非空白字符。
16.构造函数
17.私有属性,getset方法
18.map函方法
map
方法会迭代数组中的每一个元素,并根据回调函数来处理每一个元素,最后返回一个新数组。注意,这个方法不会改变原始数组。
在我们的例子中,回调函数只有一个参数,即数组中元素的值 (val
参数) ,但其实,你的回调函数也可以支持多个参数,譬如:元素的索引index
、原始数组arr
。
19.reduce 方法
数组方法 reduce
用来迭代一个数组,并且把它累积到一个值中。
使用 reduce
方法时,你要传入一个回调函数,这个回调函数的参数是一个 累加器 (比如例子中的previousVal
) 和当前值 (currentVal
)。
reduce
方法有一个可选的第二参数,它可以被用来设置累加器的初始值。如果没有在这定义初始值,那么初始值将变成数组中的第一项,而currentVal
将从数组的第二项开始。
下面的例子使用了 reduce
来让数组中的所有值相减:
var singleVal = array.reduce(function(previousVal, currentVal) {
return previousVal - currentVal;
}, 0);
20.filter方法
filter
方法用来迭代一个数组,并且按给出的条件过滤出符合的元素。
filter
方法传入一个回调函数,这个回调函数会携带一个参数,参数为当前迭代的项(我们叫它val
)。
回调函数返回 true
的项会保留在数组中,返回 false
的项会被过滤出数组。
下面的代码示例展示了使用 filter
来移除数组中值等于5的项:
注意: 我们忽略了第二参数和第三参数,因为例子中我们只需要第一参数就够了。
array = array.filter(function(val) {
return val !== 5;
});
val大小写没关系