Javascript笔记
1、什么是JavaScript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
Java、JavaScript
=一个合格的后端人员，必须要精通JavaScript=
1.2、历史
https://www.w3school.com.cn/js/pro_js_history.asp
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但大部分浏览器还只停留在支持es5版本
问题：开发环境和线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
1.内部标签
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
body>
2.外部引入
//qj.js中代码
alert('hello,world');
<head>
head>
<body>
<script src="../js/qj.js">script>
body>
2.2、基本语法入门
输出的三种方法：
①alert(“Hello”); //输出一个弹框
②document.write(“Hello”); //在HTML文件的body标签中输出
③console.log(“Hello”); //在控制台打印输出
默认为es5.1,修改为es6版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E9XSk3QJ-1635337999800)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210730152116030.png)]
<script>
// 1.定义变量 变量类型 变量名=变量值；
var num=1;
var name="cgh";
//alert(num);
// 2.条件控制 可循环嵌套
if(2>num)
alert('true');
script>
浏览器必备调试须知：
网页审查元素常用这5个：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0AO5Be6S-1635337999804)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210730160235007.png)]
调试js代码：网页—>审查元素—>控制台
console.log(变量名) //在浏览器的控制台打印变量 <=> Sysem.out.println();
Sources：源代码，刷新网页后，可以用来查看执行代码步骤
2.3、数据类型
数值，文本，图形，音频，视频…
一般六种基本数据类型：
①String 字符串
②Number 数值型
③ Boolean 布尔型
④Null 空值
⑤ Undefined 未定义
Object 对象数据类型 属于引用数据类型
变量
全部用var定义
一般用 _ $ 符号开头
number
js不区分小数和整数，所有数值都是Number类型
123 //整数
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number 不是数字，常用于判断
Infinity//表示无限大的数
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& || ！
2.4、数值强制类型转换
var a=123;
/*
可以使用一个运算符typeof来检查一个变量的类型
语法：typeof 变量
**/
console.log(typeof a);
/*
JS中可以表示的数字最大值
Number.MAX_VALUE
值为：1.7976931348623157e+308
如果使用Number表示的数字超过了最大值，则会返回一个Infinity(正无穷)
Infinity 表示正无穷
-Infinity 表示负无穷
使用typeof检查Infinity也会返回Number
NaN是一个特殊的数字，是字面量，表示Not A Number ，数据类型是Number
*/
console.log(Number.MAX_VALUE);
//Infinity是一个字面量
var a=Infinity;
console.log(typeof a);
/*
强制类型转换：
将其他的数据类型转换为String
方式一：
- 调用被转换数据的toString()方法
- 改方法不会影响到原变量，它会将转换为的结果返回
注意：null和undefined这两个值没有toString()方法，如果调用，会报错
*/
var a=null;
a=a.toString(); //报错
console.log(a);
/*
方式二：
- 调用String()函数，并将被转换的数据作为参数传递给函数
- 使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString方法，
但是，它会将null，直接转换为"null"
将undefined，直接转换为"undefined"
*/
var a=123;
//调用string()函数，来将a转换为字符串
a=String(a); //a作为参数传给String()函数
console.log(typeof a); //"string"
console.log(a); //"123"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l4XNgSSO-1635337999807)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211004220704905.png)]
3.如果字符串是空串或全是空格的字符串，则转换为0
-
Boolean----->Number ，true 值转为1，false 值转为0
-
null---->Number，值转为0
-
undefined------>Number, 值转为undefined
转换方式二：
- 这种方式专门用来转换字符串
- parseInt()把一个字符串转换为一个整数
- parseFloat()把一个字符串转换为一个浮点数
/*
parseInt()可以将一个字符串中的有效的整数内容取出来，然后转换为Number
- 从第一个数字开始读取，只会取整数，中间遇到其他字符，则不会取后面的数字
- parseFloat()和parseInt()类似，不同的是它可以获得有效的小数
*/
a="123px";
a=parseInt(a);
console.log(typeof a); //number
console.log(a); //123
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afNd22H1-1635337999809)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211004223212125.png)]
2.5、其他进制的数字
/*
在js中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
如果需要表示3进制的数字，则需要以0b开头
*/
//十六进制
a=0x10;
//八进制
a=070;
//二进制
a=0b10; //有的浏览器版本不支持，会报错
//像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
a="070";
//可以在parseInt()中传递一个第二个参数，来指定数字的进制
a=parseInt(a,10);
/*
将其他的数据类型转换为Boolean
- 使用Boolean()函数
- 数字--->布尔
- 除了0和NaN,其余的值都是true
-字符串--->布尔
- 除了空串，其余的都是true
-null和undefined都会转换为false
-对象也会转换为true
*/
2.6、运算符
/*
运算符也叫操作符
通过运算符可以对一个或多个值进行运算，并获取运算结果
比如：typeof就是运算符，可以来获得一个值的类型
它会将该值的类型以字符串的形式返回
类型：number String Boolean undefined object
算数运算符：
当对非Number类型的值进行运算时，会将这些值转换为Number，然后再运算
+ — * / %
*/
<script>
var a=123
var result = typeof a;
console.log(typeof result);
</script>
比较运算符 ！！！！重要！
= //赋值
== //等于（类型不一样，值一样，也会判断为true）
=== //绝对等于（类型一样，值一样，结果为true，否则为false）
这是一个js的缺陷，坚持不要使用==
须知：
-
NaN===NaN,这个与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3)) //结果为false
尽量避免使用浮点数进行运算，存在精度问题！
console.log(Math.abs((1/3)-(1-2/3)) //结果为true
null和undefined
- uull 空 类型为Object
- undefined 未定义 类型为undefined
数组
Java数组中的数值必须是相同类型的对象~，js中不需要这样！
//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,'hello',null,ture]; //方法一
new Array(1,2,3,'hello'); //方法二
取数组下标，如果越界，就会显示undefined
对象
对象是{ }，数组是[ ]
每个属性之间使用逗号隔开，最后一个不需要添加逗号
//Person person = new Person(1,2,3,4); //Java语言
var person={
name:'cgh',
age:3,
tags:['js','java','web','...']
}
取对象的值
person.age
3
person.name
"cgh"
2.5、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要设置支持ES6语法
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都let去定义
-->
<script>
'use strict';
//局部变量
let i=1;
//ES6 let
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使用 单引号 或 双引号包裹
2、注意转义字符\
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3、多行字符串编写
//tab键上面 esc键下面
var msg=
`hello
world
你好呀`
4、模板字符串
let name="cgh";
let age=3;
let msg=`你好呀,${
name}`
//输出 你好呀，cgh
5、字符串长度
console.log(str.length)
6、字符串的可变性：不可变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seW1xmdi-1635337999810)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210730181550533.png)]
7、大小写转换
//注意：这里是方法，不是属性了
student.toUpperCase() //转大写
student.toLowerCase() //转小写
8、student.indexOf(‘t’)
9、substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
3.2、数组
Array可以包含任意的数组类型
var arr =[1,2,3,4];//通过下标取值和赋值
arr[0]
arr[0]=1
1.长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，下标就会丢失
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1"和数字 1是不同的
**3、slice（）**截取 Array /数组 的一部分，返回一个新的数组，
类似于string中的substring(）
4、push（）、pop( ) 尾部
push : 压入数组元素到尾部 返回数组长度
pop: 弹出尾部的一个元素 返回弹出元素
5、unshift()、shift（） 头部
unshift : 压入数组元素到头部
shift: 弹出头部的一个元素
6、排序sort()方法
arr=['B','A','C']
arr.sort()
7、元素反转reverse()
["A","B","C"]
arr.