JavaScript(基础与流程控制)

一、基础

1、JS的组成

ECMAScript(JavaScript语法)
- ECMAScript规定了JS编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM(页面文档对象模型)
- 通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
BOM(浏览器对象模型)
- 通过BOM可以操作窗口，比如弹出框、控制浏览器跳转、获取分辨率等

2、书写位置

行内
内嵌
外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<!-- 内嵌式  -->
        <script>
        	alert('已点击')
        </script>
	<!-- 外部引入  -->
         <script src="my.js"></script>
</head>
<body>
    <!-- 行内 直接写在元素内部 -->
        <input type="button" value="chick" onclick="alert('已点击')">
</body>
</html>

3、注释

// 单行注释
/* 多行注释 */

4、输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

5、变量

变量是程序在内存中申请的一块用来存放数据的空间

5.1、变量使用

声明变量
赋值

// 声明一个变量名为age的变量
var age;
// 变量赋值为18
age = 18;

// 变量初始化
var myname = '张三';

5.2、更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋值为准

var name = '张三'
console.log(name)	// 张三
name = '李四'
console.log(name)	// 李四

5.3、声明多个变量

// 声明多个变量，只需要一个var，中间英文逗号隔开
var name,age,address,gender;

5.4、声明变量的特殊情况

// 只声明不赋值
var gender;
console.log(gender); // undefined
// 不声明不赋值
console.log(telephone); // 报错
// 不声明直接赋值使用（不提倡）
qq = 110;
console.log(qq); // 110

5.5、命名规范

可包含字母，下划线，数字，$这些可用的字符
不能用数字开头
不能使用关键字和保留字
严格区分大小写
建议变量的命名要有意义
建议使用驼峰命名法

6、数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

6.1、变量的数据类型

JavaScript是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

在代码运行时，变量的数据类型是由JS引擎根据 “等于号(=)”右边的变量值的数据类型来判断的。

JavaScript拥有动态类型，同时意味着相同的变量可用作不同的类型

6.2、数据类型的分类

6.2.1、简单数据类型

复杂数据类型
object

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如"张三"。在JS中字符串都带引号	""
Undefined	var a;声明了变量a，但是没有赋值，此时a = undefined	undefined
Null	var a=null;声明了变量a 为空值	null

数字型

0开头代表八进制，0x开头代表16进制

数值的最大值和最小值

// JS中数值的最大值和最小值
console.log(Number.MAX_VALUE); // 最大值：1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 最小值：5e-324

三个特殊值

console.log(Number.MAX_VALUE * 2);	// Infinity： 无穷大，大于任何数值
console.log(-Number.MAX_VALUE * 2); // -Infinity：无穷小，小于任何数值
console.log('字符串' - 100);		// NaN：Not a number的缩写，代表一个非数值

isNaN()

// 判断一个变量是否是非数字型。是数字，false；不是数字：true
console.log(isNaN(10)); // false
console.log(isNaN('字符串')); // true

字符串型
- 一定要加引号(""或'')，推荐用单引号('')
- 引号嵌套(外双内单或外单内双)
- 转义符(都是以\开头)
  
  转义符解释说明
  
  \n 换行符，n是newline的意思
  
  \\ 斜杠\
  
  \' 单引号
  
  \" 双引号
  
  \t tab 缩进
  
  \b 空格，b 是 blank的意思
- 字符串的长度：'字符串'.length
- 字符串拼接：不管什么类型的数据，和字符串拼接，最终结果总是字符串类型
  - '字符串1' + '字符串2 = '字符串1字符串2'
  - '12' + 12 = '1212'
- 字符串拼接加强
```
var age = 18;
console.log('我今年' + age + '岁')
```

转义符	解释说明
\n	换行符，n是newline的意思
\\	斜杠\
\'	单引号
\"	双引号
\t	tab 缩进
\b	空格，b 是 blank的意思

布尔型

var flag1 = true;
var flag2 = false;
console.log(flag1 + 1);	// 2
console.log(flag2 + 1);	// 1

undefined

var str;
console.log(str); // undefined
console.log(str + '字符串') // undefined字符串
console.log(str + 1) // NaN(不是一个数字)

NULL

var space = null;
console.log(space + '字符串') // null字符串
console.log(space + 1) // 1

6.2.2、typeof

// 判断数据类型
var num = 10;
console.log(typeof num);    // number
var str = '10';
console.log(typeof str);    // string
var flag = true;
console.log(typeof flag);   // boolean
var vari = undefined;
console.log(typeof vari);   // undefined
var timer = null;
console.log(typeof timer);    // object(对象)

// 控制台打印颜色
 number。控制台打印颜色：蓝色
 string。控制台打印颜色：黑色
 boolean。控制台打印颜色：蓝色
 undefined。控制台打印颜色：浅灰色
 null。控制台打印颜色：浅灰色

6.2.3、字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

数字值字面量：8，9，10
字符串字面量：'字符串'
布尔字面量：true、false

