js基础学习2

时间  2019-11-10
标签 基础 学习 栏目 JavaScript 繁體版
原文   原文链接

 

 

原网页：https://book.apeland.cn/details/358/javascript

 

阅读量: 404
 

Javascript基础语法

如何在页面中插入Javascript？

咱们能够像添加 CSS 那样将 JavaScript 添加到 HTML 页面中。CSS<link>使用元素连接外部样式表，使用<style> 元素向 HTML 嵌入内部样式表，JavaScript 这里只需一个元素<script>。html

内部Javascript

首先，新建index.html。放在一个文件中java

代码以下：express

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. //编写Javascript代码
  10. </script>
  11. </body>
  12. </html>

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。编程

外部Javascript

能不能把 JavaScript 代码放置在一个外部文件中呢？咱们来研究一下数组

  1. 首先，在刚才的html文件所在的目录下建立一个名为script.js的新文件。请确保文件扩展名为.js,只有这样才能被识别为Javascript代码。浏览器

  2. 将script元素替换为安全

    1. <script src="script.js" async></script>

3.在script.js文件中，咱们就能够编写Javascript代码markdown

认识Javascript语句和注释

JavaScript语句

在前言篇中，咱们了解到Javascript代码最终是被浏览器解释运行的，能够简单的认为这些语句是发给浏览器的一些指令。这些指令的做用是告诉浏览器要作的事情。app

每一句Javascript代码都以;做为结束当前语句。

看看下面的代码：

  1. <script type="text/javascript">
  2. alert("MJJ!");
  3. </script>

上述代码中的alert("MJJ!");就是一个Javascript语句。

注意

  1. ;分号必须是英文状态下的，一样，JS中的代码和符号都要在英文状态下输入。
  2. 虽然分号;也能够不写，但咱们要养成良好的编程习惯，记得在语句末尾写上分号。
注释

跟HTML和CSS同样，在JS中也会用到注释。它的高效使用能够提升代码的可读性，帮助本身和别人阅读和理解您所编写的Javascript代码。注释可分为单行注释和多行注释两种。

单行注释

在JS中以//凯欧知道行末的字符被视为行注释，注释是给开发人员看的，Javascript引擎在执行JS代码的时候回自动忽略。

  1. //这是一行注释
  2. alert("MJJ!");//这也是注释
多行注释

另外一种注释使用/**/把多行字符包裹起来，把一大块视为一个注释：

  1. /*注释从这里开始
  2. 这里是注释
  3. 这里仍是注释
  4. 注释结束*/

存储你所须要的信息（变量）

变量的概念，从字面意义上来看叫可变的量，它和咱们初中代码的方程变量是同样的。

  1. x = 5
  2. y = 6
  3. x + y = 11
  4. name = "王聪聪"

从编程角度讲，变量是用于存储某种/某些数值的容器。咱们能够把变量看做一个纸箱子。为了区分纸箱子，能够用A、B名称表明不一样的盒子。A和B就是盒子的名字（也就是变量的名字）。A中能够存储王聪聪，B中能够存储30。

声明变量

若是咱们使用纸箱子装东西，是否是先要找到纸箱子，那在JS中要想使用纸箱子（变量），你须要作的是先把它造出来——更准确的说，要声明一个变量（找到纸箱里）。声明变量使用关键字var，语法以下

  1. var 变量名;

var就至关于找纸箱子的动做。

变量名能够任意取名，但要遵循命名规则：

  1. 变量必须使用字母、下划线(_)或者美圆符($)开始。

  2. 可使用任意多个英文字母、数字、下划线()或者美圆符($)组成。

  3. 不能使用Javascript关键字和Javascript保留字来进行命名

  4. 变量名严格区别大小写，如A何a是两个不一样的变量

    1. 正确：
    2. myName
    3. _myName
    4. $name
    1. 错误：
    2. 6name //开头不能用数字
    3. %name //开头不能用除(_ $)外特殊符号，如(% + / * 等)
    4. name+name //开头中间不能使用除(_ $)外特殊符号，如(% + /*)

    img

固然，既然咱们能够一个一个的找纸箱子，也能够一次性的找多个纸箱子，因此var还能够一次声明多个变量，变量之间用,逗号隔开。

  1. var x,y;
变量赋值

咱们能够把变量看做一个纸盒子，盒子用来存放物品，那如何在变量中存储内容呢？

咱们可使用"="等号给变量存储内容

  1. var x = 5;//声明变量x并将5赋值给x

咱们也能够这样写：

  1. var x; //声明变量x
  2. x = 5; //给变量x赋值

注意：这里的"="号的做用是给变量赋值，不是等于号。

更新变量

