前端加油鸭!【FCC】JavaScript基础(1)

注释

JavaScript中的注释方式有以下两种:

使用 // 来告诉JavaScript来忽略当前行的代码

// This is an in-line comment.

也可以使用多行注释来注释你的代码,以/*开始,用*/来结束,就像下面这样:

/* This is a 
   multi-line comment */
变量

JavaScript提供七种不同的data types(数据类型),它们是undefined(未定义), null(空), boolean(布尔型), string(字符串), symbol(符号), number(数字), and object(对象)。

Variables(变量)允许计算机以一种动态的形式来存储和操作数据,通过操作指向数据的指针而不是数据本身来避免了内存泄露,以上的七种数据类型都可以存储到一个变量(variable)中。

Variables 非常类似于你在数学中使用的x,y变量, 这意味着它们都是以一个简单命名的名字来代替我们赋值给它的数据。计算机中的variables(变量)与数学中的变量不同的是,计算机可以在不同的时间存储不同类型的变量。

通过在变量的前面使用关键字var,来创建或者 declare(声明)一个变量:

var ourName;

上面代码的意思是创建一个名为ourName的variable(变量),在JavaScript中我们使用分号来结束一段声明。
Variable (变量)的名字可以由数字、字母、$ 或者 _组成,但是不能包含空格或者以数字为首。变量命名中大小写敏感。
最好使用驼峰命名法 来书写一个 Javascript 变量,在驼峰命名法中,变量名的第一个单词的首写字母小写,后面的单词的第一个字母大写。

在开始声明时,可使用等号为变量赋一个初始值:

var ourName = ‘JavaScript’;

当 JavaScript 中的变量被声明的时候,程序内部会给它一个初始值 undefined。当你对一个值为 undefined 的变量进行运算操作的时候,算出来的结果将会是 NaN,NaN 的意思是 “Not a Number”。当你用一个没有 定义 的变量来做字符串连接操作的时候,它会如实的输出"undefined"。

运算符

基本运算符:+、-、*、/、%(取余)、++/–(自增/减)
i++;等效于i=i+1;;自减同理

运算赋值:+=-=*=/=
i+=5;等效于 i=i+5;;减乘除运算符同理

字符串

字符串是用单或双引号包裹起来的一连串的零个或多个字符。

当你定义一个字符串必须要用单引号或双引号来包裹它。那么当你需要在字符串中使用一个 " 或者 ' 时该怎么办呢?
在 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.'

引号不是字符串中唯一的可以被转义字符。下面是常见的转义序列列表:

CODEOUTPUT
\’单引号
\"双引号
\\反斜杠符
\n换行符
\r回车符
\t制表符
\b退格符
\f换页符

+ 操作符与字符串一起使用的时候,它被称作连接操作符。可以通过连接多个字符串来创建一个新的字符串。也可利用+操作符在字符串中插入变量。
还可以使用 += 运算符来 连接 字符串到现有字符串的结尾。对于那些非常长的字符串来说,这一操作是非常有用的。
+= 运算符将变量追加到字符串末尾。

通过在字符串变量或字符串后面写上 .length 来获得字符串变量 字符串 值的长度。
我们通过[索引] 来获得字符串中对应的字符,从0开始计数。字符串一旦被创建就不可改变。
为了得到一个字符串的倒数第N个字符,你可以用[字符串的长度减去N]

数组

使用数组,我们可以在一个地方存储多个数据。
以左方括号[开始定义一个数组,以右方括号]结束定义,每个条目之间用逗号隔开,就像这样:

var sandwich = ["peanut butter", "jelly", "bread"];

数组中也可包含其他数组,称之为多维数组:

  [["Bulls", 23], ["White Sox", 45]]

可以像操作字符串一样通过数组索引[index]来访问数组中的数据,不同的是,通过字符串的索引得到的是一个字符,通过数组索引得到的是一个条目。与字符串的数据不可变也不同,数组的数据是可变的,并且可以自由地改变。
可以把 多维数组 看作成是一个 数组中的数组。当使用[]去访问数组的时候,第一个[index]访问的是第N个子数组,第二个[index]访问的是第N个子数组的第N个元素。

