JS语法

小何何02
136 阅读8分钟

附：「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

JS 版本

ES6是最低的要求

历史版本

  • ES3，IE6支持，总体评价：垃圾
  • ES5，总体评价：垃圾

这里说的是 JS 兼容浏览器问题。

为什么说ES6一半垃圾

  • 因为 ES 不能删除以前的特性，要兼容旧网站。也就说以前能运行的网站，以后都要能运行。
  • 对比 Python3 你就能知道兼容的好处：稳定 （python3不兼容旧网站，这就导致我们要重写网站了）

学习 JS 的态度

取其精华，取其糟粕

  • 对待JS，这是我们的态度

JS 之父早期对 JS 的评价

  • 它的优秀之处并非原创，它的原创之处并不优秀。
  • 翻译过来的意思就是：好的地方都是从其他语言抄过来的，原创的都是自己瞎设计的。这就是说为什么说 JS 一半垃圾一半好。

一些人对 JS 的批评

王 垠

  • 很多 JavaScript 程序员也盲目地鄙视Java，而其实 JavaScript 比 Python 和 Rudy 还要差。
  • JavaScript 的社区以幼稚和愚昧著称。你经常发现一些非常基本的常识，被 JavaScript “专家”们当成了不起的发现似的，在大会上宣讲。

道格拉斯（JSON之父）

  • JavaScript精粹，就是他写的。
  • JavaScript脚本语言一定会消失，最终被抛弃！

道格拉斯 对 JS 简直又爱又恨。之前还带着问题专门找 JS 之父要求改版，最后果断被拒绝了。

一些人对 JS 的辩护

  • 世界上只有两种编程语言，一种是天天挨骂的，一种是没人用的。
  • JavaScript：世界上最被误解的语言。

永远不要只学一门编程语言

好处：

  • 眼界宽
  • 时刻清楚自己学习的是前端领域，而不是前端领域中的一门语言JS，未来20年谁知道还会不会用JS做前端呢？

补充小知识：

  • 如果你要学习一门语言，直接找到这门语言的开发者和一些专家，学习他们的代码思路。很多未来你要踩的坑他都已经踩过，他们写代码会更加有想法，为什么要这么写和为什么不写。

JS 语法

表达式与语句

表达式（值）

  • 1 + 2 表达式的值为 3

  • add( 1 , 2) 表达式的值为函数的返回值

  • console.log 表达式的值为函数本身

问题：console.log(3) 表达式的值为多少？

  • 答案是undefined ，而不是3 ，console 和前面说的 add 都是一个函数，所以函数的返回值是 undefined。

如图：

参考文章：为什么console.log()后会有一个undefined

语句（一段话、一段代码）

  • var a =1 是一个语句

二者的区别

  • 表达式一般都有值，语句可能有也可能没有
  • 语句一般会改变环境（声明、赋值）
  • 上面两句话不是绝对的
  • 函数都有返回值，这个返回值就是函数的值，另外只有函数才有返回值

大小写敏感

  • var a 和 var A 是不同的
  • object 和 Object 是不同的
  • function 和 Function 是不同的

空格

大部分空格没有实际的意义，多加回车都是不影响代码的。

常态的 / 正常的

例1：声明一个变量，空很多格

例2：写一个函数，空很多格

变态的 / 不正常的

例1：return 后面换行写会报 undefined

如下图写了2个代码，主要是验证return后到底能不能加空格。

  • 第一个代码是在return后加了很多空格，结果是可以的，不会影响值的变化
  • 第二个代码是在return后换行写代码，会返回 undefined，直接就改变了值的意思

标识符（变量名）

规范

  • 第一个字符，可以是 Unicode、字母、$ 、下划线、或中文
  • 数字只能从第二位开始
  • __ 下划线最多只能有2个

（1）字母

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

（2）$

var $ = 10;
console.log($) // 10

var $1 = 11;
console.log($1) // 11

（3）_

var _ = "下划线";
console.log(_);

var _1 = "下划线1";
console.log(_1);

（4）中文

var 小何 = "xiaohe";
console.log(小何)

注释

很多前端的前辈说写代码要多写注释，个人认为很多情况下都是放屁！

注释的分类

不好 / 垃圾 / 无意义的注释

  • 把代码翻译成中文
var person {  // 声明了一个人
  name:"小何"  // 名字叫小何
  age:18  // 年龄18
}
  • 过时的注释：更改了代码，却忘记改注释（这里不是忘记，而是很多简单代码的注释，到后面自己都不想看。如果跟你合作的伙伴看到这个代码，那我到底相信哪个？）
var person {  // 声明了一个人
  name:"小明"  // 名字叫小何
  age:20  // 年龄18
}

好的注释

  • 踩坑注解
  • 为什么代码会写得这么奇怪，遇到什么bug
  • 告诉下一个程序员为什么这样写，不写会发生什么？

条件语句 / 判断

if 语句