变量能够看做一个纸盒子，盒子中能够存储物品，那我也能够去更改存储的物品。一样，一旦变量赋值，咱们也能够给它一个不一样的值来更新它。如：

  1. var x = 5;
  2. x = 10;

变量类型

计算机顾名思义就是能够作数学计算的机器。由于，计算机程序理所应固然地能够处理各类数值。可是，计算机能处理的远远不止数值，它能够处理文本、图形、音频、视频、网页等各类各样的数据，不一样的数据，须要定义不一样的数据类型。

Number(数值)

你能够在变量中存储数字，不管这些数字是像30(整数)这样，或者像1.234这样的小数(浮点数)。Javascript不区分整数和浮点数，统一用Number表示。与其它编程语言（Javas）不一样的是在JS中你不须要声明一个变量的类型。好比这样都是合法的：

  1. var x = 123;
  2. var y = 1.213;
  3. var z = -99;
String(字符串)

字符串是文本的一部分。当你给一个变量赋值给字符串时，你须要用单引号或双引号把值包括起来，如"王聪聪"和'王聪聪'等等。以下所示：

  1. var name = '王聪聪';
  2. var en = "abc";

单引号和双引号引用的字符串没有任何区别

Boolean(布尔值)

布尔值和布尔代数的表示彻底一致，最简单的布尔代数只有两个元素0和1，将它应用于逻辑中，解释0为假(false)，1为真(true)。同理，为JS中的Boolean的值也只有2中：true和false。他们一般被用于在适当的代码以后，测试条件是否成立，好比 3 > 4。这是个表达式，咱们都知道3是不会大于4的，因此返回了false。以下代码：

  1. 3>4; //这是一个false值
  2. 4>=3;//这是一个true值

以上三种数据类型是咱们接下来的本章节常用到的。那么在JS中除了像Number、String、Boolean这些极易理解的数据类型，还有像null、undefined、Array、Object、Function数据类型,后面的章节你会更加的了解这些内容。

数字和运算符

人人都爱数学

不得不说在高中学习期间，让我感受到最有成就感的当属快速的解答一道数学题，抬头挺胸等待老师的答案，™的，老师公布答案，发现错了哈哈，其实我我的仍是很是爱数学的。

有些人喜欢数学，有些人可能讨厌数学，还有人介于二者之间。但咱们不得否定，数学是生活的一部分，咱们离不开它。好比每月坐地铁吃饭开销，你都会算算本身支付宝中的money，哪怕你上菜市场买菜，都想去跟大爷大妈砍点价。生活中无处不在地算数。

那固然，当咱们学习编写Javascript程序（或任何其余语言），咱们所作的不少事情都依赖于处理数值数据，计算新值，获得咱们最终的结果。那幸运的是，Javascript有一套可用的全功能的数学功能，接下来咱们就重点来学习Javascript中的数学运算吧。

算数运算符
运算符 名称 做用 示例
+ 加法 两个数相加。 6 + 9
- 减法 从左边减去右边的数。 20 - 15
* 乘法 两个数相乘。 3 * 7
/ 除法 用右边的数除左边的数 10 / 5
% 求余(有时候也叫取模) 在你将左边的数分红同右边数字相同的若干整数部分后，返回剩下的余数 8 % 3 (返回 2，将8分红3份，余下2 。)

以最简单的加法为例

  1. 10 + 7;
  2. 9 * 6;
  3. 80 % 3

你也能够尝试在变量中声明和初始化一些数字，并尝试使用总和中的数字。

  1. var num = 10;
  2. num = num + 2;

什么是表达式呢？表达式与数学中的定义类似，表达式是指具备必定的值、用操做符把常数和变量链接起来的代数式。一个表达式能够包含常数或变量。

咱们尝试一下更加复杂的表达式，如：

  1. 5 + 10 * 3;
  2. num % 9 * num;
  3. num + num / 8 + 2;

上面的结果，能够超出你的意淫的想法。好比第一道不少同窗可能认为是45。其实答案是35。接下来下面的课程中会告诉你答案为何。

运算符优先级

咱们先来看看上面的最后一个例子，例如num的值为40，

  1. num + num / 8 + 2;

通常人，会这样去运算:40+40等于80，而后8+2等于10，最后80除以10等于8。

若是将以上运算符在浏览器的控制台中输入看一下，你会发现输出的结果为47：

  1. 随意打开一个空白的网页，f12审查元素。

这是由于运算符优先级，一些运算符将在计算总和的记过中被应用与其它的运算符。Javascript中的运算符优先级与数学运算符优先级相同—乘法和除法老是先完成，而后再算加法和减法。固然了，你也会立马想到若是我想覆盖掉运算符优先级，是否是跟数学的同样，加上（）括号呢？是的。好比下面才是咱们想要的结果8。

  1. (num + num) / (8 + 2);
递增和递减运算符

