资讯专栏INFORMATION COLUMN

JS基础语法 学习笔记1

lyning / 320人阅读

摘要:以下内容摘自阮一峰标准参考教程语句叫做表达式,指一个为了得到返回值的计算式。语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值后者则是为了得到返回值,一定会返回一个值。变量变量是对值的具名引用。

以下内容摘自阮一峰-JavaScript-标准参考教程

语句
var a = 1 + 3;

1 + 3叫做表达式(expression),指一个为了得到返回值的计算式。语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值;后者则是为了得到返回值,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。

变量

变量是对“值”的具名引用。变量就是为“值”起名,然后引用这个名字,就等同于引用这个值。变量的名字就是变量名。

var a = 1;

上面的代码先声明变量a,然后在变量a与数值1之间建立引用关系,称为将数值1“赋值”给变量a。以后,引用变量名a就会得到数值1。最前面的var,是变量声明命令。它表示通知解释引擎,要创建一个变量a。

变量的声明和赋值,是分开的两个步骤,上面的代码将它们合在了一起,实际的步骤是下面这样。

var a;
a = 1;

变量提升

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

console.log(a);
var a = 1;

上面代码首先使用console.log方法,在控制台(console)显示变量a的值。这时变量a还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码

var a;
console.log(a);
a = 1;

最后的结果是显示undefined,表示变量a已声明,但还未赋值。

-->只有在行首,才会被当成单行注释,否则会当作正常的运算。

function countdown(n) {
  while (n --> 0) console.log(n);
}
countdown(3)
// 2
// 1
// 0

IF语句

*else代码块总是与离自己最近的那个if语句配对。

var m = 1;
var n = 2;

if (m !== 1)
if (n === 2) console.log("hello");
else console.log("world");

上面代码不会有任何输出,else代码块不会得到执行,因为它跟着的是最近的那个if语句,相当于下面这样。

  if (m !== 1) {
  if (n === 2) {
    console.log("hello");    
  } else {
    console.log("world");
  }
}

如果想让else代码块跟随最上面的那个if语句,就要改变大括号的位置。

if (m !== 1) {
  if (n === 2) {
    console.log("hello");    
  }
} else {
  console.log("world");
}
// world
Switch语句

*需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出 switch结构。

var x = 1;

switch (x) {
  case 1:
    console.log("x 等于1");
  case 2:
    console.log("x 等于2");
  default:
    console.log("x 等于其他值");
}
// x等于1
// x等于2
// x等于其他值

上面代码中,case代码块之中没有break语句,导致不会跳出switch结构,而会一直执行下去。正确的写法是像下面这样。

switch (x) {
  case 1:
    console.log("x 等于1");
    break;
  case 2:
    console.log("x 等于2");
    break;
  default:
    console.log("x 等于其他值");
}

*需要注意的是,switch语句后面的表达式,与case语句后面的表示式比较运行结果时,采用的是严格相等运算符(===),而不是相等运算符(==),这意味着比较时不会发生类型转换。

  
var x = 1;

switch (x) {
  case true:
    console.log("x 发生类型转换");
  default:
    console.log("x 没有发生类型转换");
}
// x 没有发生类型转换
三元运算符

(条件) ? 表达式1 : 表达式2

上面代码中,如果“条件”为true,则返回“表达式1”的值,否则返回“表达式2”的值。

var msg = "数字" + n + "是" + (n % 2 === 0 ? "偶数" : "奇数");

break 语句和 continue 语句

*break语句用于跳出代码块或循环

var i = 0;

while(i < 100) {
  console.log("i 当前为:" + i);
  i++;
  if (i === 10) break;
}

*continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。

var i = 0;

while (i < 100){
  i++;
  if (i % 2 === 0) continue;
  console.log("i 当前为:" + i);
}

上面代码只有在i为奇数时,才会输出i的值。如果i为偶数,则直接进入下一轮循环。

*如果存在多重循环,不带参数的break语句和continue语句都只针对最内层循环。

标签(label)

JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下。

**label:
  语句**
  

标签通常与break语句和continue语句配合使用,跳出特定的循环

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log("i=" + i + ", j=" + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

上面代码为一个双重循环区块,break命令后面加上了top标签(注意,top不用加引号),满足条件时,直接跳出双层循环。如果break语句后面不使用标签,则只能跳出内层循环,进入下一次的外层循环。

continue语句也可以与标签配合使用。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log("i=" + i + ", j=" + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107308.html

相关文章

  • (原创)vue 学习笔记

    摘要:菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数,可以通过来返回函数值。它们都有前缀,以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

    layman 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    20171112 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<