6.3、数据类型的转换

把一种数据类型转换为另外一种数据类型

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString())
String()强制转换	转成字符串	var num=1;alert(String(num))
加号"+"拼接(隐式转换)	和字符串拼接结果都是字符串	var num =1;alert(num+'字符串')

转换为数字型

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt('78')
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat('78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换 (- * /)	利用算数运算隐式转换为数值型	'12' - 0

/*  需要注意  */

// parseInt
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('120px')); // 120 去除单位,保留数字
console.log(parseInt('re120px'));   // NaN 不是数字

// parseFloat
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 去除单位,保留数字
console.log(parseFloat('re120px'));   // NaN 不是数字

// (- * /)
console.log('123' - '120') // 3

转换为布尔型

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('字符串')); // true
console.log(Boolean(12));   // true

6.4、扩展

6.4.1、解释性语言与编译型语言

区别
- 翻译时间点不同
- 编译器是在代码执行之前进行编译，生成中间文件
- 解释器是在运行时进行解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

6.4.2、标识符、关键字、保留字

标识符
- 指开发人员为变量、属性、函数、参数取的名字
- 不能是关键字和保留字
关键字
- 指JS本身已经使用的字，不能再用它们充当变量名、方法名
保留字
- 预留的“关键字”。现在不是关键字，将来可能是关键字。

7、运算符

也被成为操作符。实现赋值、比较和执行算数运算等功能的符号

7.1、算数运算符

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

运算符	描述	实例
+	加	10+20=30
-	减	10-20=-10
*	乘	10*20=200
/	除	10/20=0.5
%	取余数(取模)	返回除法的余数9%2=1

console.log(1+1); // 2
console.log(1-1); // 0
console.log(1*1); // 1
console.log(1/1); // 1
// 1 %
console.log(4%2); // 0
console.log(5%3); // 2
console.log(3%5); // 3
// 2 浮点数 算数运算可能存在问题 最好避免直接小数运算
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001
// 3 不要直接判断两个浮点数是否相等
var num = 0.1 + 0.2
console.log(num == 0.3) // false

补充
- 取余(%)的主要用途是判断一个数是否可以被整除。根据余数是0判断
- 运算符优先级，先乘除，后加减，有小括号先算小括号里边的
表达式
- 由数字、运算符、变量等组成的式子 1 + 1
返回值
- 2 = 1 + 1 中的2就是返回值

7.2、递增和递减运算符

如果需要反复给数字变量添加或者减去1，可以使用递增(++)或递减(--)运算符来完成。

在JS中，递增和递减运算符可以放在变量前边，也可以放在变量后边。

放在变量前边时，称为前置递增(递减)运算符

放在变量后边时，称为后置递增(递减)运算符

注意：递增和递减运算符必须和变量配合使用

// 前置递增运算符
var age = 10;
++age; // 类似 age = age + 1
// 先自加1 后返回值
var p =10;
console.log(++p + 10) // 21

// 后置递增运算符
var age = 10;
age++; // 类似 age = age + 1
// 先返回原值  再加1
var p = 10;
console.log(p++ + 10) // 20
console.log(p) // 11

前置与后置运算符的区别
- 单独使用，没有区别
- 前置，先自加1 后返回值(先己后人)
- 后置，先返回原值再加1(先人后己)

练习

var a = 10;
++a; // ++a=11 a=11
var b = ++a + 2; // ++a=12
console.log(b); // 14

var c = 10;
c++; // c++=10 c=11
var d = c++ + 2 // c++=11 c=12
console.log(d); // 13

var e = 10;
var f = e++ + ++e; // e++=11 e=11; ++e=11 e=12
console.log(f); // 22

7.2、比较运算符

也叫关系运算符。是两个数据进行比较时所使用的运算符，比较运算后，返回一个布尔值作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号	2>=2	true
<=	小于等于号	3<=2	false
==	判等号(会转型)	37 == '37'	true
!=	不等号	37 != 37	false
===	全等号 (要求值和数据类型都一致)	37 === '37'	false
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	5 !== '5'	true

7.3、逻辑运算符

用来进行布尔值运算的运算符，其返回值也是布尔值。

逻辑运算符	说明	案例	结果
&&	”逻辑与“，简称”与“ and	true && false	false
\|\|	”逻辑或“，简称”或“ or	true \|\| false	true
!	”逻辑非“，简称”非“ not	!true	false

短路运算(逻辑中断)

当有多个表达式(值)时，左边的表达式值可以确定结果是，就不再继续运算右边的表达式的值

// 逻辑与
// 如果左表达式为true，则返回右表达式
console.log(123 && 456) // 456
// 如果左表达式为false，则返回左表达式
console.log(0 && 456) // 0
console.log(0 && 456 && 567) // 0

