目录
初识JavaScript
什么是JavaScript
JavaScript (简称 JS)
是世界上最流行的编程语言之一
是一个脚本语言, 通过解释器运行
主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.
JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了.
当前 JavaScript 已经成为了一个通用的编程语言
JavaScript 的能做的事情:
网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发
Java 和 JS 的区别
Java是运行在JCM里的
JS通常是运行 在浏览器 中的.
像 Chorme 内置的 JS 引擎叫做 V8 Worker.
V8引擎也被人单独的提取出来,可以嵌入到其他的程序中(谁的程序嵌入了V8,谁就能执行JS了)
nodeJS这个程序就是嵌入了V8,同时又给JS封装提供了一组相关的api,这也就让JS也具备了开发服务程序/桌面应用程序的能力.
Java的运行,主要是靠JVM,JVM把.class文件(二进制字节码)加载到内存中,然后解释执行,然后把这些java的字节码转成CPU指令.
JS的运行,是浏览器要先加载HTML,HTML中通过一些方式引入JS(JS的代码大概率是通过网络的方式被下载到浏览器中)然后浏览器再调用V8引擎来解释执行JS的代码.也是由V8引擎把JS翻译成2进制的机器指令,然后运行.
JavaScript 的基本构成
如果是跑在非浏览器环境下的 JS (nodejs),没有 DOM 和 BOM.
会有其他的一组api
JavaScript的书写形式
第一个程序
效果
JS可以通过 script 标签,嵌入到html中.
script 标签,可以嵌入很多种语言,不仅仅是JS.
因为时间原因,其他的语言都已经淹没在历史长河中了.
JS的引入形式
上面介绍的是内嵌式,除此之外还有其他的方式.
行内式,把JS写到HTML元素中
举例:
创建一个按钮
效果
但是此时点网页上的这个按钮没有任何反应
现在加上红框里的内容之后
点击按钮之后就会弹出一个窗口
注意: JS中的字符串可以使用双引号,也可以使用单引号.(JS不区分字符串和字符)
双引号和单引号可以搭配使用.
外面是双引号,里面就可以使用单引号
外面是单引号,里面就可以使用双引号
外部式
把JS代码写到一个单独的文件中,由html来引入.
举例
创建一个js文件,添加内容
然后通过这样一个代码就能够把js文件引入到html中
这个操作往往就会触发一个网络请求.浏览器就会根据当前src对应的路径来从服务器获取dome10.js这个文件(当前这个是本地的,没有触发网络请求)
效果
只要一刷新,当前这个页面JS就会被加载出来,并且被执行了.
当加载好了这个JS之后,就会立即执行
script 标签带有了 src 属性之后,script内部就不能再写其他JS代码了.写了也不生效
如果一个页面中包含了多个 script 标签,就会按照 script 出现的先后顺序决定执行顺序.
此处最明显的体会就是 JS 是从网络上加载过来的.
这一点是非常非常有意义的.
输入输出(
输入(基本用不到,简单一说): prompt
弹出一个输入框
// 弹出一个输入框
prompt("请输入您的姓名:");
输出: alert
弹出一个警示对话框, 输出结果
// 弹出一个输出框
alert("hello");
输出: console.log
在控制台打印一个日志(供程序员看)
打印到控制到
console.log 调试 js 程序的一个重要手段
普通用户一般都不会关注(普通用户也不会打开开发者工具)
注意: 在 VSCode 中直接输入 "log" 再按 tab 键, 就可以快速输入 console.log
JavaScript的基本语法
全世界的编程语言,没有1000也有几百,
主要可以分为两个大类
1.类 C ,和 C 类似,命令式的编程. C++ , Java, JS......
2.类lisp 和 lisp 类似. 函数式编程
变量的创建
JS中创建的变量,不需要显示指定类型.
变量的实际类型,根据初始化/赋值来确定.
var num = 10;
var 是 js 中的一个关键字,就表示 num 是一个变量.
效果
修改变量
效果
效果
注意:
把变量赋值成 数字, 就是数字类型(number)
把变量赋值成 字符串, 就是字符串类型(string)
和 var 一样, let 也是 js 的关键字
let 是 ES6 引入的相对新的机制(ES6 大概是 201x年左右搞出来的)
var 这是最早就有(199x)
var 里面有一些缺陷
后面统一使用 let.
使用 let 之后,这个变量的作用域,生命周期啥的都和 java 中的变量都类似.
动态类型
Java是一个静态类型的语言.一个变量的类型,在编译阶段就固定了,在运行时不能改变!!
int num = 10;
num固定就是 int 类型.代码指定过程中不管把 num 咋改,始终都是 int 类型
JS 是一个动态类型的语言,变量的类型在运行时是能够改变的!
变量的类和和附的直接相关.
举例:
效果
typeof查看变量类型
效果
现在代价普遍认为,还是静态类型香
静态类型,更有利于开发工具进行分析代码.
IDEA代码补全
同样是JB家工具.IDEA的体验,远远高于PycCharm(写python) 和 WebStorm(写JS)
基本数据类型
JS 中内置的几种类型
number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值
null: 只有唯一的值 null. 表示空值.
number 数字类型
JS里面的数字类型包含了整数和小数!!!
效果
数字进制表示
计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
注意:
一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)
各种进制之间的转换, 不需要手工计算, 直接使用计算器即可.
特殊的数字值
Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.
效果
string 字符串类型
字符串字面值需要使用引号引起来, 单引号双引号均可
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错
如果字符串中本来已经包含引号咋办?
var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引 号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号
求长度
效果
length是一个属性
string的 length 表示的是字符的数量,不是字节的数量
JS也支持字符串和数字之间的拼接,会尝试把数字自动转成字符串,这一点和Java也是非常相似的.
boolean 布尔类型
Java是一个强类型的语言,不太支持隐式类型装换.Java中的布尔仅仅是布尔,仅仅是真假,不能干别的事情.
JS是一个弱类型的语言,能支持一些隐式类型转换.JS中的布尔,也被当做 1 和 0
效果
undefined 未定义数据类型
如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型
效果
最典型的用法,就是访问js的某个对象的属性,但是这个属性又不存在.
undefined 表示是一个非法的状态.(特指没被初始化)
null是一个空值,也是表示一个非法的状态.(用户手动设定的非法值)
按理来说,编程语言里面有一个概念能够表示"非法状态" 就够了.
因此除了 JS 之外,大部分语言都是有null,但是没有 undfined
undefined 也是之中内置类型,这个类型的值只有一个,就是undefined
null也是一种内置类型,这个类型的值只有一个,就是null
null确实是null类型,但是js始终没有修改这一点.
也可以试着对 undefined/null 进行一些运算
运算符
算术运算符
+ - * / %
赋值运算符 & 复合赋值运算符
= += -= *= /= %=
自增自减运算符
++: 自增1 --: 自减1
比较运算符
<
>
=
== 比较相等(会进行隐式类型转换)
!=
=== 比较相等(不会进行隐式类型转换)
!== 逻辑运算
逻辑运算符
用于计算多个 boolean 表达式的值.
&& 与: 一假则假
|| 或: 一真则真
! 非
位运算
& 按位与
| 按位或
~ 按位取反
^ 按位异或
Java只能针对整数来进行
JS里位运算也是类似
移位运算
<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)
上述运算符和Java不同的
=== ||
举例:
效果
==在比较的时候不考虑类型,会尽可能进行类型转换这样的操作
===在比较的时候会考虑比较类型.如果类型不同,就直接是false.
效果
||
JS中的逻辑或和Java1差别很大
Java || 运算返回的一定是boolen 值
JS的或运算
a || b
如果a为true,整个表达式的值就是a的值.
如果a为false,整个表达式的值就是b的值
得到的结果,不一定就是boolean
条件语句
基本语法格式
条件表达式为 true, 则执行 if 的 { } 中的代码
// 形式1
if (条件) {
语句
}
// 形式2
if (条件) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}
if()里的条件0表示false,非0表示true
三元表达式
是 if else 的简化写法.
条件 ? 表达式1 : 表达式2
条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值
注意, 三元表达式的优先级是比较低的.
switch
更适合多分支的场景.
switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}
循环语句
重复执行某些语句
while 循环
while (条件) {
循环体;
}
执行过程:
先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环
举例:
打印 1- 10
var num = 1;
while (num <= 10) {
console.log(num);
num++;
}
continue
结束这次循环
var i = 1;
while (i <= 5) {
if (i == 3) {
i++;
continue;
}
console.log("我在吃第" + i + "个李子");
i++;
}
break
结束整个循环
var i = 1;
while (i <= 5) {
if (i == 3) {
break;
}
console.log("我在吃第" + i + "个李子");
i++;
}
for 循环
for (表达式1; 表达式2; 表达式3) {
循环体
}
表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量
执行过程:
先执行表达式1, 初始化循环变量
再执行表达式2, 判定循环条件
如果条件为 false, 结束循环
如果条件为 true, 则执行循环体代码.
执行表达式3 更新循环变量
举例:
for (var num = 1; num <= 10; num++) {
console.log(num);
}
小结:
变量
类型
运算符
条件
循环
绝大部分内容都和Java是差不多的
除了变量的定义
内置类型(number,string,boolean,undefined,null)
静态类型 vs 动态类型
强类型 vs 弱类型
运算符中的一些特殊的用法(===,||)
数组
批量创建的一组变量.
Java/C中,要求数组中的变量是相同类型的
但是JS中不要求.(其他动态类型语言中,都不要求)
创建数组的方式
1.通过new关键字来创建(非常像Java)
数组在JS中也是一个"对象"
2.实际开发中,更长使用的是,通过字面量的方式来创建.
JS中通过 [ ] 表示数组
效果
下标越界
效果
JS尝试读取数组中不存在的下标,就会出现 undefined 这样的结果
JS尝试写入数组中不存在的下标,就会往这个下标插入元素,同时可能就会修改数组的长度
但是中间元素的值,相当于没有定义,仍然是undefined
效果
效果
JS可以给数组指定一个字符串 类型的"下标"
此处这个 "下标" 更应该 理解成是"属性",也就是相当于"键值对"
JS数组是一个对象,对象是可以在运行时动态的新增或者删除属性的!!!
class Test{
int num;
}
JS可以在运行时给这个Test类新增一个属性,或者删除 num 属性!!
效果
本质上是在创建一个 hello 属性.
类似的,也可以通过 [ ] 或者 . 的方式都能访问属性!!
使用 push 进行追加元素
效果
删除数组中的元素
使用 splice 方法删除元素
效果
函数
函数(function)就是方法(method),方法就是函数.
如果要去咬文嚼字,
function 指的是一个独立的函数
method 指的是某个类/对象的成员函数
函数语法格式
函数的调用没什么区别,定义这里的区别较大
函数的定义涉及到一个关键字 function 这是 JS中的关键字,表示接下来这是个函数定义.
不必写函数的返回值类型
函数的形参列表只有形参名,没有形参类型
Java中不涉及这个问题(大家都是成员函数)
C语言中有这个问题:函数的定义得在函数调动的上头,如果不是的话,就需要来个函数声明.保证调用的时候编译器知道自己在调用个啥.
正因为函数参数不必写类型,实际传参的时候,传啥类型都行
只要传入的参数能够支持函数体里的逻辑即可.
像JS这种动态类型的语言,不需要"泛型"这样的语法.
动态类型的语言,一般也不需要"多态"这样的机制
多态的本质是,让用户不知道引用实际是啥类型,也能调用里面的方法....是封装的更进一步
这种事对于动态类型语言来说,都是天然就支持的.
知识补充:
啥是多态,多态到底能干啥,多态能解决啥问题.
面试中的常见问题
形如这种比较抽象的问题,回答的方案:举例子!!!
实际遇到的例子!!!
1.集合类
List<String> list = new ArrayList<>()
list.add(.....);
2多线程
继承Thread,重写Runnable,都得提供 run 方法.
JVM 内部调用 父类的 run,执行到用户自己定义的 run
3网络
回显服务器,又进一步的基于回显服务器实现了字典服务器.
重写了 process 方法..
参数个数
在C/Java这样的语言中,要求函数定义时形参的个数好调用实参的个数匹配!!
(变长函数除外,printf(这是通过特殊手段实现的))
但是JS没有这个要求
效果
JS对于实参和形参的个数并没有明确的约束.
也就导致在写函数的时候,就可以灵活应对
效果
正因为JS这里的参数设定非常灵活,因此JS根本不需要"函数重载"
函数表达式
定义一个函数,然后把这个函数赋值给一个变量.
然后就可以使用这个变量来调用这个函数了
定义了一个函数,叫做addFunc
然后把这个函数赋值给了一个变量!
(Java是做不到这一点的,Java中的函数不能独立存在)
JS里面函数是"一等公民"
函数和一个普通的变量类似,可以相互赋值.
还可以作为另一个函数的参数
还可以作为另一个函数的返回值.
赋值之后,就可以完全使用add代替addFunc这个函数名了.
因此就可以把addFunc这个名字给省略掉!
定义了一个匿名(没有函数名)的函数,把这个函数赋值给了另一个变量
此时就可以拿这个变量来进行函数调用了
作用域
JS中的作用域
和Java也差距比较大.
不同的定义变量的方式,有区别
var 定义的变量,没有块级作用域.
let 定义的变量,有块级作用域.(代码块级别的,{ } 限制作用域)
效果
在大括号外面,但是仍能打印,如果把 var 换成 let 就不可以了,就会报错.
作用域链
因为 JS 里面的函数内部还能定义函数.
然后某个函数内尝试使用的变量,就会沿着这个函数定义的嵌套关系,逐渐一直往上找,一直找到最顶层的全局作用域.
结果
执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中 查找. 如果还没找到, 就去全局作用域查找.
对象
早期的JS的“对象”和Java 差别很大
然后从ES6标准开始，逐渐在向 Java 靠拢
在ES6之前，JS中没有“类”这样的概念！！！只有对象！！！
之前的 JS 就觉得每个对象都是一个独立的个体。
即使是有一些关联，这样的关联也通过其他来完成.
也就意味着 JS 中没有"继承",也没有public/private,也没有多态,也没有反射.....
从ES6开始,也引入了class,引入了继承,有了构造方法....但是其他的还是没有.
对象的创建
1. 使用 字面量 创建对象 [常用]
对象定义好了之后,就可以使用对象的属性和方法
1.还是通过 点 进行成员访问操作
2.还可以通过 [ ] 类似于取下标的方式来访问
2. 使用 new Object 创建对象
JS 的对象都可以视为是Object类型
就可以通过new Object 来创建一个object 实例来.
如果需要创建多个"类似"的对象出来.
使用上面的方式就有点麻烦.
就可以搞一个函数,把对象创建的过程,来封装一下.
JavaScript 对象没有 "继承" 继承本质就是 "让两个对象建立关联". 或者说是让一个对象能够重用另一个对象的属性/方法. JavaScript 中使用 "原型" 机制实现类似的效果.
原型机制,相当于 "JS引擎,给JS程序猿留下的一个后门"
类似于,反射机制,也相当于 JVM 给 Java 留下的一个后门
4354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
