JavaScript(基础语法)
- JavaScript的组成
- 输入输出
- JS的基础语法
-
- 变量
- 动态类型
- 基本数据类型
-
- number 数字类型
- String 字符串类型
- boolean 布尔类型
- undefined 未定义的数据类型
- null 空值类型
- 运算符
-
- 算数运算符
- 赋值运算符 & 复合赋值运算符
- 自增自减运算符
- 比较运算符
- 逻辑运算符
- 位运算
- 移位运算
- 条件语句
-
- if 语句
- 三元表达式
- switch
- 循环语句
-
- while循环
-
- continue
- break
- for 循环
- 数组
-
- 创建数组
- 获取数组元素
- 新增数组元素
-
- 通过修改 length 新增
- 通过下标新增
- 使用 push 进行追加元素
- 删除数组中的元素
- 函数
-
- 语法格式
- 函数表达式
- 作用域
- 作用域链
- 对象
-
- 使用字面量创建对象 {}
- 使用 new Object 创建对象
- 使用 构造函数 创建对象
首先,搞清楚一点,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>
使用字面量方式创建(常用)
<script>
var arr = [];
var arr2 = [1,2,'hello',true,'哈哈'];
console.log(arr);
console.log(arr2);
script>
注意
JS的数组不要求元素是相同的类型…
获取数组元素
使用下标的方法访问数组元素(下标从0开始)
<script>
var arr = [1,2,'hello',true,'哈哈'];
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[4]);
arr[0] = 0;
console.log(arr); //打印数组
script>
注意:如果下标超出范围读取元素,则结果为undefined…
<script>
var arr = [1,2,'hello',true,'哈哈'];
console.log(arr[5]);
console.log(arr[-1]);
script>
注意:不要给数组名直接赋值, 此时数组中的所有元素都没了
<script>
var arr = [1,2,3,4,5];
console.log(arr);
arr = 100;
console.log(arr);
script>
相当于本来 arr 是一个数组, 重新赋值后变成数字了
新增数组元素
通过修改 length 新增
<script>
var arr = [9, 5, 2, 7];
console.log(arr);
arr.length = 10;
console.log(arr);
console.log(arr[4], arr[5]);
script>
空属性就是,中间元素任然是 undefined
通过下标新增
<script>
var arr = [];
arr[2] = 10;
console.log(arr);
script>
此时这个数组的 [0] 和 [1] 都是 undefined
注意下面这样的操作
<script>
var arr = [1,2,3,4,5];
arr[-1] = 10;
console.log(arr);
console.log(arr.length);
script>
此时这里的 -1 就不算是下标了,更像是一个"属性",并没有影响到数组的长度
<script>
var arr = [1,2,3,4,5];
arr['hello'] = 10;
console.log(arr);
console.log(arr['hello']);
console.log(arr.length);
script>
JS中的数组,不是一个正经的数组,他除了能接数组的活,还能接 map的活(键值对),就像是一个"对象",在JS中,可以在运行时,给对象新增属性
arr[‘hello’] 就是在给 arr 这个对象,新增了一个属性,属性的名字是 hello,属性的值是 10…
使用 push 进行追加元素
<scipt>
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
script>
删除数组中的元素
使用 splice 方法删除元素
<script>
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
script>
函数
语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值
函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次
<script>
function add(x,y){
return x + y;
}
let res = add(10,20);
console.log(res);
res = add('hello,','world');
console.log(res);
res = add('hello',20);
console.log(res);
script>
传入的实参类型是可以任意的,只要能够支持函数内部的逻辑,函数参数的个数,一般在写代码的时候,都是需要调用的时候传入的实参,个数和形参匹配,但是,JS并没有在语法上做出这样的限制,如果实参和形参个数不一样,也不是完全不行…
<script>
function add(a,b,c,d,e){
return a + b + c + d + e;
}
var res = add(10,20);
console.log(res);
res = add(10,20,30);
console.log(res);
res = add(10,20,30,40);
console.log(res);
script>
上面没被传参传到的形参,就是undefined,所以最后返回的就是 数字+undefined,结果就是NaN
想要得到想要的结果,我们需要加一些约束条件:
<script>
function add(a,b,c,d,e){
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
return a + b + c + d + e;
}
var res = add(10,20);
console.log(res);
res = add(10,20,30);
console.log(res);
res = add(10,20,30,40);
console.log(res);
script>
body>
这样写,就不会出错了,但是实际开发中不推荐,因为太"灵活了",如果哪出错了,你都不一定发现得了…
函数表达式
在 JS 中,函数就是 “一等功民”(函数,就像一个普通变量一样,可以被赋值给其他变量,也可以作为另一个函数的参数,还可以作为另一个函数的返回值…相比于普通变量多了一个功能,可以被调用)
所谓的函数表达式,就是把一个函数赋值给一个变量:
<script>
function hello(){
console.log("hello");
}
let f = hello;
f();
script>
hello是一个函数名,hello后面没有(),说明这个操作,不是函数调用,而是一个单纯的函数赋值,f 就是function类型的变量)
还可以合并一下:
<script>
let f = function hello(){
console.log("hello");
}
f();
console.log(typeof(f));
script>
在进一步,就可以把hello给省略了,此时就可以完全依赖 f 来找到该函数:
<script>
let f = function (){
console.log("hello world!");
}
f();
console.log(typeof(f));
script>
作用域
某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个
全局作用域:在整个 script 标签中, 或者单独的 js 文件中生效.
局部作用域/函数作用域:在函数内部生效.
<script>
let ret = 10;
function hello2(){
function hello(){
console.log(ret);
}
hello();
}
hello2();
script>
JS中的作用域,是支持
"逐级向上"查找的,当前在 hello 函数里,尝试打印 ret,但是在里面没找到 ret 变量,就往上找,到了 hello2 这里,也没找到 ret 变量,于是在往上找,找到了全局作用域,找到了(如果全局都没找到,就报错了)
作用域链
背景:
函数可以定义在函数内部.
内层函数可以访问外层函数的局部变量.
内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.
<script>
let ret = 10;
function hello2(){
let ret = 20;
function hello(){
console.log(ret);
}
hello();
}
hello2();
script>
存在多个同名的变量,从内到外,先找到谁就是谁…
对象
就是一些属性和方法的集合,在JS中,对象是不依托于类的,在JS中所有对象,都是一个类型…Object…
使用字面量创建对象 {}
<script>
let animal = {
name: "金毛",
age: 2,
height: 50,
weight: 100,
eat: function(){
console.log("吃鸡肉");
},
run: function(){
console.log("跑步");
},
};
console.log(animal.name);
console.log(animal.age);
animal.eat();
animal.run();
script>
每个属性和方法,其实都是通过
"键值对"这样的方式来表达的…
{} 表示这是个对象…
键值对之间,使用,来分割…
键和值之间,使用:来分割…
使用 new Object 创建对象
<script>
var student = new Object(); // 和创建数组类似
student.name = "孙悟空";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
script>
注意,使用 { } 创建的对象也可以随时使用 student.name = “孙悟空”; 这样的方式来新增属性.
使用 构造函数 创建对象
前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.
function 构造函数名(形参) {
this.属性 = 值;
this.方法 = function...
}
var obj = new 构造函数名(实参);
注意:
在构造函数内部使用 this 关键字来表示当前正在构建的对象…
构造函数的函数名首字母一般是大写的…
构造函数的函数名可以是名词…
构造函数不需要 return…
创建对象的时候必须使用 new 关键字…
this 相当于 “我”…
<script>
function Dog(name, color, action) {
this.name = name;
this.color = color;
this.f = function () {
console.log(action);
}
}
var dog1 = new Dog("xiaohei","black","run");
var dog2 = new Dog("xiaobai","white","swim");
var dog3 = new Dog("xiaofen","pink","sleep");
console.log(dog2);
dog2.f();
console.log(dog1);
dog1.f();
console.log(dog3);
dog3.f();
script>