// 逻辑或
// 如果左表达式为true，则返回左表达式
console.log(123 || 456) // 123
// 如果左表达式为false，则返回右表达式
console.log(0 || 456) // 456
console.log(0 || 456 || 789) // 456
// 代码应用
var num = 0;
console.log(123 || num++); // 123
console.log(num); // 0。因为在(123 || num++)时，逻辑或短路，num++并未执行

7.4、赋值运算符

用来把数据赋值给变量的运算符

赋值运算符	说明	案例
=	直接赋值	var age =18
+=、-=	加、减一个数后再赋值	var age=10;age+=5;// 15
*=、/=、%=	乘、除、取模后再赋值	var age=2;age*=5;// 10

7.5、运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ == !
3	算术运算符	先* / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

二、流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

1、顺序结构

程序会按代码的先后顺序，依次执行

2、分支结构

由上到下执行代码过程中，根据不同的条件，执行不同的代码，得到不同的结果

2.1、if

// if
// 如果条件表达式结果为真，执行{}中语句
// 如果条件表达式结果为假，执行if语句后边的代码
if(条件表达式){
    // 执行语句
}

// if else
// 如果条件表达式结果为真，执行{执行语句1}
// 如果条件表达式结果为假，执行{执行语句2}
if(条件表达式){
    // 执行语句1
}else{
    // 执行语句2
}

// if else if
// 如果{条件表达式1}结果为真，执行{执行语句1}
// 如果{条件表达式2}结果为真，执行{执行语句2}
// 如果{条件表达式1，条件表达式2}结果都为假，执行{其他语句}
if(条件表达式1){
    // 执行语句1
}else if(条件表达式2){
    // 执行语句2
}else{
    // 其他语句
}

2.2、switch

// 基于不同的条件来执行不同的代码。当针对变量设置一系列的特定值的选项时，就可以用switch。

// 语法结构
switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ...
    default:
        执行最后语句
}

// 如果{ 表达式 匹配 value1 },执行{执行语句1}
// 如果{ 表达式 匹配 value2 },执行{执行语句2}
// 如果{ 表达式 均为匹配 },执行default中代码{执行最后语句}

var num = 2;
switch(num){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2); // 执行。打印2
        break;
    case 3:
        console.log(3);
        break;
    default:
        console.log('没有匹配结果');
}

匹配指的是值和数据类型全相等。(===)
如果没有break，不会退出循环。会继续依次向下执行，直到运行到default或遇到break

2.3、三元表达式

// 语法结构
// 条件表达式 ? 表达式1 : 表达式2
// 如果{条件表达式}为真，返回{表达式1}的值
// 如果{条件表达式}为假，返回{表达式2}的值
console.log(2 > 1 ? true : false) // true
console.log(2 < 1 ? true : false) // false

2.4、if与switch区别

一般情况下，两个语句可以相互替换
if else范围判断，更加灵活。switch case 处理比较确定的值
switch语句进行条件判断后直接执行到程序的条件语句，效率更高。if else有几种条件，就判断多少次
当分支较少时，if...else语句的执行效率比switch语句高

3、循环结构

目的是重复执行某些语句。

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，却决于循环的终止条件。

由循环体和循环的终止条件组成的语句，称之为循环语句

3.1、for循环

// 重复执行某些代码 通常跟计数有关系
for(初始化变量;条件表达式;操作表达式){
    // 循环体
}
// 初始化变量：就是var声明的普通变量，通常用于用作计数器
// 条件表达式：决定每一次循环是否继续执行，就是终止条件
// 操作表达式：每次循环最后执行的代码 经常用于计数器变量进行更新(递增或递减)

// ----------------------------------------------------------------

for(var i=1;i<=100;i++){
    console.log(i)
}

// 首先执行计数器变量 var i = 1 (for循环中只执行一次)
// 其次执行条件表达式 i<=100 满足条件(1<=100 = true)；不满足则退出
// 最后执行i++(此时i=2)
// 第二轮开始执行条件表达式，直到条件表达式不满足条件为止

3.2、while循环

while(条件表达式){
    // 循环体
}

// 当条件表达式结果为true,则执行循环体；否则退出循环

// -----------------------------------------

var num = 1;
while(num <= 100){
    console.log(num);
    num++;
}

3.3、do while循环

do {
    // 循环体
} while(条件表达式)
    
// 先执行一次循环体，再判断条件
// 如果条件表达式为true，则继续执行循环体
// 如果条件表达式为false，则退出循环
    
// -----------------------------------
    
var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 100)

3.4、断点调试

浏览器开发者工具(F12) -- Sources -- 找到对应JS文件 -- 点击想要断点的行号 -- F11下一步

3.5、continue

用于立即跳出本次循环，继续下一次循环（本次循环中continue后的代码少执行一次）

3.6、break

立即跳出整个循环(循环结束)

该内容学习自传智播客JavaScript基础课程 javaScript零基础通关必备教程

posted @ 2020-08-18 21:40 Lucky丶zhu 阅读(98) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Lucky丶zhu