本篇博客学习JS的主要内容分为三大块
- ES(语法核心)
- DOM文档对象模型
浏览器上每个 HTML 元素(标签)都在JS中对应到一个对象，通过使用JS操作这个对象，就可以达到控制页面的效果
- BOM浏览器对象模型
浏览器也在JS中提供了一些对象，通过这些对象就可以控制浏览器的一些行为。例如：刷新页面，控制浏览器窗口大小，前进，后退，右键菜单等
1.JavaScript 的书写形式
1.行内式
<body>
<script>
alert("Hello");
</script>
</body>
2.内嵌式
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 演示</title>
<script>
alert("Hello");
</script>
</head>
3.外部式
<script src="./style.js"></script>
2.注释
HTML注释：
CSS注释：/* 注释不能被嵌套 /
JS注释：// 单行注释，无法嵌套使用；/ 多行注释：无法嵌套使用 */
3.输入prompt
输入的数据会被看为一个字符串，如果想获取数值型数据则需要进行对应的数据转换
4.变量的使用
和java变量名规则一样【换句话说遵守编程语言的命名规则】
<script>
var name="xx";
var name="yy"
let pass="123";
let pass="456";
console.log(name);
console.log(pass);
</script>
如果用 var 来定义变量名，则无需考虑重复问题
如果用 let 来定义变量名，如果有重复变量名则会在控制台报错
后面的代码中尽量使用 let 来定义使用变量名【背后原理是var和let在不同环境下定义的变量不同，不需要深究，主要是全局变量和局部变量之间导致的问题】
js中的数据时动态类型：变量的类型可以在程序运行的时候确定
java的变量是静态类型：变量的类型在程序运行过程中不能改变
5.基本数据类型
- number: 数字. 不区分整数和小数.【JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示】
- boolean: true 真, false 假.
- string: 字符串类型.
- undefined: 只有唯一的值 undefined. 表示未定义的值. null: 只有唯一的值 - null. 表示空值.
数字的进制表示和普遍的二进制，八进制，十进制，十六进制表示的方式是一样的
特殊的数字值：
- Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
- Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
- NaN: 表示当前的结果不是一个数字.
<script>
var max = Number.MAX_VALUE;
// 得到 Infinity：得到最大值
console.log(max * 2);
// 得到 -Infinity：类似于C语言中char类型-128～127之间循环那样，超过最大值就是负值
console.log(-max * 2);
// 得到 NaN：
console.log('hehe' - 10);
</script>
- 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为1/Infinity
- ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
- 可以使用 isNaN 函数判定是不是一个非数字.
1.string 字符串类型
1.基本规则
和Java不同的是，单引号和双引号都代表字符串
如果字符串中本来已经包含引号咋办?
可以使用 ‘\’ 进行转义或者正确搭配但双引号即可实现但双引号的输出
2.转义字符
常用的转义字符：\n, \, ', ", \t
3.求长度
和java中的String对象蕾丝
<script>
var a = 'hehe';
console.log(a.length);
var b = '哈哈';
console.log(b.length);
</script>
字母和汉字被当作一个字符对待
4.拼接
使用 + 进行拼接
注意, 数字和字符串也可以进行拼接
2.boolean类型
在进行数值运算的时候
true会被认为1；false会被认为0
我们也就认为js是一种弱类型语言
一个语言越支持类型转换，类型就越弱
一个语言越不支持类型转换，类型就越强
3.undefined 未定义数据类型
<script>
var a;
console.log("haha"+10);
console.log(a+10);
</script>
由于 a 是 undefined所以会是 NaN
4.null 空值类型
<script>
var b = null;
console.log(b + 10);// 10
console.log(b + "10"); // null10
</script>
注意
null：表示盒子里只是没有值，但盒子还在
undefined：表示连盒子都没有
一些特殊地方：
条件不一定是 boolean 类型也可以是其它类型
number 类型来说，非0表示真，0表示假
string类型，""为假，非空字符串表示真
null和undefined都表示假
6.运算符
运算符和java大致一样
| 名称 | 内容 |
|---|---|
| 算术运算符 | +, -, *, /, % |
| 赋值运算符 & 复合赋值运算符 | =, +=, -=, *=, /=, %= |
| 自增自减运算符 | ++, – |
| 比较运算符 | <, <=, ==(先隐式转换在比较), !=, >, >=, ===(直接比较，不进行隐式转换), !==(和===类似) |
| 逻辑运算符 | &&, ||, ! |
| 位运算 | ~, &, |, ^ |
| 移位运算 | <<, >>(算术右移), >>>(逻辑右移) |
注意1：
Java中比较两个字符串相等，使用 equals比较，直接使用 ==比较的是两个String的引用，而不是String的内容
绝大部分编程语言可以使用 “==” 来比较字符串相等。但是Java和C列外
==：比较的是身份
equals：比较的是值
注意2:
a&&b
如果 a 的值为真(非0)，表达式的值就是b的值
如果 a 的值为假，表达式的值就是a的值
a||b
如果 a 的值为真(非0)，表达式的值就是a的值
如果 a 的值为假，表达式的值就是b的值
x == x||0
这段代码就是万一 x 值为 null 或者 undefined 则设为 0
注意3:
算数右移补0
逻辑右移补符号位
7.数组
for, while, if, switch, break, continue, 三元运算…这些老生常谈的知识万古不变，因此这里跳过直接来到数组
1.创建数组
<script>
function f(){}
let arr=new Array();// 不常用
let arr1=[1,2,'a','b',false, undefined, null, f];
console.log(arr1);
</script>
- JS数组并非存储同一类型的数据，而是可以存储多种类型数据
- JS数组主要有两个用途：取下表；求长度
2.获取数组元素
其它语言取下标是左闭右闭区间：[0,len-1]，越界之后程序报错
JS区间：[0, x]，越界之后访问的元素都是undifened
4.新增数组元素
JS的数组，本质上是一个JS中的对象。具有一个这样的特点（动态类型语言都有类似的特点）：一个对象可以在运行过程中动态的新增属性，删除属性
1.通过增加length进行添加
<script>
var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);
</script>
2.通过下标新增
<script>
let obj={};
obj.a=10;//新增一个属性a，且同时设置属性a为10
obj.b=20;
// 等价写作【实际中一般很少这么用】
obj["c"]=30;
obj["d"]=40;
//输出：{a: 10, b: 20, c: 30, d: 40}
console.log(obj);
</script>
类似于Java中的HashMap
3.通过push进行追加元素
<script>
let arr=[];
arr.push(1);
arr.push(3);
arr.push(5);
arr.push(7);
</script>
4.删除数组中的元素
<script>
let arr=[];
arr.push(1);
arr.push(3);
arr.push(5);
arr.push(7);
arr.splice(2,1);
</script>
splice(起始位置, 删除元素个数)
5.数组遍历
<script>
var arr = [9, 5, 2, 7];
//1
for(let i=0; i<arr.length; ++i){
console.log(arr[i]);
}
//2 for in
for(let i in arr){
console.log(i);
}
//3 for of
for(let i of arr){
console.log(i);
}
</script>
8.函数
范型：本身兼容多种数据类型，因此不需要java那样设置范型
重载：由于兼容多种形参数据类型和个数，因此也不需要实现java重载
1.关于参数个数
<script>
function f(x,y){
console.log(x);
console.log(y);
}
f("Hello");
f("Hello", "World", "Ok");
</script>
JS中形参和实参个数可以不对应
实参少了，多余的形参就是undefined；实参多了，就没了
2.函数表达式
<script>
//function 后边没有名称，是个匿名函数
let add=function(x,y){
return x+y;
}
console.log(add(10,"11"));
</script>
- 函数可以像一个变量一样赋值
- 可以让函数作为另一个函数的参数
- 可以让函数作为另一个函数的返回值
3.作用域
JS中变量的作用域是一级一级往上找，也是可以找到外面的变量
Java里面，内部类的语法，内部类里面的代码也是可以访问外部累的属性的。
9.对象
1.使用 字面量 创建对象 [常用]
<script>
let student = {
name: "张三",
age: 20,
height: 180,
weight: 140,
sayHello: function () {
console.log("Hello");
}
};
console.log(student.name);
student.sayHello();
</script>
2.使用 new Object 创建对象
<script>
function Cat(name, type){
this.name=name;
this.type=type;
this.miao=function(){
console.log("喵");
}
}
let cat1=new Cat("咪咪", "中华田园猫");
console.log(cat1);
</script>
JS中使用构造函数作为对象模版
- 使用this关键字来设置属性
- 函数没有返回值
- 函数可以有参数
3.理解 new 关键字
new 的执行过程:
- 先在内存中创建一个空的对象 { }
- this 指向刚才的空对象(将上一步的对象作为 this 的上下文) 3. 执行构造函数的代码, 给对象创建属性和方法
- 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)
4.JavaScript 的对象和 Java 的对象的区别
-
JavaScript 没有 “类” 的概念
对象其实就是 “属性” + “方法” . 类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子” 在 JavaScript 中的 “构造函数” 也能起到类似的效果.而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象
在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.
-
JavaScript 对象不区分 “属性” 和 “方法”
JavaScript 中的函数是 “一等公民”, 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行. -
JavaScript 对象没有 private / public 等访问控制机制.
对象中的属性都可以被外界随意访问. -
JavaScript 对象没有 “继承”
-
JavaScript 没有 “多态”
JS语法本生就支持动态类型，在使用对象的某个方法的时候本身也不需要对对象的类型做出明确区分. 因此并不需要在语法层面上支持多态.
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