有时候，咱们须要反复地对一个数值进行添加或减去一个。这个时候咱们可使用增量(++)或递减(—)运算符来完成。

定义一个新的变量赋值为3。将这个新的变量进行递增操做

  1. var x = 3;
  2. x++;//至关于x = x + 1;

在控制台中执行以上操做吗，你会看到返回值为4。这是由于浏览器返回当前值，而后增长变量。若是您再次返回变量值，则能够看到它已经递增：

  1. x;

有的童鞋可能问了，这有什么用啊?目前咱们可能使用++和—还作不了任何操做它们经常使用循环中。例如，你的口袋里有1000块钱，天天打工赚100块，7天以后一共有多少啊？这个时候咱们配合循环，在加上递增操做，就能实现咱们想要的结果。

赋值运算符

赋值运算符是向变量分配值的运算符。好比：

  1. var x = 3;//将3赋值给变量x
  2. var y = 4;//将4赋值给变量y
  3. x = y; //将变量y的值赋值以定义的变量x,那么变量x从新赋值。x和y有相同的值，4

可是还有一些更复杂的类型，他们提供了有用的快捷方式，可使您的代码更加清洁和高效。

以下：

  1. var x = 3;
  2. x = x + 4;
  3. //能够简写成
  4. var x = 3;
  5. x += 4;//等价于 x = x + 4;

最多见的以下：

运算符 名称 做用 示例 等价于
+= 递增赋值 右边的数值加上左边的变量，而后再返回新的变量。 x = 3;x += 4; x = 3;x = x + 4;
-= 递减赋值 左边的变量减去右边的数值，而后再返回新的变量。 x = 6;x -= 3; x = 6;x = x - 3;
*= 乘法赋值 左边的变量乘以右边的数值，而后再返回新的变量。 x = 2;x *= 3; x = 2;x = x * 3;
/= 除法赋值 左边的变量除以右边的数值，而后再返回新的变量。 x = 10;x /= 5; x = 10;x = x / 5;

字符串

咱们将了解在学习JavaScript时，您应该了解的关于字符串的全部常见事项，例如建立字符串、在字符串中转义引号，和链接字符串。

语言的力量

语言对人类很是重要——它们是咱们交流的重要组成部分。因为Web是一种主要基于文本的媒介，旨在让人们进行交流和分享信息，所以对咱们来讲，掌握它所出现的单词是颇有用的。HTML为咱们的文本提供告终构和意义， CSS 容许咱们精确地设计它的样式，JavaScript包含许多操做字符串的特性，建立定制的欢迎消息，在须要时显示正确的文本标签，将术语排序到所需的顺序，等等。

建立一个字符串

1.首先，在控制台中输入下面的代码：

  1. var string = 'hello world';
  2. string;

就像咱们处理数字同样，咱们声明一个变量，用一个字符串值初始化它，而后返回值。这里唯一的区别是，在编写字符串时，咱们须要在字符串上加上引号（单引号和双引号均可以）。

2.若是你以前定义了变量字符串，下面的操做将会起做用

  1. var string = 'hello world';
  2. var newString = string;
  3. newString;

将string的值赋值给badString,赋值以后，两个字符串的值相等。

单引号和双引号

在js中可使用单引号和双引号来表示字符串。

惟一要注意的是不一致的引号混用代码可能会让人很迷惑。特别是若是您在同一个字符串中使用不一样的引号！

下面将返回一个错误

  1. var name = 'why a apple?";

浏览器会认为字符串没有被关闭。

例如，如下两种状况是能够的：

  1. var shj = 'Would you eat a "apple"?';
  2. var desc = "I'm MJJ";
转义字符串中的字符

若是'自己也是一个字符，那就能够用""括起来，好比"I'm MJJ"包含的字符是I，'，m，空格，M，J,J这6个字符。

若是字符串内部既包含'又包含""怎么办？能够用转义字符\来标识。好比：

  1. 'I\'m \"MJJ\"';

更多细节请参考转义符号

拼接字符串

拼接是一个很花哨的编程词，意思是”拼接在一块儿”。在Javascript中拼接字符串使用加号(+)操做符，以前咱们是拿+来作数字加法运算，可是在这种状况下，它作了一下不一样的事情。

在控制台中尝试如下操做：

  1. var one = 'hello ';
  2. var two = 'MJJ';
  3. var joined = one + two;
  4. joined;

变量joined的值为"hello MJJ"

数字和字符串

1.若是一个字符串和一个数字链接时，会发生什么呢？以下：

  1. "MJJ" + 234;

若是在控制台中输出，你可能会看到一个意向不到的结果。它居然没有报错，运行的很好。

这是由于浏览器很聪明的将数字转换成字符串，并将这两个字符串拼接在一块儿。

