进阶JavaScript

先导

为什么可以直接调用tostring
js语法
if语句
switch语句
问号表达式
while语法
for循环

为什么可以直接调用tostring

大家在使用方法的时候有没有好奇过,为什么可以直接使用一个方法,但是这个方法是你从未定义过得,本小节将为大家解释一下原理.
首先为大家写下简易的测试代码:

  var obj = {}
  obj.toString()

为何可以直接调用toString的主要原因是:obj有一个隐藏属性存储了object.prototype对象的地址
当obj在调用toString方法时,发现obj上没有toSting方法,就会去隐藏属性对应的对象找,就找到了Object.prototype.toString方法.
prototype(原型):这就是原型,每个函数都有一个prototype,对象的隐式原型的指对应构造函数显式原型的值,prototype在创建函数当自身查找方法没有找到时,就会去prototype找有没有该方法,有则直接使用.
原型的好处: 原型让你无需重复声明共有属性,省代码,省内存,每个对象都有一个隐藏属性. 原型分为:显示原型(prototype),隐式原型,区别在于都存着原型的地址,只不过prototype挂在函数上,__proto__ 挂在每个新生成的对象上.

js语法

表达式
1+2表达式的值为3
add(1,2)表达式的值为add函数的返回值,注意只有函数有返回值,在函数的返回值中return后不能加回车,并且若return后什么都没有会自动不上return undefined,以下为测试代码.

    function add() {
      return 
    }
    console.log(add()); //undefined

console.log表达式的值为函数的本身
console.log(3)表达式的值为undefined
语句
var a = 1是一个语句.
二者之间的区别
表达式一般都有值,语句可能有也可能没有
语句一般会改变环境(声明,赋值)
上面的两句话并不绝对

if语句

语法:
一:

if(表达式) {
  语句1
} else {
  语句2
}

当只需要判断一种需求的时候可以这样写,表达式内的返回值是一个布尔值,为true或者false,当true时进入语句1,否则进入语句2.
二:

if(表达式) {
  语句1
} else if(表达式){
  语句2
} else {
语句3
}

当有多种判断需求的时候可以这样写,若刚进入到判断条件中,符合语句1的表达式要求则直接输出语句1,否则接着往下判断,若全都不符合则直接返回语句3.

switch语句

语法:

let fruit = "banana"
switch(fruit){
  case "banana":
    console.log('this is banana')
    break;
  case "apple":
    console.log('this is apple');
    break;
  default:
    console.log('这不是水果');
}

定义一个fruit的变量,将该变量的变量值设置为banana,会进入该switch内判断,若有符合的则直接返回对应的输出结果,但是每一个条件后必须加入break,否则当进行完这个判断还会接着去判断后面的条件,会出现问题
可以同时将多个条件设置一个输出的语句:

let fruit = "banana"
switch(fruit){
  case "banana":
  case "apple":
    console.log('我们都是水果')
    break;
  default:
    console.log('不是水果');
}

问号表达式

语法:
表达式1?表达式2:表达式3
注解:表达式1指的是判断的条件,若满足这个条件则直接将表达式2设置为返回值,否则将表达式3设置为返回值.代码示例如下:

console.log(2>1?2:1) //2

很明显可以看出 2>1 为true 则会返回第一个返回值为2,在很多时候问号表达式还是比较常用,这种方法很简单便捷

while循环

语法: while(表达式){语句},代码示例如下:

let a = 0
while(a<5) {
  console.log('a小于5');
  a++
}

此时a小于5会打印出5次,这就是一个循环的过程,首先会先判断满不满足表达式,如果满足就进入循环,如果不满足则跳出该循环.
while的执行步骤:

判断表达式的真假
当表达式为真,执行语句,执行完再判断表达式的真假
当表达式为假,执行后面的语句

for循环

语法:for(语句1;表达式2;语句3){循环体}
代码如下:

for(var i =0;i<5;i++){ 
  console.log(i)
  console.log('i小于5啊')
}

以上代码会打印出5句i小于5啊,大家猜想一下最后会打印出最后i的值为多少呢?给出答案为4.但是最后i的值将会变成5,原因当i=4时会先打印i,然后执行语句i++,最后i就为5. for的执行步骤:

先执行语句1
然后判断表达式2
如果为真,执行循环体,然后执行语句3
如果为假,直接退出,执行后面的语句

关于while的小练习

while练习

var a = 0.1;
while(a !== 1) {
  console.log(a);
  a = a + 0.1;
}

在这个案例中,大家可能认为会有结束的时候,每次a都加上0.1总会有到1的情况,但是由于有浮点数,a将不会正好等于1,而是等于1.0000000x 这个数字,而一旦超过了1,则将再也不会跳出这个循环体,将会一直执行.

总结

本文为大家介绍了js的一些基本语句,还简单的介绍了一下原型,在本文提到的for语句,while语句,问号表达式,if语句都在实际的项目中应用的比较多,大家可以通过这篇文章对语句的用法有大致的了解,在实战中多多练习.我们下期再见
记得持续学习,不断跟进!加油!

跟我走进JavaScipt(二)