添加元素

将数据追加到一个数组的末尾是通过 .push() 函数。
array.push(value);为array数组末尾添加值为value的元素。
.unshift() 函数与 .push() 函数相似,但不是在数组的末尾添加元素,而是在数组的头部添加元素。

移除元素

.pop() 函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来;
.shift() 函数用来“抛出”一个数组的第一个元素,也可将移除元素值赋给其他变量。

函数

在 JavaScript 中,我们可以把代码的重复部分抽取出来,放到一个函数(functions)中。

声明与调用

这是一个函数(function)的声明

function functionName() {
  console.log("Hello World");
}

你可以通过函数名称functionName加上后面的小括号来调用这个函数(function),就像这样:

functionName();

每次调用函数时它会打印出消息的“Hello World”到开发的控制台上。所有的大括号之间的代码将在每次函数调用时执行。

函数的参数

函数的参数parameters在函数中充当占位符(也叫形参)的作用,参数可以为一个或多个。调用一个函数时所传入的参数为实参,实参决定着形参真正的值。简单理解:形参即形式、实参即内容。

这是带有两个参数的函数, param1 和 param2:

function testFun(param1, param2) {
  console.log(param1, param2);
}

接着调用 testFun:

testFun("Hello", "World");

我们传递了两个参数, “Hello” 和 “World”。在函数内部,param1 等于“Hello”,param2 等于“World”。请注意,testFun 函数可以多次调用,每次调用时传递的参数会决定形参的实际值。

函数的返回

我们可以把数据通过函数的 参数 来传入函数,也可以使用 return 语句把数据从一个函数中传出来。
我们可把一个函数的返回值,赋值给一个变量。

作用域

在 JavaScript 中, 作用域 涉及到变量的作用范围。在函数外定义的变量具有 全局 作用域。这意味着,具有全局作用域的变量可以在代码的任何地方被调用

这些没有使用var关键字定义的变量,会被自动创建在全局作用域中,形成全局变量。当在代码其他地方无意间定义了一个变量,刚好变量名与全局变量相同,这时会产生意想不到的后果。因此你应该总是使用var关键字来声明你的变量。在一个函数内声明的变量,以及该函数的参数都是局部变量,意味着它们只在该函数内可见。
对于相同名称的 局部变量 和 全局变量。局部变量将会优先于全局变量

布尔值

布尔(Boolean)值要么是true 要么是false。它非常像电路开关, true 是“开”,false 是“关”。这两种状态是互斥的。

If语句

If 语句用于在代码中做条件判断。关键字 if 告诉 JavaScript 在小括号中的条件为真的情况下去执行定义在大括号里面的代码。这种条件被称为 Boolean 条件,因为他们只可能是 true(真)或 false(假)。
当条件的计算结果为 true,程序执行大括号内的语句。当布尔条件的计算结果为 false,大括号内的代码将不会执行。

if(条件为真){
  语句被执行
}

示例

function test (myCondition) {
  if (myCondition) {
     return "It was true";
  }
  return "It was false";
}
test(true);  // 返回 "It was true"
test(false); // 返回 "It was false"
比较

在 JavaScript 中,有很多 相互比较的操作。所有这些操作符都返回一个 true 或 false 值。
最基本的运算符是相等运算符:==。相等运算符比较两个值,如果它们是同等,返回 true,如果它们不等,返回 false。值得注意的是相等运算符不同于赋值运算符(=),赋值运算符是把等号右边的值赋给左边的变量。

function equalityTest(myVal) {
  if (myVal == 10) {
     return "Equal";
  }
  return "Not Equal";
}

如果 myVal 等于 10,相等运算符会返回 true,因此大括号里面的代码会被执行,函数将返回 “Equal”。否则,函数返回 “Not Equal”。
在 JavaScript 中,为了让两个不同的 数据类型(例如 数字 和 字符串)的值可以作比较,它必须把一种类型转换为另一种类型。然而一旦这样做,它可以像下面这样来比较:

   1   ==  1    // true
   1   ==  2    // false
   1   == '1'   // true
  "3"  ==  3    // true