2.用引号来包括两个数字，进行+运算。

  1. var myNum = '18' + '30';

查看控制台，会发现打印的结果为'1830'。

  1. typeof myNum;//String

咱们能够用typeof操做符来检查变量是一个数字仍是一个字符串。会发现是一个String的数据类型。

数字和字符串之间能够互相转换么？

3.若是咱们定义一个空的字符串，再加上一个数字，那是否就能让数字转换成字符串了呢？

  1. var myNum = "" + 234;
  2. typeof myNum;

4.能够经过Javascript提供的Number()把任何的内容转换成数字。

  1. var myStr = '123';
  2. var myNum = Number(myStr);
  3. typeof myNum;

5.另外每个数字都有一个名为toString()的方法，它能够将数值转换成字符串。

  1. var myNum = 123;
  2. var myStr = myNum.toString();

关于什么是方法？能够简单的认为它是一个功能，一个造某个产品的办法 ，把myNum能够看做对象，那这个对象它有个办法能造出本身的产品来，那就是toString()方法 能将数值转换成数值类型。

数组

咱们以前学变量，一个变量只能存储一个内容。这里以产品为例。每一个产品存储在一个单独的变量中。而后你想存储10个、100个甚至1000个产品呢？就须要10个、100个、1000个变量来存储。若是须要存储更多的产品，那就会变得更加麻烦。那么Javascript的数组是你最友好的小伙伴，它就解决了咱们存储多个产品的问题。一个数组的变量能够存放多个产品。比如是仓库，仓库里有不少这样的产品。

以下咱们若是用数组来存储多我的。

数组是一个值的集合，每一个值都有一个索引号，从0开始，每一个索引都有一个相应的值，根据须要添加更多数值。

建立数组

数组由方括号构成，其实包含用逗号分隔的成员。

  1. 假设咱们想在一个数组中存储一个购物清单——咱们会像下面这样作。

    1. var shopping = ['香蕉','苹果','牛奶','红牛'];

  2. 在上述状况下，数组中的每一个成员都是一个字符串。牢记，在数组中能够包含任何类型的元素—字符串、数字、对象(后面会讲到)、另外一个变量，甚至是另外一个数组。

    1. var random = ['tree',789,[0,1,2]];
访问和修改数组元素

  1. 由于数组中的每一个元素是有索引值的，因此咱们能够经过索引值来获取对应的元素值。

    1. shopping[0];//'香蕉'

  2. 经过新值来修改数组中的元素。例如：

    1. shopping[0] = '榴莲';
    2. console.log(shopping);//['榴莲','苹果','牛奶','红牛'];

  3. 数组中包含数组的话称之为多维数组。你能够经过将两组方括号连接在一块儿来访问数组中的另外一个数组。例如上面例子中的random数组，若是你想访问此数组的另外一个数组的第三个元素的值。

    1. random[2][2];//2
获取数组的长度

你能够经过使用length属性获取数组的长度(查看数组有多少个元素)。

  1. shopping.length;//4

一般length属性也有其余的用途，但经常使用于循环(后面循环课程中会讲解)

条件判断

在任何的编程语言中，代码须要依靠不一样的输入做出决定而且采起行动。例如，在游戏中，若是玩家的生命值变成了0，那么游戏就结束了。在天气应用中，若是在早晨运行，就显示一张日出的图片；若是在晚上，就显示星星和月亮的图片。接下来，咱们将探索在JavaScript中所谓的条件语句是怎样工做的。

只需一个条件你就可拥有……

人类（以及其余的动物）无时无刻都在作决定，这些决定都影响着他们的生活，从小事（“我是谈一个女友仍是谈好两个女盆友”）到重要的大事（“我应该留在老家享受安逸的生活，仍是应该去北上广深大干一番，回来赢取白富美”）

条件语句结构容许咱们来描述在JavaScript中这样的选择，从不得不做出的选择（例如：“一个片仍是两个片”）到产生的结果或这些选择（也许是“谈一个女友”可能会“仍然以为人生不够完美”，或者是“吃两个女友”可能会“感受到能够了，但老妈以为女友很差，再谈一个”。）

if..else语句

让咱们看看到目前为止你将会在JavaScript中用到的最多见的条件语句类型 —if…else语句

最基本的if..else语法

基本的if…else语法看起来像下面的伪代码

  1. if(能够的话){
  2. //我要谈女友
  3. }else{
  4. //不能够谈女友
  5. }
  1. 关键字 if，而且后面跟随括号。
  2. 要测试的条件，放到括号里（一般是“这个值大于另外一个值吗”或者“这个值存在吗”）。这个条件会利用比较运算符咱们会在最后的模块中讨论）进行比较，而且返回true或者false。
  3. 一组花括号，在里面咱们有一些代码——能够是任何咱们喜欢的代码，而且只会在条件语句返回true的时候运行。
  4. 关键字else。
  5. 另外一组花括号，在里面咱们有一些代码——能够是任何咱们喜欢的代码，而且当条件语句返回值不是true的话，它才会运行。

