目录
5.5.2 switch 语句 和 if else if 语句的区别
9.5.4 函数没有 return 返回 undefined
9.5.5 break, continue,return 的区别
10.1.2 作用域(es6之前)有全局作用域和局部作用域(函数作用域)
13.6.7 toUpperCase() 和 toLowerCase()
计算机基础
bit < byte < kb < GB < TB
- 位(bit):1bit 可以保存一个 0 或者 1 (最小的存储单位)。
- 字节(Byte):1B = 8b
- 千字节(KB):1KB = 1024B
- 兆字节(MB):1MB = 1024KB
- 吉字节(GB):1GB = 1024MB
- 太字节(TB):1TB = 1024GB
一、初识 JavaScript
1.1 初识 JavaScript
1.1.1 JavaScript历史
- 布兰登·艾奇(Brendan Eich)
- 1995年10天完成JavaScript设计
- 网景公司最初命名为 LiveScript,后来与Sun合作之后,将其改名为 JavaScript
1.1.2 JavaScript 是什么?
- JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script 是脚本的意思)
- 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行。
- 现在也可以基于 Node.js 技术进行服务器端编程。
1.1.3 JavaScript 的作用
- 表单动态校验(密码强度检测)(JS产生最初的目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.1.4 HTML/CSS/JS 的关系
HTML/CSS 标记语言--描述类语言
- HTML决定网页结构和内容(决定看到什么)
- CSS决定网页呈现给用户的模样(决定好看不好看)
JS 脚本语言-- 编程类语言
- 实现业务逻辑和页面控件(决定功能)
1.1.5 浏览器执行js简介
浏览器分为两部分:渲染引擎和JS引擎
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome浏览器的blink,老版本的webkit
- JSy引擎:也称为JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如:chrome 浏览器的v8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
1.1.6 JS的组成
ECMAScript(JavaScript语法) DOM(页面文档对象模型) BOM(浏览器对象模型)
1.ECMAScript
ECMAScript 是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript :ECMAScript 规定了JS编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
2.DOM--文档对象模型
文档对象模型(Document Object Model),是W3组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上各种元素进行操作(大小、位置、颜色等)。
3.BOM -- 浏览器对象模型
BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口、比如弹出窗、控制浏览器跳转、获取分辨率等。
1.1.7 JS初体验
JS有3种书写位置,分别为行内、内嵌和外部。
1.行内式
<input type="button" value="点我试试" οnclick="alert('hello world')">
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
- 可读性差,在html中编写JS大量代码时,不方便阅读
- 引号易错,引号多层嵌套匹配时,非常容易弄混
- 特殊情况下使用
2. 内嵌 JS
<script>
alert('hello world');
</script>
- 可以将多行JS代码写到<script>标签中
- 内嵌JS是学习时常用的方式
3.外部JS文件
<script src="./01.js"></script>
- 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于JS代码量比较大的情况
1.2 JavaScript 注释
1.单行注释; // ctrl + /
2.多行注释; /* */ ctrl + shift + /
1.3 JavaScript输入输出语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Math</title> </head> <body> <script> console.log(Math.PI); // 3.141592653589793 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max(1, 99, 'pink')); // NaN console.log(Math.max()); // -Infinity
// 1.绝对值方法 console.log(Math.abs(1)); // 1 console.log(Math.abs(-1)); // 1 console.log(Math.abs('-1')); // -1 隐式转换 会把字符串 -1 转为数字型 console.log(Math.abs('pink')); // NaN // 2.三个取整方式 // (1) Math.floor() 地板 向下取整 console.log(Math.floor(1.1)); //1 console.log(Math.floor(1.9)); //1 console.log(Math.floor(-1.9)); //-2 // (2) Math.ceil(); 天花版 向上取整 console.log(Math.ceil(1.1)); //2 console.log(Math.ceil(1.9)); //2 console.log(Math.ceil(-1.9)); //-1 // (3)Math.round(); 四舍五入 .5是往大了取 console.log(Math.round(1.1)); //1 console.log(Math.round(1.5)); //2 console.log(Math.round(1.9)); //2 console.log(Math.round(-1.1)); //-1 console.log(Math.round(-1.5)); //-1 console.log(Math.round(-1.9)); //-2 // 1.Math对象随机数方法 random() 返回一个随机的小数 0 <= x < 1 // 2.这个方法里面不跟参数 // 3.代码验证 console.log(Math.random()); // 4.想要得到两个数之间的随机整数 并且 包含这2个整数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var random = getRandom(1, 10); console.log(random) while (true) { var num = prompt('你来猜?输入1~10之间的一个数字'); if (num < random) { console.log('猜小了'); } else if (num > random) { console.log('猜大了'); } else { console.log("猜对了"); break;// 退出整个循环结束程序 } } </script> </body> </html> |
||
二、变量
2.1 变量的概述
2.1.2 什么是变量
白话:变量就是一个装东西的盒子。
通俗:变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。
2.1.2 变量在内存中的存储
本质:变量是程序在内存中申请的一块用来存放数据的空间。
2.2 变量的使用
变量在使用时分为两步:1.声明变量; 2.赋值
2.2.1 声明变量
// 声明变量
var age; // 声明一个名称为age的变量
- var 是一个 JS 关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计计算机会自动为变量分配内存空间,不需要程序员管。
- age 是程序员定义的变量名,要通过变量名来访问内存中分配的空间。
2.2.2 赋值
age = 10; // 给 age 这个变量赋值为 10
- = 用来把右边的值赋给左边的变量空间中,此处代表赋值的意思
- 变量值是程序员保存变量空间的值
2.2.3 变量的初始化
var age = 10; // 声明变量同时赋值为 18
声明一个变量并赋值,称之为变量的初始化。
2.3 变量语法扩展
2.3.1 更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
var age = 18;
age = 81; // 最后的结果就是81,因为18被覆盖了
2.3.2 同时声明多个变量
同时声明多个变量时,只需要写一个 var,多个变量名之间使用英文逗号隔开。
var age = 10, name = 'll', sex = 2;
2.3.3 声明变量特殊情况
情况 | 说明 | 结果 |
var age; console.log(age); | 只声明,不赋值 | undefined |
console.log(age); | 不声明,不赋值 直接使用 | 报错 |
age = 10; console.log(age); | 不声明 只赋值 | 10 |
2.4 变量的命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成,如:usrAge,num01,_name。
- 严格区分大小写。 var app; 和 var App; 是两个变量。
- 不能 以数字开头。 18age 是错误的。
- 不能 是关键字、保留字。 例如:var 、for、 while。
- 变量名必须有意义。MMD、BBD 不懂啥意思。
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
- 翻译网站: 有道、爱词霸。
关键字、保留字整理地址:CSDN
三、数据类型
3.1 数据类型简介
3.1.1 为什么需要数据类型
在计算机中,不同的数据所占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分里用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如姓名 "张三",年龄18,这些数据的类型是不一样的。
3.1.2 变量的数据类型
变量是用来存储值的所在处,他们有名字和数据类型。变量的数据类型决定了如何将代表这些的值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说是动态语言,这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
var age = 10; // 这是一个数字型
var areYouOK= "是的"; // 这是一个字符串型
在代码运行时,变量的数据类型是由JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后,变量就确定了数据类型。
JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型;
var x = 6; // x为数字
var x = "Bill"; // x为字符串
3.1.3 数据类型的分类
JS把数据类型分为两类:
- 简单数据类型:(Number、String、Boolean、Undefined、Null、Symbol【ES6新增】、bigint【ES11新增】)
- 复杂数据类型:(object)
3.2 简单数据类型
3.2.1 简单数据类型(基本数据类型)
JavaScript 中的简单数据类型及其说明如下:
简单数据类型 | 说明 | 默认值 |
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 |
symbol | 类似于字符串的数据类型,表示独一无二的值。 | |
bigint | 123n |
3.2.2 数字型 Number
JavaScript 数字型既可以用来保存整数值,也可以保存小数(浮点数)。
var age = 21; // 整数
var Age = 21.3747; //小数
1.数字型进制
最常见的进制有 二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围: 0 ~ 7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num2 = 08; // 对应十进制的8
// 2.十六进制数字序列范围:0~9以及A~F
var num = 0xA; // 对应十进制的10
在JS中八进制前面加0,十六进制前面加 0x
2.数字型范围
JavaScript 中数值最大和最小值。
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
- 最大值:Number.MAX_VALUE,这个值为:1.7976931348623157e+308
- 最小值: Number.MIN_VALUE,这个值为:5e-324
3.数字型三个特殊值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
- Infinity,代表无穷大,大于任何数值
- -Infinity,代表无穷小,小于任何数值
- NaN,Not a number,代表一个非数值
4. isNaN()
用来判断一个变量是否为非数字的类型,返回 true 或者 false 。
isNaN(x) x 是数字,返回false;x不是数字,返回true。
var usrAge = 21;
var isOk = isNaN(usrAge);
console.log(isOk); //false,21不是一个非数字
var usrName = 'andy';
console.log(isNaN(usrName)); //true,'andy'是一个非数字
3.2.3 字符串型 String
1.语法
字符串可以是引号中的任意文本,其语法为双引号"" 和 单引号''
var strMsg = "hello"; // 使用双引号表示字符串
var strMsg2 = "world"; // 使用单引号表示字符串
var strMsg2 = helloWorld; // 报错,没使用引号,会被认为是js代码,但js没有这些语法
因为HTML标签里面的属性使用的是双引号,JS更推荐使用单引号。
2. 字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符 | 解释说明 |
\n | 换行符,n 是 newline 的意思 |
\\ | 斜杠 \ |
\' | ' 单引号 |
\" | " 双引号 |
\t | tab 缩进 |
\b | 空格,b 是 blank 的意思 |
3. 字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
var strMsg = "hello world";
alert(strMsg.length); // 显示11
4. 字符串拼接
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把字符串相加的任何类型转成字符串,在拼接成一个新的字符串
// 1.1 字符串 "相加"
console.log('hello' + ' ' + 'world'); // hello world
// 1.2 数值字符串 "相加"
console.log('100' + '100'); // 100100
// 1.3 数值字符串 + 数值
console.log('11' + 12); // 1112
5. 字符串拼接加强
- 经常将字符串和变量来拼接,因为变量可以很方便地修改里面的值。
- 变量是不能添加引号的,因为加引号的变量会变成字符串。
- 如果变量两侧都有字符串拼接,口诀“引引加加”,删除数字,变量写加中间。
3.2.4 布尔型 Boolean
布尔类型有两个值: true 和 false,其中 true 表示真(对),而false表示假(错)。
布尔型和数字型相加的时候,true的值为1,false的值为0
3.2.5 Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined(如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一个声明变量给 null 值,里面存的值为空(学习对象时,继续研究null)
var vari = null;
console.log('你好' + vari); //你好null
console.log(11 + vari); //11
console.log(true + vari); //1
3.3 获取变量数据类型
3.3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
var num = 10;
console.log(typeof num); //number
var str = 'pink';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined;
console.log(typeof vari); //undefined
var time = null;
console.log(typeof time); //object
3.3.2 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8,9
- 字符串字面量:'ddd'
- 布尔值字面量:true、false
3.4 数据类型转换
3.4.1 什么是数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来讲,就是把一种数据类型的变量转换成另外一种数据类型。
通常会实现3种方式的转换:
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
3.4.2 转换为字符串
方式 | 说明 | 案例 |
toString() | 转成字符串 | var num = 1; console.log(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; console,log(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; console.log('ll' + num); |
- toString() 和 String() 使用方式不一样
- 三种转换方式,更喜欢使用第三种加号拼接字符串转换方式,这一种也称之为隐式转换。
3.4.3 转换为数字型(重点)
方式 | 说明 | 案例 |
parseInt(string) 函数 | 将string类型转成整数数值型 | parseInt('78') |
parseFloat(string) 函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
Number() 强制转换函数 | 将string类型转换为数值型 | Number() |
js隐式转换 (- * /) | 利用算术运算隐式转换为数值型 | '12' - 0 |
- 注意:parseInt 和 parseFloat 单词的大小写,这两个是重点。
- 隐式转换是在进行算术运算的时候,JS自动转换了数据类型。
3.4.4 转换为布尔型
方式 | 说明 | 案例 |
Boolean() 函数 | 其他类型转换成布尔型 | Boolean('true'); |
- 代表空、否定的值会被转换为 false, 如:''、0、NaN、bull、undefined
- 其余值都会被转为 true
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
3.5 标识符、关键字、保留字
3.5.1 标识符
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
3.5.2 关键字
关键字:是指JS本身已经使用了的字,不能在用它们充当变量、方法名。
3.5.3 保留字
保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。
四、JavaScript 运算符
4.1 运算符
4.1.1 运算符
运算符(operator)也被称为 操作符,是用于实现赋值、比较和执行算术运算等功能的符号
JavaScript中常用的运算符有:
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
4.2 算术运算符
4.2.1 算术运算符
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
运算符 | 描述 | 实例 |
+ | 加 | 10+20=30 |
- | 减 | 10-20=-10 |
* | 乘 | 10*20=200 |
/ | 除 | 10/20=0.5 |
% | 取余数(取值) | 返回除法的余数 9%1=1 |
4.2.2 浮点数的精度问题
浮点数的最高精度是17位小数,但在进行算术时其精度远远不如整数。
var result = 0.1 + 0.2;
console.log(result); //结果不是0.3,而是 0.30000000000000004
console.log(0.07 * 100); //结果不是7,而是 7.000000000000001
所以:不要直接判断两个浮点数是否相等!
4.2.3 表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方式所得的组合。
简单理解:是由数字、运算符、变量等组成的式子。
表达式最终都会有一个结果,返回给我们,我们称为返回值。
4.3 递增和递减运算符
4.3.1 递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用 递增(++)和递减(--)运算符来完成。
在JavaScript中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,称为前置递增(递减)运算符,放在变量后面时,称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
4.3.2 递增运算符
1.前置递增运算符
++num 前置递增,就是自加1,类似于 num = num + 1, 但是 ++num 写起来更简单。
使用口诀:先自加,后返回值
2.后置递增运算符
num++ 后置递增,就是自加1,类似于 num = num + 1, 但是 num++ 写起来更简答。
使用口诀:先返回原值,后自加
案例1:
var num = 10;
num++; // num = num + 1 ++num
console.log(num); //11
var num2 = 10;
++num2; // num = num + 1 num++
console.log(num2); //11
// 1.前置自增和后置自增如果单独使用 效果是一样的
// 2.前置自增 口诀:先自加,后返回值
// 3.后置自增 口诀:先返回原值 后自加1
var age = 10;
console.log(++age + 10); // 21
console.log(age); // 11
var age2 = 10;
console.log(age2++ + 10); //20
console.log(age2); // 11
案例2:
var a = 10;
++a; // ++a=11 a = 11
var b = ++a + 2; // a = 12 ++a=12
console.log(b); // 14
var c = 10;
c++; // c++ 11 c=11
var d = c++ + 2; // c++ 11 c=12
console.log(d); // 13
var e = 10;
var f = e++ + ++e; // e++ =10 e = 11 ++e=12 e=12
console.log(f); //22
4.3.3 前置递增和后置递增小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值 + 1 比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码联用时,执行结果会不同
- 后置:先原值运算,后自加(先人后己)
- 前置:先自加,后运算(先己后人)
- 开发时,大多数使用 后置递增 / 减,并且代码独占一行,例如: num++;或者 num--;
4.4 比较运算符
4.4.1 比较运算符概述
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。
运算符名称 | 说明 | 案例 | 结果 |
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
>= | 大于等于号 | 2>=2 | true |
<= | 小于等于号 | 3<=2 | false |
== | 判等号 | 37==37 | true |
!= | 不等号 | 37!=37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37==='37' | false |
4.4.2 = 小结
符号 | 作用 | 用法 |
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
4.5 逻辑运算符
4.5.1 逻辑运算符概述
概念:逻辑运算符用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
逻辑运算符 | 说明 | 案例 |
&& | "逻辑与",简称"与" and | true && false |
|| | "逻辑或",简称"或 |