NecoMiMi > JavaScript

JavaScript

2022-04-24

学习笔记, JavaScript

1.什么是JavaScript

javascript是一门世界上最流行的脚本语言

==一个合格的后端程序员必须精通JavaScript==

2.快速入门

2.1引入JavaScript

1.内部标签

1
2
3
<script>
    //.....
</script>

2.外部引入

abc.js

1
//...

test.html

1
<script src="abc.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
<script>
    alert("hello world");
</script>

<!--外部引入-->
<!--注意：script标签必须成队出现-->
<script src="js/yl.js"></script>

<!--type 默认为JavaScript-->
<script type="text/javascript">

</script>

2.2基本语法入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    // 1.定义变量     变量类型 变量名=变量值；
    var num =3;
    var num1 =20;
    var num2 = num1*num+num;
    // 2.条件控制
    if (num>60 && num<80){
        alert("true");
    }
    else{
        alert("false");
    }

    //console.log()在浏览器的控制台打印变量！ System.out.println();
</script>

2.3数据类型

数字、文本、图形、音频、视频……

==变量==

1
var xxx = "xxx"

==number==

js不区分小数和整数，Number

1
2
3
4
5
6
123//整数
123.1//浮点数
1.123の//科学计数法
-99//负数
NaN//not a number
Infinity //表示无限大

==字符串==

‘abc’ “abc”

==布尔值==

true，false

==逻辑运算==

1
2
3
&&  与
||  或
!   非

==比较运算符==！！！重要！

1
2
3
=
==等于 （类型不一样，值一样，也会判断为true）
===绝对等于 （类型一样，值一样，结果为true）

这是js的一个缺陷，坚持不要使用==比较

须知：

  • NaN===NaN,这个与所有的数值都不想等，包括自己
  • 自能通过isNaN来判断这个数是否为NaN

浮点数问题

1
console.log(1/3===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

1
math.abs(1/3-(1-2/3))<0.000000001

==null和undefined==

  • null空
  • undefined未定义

==数组==

1
2
3
4
//保证代码可读性，尽量使用[]
var arr = [1,2,3,'hello',null];

new Array(1,2,3,'hello',null);

==对象==

1
2
3
4
5
var person ={
    name:"tianlei",
    age:3,
    tagp:['leilei','tianlei']
}

取对象的值

1
2
3
4
person.name
> "yulong"
person.age
> 3

2.4严格检查模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提：IEDA需要设置支持ES6语法
    `user strict`;严格检查模式，预防js随机性导致的一些问题
    必须写在第一行
    局部变量都去用let定义
    -->
    <script >
        `use strict`;
        //全局变量
        let i=1;
        //es6 let
    </script>

</head>
<body>

</body>
</html>

3.数据类型

3.1字符串

1.字符串用单引号或双引号包裹

2.注意转义字符\

1
2
3
4
5
\'
\n
\t  
\u4e2d     \u#### Unicode字符
“\x41”     Ascll字符

3.多行字符串编写

1
2
3
4
5
//tab 上面的引号
var msg =
    `好家伙
这是tab引号
不是单引号`

4.模板字符串

1
2
3
4
5
//tab 上面的引号
let name ="王玉龙";
let age = "22"

let b = `你好啊，${name}//$用于引用其它元素

5.字符串长度

1
str.length

6.字符串的可变性，不可变

image-20220501134658495

7.大小写转换

1
2
3
//注意这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

8.student.indexOf(“t”)

9.substring

1
2
student.substring(1)//1到最后一个字符
student.substring(2,4)//2到4个字符串

3.2数组

Array可以包含任意的数据类型

1
var arr =[1,2,3,4,5,6]

1.长度

1
arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2.indexOf,通过元素获得下标索引

1
2
arr.indexof(2)
1

3.**slice()**截取Array的一部分，返回一个新的数组，类似于string中的substring

4.push(),pop()

1
2
push:压入到尾部
pop：弹出尾部的一个元素

5.unshift(),shift()头部

1
2
unshift:压入到头部
shift：弹出头部的一个元素

6.排序sort（）

1
arr.sort()

7.元素反转

1
arr.reverse()

8.concat()

1
arr.concat([1,2,3])

注意：concat()并没有修改素组，只是会返回一个新的数组

9.连接符join

打印拼接素组，使用指定的字符串链接

1
arr.join('-')

10.多维数组

1
arr = [[1,2][3,4],["5","6"]]

3.3对象

若干键值对

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var 对象名 ={
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

//定义了一个person对象，它有四个属性！
<script>
    var person = {
        name : "yulong",
        age: 3,
        email: "673269043@qq.com",
        score: 0
    }
</script>

js中对象，{……}表示一个对象，键值对描述属性 xxxx: xxxx，多个属性用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

1.对象赋值

1
2
3
4
person.name ="yulong"
"yulong"
person.name
"qinjiang"

2.使用一个不存在的对象属性，不会报错！undefined

1
2
person.haha
undefined

3.动态的删减属性，通过delete删除对象的属性

1
2
3
delete person.name
true
person

4.动态的添加，直接给新的属性添加值即可

1
2
3
person.haha = "haha"
"haha"
person

5.判断属性值是某在这个对象中！ xxx in xxx

1
2
3
4
5
'age' in person
true
//继承父属性，'toString'为父元素属性值
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

1
2
3
4
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

3.4流程控制

if判断

1
2
3
4
5
6
7
8
var age = 3;
if (age >3){
    ralert(false);
}else if (2<age<3){
    alert('a');
} else{
    alert(true);
}

while循环

1
2
3
4
while(age <100){
    age =age +1;
    console.log(age)
}

for循环

1
2
3
for (let i =0;i<40;i++){
    console.log(i);
}

forEach循环

5.1引入的

1
2
3
4
5
6
var age =[12,14,1,6,8,17,10,15,20]

//函数
age.forEach(function (value){
    console.log(value)
})

for…in

1
2
3
for (var num in age){
    console.log(age[num])
}

3.5 Map 和 Set

Map:

1
2
3
4
5
6
//ES6   Map
//学生的成绩，学生的名字
var map =new Map([['tom',90],['jorn',100],['jack',85]]);
var name =map.get('tom');//通过key获得value
map.set('admin',123456);//新增一个元素
map.delete("tom");//删除

Set: 无需不重复的集合

1
2
3
4
var set =new Set([3,5,1,2,1]);
set.add(2);  //添加
set.delete(1);	//删除
console.log(set.has(3));	//是否包含某个元素

3.6 iterator

es6新特性

遍历数组

1
2
3
4
5
//通过for of/	for in打印数组下标
var arr = [3,4,5]
for (var x of arr){
	console.log(x)   
}

遍历map

1
2
3
4
var map = new Map([['tom',90],['jorn',100],['jack',85]]);
for(let x of map){
    console.log(x)
}

遍历set

1
2
3
4
var set =new Set([3,5,1,2,1]);
for(let x of set){
    console.log(x)
}

4.函数及面向对象

4.1函数定义及变量作用域