这段代码真的很是易懂——它说“若是（if）条件（condition）返回true，运行代码A，不然（else）运行代码B”

注意：你不必定须要else和第二个花括号——下面的代码也是符合语法规则的

  1. if(能够的话){
  2. //我要谈女友
  3. }
  4. //不能够谈女友

不过，这里你须要注意——在这种状况下，第二段代码不被条件语句控制，因此它总会运行，无论条件返回的是true仍是false。这不必定是一件坏事，但这可能不是你想要的——你常常只想要运行一段代码或者另外一段，而不是两个都运行。

最后，有时候你可能会看到 if…else 语句没有写花括号，像下面的速记风格：

  1. if (能够的话)
  2. 能够谈女盆友;
  3. else
  4. 不能够谈女友;

这是彻底有效的代码，但不建议这样使用——由于若是有花括号进行代码切割的话，总体代码被切割为多行代码，更易读和易用。

一个更加真实的例子

为了更好的理解这种语法，让咱们考虑一个真实的例子。想像一个孩子被他的父母要求帮助他们作家务。父母可能会说“嗨，宝贝儿，若是你帮我去购物，我会给你额外的零花钱，这样你就能买得起你想要的玩具了。”在JavaScript中，咱们能够这样表示：

  1. var shoppingDone = false;
  3. if (shoppingDone === true) {
  4. var childsAllowance = 10;
  5. } else {
  6. var childsAllowance = 5;
  7. }

这段代码显示的结果是变量 shoppingDone老是返回 false， 意味着对咱们的穷孩子来讲很失望。若是孩子去购物的话，就须要依靠咱们提供机制来使父母把变量 shoppingDone 变成 true。

else if

上述例子提供咱们两种选择或结果，但咱们若是想要多个选择和结果呢？

有一种方法来让你的 if…else链接你的额外的选择和结果——使用else if。每个额外的选择要求放到 if() { ... } 和 else { ... } 里——看看下面更多涉及到的例子，好比天气预报的例子。

  1. var weather = 'sunny';
  2. if(weather == 'sunny'){
  3. //天气很是棒，能够出去玩耍了
  4. }else if(weather == 'rainy'){
  5. //天气下雨了，只能在家里呆着
  6. }else if(weather == 'snowing'){
  7. //天气下雪了，能够出去滑雪了
  8. }
比较运算符

比较运算符一般是用来比较两个数值是否相等，或者是两个文本的内容是否同样。在Javascript中的运算符有以下几种：

  • === 和 !== ——判断一个值是否严格等于，或不等于另外一个。
  • ==和!=—— 判断一个值是否等于，或不等于另外一个
  • < 和 > ——判断一个值是否小于，或大于另外一个。
  • <= 和 >= ——判断一个值是否小于或等于，或者大于或等于另外一个。

那么第一种和第二种严格等于和下面的等于有啥区别呢？看个例子。

  1. var a = 5;
  2. var b = '5';
  3. var isEqual = a == b; //true 由于在比较的时候，浏览器会把数值5转换成字符串5去比较
  4. var isEqual2 = a === b; //false 由于a和b比较的不只仅是值的相等，还比较它们的数据类型

同理，!==和!==跟上面例子是同样的结论。

嵌套if … else

将另外一个if … else 语句放在另外一个中 - 嵌套它是彻底可行的。例如，咱们能够更新咱们的天气预报应用程序，以显示更多的选择，具体取决于温度:

  1. var weather = 'sunny';
  2. if(weather == 'sunny'){
  3. if(temperature > 30){
  4. //仍是在家里吹空调吧
  5. }else if(temperature<=30){
  6. //天气很是棒，能够出去玩耍了
  7. }
  8. }

即便代码所有一块儿工做，每一个if … else语句彻底独立于另外一个。

逻辑运算符：&& ,||,和！

若是要测试多个条件，而不须要编写嵌套if … else语句，逻辑运算符能够帮助您。当在条件下使用时，前两个执行如下操做：

  • && — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每个都返回true时，整个表达式才会返回true.
  • || — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
  • ! — 逻辑非; 对一个布尔值取反, 非true返回false,非false返回true.

举一个逻辑 && 的例子, 上述嵌套if..else那段代码片断能够写成下面这样:

  1. var weather = 'sunny';
  2. if(weather == 'sunny' && temperature > 30){
  3. //仍是在家里吹空调吧
  4. }else if(weather == 'sunny' && temperature<=30){
  5. //天气很是棒，能够出去玩耍了
  6. }

