网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
+ [运算符](#_320)
+ - [算数运算符](#_322)
- [赋值运算符 & 复合赋值运算符](#___350)
- [自增自减运算符](#_379)
- [比较运算符](#_399)
- [逻辑运算符](#_424)
- [位运算](#_437)
- [移位运算](#_443)
+ [条件语句](#_447)
+ - [if 语句](#if__448)
+ [三元表达式](#_475)
+ [switch](#switch_479)
+ [循环语句](#_494)
+ - [while循环](#while_496)
- * [continue](#continue_508)
* [break](#break_510)
- [for 循环](#for__512)
+ [数组](#_529)
+ - [创建数组](#_530)
- [获取数组元素](#_553)
- [新增数组元素](#_593)
- * [通过修改 length 新增](#_length__594)
* [通过下标新增](#_609)
- [使用 push 进行追加元素](#_push__655)
- [删除数组中的元素](#_671)
首先,搞清楚一点,Java 跟 JavaScript一点关系都没有
html(素颜)+css(化妆)+JavaScript(行为)俗称前端三剑客
JavaScript的组成
- ECMAScript(简称 ES): JavaScript 语法
- DOM: 页面文档对象模型, 对页面中的元素进行操作
- BOM: 浏览器对象模型, 对浏览器窗口进行操作
这里我们主要讲一些语法知识,也是在html文件里面敲的,工具VsCode,在body标签下写script标签
注释:有单行注释 //; 有多行注释 /* */,使用Ctrl + /切换注释,多行注释不能嵌套…
输入输出
输入:prompt
弹出一个一个输入框
<body>
<script>
prompt("请输入密码:");
</script>
</body>
输出:alert
弹出一个警示对话框,输出结果
<script>
alert("hello world!");
</script>
输出:console.log
在控制台打印一个日志(供程序员看的),这是咱们在开发中最常用的一种输出方式
<script>
console.log("hello world!");
</script>
进去之后按F12,打开开发者工具,里面就可以看到(当然,每个人的电脑设置可能不一样,但大多数都是F12)
同时,如果js代码中,出现了一些语法错误,或者运行时错误,也会在控制台中显示出来
比如,我们console 少些 一个 e
<script>
consol.log("hello world!");
</script>
JS的基础语法
跟java还是有很多地方不一样的
变量
定义一个变量:
var 变量名 = 初始值;
var 是JS的关键字,表示这是一个变量,末尾的分号可以省略,但是不建议省略
<script>
var num = 10; //创建了一个名为 num 的,数字类型的变量
var s = 'hello';//创建了一个名为 s 的,字符串类型的变量
var arr = [];//创建了一个名为 arr,数组类型的变量
console.log(num);
console.log(s);
console.log(arr);
</script>
不管创建的变量是啥类型,都统一用var这个关键字来表示,至于变量具体是啥类型,取决于初始化的值是啥类型…(JS不区分整形和浮点型,字符串可以用单引号也可以用双引号)
JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似
区别大体记住let有块级作用域的约束:
<script>
{
let a = 10;
}
console.log(a);
</script>
<script>
{
var a = 10;
}
console.log(a);
</script>
var包含全局
动态类型
先看一下这个代码:
<script>
var a = 10; //数字
a = "hello"; //字符串
console.log(a);
</script>
此时,我们发现,输出的是hello,说明了,随着程序的运行,变量的类型可能会发生改变,这种就称为
"动态类型"(运行时),但是像我们c,c++,java,go…这样的语言不支持这种 运行时 类型发生改变,这种行为就是"静态类型"
基本数据类型
有这几种:
number:数字. 不区分整数和小数.
boolean:true 真, false 假.
string:字符串类型.
undefined:只有唯一的值 undefined. 表示未定义的值.
null:只有唯一的值 null. 表示空值
number 数字类型
JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示
数字进制表示:
计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字
<script>
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
console.log(a);
console.log(b);
console.log(c);
</script>
注意:
一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)
特殊的数字值:
Infinity:无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity:负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN:表示当前的结果不是一个数字
<script>
var max = Number.MAX\_VALUE;
// 得到 Infinity
console.log(max \* 2);
// 得到 -Infinity
console.log(-max \* 2);
// 得到 NaN
console.log('hello' - 10);
//字符串拼接
console.log('hello' + 10);
</script>
注意:
- 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
- ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
- 可以使用 isNaN 函数判定是不是一个非数字.
<script>
console.log(isNaN(10)); // false
console.log(isNaN('hello' - 10)); // true
</script>
String 字符串类型
单引号双引号均可,但不能没有
如果字符串中已经包含了引号,就需要我们转义
不转义:
<script>
var str = "Thank you,"dabaifan"";
</script>
转义:
<script>
var str = "Thank you,\"dabaifan\""; //用 \" 来表示转义 "
console.log(str);
</script>
如果是单引号包裹双引号或者双引号包裹单引号,不需要转义
<script>
var str1 = "Thank you,'dabaifan'";
var str2 = 'Thank you,"dabaifan"';
console.log(str1);
console.log(str2);
</script>
求长度:
<script>
var a = "hello boy";
console.log(a.length);
var b = "哒哒哒";
console.log(b.length);
</script>
单位为字符的数量
字符串拼接:
使用 + 进行拼接
<script>
var a = "hello boy,";
var b = "thank you";
console.log(a + b);
</script>
boolean 布尔类型
表示 “真” 和 “假”
在JS中 ,布尔类型 会被当成 1 和 0 来处理
<script>
var a = true;
var b = false;
var c = 1;
console.log(a + c);
console.log(b + c);
</script>
这种设定方式是不科学的,发生了
"隐式类型转换",开发中不建议这么写…
如果一个编程语言,越支持
"隐式类型转换",认为类型越弱(C,JS,PHP)
如果一个编程语言,越不支持"隐式类型转换",认为类型越强(Java,Go,Python)
强类型,意味着类型之间的差异越大,界限更明确, 弱类型意味着类型之间的差异不大,界限是更模糊的…
注意:
静态类型/动态类型 VS 强类型/弱类型 是不相关的概念(正交)
undefined 未定义的数据类型
如果一个变量没有被初始化过,结果就是undefined,是undefined 类型…(非法的)
<script>
var a;
console.log(a);
</script>
undefined 和 字符串进行相加,结果进行字符串拼接:
<script>
var a;
console.log(a + "10");
</script>
undefined 和 数字进行相加,结果就是NaN
<script>
var a;
console.log(a + 10);
</script>
null 空值类型
null 表示当前的一个变量是一个"空值":
<script>
var a = null;
console.log(a + 10);
console.log(a + "10");
</script>
注意:
null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义(相当于盒子都没有)
运算符
和java类似,其实大多数语言都类似
算数运算符
- *
- /
- %
注意:
<script>
console.log(1 / 2);
</script>
<script>
console.log(1 + 2);
console.log(1 - 2);
console.log(1 \* 2);
console.log(1 / 2);
console.log(1 % 2); //取余
</script>
赋值运算符 & 复合赋值运算符
- =
- +=
- -=
- *=
- /=
- %=
<script>
var a = 10;
var b = 20;
console.log(a = b);
a = 10;
console.log(a += b);
a = 10;
console.log(a -= b);
a = 10;
console.log(a \*= b);
a = 10;
console.log(a /= b);
a = 10;
console.log(a %= b);
</script>
自增自减运算符
- ++:自增1
- –:自减1
<script>
var a = 10;
var b = 20;
console.log(a++);
a = 10;
console.log(++a);
console.log(b--);
b = 20;
console.log(--b);
</script>
比较运算符
- <
- <=
=
- == (比较相等会进行隐式类型转换)
- !=
- === (比较相等不会进行隐式类型转换)
- !==
<script>
var a = 10;
var b = "10";
console.log(a == b); //发生隐式类型转换
console.log(a === b); //不发生隐式类型转换
</script>
谈到比较两个对象,有三个维度的比较:
1:比较身份(是不是同一个对象)
2:比较值(对象里存储的数据 是否相等)
3:比较类型(两个对象是否是同一类型)
逻辑运算符
用于计算多个 boolean 表达式的值
&& 与:一假则假
|| 或:一真则真
! 非
c = a || b
如果 a 的值,为真(非0),此时 c 的值,就是表达式 a 的值
如果 a 的值,为假(为0),此时 c 的值,就是表达式 b 的值
c = a && b
如果 a 的值,为真(非0),此时 c 的值,就是表达式 b 的值
如果 a 的值,为假(为0),此时 c 的值,就是表达式 a 的值
位运算
&按位与
|按位或
~按位取反
^按位异或
移位运算
<<左移
有符号右移(算术右移)
无符号右移(逻辑右移)
条件语句
if 语句
条件表达式为 true, 则执行 if 的 { } 中的代码
// 形式1
if (条件) {
语句
}
// 形式2
if (条件) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}
三元表达式
是 if else 的简化写法
条件 ? 表达式1 : 表达式2;
条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值
switch
更适合多分支的场景
switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}
循环语句
重复执行某些语句
while循环
while (条件) {
循环体;
}
执行过程:
先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环
continue
结束这次循环
break
结束整个循环
for 循环
for (表达式1; 表达式2; 表达式3) {
循环体
}
表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.
执行过程:
先执行表达式1, 初始化循环变量
再执行表达式2, 判定循环条件
如果条件为 false, 结束循环
如果条件为 true, 则执行循环体代码.
执行表达式3 更新循环变量
数组
创建数组
使用 new 关键字创建
<script>
var arr = new Array();
</script>
使用字面量方式创建(常用)
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
ase 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}
### 循环语句
重复执行某些语句
#### while循环
while (条件) {
循环体;
}
>
> `执行过程:`
> 先执行条件语句
> 条件为 true, 执行循环体代码.
> 条件为 false, 直接结束循环
>
>
>
##### continue
结束这次循环
##### break
结束整个循环
#### for 循环
for (表达式1; 表达式2; 表达式3) {
循环体
}
>
> 表达式1: 用于初始化循环变量.
> 表达式2: 循环条件
> 表达式3: 更新循环变量.
> `执行过程:`
> 先执行表达式1, 初始化循环变量
> 再执行表达式2, 判定循环条件
> 如果条件为 false, 结束循环
> 如果条件为 true, 则执行循环体代码.
> 执行表达式3 更新循环变量
>
>
>
### 数组
#### 创建数组
`使用 new 关键字创建`
`使用字面量方式创建(常用)`
[外链图片转存中...(img-X7Zzcegd-1715763221633)]
[外链图片转存中...(img-7JWb3HIE-1715763221633)]
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