严格相等运算符(===)是相对于相等操作符(==)的一种操作符。与相等操作符不同的是,它会同时比较元素的值和数据类型。
不相等运算符(!=)与相等运算符是相反的。这意味着不相等运算符中,如果“不为真”并且返回 false 的地方,在相等运算符中会返回true,反之亦然。与相等运算符类似,不相等运算符在比较的时候也会转换值的数据类型。
严格不相等运算符(!==)与全等运算符是相反的。严格相等运算符不会转换值的数据类型。
大于运算符(>)比较两个数字。如果大于运算符左边的数字大于右边的数字,将会返回 true。否则,它返回 false。与之相反的是小于等于运算符(<=)
大于等于 运算符(>=)比较两个数字。如果大于等于运算符左边的数字比右边的数字大或者相等,它会返回 true。否则,它会返回 false。与之相反的是小于运算符(<)

有时你需要在一次判断中做多个操作。当且仅当运算符的左边和右边都是 true,逻辑与 运算符(&&)才会返回 true。
如果任何一个操作数是true,逻辑或 运算符 (||) 返回 true。反之,返回 false。

If…else语句

写一个else语句,当If语句条件为假时执行相应的代码。
如果你有多个条件语句,你可以通过else if语句把 if语句链起来。执行顺序从上到下,if/else 语句串联在一起可以实现复杂的逻辑。

if (condition1) {
  statement1
} else if (condition2) {
  statement2
} else if (condition3) {
  statement3
. . .
} else {
  statementN
}
Switch语句

如果有非常多的选项需要选择,可以使用switch语句。根据不同的参数值会匹配上不同的case分支,语句会从第一个匹配的case分支开始执行,直到碰到break就结束。有时可能无法用case来指定所有情况,这时可以添加default语句。当再也找不到case匹配的时候default语句会执行,非常类似于if/else组合中的else语句。default语句应该是最后一个case。

 switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
}

测试case 值使用严格相等运算符进行比较,break关键字告诉javascript停止执行语句。如果没有break关键字,下一个语句会继续执行。
如果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将会产生相同的输出结果。
如果你有多个选项需要选择,switch 语句写起来会比多个串联的if/if else语句容易些。

对象(Object)

对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的。

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

对象适合用来存储结构化数据,就和真实世界的对象一模一样,比如一只猫。
对象和字典一样,可以用来存储键/值对。如果你的数据跟对象一样,你可以用对象来查找你想要的值,而不是使用switch或if/else语句。

对象的访问

有两种方式访问对象属性,一个是点操作符(.),一个是中括号操作符([])。

var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj[prop2]; // val2

当已知属性名称的时候,使用点操作符。
第二种访问对象的方式就是中括号操作符([]),如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([])。
:属性名称中如果有空格,必须把属性名称用单引号或双引号包裹起来。

中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。
这有一个使用变量来访问属性的例子:

var someProp = "propName";
var myObj = {
  propName: "Some Value"
}
myObj[someProp]; // "Some Value"

:当我们通过变量名访问属性的时候,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。

属性的更新

当创建了一个对象后,可以用点操作符或中括号操作符来更新对象的属性。
如上例中,更改propName中的值为 “Hello Object”,这有两种方式:

myObj.propName= "Hello Object";
myObj["propName"] = "Hello Object";

也可以像这样添加新的属性与其值:

myObj.secondProp= "Welcome";
myObj["secondProp"] = "Welcome";

如果要删除某个属性:

  delete myObj.secondProp;
   delete myObj["secondProp"];
检查属性是否存在

我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true,反之返回 false。

JSON

JavaScript Object Notation 简称 JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许 数据结构 是 字符串,数字,布尔值,字符串,和 对象 的任意组合。
下面个JSON对象的示例:

var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [ 
      "CD", 
      "Cassette", 
      "LP" ],
    "gold": true
  }
];

这是一个对象数组,并且对象有各种关于专辑的详细信息。它也有一个嵌套的 formats 的数组。附加专辑记录可以被添加到数组的最上层。
:数组中有多个 JSON 对象的时候,对象与对象之间要用逗号隔开。

