01-JS介绍
01 JavaScript介绍
< !--
CSS先放一下，所有精力全部放在JS中。 JS是前端的核心，函数是JS的灵魂。
语言：
交流的工具
计算机语言：
html（超文本标签语言），css（层叠样式）也是计算机语言，程序员与计算机交流的工具。
编程语言：
也属于计算机语言，书写一条条指令，让计算机去执行这一条条指令。
大多数的编程语言特点：
1）变量 数据类型
2）流程控制
3）数组，字符串，集合
4）运算符
5）函数 类
....
常见的编程语言：
JavaScript JS
Java
C
C++
PHP
Python
Go
C#
汇编
VB
......
-
JS: JavaScript 是一门编程语言。
历史（了解）：https://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html JS和JAVA： 1）借鉴Java语言的数据类型和内存管理。 2）JavaScript是一门新的编程语言，和Java没有关系。 3）周杰 周杰伦 特点： 1）JS非常灵活 2）借鉴了多门编程语言 3）支持 函数式编程 和 面向对象编程 .... JS设计之处： 为了实现和网页交互。 html为了实现网页内容，css为了实现网页样式。 现在JS作用： 1）网页交互 js是运行在浏览器中的 2）服务端开发 node.js 3）移动端开发 android ios 4）小程序 5）命令行工具 6）PC端的软件 7）嵌入式 ....
-
计算机组成：
硬件： CPU：计算和处理数据的 内存：存储数据的，临时存储，打开一个软件，软件中的数据，就需要加载到内存中（软件关了、电脑手机关了没电了，内存数据就没了） 硬盘：存储数据的，永久存储。 输入设备：鼠标，键盘，手写板，摄像头... 输出设备：显示屏，打印机，投影仪，音响... 软件： 系统软件： 操作系统，window10 window11... Linux macOS Android iOS 鸿蒙 塞班 winPhone 应用软件： 浏览器 QQ VSCode WPS 我们写应用软件运用到操作系统上，操作系统运用到硬件上 最小的存储单位： bit 位 字节 1Bype = 8bit 千字节 1KB = 1024B 兆字节 1MB = 1024KB G字节 1GB = 1024MB T字节 1TB = 1024GB 程序（软件）： 打开一个软件先把硬盘中的数据加载到内存中 由CPU处理。 计算机运行软件的流程： 1）当打开某个软件后，先从硬盘中把软件对应的代码和数据加载到内存中 2）CPU执行内存中的代码，处理数据 -->
02 JavaScript组成
< !--
ECMA：European Computer Manufacturers Association
欧洲计算机制造商协会
制定JS语法标准的
JS的组成：
ECMAScript:规定JS都有哪些核心语法，如：变量，分支语句，循环语句，对象，数组，字符串....
学习语法：
先学ES3+ES5 后面学习ES6+
2016年 ... 2022年 2023年 每年更新一次
ES7 ... ES13 ES14 从2016年开始统称为ES6+
WebAPI:
BOM：
Browser Object Model 浏览器对象模型 Browser 浏览器
DOM：
Document Object Model 文档对象模型 html文档
-->
03 JavaScript编写方式
位置一：HTML代码行内（不推荐）
<!-- button是html标签，事件源，事件发生的场所 -->
<!-- click 点击事件 on仅仅是前缀 -->
<!-- alert('点我弄啥~') 监听器，也叫事件处理程序，当点击事件发生了做什么 -->
<!-- 单引号只能套双引号，双引号只能套单引号；双引号不能套双引号，单引号不能套单引号 -->
位置二：script标签中(内嵌式)
位置三：外部JS文件
- 引用外部 JS文件的 script 标签中间不可以写代码，写了也是白写
04 JavaScript注释
4.1 单行注释
// 快捷键： ctrl + /
4.2 多行注释
/* 快捷键：alt+shift+a */
4.3 文档注释
/* 用来注释一个文件或一个函数或一个类 */
05 JavaScript输入输出语句
5.1 输出方式一：alert( );
alert("Hello World~")
5.2 输出方式二：console.log( )
console.log("Hello World~") 调试中看到
5.3 输出方式三：document.write( ) 了解
document.write("<h1>Hello World~</h1>")
往网页上写内容
5.4 输入方式一：prompt函数
var age = prompt("请输入你的年龄：");
console.log(age);
5.4 快速书写console.log( )
5.4.1 安装插件
// react插件 clg 按 enter
// console.log("hi world~")
5.4.2 配置一个代码段
第一步：复制图片代码到网址：99cc.vip/public/tool…
第二步：
点击设置，找到配置用户代码片段
选择新代码片段
输入js点enter，复制网址中的代码如下：
光标定位如图（$1）：
// 输入js生成一串代码
// 快捷键： lg -> console.log()
02-JS中的变量
01 认识变量
-
数据是程序的核心之一，需要存储在计算机中，有两个地方，可以存储数据——硬盘、内存
变量 = 变量名+变量值 变量名，就是一块内存空间的别名 变量值，就是内存空间中存储的真实数据
我要存储一个数据叫 "wc"
1)在内存空间中找一个小空间，把wc放到这个小空间中
2)当我们需要使用wc这个数据时，从内存空间中取出数据，每一个空间都是有一个内存地址
3）按理说，通过这个内存地址，就可以得到内存空间中数据，这个地址也叫指针
4）通过指针去获取数据，非常不方便，需要给这个内存空间起一个别名，叫变量名
5）内存空间中存储的数据，叫变量值 变量名+变量值 = 变量
什么是变量？
所谓的变量就是指内存空间中的数据（变量值） + 内存空间对应的别名（变量名）
对变量名的操作，本质就是对内存空间中数据的操作
如何声明一个变量？
答：通过var关键字。 除了var还有let和const。
把"wc"放到一个内存空间中，给这个内存空间起一个别名是name
对name的操作，实际上就是对内存空间中"wc"的操作
var name = "wc";
var age = 18;
var height = 1.88;
所谓的操作，就是CRUD，增删改查
console.log(name);
console.log(age);
console.log(height);
通过var来声明变量
var a;
var b;
var c;
三个变量没东西
赋值
a = 1; 1放到a所对应内存空间里边
b = 2;
c = 3;
定义一个变量，通过var关键字来定义
定义：声明+赋值
var currentTime = "16:15";
= 在数学中叫等于号
= 在计算机中叫赋值运算符 从右向左读
var address = "bj";
var score = 88;
console.log(currentTime);
console.log(address);
console.log(score);
02 变量的命名规范
变量命名规则：必须遵守
-
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
即不能以数字开头 例： var 456 = 789; -
其他字符可以是字母、下划线、美元符号或数字
-
不能使用关键字和保留字命名：
变量名不能是关键字 例： var var = 123;
网站： developer.mozilla.org/zhCN/docs/w…
- 变量严格区分大小写
JS如果你没有遵循人家的规则，直接报错，不像CSS，写错，仅仅是不起作用而已。
例： SyntaxError: Unexpected token 'var' 语法错误
03 练习
练习三：定义变量，保存两个数字，并且对两个变量的数字进行交换
// 借助第三变量
let num1 = 1;
let num2 = 2;
let t;
t = num1;
num1 = num2;
num2 = t;
// 不借助第三变量
var m1 = 666;
var m2 = 888;
console.log("交换前:m1,m2",m1,m2); 后面的m1,m2为值
m1 = m1 + m2;
m2 = m1 - m2;
m1 = m1 - m2;
console.log("交换后:m1,m2",m1,m2);
// (666+888) = 666 + 888
// 666（m2） = (666+888) - 888
// 888 (m1) = 666 - (666-888)
04 变量的注意细节
使用注意：
- 注意一：如果一个变量未声明（declaration）就直接使用，那么会报错；
- 注意二：如果一个变量有声明，但是没有赋值，那么默认值是undefine（und）；
- 注意三：如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）；
- 变量名所对应的内存空间中的数据是变化的（更新）
- 定义多个变量的形式
03-JS中的数据类型
01 数据类型介绍
// 数据是存储在内存中的，内存空间的大小是有限，
// 数据也有大数据，也有小数据，在存储时，小数据分配空间小一点，大数据分配空间大一点。
// 我们可以给不同的数据指定不同的数据类型，数据类型不一样，分配的空间大小也是一样的。
// 这样做就可以更加合理地使用内存空间了。
// 数据类型出现的目的：让我们更加合理地使用内存空间。
在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型）
- Number
- String
- Boolean
- Undefined
- Null
- Object
- BigInt（后续了解）
- Symbol（后续了解）
7种基本类型，也叫原始类型
Number，String，Boolean，Undefined，Null，BigInt，Symbol
1种复杂类型，也叫引用类型
Object 对象
1）number
-
number类型对应的值有无数个
var age = 18;
console.log(age); console.log(typeof age); 2） string -
string类型对应的值有无数有
var description = "这是一段描述"; console.log(description); console.log(typeof description);
3）boolean
-
boolean类型对应的值只有两个 true false
var isMarry = true; console.log(isMarry); console.log(typeof isMarry);
4） undefined
-
undefined类型对应的值有一个 und
// 没有给ok赋值，ok的值默认就是und var ok; console.log(ok); console.log(typeof ok);
5）null
-
对应的值只有一个，也是null
var data = null; // data的数据类型就是null类型 console.log(data); console.log(typeof data); // typeof测试null时，不太准确，测出来是object，实际应该是null
6）Object
var obj = {};
// {}是一个对象 容器 数据类型就是Object
console.log(obj);
console.log(typeof obj);
// typeof是一个运算符
// + - * / % 1+1 具有特定功能的符号
02 Number数据类型
Number数据类型 表示数字 有整数和小数 在C语言中，整数是int，小数是float和double 在JS中，不区分整数还是小数，统一都是number
var width = 200;
var height = 300;
var age = 18;
var score = 88.5;
数字可以进行运算
var doubleScore = score * 2;
console.log(doubleScore);
var result = width + height;
console.log(result);
-
特殊数值 之 Infinity
var num1 = Infinity; // Infinity表示无穷大 var num2 = -Infinity; // Infinity表示无穷小 console.log(num1); console.log(num2); var num3 = 1 / 0; // 0作为被除数，在其它语言中报错了 console.log(num3); // Infinity -
特殊数值 之 NaN not a number 不是一个数字
var num4 = "wc" * 100; console.log(num4); // NaN // 判断一个数是否是NaN console.log(isNaN(num4)); // true console.log(isNaN(num1)); // false isNaN判断是不是NaN -
在JS中，不要对小数进行运算
// 在JS中，不要对小数进行运算 var a = .3; var b = 1 - .7; console.log("b:",b); // 把b转为二进制 0.30000000000000004 // == 关系运算符 判断左右两边的数是否相等 console.log(a == b); // false // 原因： 在运算时，需要把小数转2进制 // 解决办法：对小数运算，需要先把小数转成整数 var m = .3 * 10; var n = 1 * 10 - .7 * 10; console.log(m == n); // true -
数字类型也有其他的进制表示方法
// 在JS中，表示数字，也有不同的进制 10进制 16进制 8进制 2进制 var q = 110; // 10进制 // 了解 var p = 0x110; // 16进制 以0x打头 var u = 0o110; // 8进制 以0o打头 var k = 0b110; // 2进制 以0b打头 console.log(q); console.log(p); console.log(u); console.log(k); // 都被转为10进制
最大值和最小值
var max = Number.MAX_VALUE
var min = Number.MIN_VALUE
console.log(max);
console.log(min);
console.log(max * 1000); // Infinity无穷大
03 String数据类型
String在项目中使用的最多的，就是所谓的字符串
var name = "wagncai";
var address = "bj";
var description = "这是一个描述";
// 在JS中，字符串，可以使用单引号，也可以使用双引号，也可以使用反引号
// 单引号
var str1 = 'hehe';
// 双引号
var str2 = "xixi";
// 反引号
var str3 = `lala`;
使用 + , 可以拼接字符串
// + 有多重含义: 表示加号 还可以表示字符串拼接运算符
var str4 = str1 + str2;
console.log(str4);
var str5 = str3 + str4;
console.log(str5);
// 在一个长串里，放一个变量
方法一：引号+内容+引号（双引号）
var userName = "wc";
var str6 = "hello world ni hao " + userName + " css javascript";
console.log(str6);
方法二：模板字符串（反引号）
var str7 = `hello world ni hao ${ userName } css javascript`;
console.log(str7);
// 转义字符串————转变原来的意思
// 双引号里面不能嵌套双引号 单引号里面不能嵌套单引号
// 外双内单 外单内双
var str8 = "'wangcai'"
console.log(str8);
var str9 = '"wangcai"';
console.log(str9);
// \ 用来转义
var str10 = "\"wangcai\"";
console.log(str10);
// \n表示换行
var str11 = "hello \n world"
console.log(str11);
04 Boolean（布尔）数据类型
-
对应的值只有两个，一个是true，一个是false
var isMarry = false; console.log(isMarry); // 关系运算符，最终得到的结果就是布尔类型 // > < >= <= == ===(绝对恒等于) !=（不等于） !==（绝对不等于） console.log(2 > 1); console.log(1 == 2); console.log(1 != 2);
05 undefined数据类型
// 声明一个变量，没有赋值，那么这个值就是undefined
// undefined 就表示一个空值
// und这种数据类型对应的值只有一个，也是und
var userName;
console.log(userName);
console.log(typeof userName);
// typeo 类型
// 后面学习其它内部时，und也会遇到
// 手动给pwd赋值und
var pwd = undefined; // 没有必要
console.log(pwd);
06 Object数据类型
-
Object数据类型 —— 引用数据类型
// 除了定义多个变量之外，还可以定义一个容器 // JS中的容器有：{} [] Set Map // 对象是属性的无序集合 var obj = { // name叫属性名 "xq"叫属性值 // 属性名也叫键 属性值也叫值 // 键也叫key 值也叫vlaue // key-value name:"xq", age:20, height:170, score:88, address:"bj" }; console.log(obj); // .叫属性访问运算符 console.log(obj.name); console.log(obj.address); console.log(typeof obj); // typeof判断obj类型 —— object
07 Null数据类型
-
null 也表示空，通常用来表示对象为空
// Null也是一种数据类型 它对应的值只有1个，是null obj = null; console.log(obj); console.log(typeof obj); // 判断obj类型 即null类型为object
08 数据类型转化介绍
把一种数据类型转化成另一种数据类型:
- 强制数据类型转化 通过写代码的方法进行转化。
- 隐式数据类型转化 悄悄地，没有写转化代码，就可以转化。
01 其它的数据类型转成stirng
(1) 利用toString（强转）
可以把Number类型和Boolean类型转成字符串
这个转化是强转（自己写代码转化）
var a = 110;
// .属性访问运算符 只有对象才能打点
// a不是对象 a是number
// 问：a不是对象，为什么可以打点？
// 答： a打点toString时，会瞬间包装成一个对象，这类对象叫包装对象
-
number 变成string类型
// ()是函数调用 // 对象身上有一个toString方法，()就表示调用这个函数（方法） // 这个方法通常有一个返回值 var a = 110; // number console.log(a.toString()); console.log(typeof a.toString()); // 已把110转为string类型 // console.log(110.toString()); // 110叫字面量 是个变量 不能用tostring -
boolean 变成string类型
var isOk = false; // boolean类型 console.log(isOk.toString()); console.log(typeof isOk.toString()); // 已把false转为string -
undefine不能用tostring去转
var c ; // undefine类型 console.log(c.toString()); console.log(typeof c.toString()); // 报错：TypeError: Cannot read properties of undefined (reading 'toString') of ...的 properties是属性的意思 // b是undefine，身上没有toString
(2) String构造函数（强转）
可以把字面量，布尔类型，数字，und，null
这个转化是强转
var a = 110; // number
console.log(String(a));
console.log(typeof String(a));
var b = false; // boolean
console.log(String(b));
console.log(typeof String(b));
var c; // undefine
console.log(String(c));
console.log(typeof String(c));
console.log(String(123)); // 变量
console.log(typeof String(123));
var d = null; // null
console.log(String(d));
console.log(typeof String(d));
(3) 利用+（隐式）
-
这个转化是隐式的(不知不觉情况下转化)
var num1 = 110; var str4 = " ni hao"; // +运算符 所有的运算符，在运算时，需要保证两侧的数据的类型要一致 // 如果不一致，就会悄悄地把一种数据类型转化成另一种数据类型 // 把num1变成string类型 这个过程是悄悄转化的 隐式转化 var res1 = num1 + str4; // + 代表字符串拼接 console.log(res1); console.log(typeof res1); console.log("hehe" + 888); // + 代表字符串拼接
-
typeof是运算符 +也是运算符
运算符都是有优先级的
（查看优先级网站）MDN： developer.mozilla.org/zh-CN/docs/…
// typeof（15）的优先级高于 +（12） console.log(typeof 888 + "hehe"); // number + "hehe" => 结果：numberhehe（否则：888string）
02 把其他类型转成number
01 string类型转化成number类型
(1) 利用number(强转)
var str1 = "123";
console.log(Number(str1));
console.log(typeof Number(str1));
var str2 = ""; // 空串，默认会转化成0
// " " 字符串里面是空格不叫空串
console.log(Number(str2));
console.log(typeof Number(str2));
var str3 = "100px";
console.log(Number(str3)); // NaN(not a number)是number的特殊值
console.log(typeof Number(str3));
(2) 利用+或-(强转)
var str4 = "123";
console.log(+str4); // +会尝试把string类型转化成number类型 +此时是一元运算符
console.log(typeof +str4);
var str5 = "123";
console.log(-str5); // -会尝试把string类型转化成number类型 -此时是一元运算符
console.log(typeof -str5);
var str6 = ""; // 空串
console.log(-str6); // -会尝试把string类型转化成number类型 -此时是一元运算符
console.log(typeof -str6);
var str7 = " "; // 空格
console.log(-str7); // -会尝试把string类型转化成number类型 -此时是一元运算符
console.log(typeof -str7);
(3) 利用parseInt/parseFloat(强转)
parseInt parsefloat 这两个函数，也可以尝试把非数字转化成数字
-
parseInt 转整数
-
parseFloat 转整数
02 把boolean类型转化成number类型
-
将boolean类型转成nubmer类型
var b1 = true; console.log(Number(b1)); // 1 console.log(typeof Number(b1)); var b2 = false; console.log(Number(b2)); // 0 console.log(typeof Number(b2)); var b3 = false; console.log(+b2); // 0 console.log(typeof +b2);
03 把und类型转成nubmer类型
var u;
console.log(Number(u)); // NaN
console.log(typeof Number(u));
04 把null类型转成nubmer类型
var n = null;
console.log(Number(n)); // 0
console.log(typeof Number(n));
// 问：哪些数据转化后，会变成0
// 答：空串 false null 转化成number是0；undefine转转化成number是not a number（NaN）
03 把其他类型转化成boolean类型
-
将string类型转成boolean类型:
-
将number类型转成boolean类型
-
将und类型转成boolean类型
-
将null类型转成boolean类型
结论：不管是什么样的字符串，只要有内容，结果都是true 0 null 空串 und NaN会转化成false，其它的数据都转化成ture，这个结论非常重要。
04 运算符
01 认识运算符
// 运算符：具有某种功能的符号。
// 操作数：运算符两侧的数据叫操作数。
// 要求：在运算时，需要保证运算符两侧操作数的数据类型要一致。
// 如果不一致，就会发生隐式类型转化。
// 从功能上来分：
// 1）算术运算符
// 2）赋值运算符
// 3）自增自减运算符
// 4）比较运算符
// 5）逻辑运算符
// 从操作数的个数来分：
// 1）一元运算符 单目运算符
// 2）二元运算符 双目运算符
// 3）三元运算符 三目运算符
02 算数运算符
-
概念：数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。
+ - * / % // 加号 var m = 110; var n = true; let r = m + n; console.log(r); // null隐式转化为0 console.log(666 + null); // NaN和任何数据进行运算，结果都是NaN console.log(888 + NaN); // + 要么是加号 要么是字符串拼接运算符 console.log(666888 + "123"); // 减号 console.log(1 - true); // 0 console.log(1 - null); // 1 console.log(1 - NaN); console.log(1 - "666"); // 乘号 console.log(1 * true); // 1 console.log(1 * null); // 0 console.log(1 * NaN); // NaN console.log(1 * "123"); // 123 // 除号 console.log(1 / true); // 1 console.log(1 / null); // Infinity console.log(1 / NaN); // NaN console.log(1 / "666"); // 0.0015015015015015015 console.log("----------------------------"); // 余数 console.log(10 % 3); // 1 console.log(3 % 10); // 3 console.log(3 % 0); // NaN console.log("----------------------------"); // 表达式：任何有值的内容都是表达式 // 123 true 1+1 "hello" // 表达式的返回值：有运算符参与的表达式，最终需要返回一个新的数据 // 1+1 => 2 100-50 => 50
03 赋值运算符
= += -= *= /- %=
// 赋值运算符=
var a = 110;
// 有运算符参与的表达式，最终需要返回一个新的数据
// 1+1 => 2 100-50 => 50
var b = 123; // 赋值运算符有副作用：整体也有一个值
// 1赋值给k k的值是1 k = 1; 整体也有一个值是1
// k = 1整体的值是1 把1赋值给n n的值是1 n=1整体也是有一值 也是1
// 把1赋值给m
var m = n = k = 1;
// 修改p的值，修改后重新赋值给p
// 在计算机中，在这样的操作非常多
// 由于这样的操作非常多（把一个变量修改后再重新赋值），大多数编程语言中，都封装了一些运算符
// 如：+= -= *= /=
var p = 1;
p = p + 1;
var q = 2;
q += 10; // 等价于 q = q+10;
var num1 = 110;
num1 += 110;
console.log(num1);
var num2 = 100;
num2 -= 30;
console.log(num2);
var num3 = 70;
num3 *= 2;
console.log(num3);
var num4 = 10;
num4 %= 3;
console.log(num4);
04 递增和递减运算符(自增自减运算符)
var a = 1;
a += 1; // a = a+1;
// 对于加1和减1操作，在计算机中用的非常多，大多编程语言，又封装两个运算符
// ++自增 --自减
var b = 10;
b++; // 一元 只有1个操作数 单目
b++;
b++;
b++;
b++;
console.log(b); // b = 15 加一次是1
var c = 10;
++c;
++c;
++c;
++c;
++c;
console.log(c);
// 可以把变量写在前面或者后面
// 运算符返回一个新的数据
var d = 1;
var res = d++;
console.log(d); // d的值是2
console.log(res);
// 口诀： ++在前，整体是一个新值，++在后，整体是一个旧值（没有加1的值）
var e = 10;
var f = ++e;
console.log(e);
console.log(f);
// var g = 100;
// ++在前，整体是一个新值（加之后的值），++在后，整体是一人旧值（没加）
// ++ + 运算符优先级 ++高于+
// ++g g的值（+不管在前在后都有效）是101 ++g整体的值（++在前...口诀）是101
// g++ g的值是102 g++整体的值是101（旧值）
// var h = ++g + g++;
// console.log(g); // 102 加两次
// console.log(h); // 202 加两次 但第二次无效 g++为原来的值100
var g = 100;
// ++g g的值是101 ++g整体的值是101
// g++ g的值是102 g++整体的值是101
var h = ++g + g++;
console.log(g);
console.log(h);
// ++ 和 -- 只能写在变量的前后
// console.log(1++); // 1
// console.log(5++); // 5
var a, b;
a = 10;
b = 5;
a++
a++
a++ // 13
var res = a++ + b; // 13 + 5
// a++ 14 a的值14 整体的值13
a++ // 15
console.log(res); // 18 ----------整体
console.log(a); // 15 加了5次---------求a的值
// -- 的套路和 ++ 是一样的
var a = 99;
var b = 22;
var res;
res = (a--) - (b--) // 99 - 22
a--; // 97
b--; // 20
console.log(res); // 77
console.log(a); // 97
console.log(b); // 20
05 比较运算符
// > < >= <= == ===(绝对等于) != !==（绝对不等于）
// 比较运算符最终返回布尔值 true false 2>1
// "hello" > "world"
// 比较时，如果不是数字，会发生隐式类型转化，转成数字
// 任何数据和 NaN 进行比较，结果都是false
console.log(1>2); // f
console.log(1>true); // f true会发生隐式类型转化 1
console.log(1>false); // t false会发生隐式类型转化 0
console.log(1>null); // t null => 0
console.log(1>"123"); // f "123" => 123
console.log(1>NaN); // f
console.log(1>undefined); // f undefined=>（转成）NaN
// 计算机由美国人发明的。
// 美国文字 a~z + A~Z + 符号 ------- ASSIC 字符代码表
console.log(1>"a"); // f "a" => 97
console.log("a">"b"); // f "a" => 97
console.log("ab">"ac"); // f "a" => 97 "b" => 98 "c" => 99
// == 不会判断类型，或者说，在比较时，会发生隐式类型转化
console.log(123 == "123"); // t
// === 先比较类型，如果类型不一致，直接false
console.log(123 === "123"); // f
console.log("123" != "456"); // t
console.log("123" !== 123); // t 先比较类型 类型不一致（string、number）
06 逻辑运算符
// 有三个：逻辑与：&& 逻辑或：|| 逻辑非：！
// 逻辑与（tt为t）：
// 是二元运算符 当两个操作数都为true时，整体才为true
// 记忆：只有两个操作数都为true时，整体才为true，否则整体就是false
var a = true;
var b = false;
var c = a && b;
console.log(c);
// 逻辑或（ff为f）：
// 只要有一个操作数是true，整体就为true，当两个操作数都为false，整体才为false
var m = false;
var n = false;
console.log(m || n);
// 逻辑非（取反）：
// 是一个一元运算符 如果为true，取反为false，如果为false，取反后为ture
console.log(!true);
console.log(!false);
// 逻辑运算符最终的结果不一定是true或false
// 比较运算符最终的结果一定是true或false
// 逻辑运算符，如果两侧的操作数不是布尔值，
// 会先转化成布尔 0=>false
// 如果第1个操作数能决定整体的值，就不管第二个操作数了
// 整体的值就是第1个操作的数的值，不是转化后的值，是转化前的值
console.log(0 && 123); // 结果为0
var a = 1;
var res = undefined && a++; // undefine=>false 第一个值可以决定整体的值
console.log(a); // 1
console.log(res); // und
// 1不能决定整体的值 第2个操作数肯定要运算
// 整体的值是第2个操作数的值
console.log(1 && 123); // 1=>ture 第一个值不能决定整体的值 因为逻辑与中两个ture才为ture 所以需要看第二个操作值
console.log(0 && null); // 0 0=>false第一个值能决定整体的值
console.log(1 && null); // null 1=>ture第一个值不能决定整体的值 因为逻辑与中两个ture才为ture 所以需要看第二个操作值 null=>false可以决定整体的值
console.log("hello" && "ok"); // ok
// 把其他类型转化成boolean类型
// 不管是什么样的字符串，只要有内容，结果都是true
// 0 null 空串 und NaN会转化成false
console.log(888 && ""); // ""
console.log("" && 666); // ""
<script>
// 逻辑或
console.log(666 || ""); // 666
console.log("------------------");
let a = 0;
let res = (10<100) || (++a > 0);
console.log(a); // 0 第一值能决定整体的值 所以第二个不用管
console.log(res); // ture
console.log("------------------");
// 逻辑非
let b = 1; // ture
let res1 = (1 != b) || (++b + b++ > 1)
console.log(b); // 3
console.log(res1); // true
</script>
07 三目运算符
// 三目运算会有三个操作数
// 在JS中只有1个 操作数1 ? 操作数2 : 操作数3
// 若操作数1整体为true， 三目的整体就为操作数2
// 若操作数1整体为false， 三目的整体就为操作数3
var res = true ? "hello" : "world"; // hello
console.log(res);
var a = 110;
var b = 123;
console.log((1>100) ? a++ : ++b); // 124 (1>100)为false 看第三个操作值
var m = 1;
var res2 = undefined ? m-- : m++; // 1 undefined为false
console.log(res2);
05 JS分支语句
- 顺序结构 —— 从上向下，顺序执行代码
- 选择结构(分支结构)—— 根据条件判断，决定执行代码的分支
- 循环结构 —— 让特定代码重复执行
01 分支结构
代码块：一个{}里面包了一片代码
if语句
if else 语句
if else if else 语句
switch语句
5.1.1 if语句
-
单分支if语法（if语句）：
var age = 20; // 比较运算符，最终返回值是布尔值 if(age >= 18){ console.log("可以去网吧上网~"); }; console.log("回家学习~"); -
双分支if语法（if else 语句）：
var age = 15;
if(age >= 18){
console.log("可以去网吧上网~");
}else{
console.log("不可以去网吧上网~");
}
// if else简写成三目(代码少可写成三目)
age >= 18 ? console.log("可以去网吧上网~") : console.log("不可以去网吧上网~");
- 多分支if语法（if else if else 语句）：
在设计if else if时，需要特别注意条件的顺序
var age = 10;
if(age >= 18){
console.log("上大学");
}else if(age >= 12){
console.log("上中学");
}else if(age >= 6){
console.log("上小学");
}else{
console.log("在家玩");
}
注意细节： if语句中对 是否相等 来判断时，最好将常量写在前面(单词可能会多或少写一个字母 难发现)
var num = 666;
// num叫变量 666叫字面量，也叫常量
// = 赋值运算符，整体也有值，赋值运算符有返回值
// num == 666 的值是666 666为转化成true
if(num = 666){
console.log("num是666");
}else{
console.log("num不是666");
}
var num = 666;
// 报错
if(666 = num){
console.log("num是666");
}else{
console.log("num不是666");
}
作为初学者，{ }最好加上去
// 一条语句（if里一条语句），{}可以不写，多行语句，{}必须要写
if(true)
console.log("haha");
else
console.log("xixi");
if语句可以嵌套
if(2>1){ // 2>1成立
if(3>2){ // 3>2成立
console.log("hehe");
}else{ // 3>2不成立
console.log("xixi");
}
}else{ // 2>1不成立
if(4>3){// 4>3成立
console.log("lala");
}else{ // 4>3不成立
console.log("heihei");
}
}
5.1.2 switch语句
-
与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断
-
switch case一般需要配合break关键字使用 没有break会造成case穿透
let num1 = +prompt("请输入一个1~3的数据"); // 不加+为string类型 switch(num1){ // number类型 case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; default: console.log("输入的数据不合法"); break; } // 不加break会穿透
02 循环结构
5.2.1 while循环
var distance = 0; // 距离
var i = 1; // 圈 循环变量
// i<=5 循环条件 如果条件成立，执行循环体
// 如果条件不成立，结束循环
while(i<=5){
distance += 500;
// 在循环体中，一定要改变循环变量，如果不改变，会造成死循环
i++; // 改变循环变量
}
console.log(distance);
// 死循环
<!-- <script>
var a = 1;
while(a<2){
}
</script> -->
<!-- <script>
while(1); // 也是死循环
</script> -->
5.2.2 do while循环（用的不多）
// do while至少执行一次 while一次也不执行
var pwd; // 先声明变量 内部赋值
do{
pwd = +prompt("请输入密码：") // 循环体（重复要执行的代码）
}while(pwd !== 123456) // 循环条件
alert("欢迎访问本网站");
<script>
// 转成while
var pwd = 123456;
while(pwd !== 123456){ // 循环条件
pwd = +prompt("请输入密码：") // 循环体
}
alert("欢迎访问本网站");
</script>
5.2.3 for循环
// for把初始化循环变量，循环条件，改变循环变量都放在了一起
// 初始化循环变量 var i=1; 执行了1次
// 判断循环条件 如果条件成立 执行循环体 改变循环变量 判断循环条件 ....
// 如果条件不成立，结束循环
for(var i=1; i<10; i++){
console.log("hello world");
}
var distance = 0;
for(var i=1; i<=5; i++){
distance += 500;
}
console.log(distance);
for循环和while循环有什么区别呢：
- 当如果明确了循环的次数的时候推荐使用for循环
- 当不明确循环的次数的时候推荐使用while循环
5.2.4 for循环嵌套
for(var i=1; i<=3; i++){ // 1 2 3 4结束循环
for(var j=1; j<=3; j++){ // 3 3 3
console.log("hello world");
}
}
// 打印9次hello world
5.2.5 循环控制
var distance = 0;
for(var i=1; i<=5; i++){
if(i == 2){
// 结束本次循环，继续下次循环
continue;
}
distance += 500
}
console.log(distance);
var distance = 0;
for(var i=1; i<=5; i++){
if(i == 2){
// 结束整个循环
break;
}
distance += 500
}
console.log(distance);
06 JS中的函数
01 认识函数
-
声明函数 —— 封装 独立的功能
// 函数 类似于数学中的函数： // 声明变量 声明变量使用var var a = 110; // 声明函数 声明函数使用function // function 声明函数的关键字 fn 函数名 ()是函数的特有标识 // {} 函数体 在函数体中就可以写大量的代码 function fn(){ console.log("hello 函数~"); console.log("hello 函数~"); console.log("hello 函数~"); } -
调用函数 —— 享受封装的成果
声明函数之后再调用函数
调用函数： 函数名+()
fn(); // 可以让函数体中的代码执行
// 函数声明只需要一次，函数调用可以N次
fn();
fn();
// ....
02 函数的参数
-
形参（形式参数）：定义 函数时，小括号中的参数，是用来接收参数用的，在函数内部 作为变量使用
// 形参，你给它当成没有声明的变量 // ()是用来接收数据的 接收的数据叫形式参数 简称为形参 function foo(a,b){ // 在函数体内部就可以使用形参变量 （使用ab：（a+b）） console.log(a+b); } -
实参（实际参数）：调用 函数时，小括号中的参数，是用来把数据传递到 函数内部 用的
// 下面的()是用来传递数据的 传递的数据叫实际参数 简称为实参 // 函数调用的过程，就是实参向形参赋值的过程 foo(1,2); // 相当于把1赋值给a 2赋值给b
注意细节：
- 实参和形参的多个参数之间用逗号（,）分隔
03 全局变量和局部变量
-
全局变量：定义在函数外部的变量
特点： 在函数内部和外部都可以访问
-
局部变量：定义在函数内部的变量
特点： 在函数内部可以访问，函数外部不能访问！！
var a = 1; // a是全局变量(定义在函数外部) function bar(){ var b = 2; // b是局部变量(定义在函数内部) // console.log("b:",b); // console.log("a:",a);（打印） } // console.log("a:",a); bar();（调用函数） console.log("b:",b); // 报错 ReferenceError: b is not defined // 全局变量和局部变量的分界点是函数
04 函数的返回值
函数的返回值
// return 是返回的意思
// return "666"——返回"666"
// 返回到了什么地方？
// 答：返回到了函数调用处。
function bar(a,b,c){
return a+b+c
}
// 你看到一个 xxx()例：bar(1,2,3)； 这个整体在你眼中应该是一个值
// 什么值？答：返回值
var res = bar(1,2,3); // 调用函数 实参
console.log(res); // 6 (a+b+c;即1+2+3)
1.如果函数没有提供返回值，默认函数返回und
function bar(){
}
// 不管有没有实参或形参，只要是函数调用，函数调用的代码
// 在你的眼中都是值，返回值
var res = bar(); // 调用函数
console.log(res); // undefine
2.写了return，但是没有写返回值
function bar(){
// 默认也是返回und
return;
}
var res = bar(); // 调用函数
console.log(res); // undefine
3.return语句作用
function bar(){
console.log("xixi"); // 打印出 xixi
// return语句有两个作用：
// 1）提供返回值
// 2）结束函数调用(类似于break：结束循环) return下面的代码就不会执行了
return "haha"
console.log("heihei"); // 不执行
}
var res = bar(); // 整体是 haha（调用函数）
console.log(res); // 打印出 haha
05 定义函数的形式
1）声明一个函数
function foo(a,b){
// return后面如果有表达式
// 先算return后面的表达式（a+b） 再算return！！！
return a+b;
}
// return到了函数的调用处
var res = foo(1,2); // 调用函数
console.log(res); // 3
console.log("----------------");
console.log(foo(1,2)); // 也可以这样写 因为整体是一个值 结果为3
2）函数表达式
// 把一个匿名函数赋值给一个变量
// 所谓的匿名函数是指没有函数名
// 所谓的函数表达式，本质是一个变量
// 只不过，变量的值是一个匿名函数
var fn = function(a,b){ // 整体是函数表达式；fn是变量；function(a,b)是匿名函数
return a*2 + b*2
}
// 调用时，使用变量名()
var res = fn(1,2);
console.log(res);
function bar(a,b,c,d){
console.log(a,b,c,d);
}
// 如果在调用函数时，没有给形参赋值，那么形参的值是und
bar("a","b","c"); // undefine
// und到现在为止，出现在哪些地方？
// 1）如果变量没有赋值，那么变量的默认值就是und
// 2）如果函数没有提供返回值，默认返回und
// 3）如果没有实参给形参赋值，形参的默认值也是und
07 数组
01 认识数组
- 数组就是一个容器，里面可以装非常多的数据，就是一组数据的集合。
- 数组中的每一个数据，叫元素。
- 每一个元素，都对应了一个索引，索引是从0开始的。
创建数组的两种形式：
1）通过字面量的形式
// 数组中的元素的数据类型可以是任意的
var arr1 = ["a","b","c","d",true,123,undefined,null,function(){}];
console.log(arr1);
2）通过new的形式
let arr2 = new Array("hello","world","ok");
console.log(arr2);
// 数组中没有任何元素 空数组
var arr3 = []; // 空数组
arr3[0] = "xixi";
arr3[1] = "hehe"; // 把hehe赋值给arr3 1号索引的位置
console.log(arr3);
// 创建一个数组，数组中可以放10个元素
var arr4 = new Array(10);
arr4[0] = "heihei";
arr4[1] = "lala"
console.log(arr4); // 剩余8个是空的empty
02 操作数组
（增删改查）
-
访问数组中的元素；
-
修改数组中的元素；
-
增加数组中的元素；
-
删除数组中的元素；
var arr1 = ["a","b","c"]; console.log(arr1[0]); // 打印出a []中不能写负值 console.log(arr1.at(0)); // 两种写法都可以 at里可以写负值 console.log("--------------"); console.log(arr1.at(100)); // 如果at中的参数是负值，是从后向前计算的 console.log(arr1.at(-1)); // c console.log(arr1.at(-2)); // b console.log("--------------"); var arr2 = ["a","b","c"]; // arr2[3] = "d" 方法1 // push返回新数组的长度 // arr2.push("d") 方法2 // console.log(arr2); // ["a","b","c","d] // pop返回删除后的元素 let res = arr2.pop(); // pop是一个方法，方法就是函数 函数都有返回值 console.log(arr2); // ["a","b"] 在尾部删除 console.log(res); // 打印出 c var arr1 = ["a","b","c"]; // unshift表示在头部添加 // unshift返回新数组的长度 let res = arr1.unshift("666"); console.log(arr1); // 666 a b c console.log(res); // 打印出4 (长度) var arr1 = ["a","b","c"]; // shift表示删除头部元素 // shift返回被删除的元素 let res = arr1.shift(); console.log(arr1); // b c console.log(res); // a
数组是一个容器： 操作容器：CRUD
添加和删除：
1）unshift 在数组的头部添加元素
2）push 在数组的尾部添加元素
3）shift 在数组的头部删除元素
4）pop 在数组的尾部删除元素
5）splice 在数组的任意位置添加和删除元素
03 数组的遍历
var arr = ["wc","xq","z3","L4","w5"];
// 1）for循环
// for(var i=0; i<arr.length; i++){ // arr长度为5
// console.log(arr[i]);
// }
// 2）for in
// for(var index in arr){
// // index表示索引
// console.log(arr[index]);
// }
// 3）for of
// 因为数组本身是一个可迭代对象（后面讲 JS高级讲）
// for(var item of arr){
// // item表示数组中的每一个元素
// console.log(item);
// }
04 数组的常用方法
var arr = ["wc","xq","z3","L4","w5"];
slice方法：用于对数组进行截取（类似于字符串的slice方法）
// 包前不包后(包2不包4)
// let newArr = arr.slice(2,4);
// console.log(newArr); // ["z3", "L4"]
// 如果没有写end，默认是截取所有的元素
let newArr = arr.splice(2);
console.log(newArr); ["z3", "L4", "w5"]
concat方法：创建一个新数组，其中包含来自于其他数组和其他项的值。
var arr1 = ["wc","xq"];
var arr2 = ["z3","L4","w5"];
var arr3 = [666,888]
let res1 = arr1.concat(arr2);
console.log(res1); // ["wc", "xq", "z3", "L4", "w5"]
let res2 = arr2.concat(arr1,arr3);
console.log(res2); // ["z3", "L4", "w5", "wc", "xq", 666, 888]
join方法：将一个数组的所有元素连接成一个字符串并返回这个字符串。
var arr = ["wc","xq","z3","L4","w5"];
// 字符串中默认元素与元素之间的连接符是,
console.log(arr.join()); // 连接符为,
console.log(arr.join("-")); // 连接符为-
console.log(arr.join("=>")); // 连接符为=>
05 数组的查找
-
arr.indexOf方法： 查找某个元素的索引。
var arr = ["wc","xq","w5","z3","L4","w5"]; console.log(arr.indexOf("z3")); // 返回z3元素对应的索引 console.log(arr.indexOf("hehe")); // 如果元素在数组中找不到，返回-1 // 2 indexOf默认是从前向后找，找到第1个元素就返回对应的索引 console.log(arr.indexOf("w5")); // 5 lastIndexOf 从最后的位置开始查找 console.log(arr.lastIndexOf("w5")); -
arr.includes方法：判断数组是否包含某个元素。
var arr = ["wc","xq","w5","z3","L4","w5"]; // 判断数组中是否包含某个元素 包含的话，返回true，不包含的话，返回false console.log(arr.includes("w5")); // true console.log(arr.includes("hehe")); // false -
find方法：直接查找元素
var arr = ["wc","xq","w5","z3","L4","w5"]; // find的参数是一个函数 参数是实参 // 函数调用时，传递的参数都是实参 // item表示数组中的每一个元素 // index表示每一个元素对应的索引 // arr表示容器 find天生自带遍历功能 let res = arr.find(function(item,index,arr){ // console.log("item:",item); // console.log("index:",index); // console.log("arr:",arr); return item === "heihei" }) // find返回找到的那个元素 如果找不到，得到und console.log(res); -
arr.findIndex方法：查找元素的索引
var arr = ["wc","xq","w5","z3","L4","w5"]; let res = arr.findIndex(function(item,index,arr){ return item === "z3" }) console.log(res); // 3 查找元素的索引，找到返回对应的索引，没有找到返回-1
06 数组的排序
reverse() 方法将数组中元素的位置颠倒，并返回该数组。
var arr = ["wc","xq","w5","z3","L4","w5"];
// reverse是反转 顺序颠倒
console.log(arr.reverse());
sort方法也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组。
var arr = [2,10,40,3,15,22,1];
// sort是排序的意思
// [1, 10, 15, 2, 22, 3, 40]
// sort排序默认是一位一位比较 根据ACCIS来比较
console.log(arr.sort());
// ['a', 'b', 'c', 'd', 'e']
var arr2 = ["e","d","a","b","c"];
console.log(arr2.sort());
var arr3 = ["hello","ok","world","hehe"];
// hehe hello ok world 从首字母依次比较（按字母表ACCIS顺序）
console.log(arr3.sort());
</script> -->
按从大到小或从小到大顺序
var arr = [2,10,40,3,15,22,1];
arr.sort(function(a,b){
// a和b比较
// <0 a在b前面 从小到大
return a-b;
});
console.log(arr); // [1, 2, 3, 10, 15, 22, 40]
var arr = [2,10,40,3,15,22,1];
arr.sort(function(a,b){
// a和b比较
// >0 b在a前面 从大到小
return b-a;
});
console.log(arr); // [40, 22, 15, 10, 3, 2, 1]
<!--
编程方式有两种：
1）命令式编程
// for循环
// for(var i=0; i<arr.length; i++){
// console.log(arr[i]);
// }
2）声明式编程（以上为 按照人家的代码）
// for of
// 因为数组本身是一个可迭代对象（后面讲 JS高级讲）
// for(var item of arr){
// item表示数组中的每一个元素
// console.log(item);
// }
07 其他方法
arr.forEach:
-
遍历数组，并且让数组中每一个元素都执行一次对应的方法；
var arr = ["wc","xq","w5","z3","L4","w5"]; // item是数组中的每一个元素 声明式编程 // 4种方式可以遍历数组：1）for 2）for in 3）for of 4）forEach arr.forEach(function(item){ console.log(item); })
arr.map:
-
map() 方法创建一个新数组；
-
这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；
var arr = ["wc","xq","w5","z3","L4","w5"]; // map在计算机中叫映射 // 对数组中的每一个元素进行加工，返回一个新数组 let newArr = arr.map(function(item){ // item 代表数组中的每一项 return item+"666" }) // ['wc666', 'xq666', 'w5666', 'z3666', 'L4666', 'w5666'] console.log(newArr);
arr.filter:
-
filter() 方法创建一个新数组；
-
新数组中只包含每个元素调用函数返回为true的元素；
var arr = [3,1,8,9,1,10,44,12,2,10,22]; // filter 过滤 let newArr = arr.filter(function(item){ // item 表示数组中的每一项 return item >= 10; }); console.log(newArr); // [10, 44, 12, 10, 22]
arr.reduce:
-
用于计算数组中所有元素的总和；
-
对数组中的每个元素按序执行一个由您提供的 reducer 函数；
-
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；
var arr = [1, 2, 3, 4, 5, 6]; // reduce是进行累加的 // prev 表示之前的累加和 // next 表示下一项 // 第1次：prev:1 next:2 // 第2次：prev:3 next:3 // 第3次：prev:6 next:4 // 第4次：prev:10 next:5 // 第5次：prev:15 next:6 var res = arr.reduce(function (prev, next) { return prev + next }) console.log(res); // 21 -
可以给prev指定初始值
var arr = [1, 2, 3, 4, 5, 6]; // 第1次：prev:100 next:1 // 第2次：prev:101 next:2 // 第3次：prev:103 next:3 // 第4次：prev:106 next:4 // 第5次：prev:110 next:5 // 第6次：prev:115 next:6 var res = arr.reduce(function (prev, next) { return prev + next },100) console.log(res); // 121
08 字符串
01 创建字符串的两种方法
1)通过字面量的形式来创建一个字符串
var str1 = "hello"; // 是基本数据类型
console.log(str1);
获取字符串中字符的长度（字符的个数）
. 叫对象属性访问运算符 只能对象才能打点
问：str1是一个基本数据类型的数据，为什么可以打点？
答：str1会瞬间包装一个对象，叫包装对象。
console.log(str1.length);
2）通过new String()来创建一个字符串
new出来的就是对象
let str2 = new String("world"); // {'world'}
console.log(str2);
console.log(str2.length);
02 访问字符串的字符
var str1 = "hello";
// 字符串，也可以当成一个字符数组：["h","e","l","l","o"]
// 通过索引就可以得到里面某个字符串
console.log(str1[1]); // e
console.log(str1.charAt(0)); // 除了中括号charAt也可以
中括号与charAt的区别：
中括号没有找到会返回undefined，而charAt没有找到会返回空字符串；
console.log(str1.charAt(100));
console.log(str1[100]);
03字符串的遍历
var str1 = "hello";
// 命令式编程
普通for循环
for(var i=0; i<str1.length; i++){
console.log(str1[i]);
}
console.log("----------------");
// 声明式编程
for..of遍历
for(var item of str1){
console.log(item);
}
04 修改字符串
字符串的不可变性，字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的；
和数组不一样，字符串是不可变
不可变是指原始串，不可变
var str1 = "hello";
str1[4] = "O"; // 把小o变成大o无效
console.log(str1);
很多操作都是生成一个新串：
// str1叫原串
var str1 = "HELLO";
var str2 = "world";
// 调用toLowerCase方法，得到返回值
console.log(str1.toLowerCase());
console.log(str2.toUpperCase());
05 操作字符
查找字符串位置
var str1 = "my name is wc~";
indexOf 从长串中找子串
返回子串首字符的索引
console.log(str1.indexOf("name"));
-1 表示在长串中，找不到子串
console.log(str1.indexOf("xq"));
if(str1.indexOf("xq") !== -1){
console.log("str1中包含xq");
}else{
console.log("str1中不包含xq");
}
是否包含字符串
var str1 = "my name is wc~";
// 判断str1中是否包含name
// 如果包含得到true,如果不包含得到false
console.log(str1.includes("name")); // true
console.log(str1.includes("xq")); // false
以xxx开头
var str1 = "my name is wc~";
// 判断字符串是否以my打头
console.log(str1.startsWith("my")); // true
console.log(str1.startsWith("you")); // false
以xxx结尾
console.log(str1.endsWith("wc~")); // true
console.log(str1.endsWith("xq~")); // false
替换字符串
var str1 = "my name is wc~";
// 使用you替换my
let newStr1 = str1.replace("my","you")
console.log(newStr1); 返回新的字符串
let newStr2 = str1.replace("my",function(){
return "he".toUpperCase(); // toUpperCase小写的he转成大写
})
console.log(newStr2);
拼接字符串
var str1 = "hello";
var str2 = " world";
console.log(str1 + str2);
console.log(str1.concat(str2)); 除了用+号也可以用concat +号更方便
删除首位空格
var str1 = " my name is z3 ";
console.log(" my name is z3 "); // 空格未去前
console.log(str1.trim()); // trim可以去掉前后空格
字符串分割
var str1 = "aaa-bbb-ccc-ddd-eee";
// ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
// split分割后，转数组
var arr = str1.split("-");
console.log(arr); // 字符串转数组split
console.log(arr.join("*")); // 数组转字符串join
09 JS中的对象
01 认识对象
JS中的数据类型：
基本数据类型：number string boolean undefined null symbol bigInt
引用数据类型：object function（函数） array（数组） 函数和数组都是特殊的数据类型
object是对象——容器 数组和对象都是容器
在对象中放属性，属性包含属性名和属性值 属性名也叫键，属性值也叫值
键值对 key value key-value
键是字符串类型，可以不使用引号包起来 name
值可以是任何类型
对象是属性的无序集合
var obj = {
name:"wc",
age:18,
isMerry:false,
score:[100,88,40],
// 如果一个函数位于对象中，这个函数也叫方法
eat:function(){ // eat是一个方法
console.log("eat...");
},
};
// 访问对象中的属性，通过.访问
console.log(obj.name);
console.log(obj.age);
console.log(obj.isMerry);
obj.eat()
通过[ ]可以访问，对象中的属性
var obj = {
name:"wc",
age:18,
isMerry:false,
score:[100,88,40],
eat:function(){
console.log("eat...");
},
};
// 对象中的属性，通过[]也可以访问
console.log(obj["name"]);
查找一个对象上不存在的属性结果是undefined
var xxx = "age";
// obj.xxx 表示去找obj上的xxx属性
// 查找一个对象上不存在的属性结果是undefined
console.log(obj.xxx);
// 如果属性名保存在一个变量中，想通过变量来获取属性值，只能通过[]的形式 通过打.不行
console.log(obj[xxx]); // 18
通过new Object( )来创建一个字符串
// 通过new Object创建对象
let obj1 = new Object();
obj1.name = "z3";
obj1.age = 18;
obj1.score = 88;
console.log(obj1.name);
console.log(obj1.age);
console.log(obj1.score);
操作对象中的属性
// 对象是属性的无序集合
// 操作集合
// 操作：CRUD
var obj = {
name:"wc",
age:18,
isMerry:false,
score:[100,88,40],
eat:function(){
console.log("eat...");
},
};
// 访问属性
console.log(obj.name);
console.log(obj["name"]);
// 添加属性
obj.address = "bj";
console.log(obj.address);
// 修改属性
obj.name = "xq";
console.log(obj.name);
// 删除属性
delete obj.name; // delete是一个运算符，用来删除某个对象上的属性
console.log(obj.name); // undefined （访问一个对象上不存在的属性）
10 Math和Date
01 Math对象
Math是一个内置对象（不是一个构造函数），它拥有一些数学常数属性和数学函数方法
常见的属性：
// 圆周率，约等于 3.14159；
console.log(Math.PI);
常见的方法：
// floor本意是地板的意思 向下舍入取整
console.log(Math.floor(3.99)); // 3
// ceil本意是天花板的意思 向上舍入取整
console.log(Math.ceil(3.01)); // 4
// round本意围绕的意思 四舍五入取整
console.log(Math.round(3.5)); // 4
// random本意是随机的意思
console.log(Math.random()); // 随机出来的是0-1的随机数，包含0，但不包含1
// 返回x的y次幂
console.log(Math.pow(2,4));
// 你随机一个[5, 50)整数
var randomNum = Math.floor(Math.random() * 45) + 5;
// Math.random() * 45 (0-1)*45 => 0-45
// Math.random() * 45) + 5 再加5 => 5-50
// Math.floor向下取整
console.log(randomNum); // 5-50
注意： 要想知道math还有哪些属性，可以去MDN上查
02 Date对象
关于时间的基本认识
- 最初，人们是通过观察太阳的位置来决定时间
- 之后，人们开始制定的标准时间是英国伦敦的皇家格林威治（ Greenwich ）这个时间也称之为GMT（Greenwich Mean Time），其他时区根据标准时间来确定自己的时间，往东的时区（GMT+hh:mm），往西的时区（GMT-hh:mm）；即往东加小时，往西减小时
- 中国位于东8区（+8小时）
- 但是，根据公转有一定的误差，也会造成GMT的时间会造成一定的误差，于是就提出了根据原子钟计算的标准时间UTC（Coordinated Universal Time）
- 目前GMT依然在使用，主要表示的是某个时区中的时间，而UTC是标准的时间。
语法：
// data是数据的意思 date是日期的意思
var date1 = new Date();
console.log(date1); // Mon Jul 04 2022 15:17:44 GMT+0800 (中国标准时间)
var date2 = new Date("2022-07-04"); // 默认8点
console.log(date2); // Mon Jul 04 2022 08:00:00 GMT+0800 (中国标准时间)
// Invalid Date 无效的，不合法的（用引号包）
var date3 = new Date(2023,10,10,03,10,30);
console.log(date3); // Fri Nov 10 2023 03:10:30 GMT+0800 (中国标准时间)
// 300表示毫秒
var date4 = new Date(2023,10,10,03,10,30,300);
console.log(date4);
console.log(new Date().getTime()); // 得到时间戳
// Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。
var date5 = new Date(1656919482363); // 从1970-01-01到今天的毫秒数
console.log(date5); // Mon Jul 04 2022 15:24:42 GMT+0800 (中国标准时间)
03 Dte的两种时间表
RFC格式：
var date = new Date();
console.log(date); // RFC格式
console.log(date.toISOString()); // ISO格式
// Date 日期
console.log(date.toDateString()); // 只有年月日
// Time 时间
console.log(date.toTimeString());
dateString时间的表示方式
-
日期的表示方式有两种：RFC 2822 标准 或者 ISO 8601 标准。
-
默认打印的时间格式是RFC 2822标准的
-
利用toISOString()将其转化成ISO 8601标准的
- YYYY：年份，0000 ~ 9999
- MM：月份，01 ~ 12
- DD：日，01 ~ 31
- T：分隔日期和时间，没有特殊含义，可以省略
- HH：小时，00 ~ 24
- mm：分钟，00 ~ 59
- ss：秒，00 ~ 59
- .sss：毫秒
- Z：时区
04 Date中的常用方法
Date获取信息的方法：
-
getFullYear()：获取年份（4 位数）
-
getMonth()：获取月份，从 0 到 11；
-
getDate()：获取当月的具体日期，从 1 到 31；
-
getHours()：获取小时；
-
getMinutes()：获取分钟；
-
getSeconds()：获取秒钟；
-
getMilliseconds()：获取毫秒；
var date = new Date(); console.log(date.getFullYear()); console.log(date.getMonth()); console.log(date.getDate()); console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); console.log(date.getMilliseconds());
获取某周中的星期几：
-
getDay( )：获取一周中的第几天，从 0（星期日）到 6（星期六）；
console.log(date.getDay());
05 获取时间戳
Date获取Unix时间戳：
-
Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。
-
方式一：new Date().getTime()
-
方式二：new Date().valueOf()
-
方式三：+new Date()
-
方式四：Date.now()
// 方法一：Date.now() console.log(Date.now()); // 1656921159638 // 方法二：getTime() var date1 = new Date(); console.log(date1.getTime()); // 1656921198108 // 方法三：+ var date2 = new Date(); console.log(date2); console.log(+date2); // 方法四：valueOf() var date3 = new Date(); console.log(date3.valueOf()); -
时间戳可以干什么
利用时间戳可以计算一片代码运行的时间 var startTime = Date.now(); for(var i=0; i<100000; i++){ console.log(i); } var endTime = Date.now(); console.log("for循环消耗的时间为：", endTime - startTime); // 2816 -
封装一个函数，计算另一个函数（test）消耗的时间
function testPerformance(fn) { // 形参（ab） var startT = Date.now(); fn(); var endT = Date.now(); return endT - startT; } function test() { for (var i = 0; i < 100000; i++) { console.log(i); } } let time = testPerformance(test); // 实参 console.log("执行test函数消耗的时间为：",time); // 3311
06 parse方法
Date.parse方法：
-
Date.parse(str) 方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳。。
-
作用等同于 new Date(dateString).getTime( ) 操作；
-
需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
-
其他格式也许也支持，但结果不能保证一定正常；
-
如果输入的格式不能被解析，那么会返回NaN；
var timeStr = "2022-07-04"; // ok // var timeStr = "2022/07/04"; // ok // var timeStr = "2022*07*04"; // ok // var timeStr = "2022 07 04"; // ok // var timeStr = "2022+07+04"; // ok // new Date时，可以传递一个字符串，关键是这个字符串应该是什么样的格式呢？ // 上面的格式都可以 var date = new Date(timeStr); console.log(date); // Mon Jul 04 2022 08:00:00 GMT+0800 (中国标准时间) console.log(date.getTime()); // Mon Jul 04 2022 08:00:00 GMT+0800 (中国标准时间) console.log("--------------------"); console.log(Date.parse(timeStr)); // parse 其他格式也许也支持，但结果不能保证一定正常 标准格式为：2022-07-04 例： var timeStr = "2022+07+04"; var date = new Date(timeStr); console.log(Date.parse(timeStr)); // NaN