因此，只有当weather === 'sunny'而且temperature < 30都返回true时，第一个代码块才能运行。

让咱们快速看一个||的例子：

  1. var mathScore = 88;
  2. var enlishScore = 90;
  3. if(mathScore > 70 || enlishScore > 95){
  4. console.log('才能够玩游戏');
  5. }else{
  6. console.log('在家里写做业');
  7. }

switch语句

if...else 语句可以很好地实现条件代码，可是它们仍是有缺点的。 它们主要适用于您只有几个选择的状况，每一个都须要至关数量的代码来运行，和/或 的条件很复杂的状况（例如多个逻辑运算符）。 对于只想将变量设置一系列为特定值的选项或根据条件打印特定语句的状况，语法可能会很麻烦，特别是若是您有大量选择。

switch语句在这里是你的朋友——他们以单个表达式/值做为输入，而后查看多个选项，直到找到与该值相匹配的选项，执行相应的代码。来点灵感：

  1. switch (expression) {
  2. case choice1:
  3. run this code
  4. break;
  6. case choice2:
  7. run this code instead
  8. break;
  9. default:
  10. actually, just run this code
  11. }
  1. 关键字 switch, 后跟一组括号.
  2. 括号内的表达式或值.
  3. 关键字 case, 后跟一个选项的表达式/值，后面跟一个冒号.
  4. 若是选择与表达式匹配，则运行一些代码.
  5. 一个 break 语句, 分号结尾. 若是先前的选择与表达式/值匹配，则浏览器在此中止执行代码块，并执行switch语句以后的代码.
  6. 你能够添加任意的 case 选项
  7. 关键字 default, 后面跟随和 case 彻底相同的代码模式 (选项 3–5), except that default以后不须要再有选项, 而且您不须要 break 语句, 由于以后没有任何运行代码. 若是以前没有选项匹配，则运行default选项.

看个例子重写天气预报：

  1. var weather = 'sunny';
  2. switch(weather){
  3. case 'sunny':
  4. //天气很是棒，能够出去玩耍了
  5. break;
  6. case 'rainy':
  7. //天气下雨了，只能在家里呆着
  8. break;
  9. case 'snowing':
  10. //天气下雪了，能够出去滑雪了
  11. break;
  12. default:
  13. //哪里也不出去
  14. }

三元运算符

三元运算符它解决了像if..else块较少的代码。若是你只有两个经过true/false条件选择。语法以下：

  1. (codition) ? run this code : run this code instead;

让咱们看一下极简的例子：

  1. var isResult = 1 > 2 '真的' : '假的' ;

咱们知道1是不大于2的，它返回了假的。因此isResult的值为'假的'。

循环

要计算1+2+3，咱们能够直接写表达式：

  1. var total = 1+2+3; //6

要计算1+2+3+…+10。勉强也能写出来

可是，要计算1+2+3+…+10000,直接写表达式就不可能了。

为了让计算机能计算成千上万次的重复运算，咱们就须要循环。

for循环基本用法

Javascript的循环有两种，一种是for循环，经过初始化条件、结束条件和递增条件来循环执行语句块，语法以下：

  1. for(初始化条件;结束条件;递增条件){
  2. //run this code
  3. }

上述例子，若是我想计算1到10000之间的数的和。

  1. var total = 0;
  2. var i;
  3. for(i = 1;i <= 10000; i++){
  4. total = total+ i;
  5. }
  6. console.log(total);//50005000

让咱们来分析一下for循环的控制条件：

  • i = 1,这是初始条件，将变量i设置为1
  • i<=10000这是判断条件，知足时就继续循环，不知足则退出循环
  • i++ 这是最后循环后的递增条件，因为每次循环后变量i都会+1。由于它终将在若干次循环后不知足判断条件i<=10000则退出循环
for用于遍历数组

for循环最经常使用的地方是利用索引来遍历数组：

  1. var shopping = ['香蕉','苹果','牛奶','红牛'];
  2. var x;
  3. for(var i = 0; i < shopping.length; i ++){
  4. x = shopping[i];
  5. console.log(x);
  6. }
使用break退出循环

for循环的3个条件都是能够省略的，若是没有退出循环的判断条件，就必须使用break语句退出循环，不然就是死循环：

  1. var x = 0;
  2. for (;;) { // 将无限循环下去
  3. if (x > 100) {
  4. break; // 经过if判断来退出循环
  5. }
  6. x ++;
  7. }
continue语句

continue语句中断循环中的迭代,若是出现了指定的条件,而后继续循环中的下一个迭代.

  1. var x;
  2. for(var i = 0; i <= 10; i++){
  3. if(i == 3) continue;
  4. x = x + "这个数字是" + i
  5. }
break和continue的区别

