JavaScript【狂神笔记】
时间：2022-12-15 06:00:01
JavaScript
什么是JavaScript
概述
JavaScript是世界上最流行的脚本语言
合格的后端人员必须精通JavaScript
ECMAScript
可以理解为是JavaScript的一个标准
最新版本已经到了es6版本
但大多数浏览器仍然只支持es5代码上
开发环境-在线环境，版本不一致
快速入门
引入JavaScript
<script> //... script> - 外部引入
abc.js
//... test.html
<script src="abc.js">script> DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="js/qj.js">script> <script type="text/javascript">script> head> <body> body> html> 基本语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script> //定义变量 变量类型(var) 变量名=变量值 var score=80; //条件控制 if(score>=70&&score<80){
alert("中等"); }else if(score>=80<90){
alert("良好"); }else{
alert("其它"); } //console.log() 在浏览器的控制台中打印变量！相当于System.out.print() console.log(score); script>
head>
<body>
body>
html>
调试JavaScript程序
打开运行的网页 —> 点击审查元素 —> 打开源代码（Sources）—>在打开的代码中设置断点 —> 刷新页面后进行调试
数据类型
数值，文本，图形，音频，视频…
变量
var name="daxi";
//变量名不能以数字开头
number
123 //整数
123.1 //浮点数
1.23e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算
&& || ！
比较运算符
=
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样，结果true)
这是一个JS的缺陷，坚持不要使用==
须知：
- NaN===NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.000000001
null和undefined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象，JS中不是
//保证代码的可行性，尽量使用[]
var arr=[1,2,3,"hello",null,true];
new Array(1,2,3,"hello",null,true);
去数组下标：如果越界了，就会显示undefined
对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script> //Person person=new Person(); var person={
name:"daxi", age:2, tags:['book','auther','...'] } script>
head>
<body>
body>
html>
取对象的值
person.name
>"daxi"
person.age
>2
严格检查格式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script> 'use strict' let i=10; //ES6 let script>
head>
<body>
body>
html>
数据类型
字符串
- 正常字符串使用 单引号 或者 双引号 包裹
- 注意转义字符
\'
\n
\t
\u#### unicode字符
\x## Ascll字符
- 多行字符串编写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script> 'use strict' //单引号：tab上面 esc下面 let name=` hello world welcome `; script>
head>
<body>
body>
html>
- 模板字符串
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script> 'use strict' let age=7; console.log(`age:${
age}`); script>
head>
<body>
body>
html>
- 字符串长度
student.length
- 字符串的可变性，不可变
7.常用方法
//大小写转换
student.toUpperCase()
student.toLowerCase()
//返回下标
student.indexOf('t')
//截取指定字符串
student.substring(1)//从第一个字符截取到最后一个字符
student.substring(1,3)//[1,3)
数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6];//通过下标取值和赋值
arr[0]
arr[0]=1;
- 长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
- 方法
indexOf()//通过元素获得下标索引
//字符串的"1"和数字1是不一样的
slice()//截取Array的一部分，返回一个新数组，类似于String中的substring
push()//压入到尾部
pop()//弹出尾部的一个元素
unshift()//压入到头部
shift()//弹出头部的一个元素
sort()//排序
reverse()//元素反转
concat()//数组拼接
arr
(3) ['A', 'B', 'C']
arr.concat(1,2,3)
(6) ['A', 'B', 'C', 1, 2, 3]
//注意：concat()并没有修改数组，只是会返回一个新的数组
join()//连接符
arr.join(".");
'A.B.C'
//打印拼接数组，使用指定的字符串连接
- 多维数组
arr1=[[1,2],[3,4],[5,6]]
(3) [Array(2), Array(2), Array(2)]
arr1[1][1]
4
数组：存储数据（如何存，如何取，方法都可以自己实现）
对象
若干个键值对
var 对象名={
属性名:属性值，
属性名:属性值，
属性名:属性值
}
//定义了一个person对象，有三个属性
<script>
'use strict'
var person={
name:"daxi",
age:10,
score:88
}
</script>
JS中对象，{……}表示一个对象，键值对描述属性xxxx：xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号
JavaScript中所有的键都是字符串，值是任意对象
1.对象属性
person.age
10
person.name
'daxi'
person.score
88
2.使用一个不存在的对象属性，不会报错 undefined
person.dx
undefined
3.动态的删减属性，通过delete删减属性
delete person. score
true
person
{
name: 'daxi', age: 10}
4.动态的添加，直接给新的属性添加值即可
person.number=3
3
person
{
name: 'daxi', age: 10, number: 3}
5.判断属性值是否在这个对象中,xxx in xxx
age in person
VM295:1 Uncaught ReferenceError: age is not defined
at <anonymous>:1:1
(匿名) @ VM295:1
"age" in person
true
//ji
toString in person
false
"toString" in person
true
6.判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true
流程控制
if 判断
<script>
'use strict'
var age=3;
if(age<3){
alert("www");
}else if(age===3){
alert("hhh");
}else{
alert("yyy");
}
</script>
while循环，避免程序死循环
<script>
'use strict'
var age=3;
while(age<100){
age=age+1;
console.log(age);
}
</script>
<script>
'use strict'
var age=3;
do{
age=age+1;
console.log(age);
}while(age<100);
</script>
for循环
<script>
'use strict'
var age=3;
for(let i=age;i<=100;i++){
console.log(i);
}
</script>
forEach循环
<script>
'use strict'
var age=[10,20,30,40,50,60,70,80,90];
//函数
age.forEach(function (value, index, array){
console.log(age);
});
</script>
for…in 循环
<script>
'use strict'
var age=[10,20,30,40,50,60,70,80,90];
//for(type str:el)
//for(var index in object{}
for(var num in age){
console.log(age[num]);
}
</script>
for…of 循环
<script>
'use strict'
var age=[10,20,30,40,50,60,70,80,90];
//for(var value of object{}
for(var num of age){
console.log(num);
}
</script>
Map和Set
ES6新特性
map
<script>
'use strict'
//ES6
var map=new Map([['lili',80],['daxi',88],['tom',70]]);
var score=map.get('daxi');
console.log(score);
map.set('lala',75);
map.delete('lili');
</script>
set：无序不重复的集合
<script>
'use strict'
//ES6
var set=new Set([1,2,3,3,4,4,4,4,5]);
set.add(6);
set.delete(3);
console.log(set.has(4));
</script>
iterator
函数
定义函数
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
/* input(-11) 11 input() NaN */
一旦执行到return代表函数结束，返回结果
如果没有执行return ，函数执行完也会返回结果，结果为undefined
定义方式二
<script>
'use strict'
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
function(x){……}这是一个匿名函数，但是可以把值赋给abs，通过abs就可以调用函数
调用函数
abs(10) 元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