JSON对象的访问

通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。
下面是一个嵌套的JSON对象:

var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
}
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"

同样的,与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。
下面是一个嵌套的数组:

var ourPets = { 
  "cats": [
    "Meowzer",
    "Fluffy",
    "Kit-Cat"
  ],
  "dogs": [
    "Spot",
    "Bowser",
    "Frankie"
  ]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
For循环

一个条件语句只能执行一次代码,而一个循环语句可以多次执行代码。
JavaScript 中最常见的循环就是“for循环”。for循环中的三个表达式用分号隔开:

for ([初始化]; [条件判断]; [计数器])

初始化语句只会在执行循环开始之前执行一次。它通常用于定义和设置你的循环变量。
条件判断语句会在每一轮循环的开始执行,只要条件判断为 true 就会继续执行循环。当条件为 false的时候,循环将停止执行。这意味着,如果条件在一开始就为 false,这个循环将不会执行。:数组的索引从零开始的,这意味着数组的最后一个元素的下标是:数组的长度 - 1。当循环的条件为 i < arr.length,意味着当 i 的值为数组的长度-1 的时候循环停止。
计数器是在每一轮循环结束时执行,通常用于递增或递减。通过更改计数器,for循环可以按照我们指定的顺序来迭代。

在下面的例子中,先初始化i = 0,条件 i < 5 为真,进入第一次循环,执行大括号里的代码,第一次循环结束。递增i的值,条件判断,就这样依次执行下去,直到条件判断为假,整个循环结束。

var ourArray = [];
for (var i = 0; i < 5; i++) {
  ourArray.push(i);
}

最终 ourArray 的值为 [0,1,2,3,4].

for循环也可以逆向迭代,需要改变我们的 初始化,条件判断 和 计数器。
我们让 i = 10,并且当 i > 0 的时候才继续循环。我们使用 i-=2 来让 i 每次循环递减 2。

var ourArray = [];
for (var i=10; i > 0; i-=2) {
  ourArray.push(i);
}

循环结束后,ourArray 的值为 [10,8,6,4,2]

嵌套for循环

如果你有一个二维数组,可以使用相同的逻辑,先遍历外面的数组,再遍历里面的子数组。下面是一个例子:

var arr = [
  [1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
  for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

一次输出 arr 中的每个子元素。提示,对于内部循环,我们可以通过 arr[i] 的 .length 来获得子数组的长度,因为 arr[i] 的本身就是一个数组。

While循环

另一种类型的 JavaScript 循环被称为while循环,因为它规定,当(while)条件为真,循环才会执行,反之不执行。

var ourArray = [];
var i = 0;
while(i < 5) {
  ourArray.push(i);
  i++;
}
生成随机数
0到1之间的随机数

计算机的行为只有两种:确定性和随机性。当你一节一节地阅读到这里就是确定行为,当你随意点了个链接就来到这里就是随机行为。
而随机数最适合用来创建这种随机行为。
Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()可能返回0但绝不会返回1.

随机整数

生成随机小数很棒,但随机数更有用的地方在于生成随机整数。

  1. 用 Math.random() 生成一个随机小数。
  2. 把这个随机小数乘以 20。
  3. 用 Math.floor() 向下取整,获得它最近的整数。

记住 Math.random() 永远不会返回 1。同时因为我们是在用 Math.floor() 向下取整,所以最终我们获得的结果不可能有 20。这确保了我们获得了一个在0到19之间的整数。
把操作连缀起来,代码类似于下面:

Math.floor(Math.random() * 20);
指定区间内的随机数

我们之前生成的随机数是在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’的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。

我们也可以使用正则表达式选择器 \s 来选择一个字符串中的空白。
空白字符有 " " (空格符)、\r (回车符)、\n (换行符)、\t (制表符) 和 \f (换页符)。
空白正则表达式类似于: /\s+/g

可使用正则表达式选择器的大写版本来转化任何匹配。
例如:\s 匹配任何空白字符,\S 匹配任何非空白字符。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值