看完上面两个语句的介绍，二者的区别应该很清晰了，能够说不必继续看下面的。

若是还有一点点的疑惑，下面再来用通俗的语言作一下描述。

假设有皇帝要选美女，那么这时候循环语句开启，美女挨个让皇帝过目。

break陛下，不贪心，选中一个美女以后，就终止了选美。

continue陛下，可能比较贪心，选中之后，喊了一句“下一个”，也就是继续循环的进行。

while循环

for 不是JavaScript中惟一可用的循环类型。for循环在已知循环的初始和结束条件时很是有用。而上述忽略了条件的fox循环容易让人看不清循环的逻辑。此时在Javascript中的另外一种循环则是while循环，使用它最佳。

while循环只有一个判断条件，条件知足，就不断循环，条件不知足则退出循环。

语法以下：

  1. 初始化条件
  2. while(判断循环结束条件){
  3. //code to run
  4. 递增条件
  5. }

看个栗子：好比咱们要计算100之内全部奇数之和，能够用while循环实现。

  1. var x = 0;
  2. var n = 99;
  3. while (n > 0) {
  4. x = x + n;
  5. n = n - 2;
  6. }
  7. x; // 2500

在循环内部变量n不断自减，直到变为-1时，再也不知足while条件，循环退出。

do…while循环

最后一种循环是do { ... } while()循环，它和while循环的惟一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

  1. var n = 0;
  2. do {
  3. n = n + 1;
  4. } while (n < 100);
  5. n; // 100

用do { ... } while()循环要当心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

函数

什么是函数

在Javascript中另外一个基本概念是函数，它容许你在一个代码块中存储一段用于处理一个任务的代码，而后在任何你须要的时候用一个简短的命令来调用，而不是把相同的代码写不少次。

好比咱们要完成多组数和的功能。

  1. var sum;
  2. sum = 3 + 2;
  3. console.log(sum);
  5. sum = 7 + 8;
  6. console.log(sum);
  7. ... //不停重复两行代码

若是想实现8组数的和，就须要16行diamante，实现的越多，代码行也就越多。这个时候咱们把完成特意功能的代码块放到一个函数里，直接调用该函数，就省去了重复输入大量代码的麻烦。

因而可知，函数的做用，能够写一次性代码，而后反复的重用这个代码。

代码以下：

  1. var sum = 0;
  2. //只须要编写一次
  3. function sum(a,b){
  4. sum = a + b;
  5. console.log(sum);
  6. }
  7. sum(3,2);
  8. sum(5,6);
  9. sum(8,10);
  10. ...//只需调用函数便可
定义函数

一个函数定义(也称为函数声明，或函数语句)由一些列的function关键字组成。例如，如下代码是一个简单的计算多组数的和的函数，咱们给它命名为sum。

  1. function sum(a,b){
  2. //函数体;
  4. }
  • function为函数的关键字
  • sum为函数的名称
  • sum后面跟随的()中的内容叫函数参数列表，a和b用逗号隔开
  • 定义函数的Javascript语句，用大括号{}括起来。
函数调用

函数定义好后，它是不能自动执行的，须要调用它，直接在须要的位置写函数名。

  1. function sum(a,b){
  2. console.log(a+b);
  3. }
  4. sum(3,5);//调用函数，直接写函数名

咱们把定义函数时传入的两个参数a和b叫形参(形式参数，一个未来被代替的参数)，调用函数时传入的两个参数叫实参(实际的参数)。

若是向在定义函数时添加多个形参。能够在后面添加多个，注意参数之间用逗号隔开。

函数返回值

咱们在计算两个数之和的时候，能够给函数一个返回值，每次调用该函数，你就能计算出两个数之和。

  1. function sum(a,b){
  2. return a+b
  3. }
  4. var result = sum(4,5);

经过在函数体中return关键字 将计算的结果返回，调用函数以后你会获得该返回值，并用变量result接收。

函数表达式

虽然上面的函数定义在语法上是一个语句，但函数能够由函数表达式建立。这样的函数能够是匿名的;它没必要有一个名称。例如，函数sum也能够这样去定义：

  1. var sum = function(a,b){
  2. return a + b;
  3. }
  4. sum(4,5);

可是这种方式只会使人费解，因此咱们不要这样作！建立功能时，最好只要坚持第一种函数定义的方式就能够。

函数做用域和冲突

处理函数时，做用域是很是重要的一个概念。当你建立函数时，函数内定义的变量和其它东西都在它们本身的单独的范围内，意味着它们被锁在本身独立的房间内。

全部的函数的最外层被称为全局做用域。在全局做用域内定义的值能够任意地方访问。

Javascript主要是因为安全性和组织性。有时不但愿变量能够在代码中的任何地方访问。