语法

  • 这里的表达式可以是 a === 1，如果等于1，执行语句1，不等于执行语句2。
if(表达式){
 语句1
}else {
 语句2
}

变态情况

  • 表达式里可以非常变态，如：a =1

例1： 如果表达式是 a =2，那么这里就是条件判断了，而是将 2 赋值给了 a。通常我们不这样写，一般都是使用 == 或者 ===来做判断

a = 1;

if(a = 2){
 console.log('a是1')
}else {
 console.log('a不是1')
}

输出结果：

例2：使用 ===

a = 1;

if(a === 2){
 console.log('a是1')
}else {
 console.log('a不是1')
}

输出结果：

  • 语句1可以非常变态，如：嵌套 if else
  • 语句2可以非常变态，如：嵌套 if else
  • 缩进也可以很变态，如面试题常常下套：
a = 1;

if(a === 2)
  console.log('a')
  console.log('a等于2')

建议写法

最推荐的写法

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

例子：这里要记住 else if 其实是2个if else组成，所以有2个表达式。

var a = 10

if(a === 8){
  console.log('我是数字8，可能不是我哦！')
}else if(a === 9){
  console.log('我是数字9，可能不是我哦！')
}else {
  console.log('我是数字10，没错是我啦')
}

次推荐：在函数中做判断

function fn(){
 if(表达式) {
  return 表达式
 }
 if(表达式) {
  return 表达式
 }
  return 表达式
}

switch语句

  • if else 的升级版
  • 他的缺点就是如果你少加了 break，那你基本就完了，会进入死循环，直到浏览器挂掉。

语法

var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		  case 1:x="今天是星期一";
      break;
  		case 2:x="今天是星期二";
      break;
      case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
      break;
  		case 6:x="今天是星期六";
    	break;
 	}

问号冒号语句 / 三元表达式

  • 他其实就是最简单的if else 语句
  • 能用问号冒号语句就不要用 if else

语法

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

举例：简短

var a = 18;

var age = a < 18 ? "未满18岁" : "你已经18岁了，可以上网了！"

console.log(age) // "你已经18岁了，可以上网了！"

相当于 if else，臃肿

var a = 16;

if(a ===18){
   console.log("你已经18岁了，可以上网了！")
}else {
  console.log("未满18岁")
}

总结：一行代码可以解决的，就不要用5行。

&& and

语法

假设 a =10； b = 20；

var a= 10;
var b =20;

var a1= (a < 11) && (b >19) 

console.log(a1)  // true

总结

  • 只有两边都为真才是真，其他只要有一边为假就是假。

||

语法

var a= 10;
var b =20;
var c =30

var result = (a <9) || (b<19) || (c >100)

console.log(result) // false

总结

  • 如果表达式1为真，会直接跳出，输出真
  • 如果表达式1为假，就会执行表达式2，表达式2为假，就会继续执行，如果后面没有真，那就输出假，如果后面有真，那么就会输出真后直接跳出，不再执行后面的代码。

总结

条件语句

不常用的

  • if else
  • switch

常用的

  • A?B:C
  • A && B
  • fn && fn()
  • A || B
  • A = A || B ： B是A 的保底值，如果A存在那就A，不存在那就B

除了if else（相比其他语句这个要写更多的代码才能实现同样的效果） 和 switch（少写break就是一个bug） 不常用，其他的都是常用的。

循环语句

while

  • 如果条件为真就执行

语法

while (条件) {
  语句;
}

举例：

var i = 0;

while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

输出结果：

变态情况

（1）下面的例子是一个无限循环，因为循环条件总是为真。

while (true) {
  console.log('Hello, world');
}

（2）除了循环体不写没有意义之外，其他3个不写都是死循环！！

不要以为0.1循环10次就到1了，其实不是，他还有浮点数，也就是0.300000000000023这样的，所以少写一步，都可能进入死循环。

for

  • for是while循环的方便写法，为什么？
  • 你可以用for 的代码对比 while的代码就可以看到for的代码方式要更少一些，实现的效果是和while一样的。

语法

for (初始化表达式; 条件; 递增表达式) {
  循环体
}

以上代码执行顺序：

  • 先执行初始化表达式
  • 然后判断条件
  • 如果为真，执行循环体，然后执行递增表达式
  • 如果为假，直接退出循环。

break 和 continue

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。``````

break

  • break语句用于跳出代码块或循环。
  • for循环也可以使用break语句跳出循环。
for (var i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3)
    break;
}
// 0
// 1
// 2
// 3

上面代码执行到i等于3，就会跳出循环。

continue

  • continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
var i = 0;

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

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

变态情况

（1）break说是退出所有循环，但是如果有2层for，它只会退出，离他最近的一层for

label

  • 用的很少，面试会考（概率5%）

语法

  • 上面代码执行到 break foo，就会跳出区块。
foo: {
  console.log(1);
  break foo;
  console.log("本行不会输出");
}
console.log(2);

avatar
文章
阅读
粉丝