Web前端最全JavaScript——基础语法（数据类型以及转换、操作符），前端音频播放器

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

3、NaN(Not a number)代表一个非数值

• isNaN(x):用来判断一个变量是否为非数字的类型，返回true或者false.例如：

console.log(isNaN(12)); //false

console.log(isNan(‘pink老师’)); //true

1·2·2 字符串类型

字符串型可以是引号中的任意文本，其语法为双引号“”和单引号‘’

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

注意：

• JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）例如：

var str = ‘我是一个"高富帅"的程序员’;

console.log(str);

var str = “我是一个’高富帅’的程序员”;

console.log(str);

• 字符串转义符：类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是\开头的，常用的转义符及其说明如下：

1、\n（换行符，n是newline的意思）

2、\\（斜杠\）

3、\'(‘单引号)

4、\“（”双引号）

5、\t(tab缩进)

6、\b(空格，b是blank的意思)

• 字符串长度：字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。例如：

var str = ‘my name is andy’;

console.log(str.length);//输出为15

• 字符串拼接：多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串；拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串； 例如：

console.log(‘沙漠’ + ‘骆驼’);//沙漠骆驼

console.log(‘pink’ + 18);//

console.log(‘pink’ + true);//pinktrue

console.log(12 + 12);//24

console.log(‘12’ + 12);//1212

1·2·3 布尔值类型

布尔类型有两个值：true和false，其中true表示真（对），而false表示假（错）。

布尔型和数字型相加的时候，true的值为1，false的值为0。

例如：

console.log(true + 1);//等于2

console.log(false + 1);//等于1

1·2·4 Undefined

一个声明没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

例如：

var str;

console.log(str);//输出undefined

var varible = undefined;

console.log(varible + ‘pink’);

//输出undefinedpink

console.log(varible + 1); //输出NaN

1·2·5 Null

一个声明变量给null值，里面存的值为空。

例如：

var space = null;

console.log(space + ‘pink’);

//输出nullpink

console.log(space + 1); //输出1

1·3数据类型的转换

---

数据类型的转换：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

通常会实现3种方式的转换：

1、转换为字符串类型

2、转换为数字型

3、转换为布尔型

1·3·1 转换为字符串类型

方式、说明、案例

1、变量名.toString();转成字符串

案例：

var num = 10;

var str = num.toString();

2、String()强制转换;转换成字符串

案例：

console.log(String(num));

3、加号拼接字符串；和字符串拼接的结果都是字符串

案例：

console.log(num + ‘’);

注意：

• toString()和String()使用方式不一样。

1·3·2 转换为数字型

方式、说明、案例

1、parselnt(string)函数；将string类型转换成整数数值型（重点）

案例：

console.log(parseInt(‘3.14’));//输出3 取整数

console.log(parseInt(‘3.96’)); //输出3

console.log(parseInt(‘120px’)); //120 会去掉px单位

console.log(parseInt(‘rem120px’)); //输出NaN

2、parseFloat(string)函数；将string类型转换成浮点数数值型（重点）

案例：

console.log(parseFloat(‘3.14’));//输出3.14

console.log(parseFloat(‘120px’));//输出120

3、Number()强制转换函数；将string类型转换成数值型

案例：

var str = ‘123’;

console.log(Number(str));

console.log(Number(‘12’));

4、js隐式转换（- * /）；利用算术运算隐式转换为数值型

案例：

console.log(‘12’ - 0);

console.log(‘123’ - ‘120’);

console.log(‘123’ * 1);

注意：

1. parseInt和parseFloat单词的大小写

2. 隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型。

1·3·3 转换为布尔型

方式、说明、案例

1、Boolean()函数；其他类型转换成布尔值。

案例：

console.log(Boolean(‘’)); //false

console.log(Boolean(0)); //false

console.log(Boolean(NaN)); //false

console.log(Boolean(null)); //false

console.log(Boolean(undefined)); //false

console.log(Boolean(‘123’)); //true

console.log(Boolean(‘你好吗’)); //true

console.log(Boolean(‘我很好’)); //true

注意：

1. 代表空、否定的值会被转换为false，如 ‘’、0、NaN、null、undefined

2. 其余值都会被转换为true

二、操作符

=====

运算符也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。

JavaScript中常用的运算符有：

1】算数运算符

2】递增和递减运算符

3】比较运算符

4】逻辑运算符

5】赋值运算符

2·1 算术运算符

---

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符、描述、实例：

1】+；加；10+20=30

2】- ；减；10-20=-10

3】* ；乘；10*20=200

4】/ ；除；10/20=0.5

5】%；取余数（取模）；

返回除法的余数9%2=1

注意：

1. 浮点数的精度问题：浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。

2. 不要直接判断两个浮点数是否相等！

表达式和返回值：

1】表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合；

简单理解：是由数字、运算符、变量等组成的式子

2】返回值：表达式最终都会有一个结果，返回给我们，我们成为返回值

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。