例如，假设你有一个HTML文件，它调用两个外部的Javascript文件，而且他们都有一个相同的名称定义的变量和函数：

  1. <!-- my HTML file -->
  2. <script src="first.js"></script>
  3. <script src="second.js"></script>
  4. <script>
  5. hello();
  6. </script>
  1. //first.js
  2. var name = 'Tom';
  3. function hello() {
  4. alert('Hello ' + name);
  5. }
  1. //second.js
  2. var name = 'Jack';
  3. function hello() {
  4. alert('Hello ' + name);
  5. }

这两个函数都是用hello()形式调用，可是你只能访问到 second.js文件的hello()函数。second.js 在源代码中后应用到HTML中，因此它的变量和函数覆盖了 first.js 中的。咱们称为这种行为叫代码冲突。

将代码锁定在函数中避免了这样的问题，并能解决咱们代码冲突的问题

有点像一个动物园。狮子，斑马，老虎和企鹅都保留在本身的园子中，只能拿到到它们园子中的东西 —— 与其函数做用域相同。若是他们能进入其余园子，就会出现问题。不一样的动物会在不熟悉的栖息地内感到真的不舒服 - 一只狮子或老虎会在企鹅的水多的，冰冷的的领域中感到可怕。最糟糕的是，狮子和老虎可能会尝试吃企鹅！

img

动物园管理员就像全局做用域 - 他或她有钥匙访问每一个园子，从新投喂食物，照顾生病的动物等。

看个例子：

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Function scope example</title>
  7. </head>
  8. <body>
  10. <script>
  11. var x = 1;
  12. function a() {
  13. var y = 2;
  14. }
  15. function b() {
  16. var z = 3;
  17. }
  18. function output(value){
  19. return value;
  20. }
  21. console.log(output(x)); // 1
  22. console.log(output(y)); // Uncaught ReferenceError: y is not defined
  23. console.log(output(z)); // Uncaught ReferenceError: z is not defined
  24. </script>
  25. </body>
  26. </html>

后面两个都应该返回错误，这是为何？因为函数做用域,y和z被锁定在函数a()和b()函数中，因此output()从全局做用域调用时没法访问他们。

可是，从另外一个函数里面调用呢？

  1. function a() {
  2. var y = 2;
  3. output(y);
  4. }
  6. function b() {
  7. var z = 3;
  8. output(z);
  9. }
  10. function output(value){
  11. return value;
  12. }
  13. a();
  14. b();

打印出对应的结果。这样是没有问题的，由于output()函数在其余函数的内部被调用。在这种状况下，输出变量的定义和函数的调用都在同一个做用域中(注：即函数做用域)。output()它能够在任何地方被调用，由于它在全局做用域中被定义。

修改你的代码以下，以下所示：

  1. function a() {
  2. var y = 2;
  3. output(x);
  4. }
  6. function b() {
  7. var z = 3;
  8. output(x);
  9. }
  10. a();
  11. b();

函数 a()和b()都应该输出x—-1的值。这些没有问题，由于即便output()的调用与x的定义不在同一个做用域内，但x是一个全局变量，因此在全部代码中均可用。

注意：相同的范围规则不适用于循环（for（）{…}）和条件块（if（）{…}） - 它们看起来很是类似，但它们不同！当心不要让这些困惑。

注意：ReferenceError：“x”未定义错误是您遇到的最多见的错误。若是您收到此错误，而且肯定您已经定义了该问题的变量，请检查它的范围。

函数内部的函数

在任何地方你均可以调用函数，甚至能够在另外一个函数中调用函数。这一般被用做保持代码整洁的方式。若是你有一个复杂的函数，若是将其分解成几个子函数，它更容易理解：

  1. function myBigFunction() {
  2. var myValue;
  4. subFunction1();
  5. subFunction2();
  6. subFunction3();
  7. }
  9. function subFunction1() {
  10. console.log(myValue);
  11. }
  13. function subFunction2() {
  14. console.log(myValue);
  15. }
  17. function subFunction3() {
  18. console.log(myValue);
  19. }

只需确保在函数内使用的值正确的范围. 上面的例子会抛出一个错误ReferenceError：MyValue没有被定义，由于尽管myValue变量与函数调用的做用域相同, 但在函数定义内没有定义 - 调用函数时运行的实际代码。为了使这个工做，你必须将值做为参数传递给函数，以下所示：

  1. function myBigFunction() {
  2. var myValue = 1;
  4. subFunction1(myValue);
  5. subFunction2(myValue);
  6. subFunction3(myValue);
  7. }
  9. function subFunction1(value) {
  10. console.log(value);
  11. }
  13. function subFunction2(value) {
  14. console.log(value);
  15. }
  17. function subFunction3(value) {
  18. console.log(value);
  19. }
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程