字节跳动最爱考的前端面试题:JavaScript 基础到底是什么?我们从 JavaScript 的定义说起。
JavaScript 简称“JS” ,它是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境,也已经成为了与 HTML/CSS 完全集成的,使用最广泛的浏览器语言。
那今天,我们来探探 JavaScript 的秘密吧!
01
JavaStript 的介绍
JavaScript 由 ECMAScript、DOM、BOM 三部分组成:
- ECMAScript:JavaScript 的语法标准;
- DOM:JavaScript 操作网页上的元素的 API;
- BOM:JavaScript 操作浏览器的部分功能的 API。
JavaDcript 又有哪些特点呢?这里,我举了 3 个特点,如有其他特点,欢迎在留言区补充:
1)可以使用任何文本编辑工具编写,然后使用浏览器就可以执行程序;
2)是一种解释型脚本语言:代码不进行预编译,从上往下逐行执行,不需要进行严格的变量声明;
3)主要用来向 HTML 页面添加交互行为。
除此之外,我们还要看看 JavaScript 的基础语法。它的基础语法几乎所有的语言差异不大,无非数据类型、操作符、控制语句、函数等。
这里呢,我简要的举了几个基础语法。
变量是什么
在计算机中,数据都存在内存中。而一个变量,就是一个用于存放数值的容器,每个变量存放的数值是可变的,每个变量都有其独有的名字,每个变量都占有一段内存。
注:变量不是数值本身,变量仅仅是一个用于储存数值的容器。
声明变量
通过 var 关键字来声明变量,比如:
var name = "实验楼";
上述代码声明了一个名为 name 的变量,并赋值为“实验楼”。注意此处的等于符号(=)为赋值符号,不是我们传统意义上理解的等号。
变量的命名规则如下:
- 变量名必须以字母、下划线 “_”、美元符号 “$” 开头,不能以数字开头;
- 变量可以包含字母、数字、下划线和美元符号;
- 不能使用 JavaScript 中的关键字做为变量名;
- 变量名不能有空格;
- 变量名对大小写敏感,比如:name 和 Name 就是两个完全不同的变量。
另外在 JavaScript 中,变量也可以不作声明,而在使用时再根据数据的类型来确其变量的类型,如:
x = 50; // 变量 x 为整数
变量类型
- Number:你可以在变量中存储数字,不论这些数字是 10(整数),或者是 3.1415926(浮点数)。
var x1 = 10;var x2 = 3.1415926;
- String:存储字符(比如 "shiyanlou")的变量,字符串可以是引号中的任意文本,你可以使用单引号或双引号,也可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
var carname = "shiyanlou";var carname = "shiyanlou";var answer = "I Love 'shiyanlou'";var answer = 'I Love "shiyanlou"';
- Boolean:布尔类型的值有两种:true 和 false。通常被用于在适当的代码之后,测试条件是否成立,后续会讲到。
- Array:数组是一个单个对象,其中包含很多值,方括号括起来,并用逗号分隔。后续我们将会对数值进行详细的讲解,此处看两个简单的数值例子:
var myNameArray = ["Tom", "Bob", "Jim"];var myNumberArray = [10, 15, 20];
- Object:对象类型。同样的我们会在后续的课程中详细讲解什么是对象,此处先看一个简单的例子:
var student = { name: "Tom", age: 18 };
动态类型
JavaScript 是一种“动态类型语言”,这意味着不同于其他一些语言(如 C、Java),你不需要指定变量将包含什么数据类型(例如 number 或 string),全部用 var 关键字声明就是了。
比如如果你声明一个变量并给它一个带引号的值,浏览器就会知道它是一个字符串:
var myString = "Hello";
值得注意的就是引号中如果是一个数字,它依然是 string 类型的。
我们可以在控制台中通过 typeof 函数,来查看我们声明的变量是什么类型的。
注释
单行注释:用来描述下面一个或多行代码的作用。单行注释快捷键:Ctrl + /。
// 这是一个变量var name = "zhangsan";
多行注释:用来注释多条代码。多行注释快捷键:Ctrl + Shift + /。
/*
var name = "zhangsan";
var age = 18;
console.log(name, age);
*/
数字类型
- 整数。例如:1, 2, 100, -10。
- 浮点数:就是小数。例如:0.2, 3.1415926。
- 双精度:是一种特定类型的浮点数,它们具有比标准浮点数更高的精度。
算数运算符
操作运算符
比较运算符
逻辑运算符
运算符的优先级
02
JavaScript 关键特性
生活中,条件与我们息息相关。
举几个例子:如果这周放假,那么我就要出去玩;如果明天不下雨,我就和小花出去踢足球;如果我饿了,我要么吃饭,要么吃面,要么就忍着。
同样的,在 JavaScript 中,我们也有条件语句,下面为大家讲解在 JavaScript 中如何使用条件语句。
if...else 语句
1.最基本的 if...else 语句
它的语法为:
if (条件) { // 当条件为 true 时执行的语句} else { // 当条件为 false 时执行的语句}
例子:
if (3 > 2) { console.log("我真帅");
} else { console.log("不可能");
}
上述例子在控制台中打印的语句为:我真帅。
2.if...else 嵌套
它的语法是:
if(条件 1){ // 当条件 1 为 true 时执行的代码
}else if(条件 2){ // 当条件 2 为 true 时执行的代码
}else{ // 当条件 1 和 条件 2 都不为 true 时执行的代码
}
注:根据实际情况,还可以嵌套更多的 else if。
例子:
var d = new Date().getDay();if (d == 0) { console.log("今天星期天");
} else if (d == 1) { console.log("今天星期一");
} else if (d == 2) { console.log("今天星期二");
} else { console.log("好多啊,我不想写了");
}
switch case 语句
从前面的例子中我们可以看出来,当条件很多的时候,一直嵌套 else if 语句,显然是有点不科学的。
由此我们引出了 switch case 语句,先来看看它的语法:
switch(k){ case 1:
执行代码块 1 ; break; case 2:
执行代码块 2 ; break; default:
默认执行(k 值没有在 case 中找到匹配时);
}
通过 switch case 语句来改写上面的例子:
var d = new Date().getDay();switch (d) { case 0: console.log("今天星期天"); break; case 1: console.log("今天星期一"); break; case 2: console.log("今天星期二"); break; case 3: console.log("今天星期三"); break; case 4: console.log("今天星期四"); break; case 5: console.log("今天星期五"); break; default: console.log("今天星期六"); break;
}
三元运算符
语法:
条件表达式?结果 1:结果 2
含义:问号前面的位置是判断的条件,判断结果为 boolean 型,为 true 时执行结果 1,为 false 时执行结果 2。
例子:
3 > 2 ? console.log("3 比 2 大") : console.log("3 比 2 小");
通过循环函数来帮助我们完成一些重复性的工作。
for 循环
for 循环是我们编码中经常会使用到的。
先来看看它的语法结构:
for (初始化; 条件; 增量) {
循环代码;
}
举个打印 1 到 100 的例子:
for (var i = 1; i <= 100; i++) { console.log(i);
}
使用 break 跳出循环
我们在前面的 switch case 结构中已经见过 break 语句了。
当 switch 语句中符合输入表达式的情况满足时,break 语句立即退出 switch 语句并移动到之后的代码。
上述的 for 循环例子,我们来加个条件,使其能打印一个能被 7 整除的整数。
for (var i = 1; i <= 100; i++) { if (i % 7 == 0) { console.log(i); break;
}
}
使用 continue 跳过迭代
使用 continue 跳过迭代,不是完全跳出循环,而是跳过当前循环而执行下一个循环。
比如我们使用 continue 可以实现打印 1 到 100 所有能被 7 整除的整数,而前面的例子中只能打印出:7。
for (var i = 1; i <= 100; i++) { if (i % 7 == 0) { console.log(i); continue;
}
}
这么写可能不好理解,大家或许会想到上面的例子不写 continue 最后打印的效果和写了是一样的啊,那 continue 是不是就没用了?
其实 continue 主要是跳过当前循环去执行下一个循环也就是说,当前循环下的其他语句就不执行了。
来看下面的例子:
for (var i = 1; i <= 7; i++) { if (i % 7 == 0) { console.log(i); continue; console.log("*");
}
}
大家可以把上面的代码运行一下,然后把 continue 删除,再运行一下,细细体会一下 continue 语句的作用。
while 语句 和 do while 语句
在 JavaScript 中不止有 for 循环,还有其他的循环语句。
我们先来看看 while 循环的语法结构:
while (条件) { // 需要执行的代码;}
同样的,我们来写一个打印 1 到 100 之间整数的例子:
var i = 1;while (i <= 100) { console.log(i);
i++;
}
do while 循环的语法结构:
do { // 需要执行的代码;} while (条件);
例子:
var i = 1;do { console.log(i);
i++;
} while (i <= 100);
注:而这两者的区别是,do while 循环在检测条件之前就会执行。也就是说,即使条件为 false,do while 也会执行一次循环代码。
而 while 循环只有在条件为真的时候才执行,可以这样简单记忆:while 循环,先判断再执行;do while 循环先执行一次再判断。