一、概述
1.1 前端技术:
- HTML: 定义了网页的内容
- CSS: 描述了网页的布局
- JavaScript: 网页的行为
1.2 JavaScript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
二、快速入门
2.1 引入JavaScript
1.内部标签
<script>
// ...
</script>
2.外部引入
<script src="js/qj.js"></script>
【代码演示】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 在script标签内写JavaScript代码-->
<!-- 方法一:内部标签-->
<!-- <script>-->
<!-- alert("hello World !")-->
<!-- </script>-->
<!-- 方法二:外部引入,注意script标签必须成对出现-->
<!-- 不用显示定义type,默认就是JavaScript-->
<!-- <script type="text/javascript"></script>-->
<script src="js/qj.js"></script>
</head>
<body>
</body>
</html>
浏览器调试
console.log(score):在浏览器控制台打印变量,相当于System.out.println();
2.2 数据类型
number
js不区分小数和整数,Number
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
“abc” ‘abc’
布尔值
true ,false
逻辑运算
&& 与
|| 或
! 非
比较运算符
= 赋值
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果为true)
tips
- NaN===NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题:
console.log(1/3)===(1-2/3) //fasle
尽量避免使用浮点数运算,存在精度问题
Math.abs(1/3-(1-2/3))<0.000001
数组
Java的数值必须是相同类型的对象,JavaScript不需要这样,如果取数组下标越界,就会undefined
//保证代码的可读性,尽量使用[]
var arr =[1,2,3,4,5,"hello",null,true]
new Array(1,12,3,4,"hello")
对象
对象是大括号,数组是中括号,每个属性之间用逗号隔开,最后一个不需要添加。
var person ={
name:"suc",
age:18,
target:["AI","CV","RS"]
}
/*
输出测试:
person.target
>(3) ["AI", "CV", "RS"]
person.name
>"suc"
person
>{name: "suc", age: 18, target: Array(3)}
*/
严格检查格式
/*'use strict';严格检查模式,预防JavaScript的随意性导致一些问题,
必须写在第一行
局部变量建议都使用let去定义*/
'use strict'
let i=1;
三、字符串
3.1 字符串
- 正常字符我们使用单引号或者双引号包裹
- 注意转义字符\
代码 | 输出 |
---|---|
’ | 单引号 |
" | 双引号 |
\ | 反斜杠 |
\n | 换行 |
\r | 回车 |
\t | tab(制表符) |
\b | 退格符 |
\f | 换页符 |
3.多行字符串编写
var msg = `
hello
world
你好`
3.2字符串属性
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
3.3 字符串的方法
Method | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将指定的 Unicode 值转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
四、数组
4.1 数组的定义
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示
var arr = ['a', 'b', 'c'];
除了在定义时赋值,数组也可以先定义后赋值
var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';
任何类型的数据,都可以放入数组。
var arr = [
{a: 1},
[1, 2, 3],
function() {return true;}
];
arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}
4.2 length属性
数组的length
属性,返回数组的成员数量。
['a', 'b', 'c'].length // 3
只要是数组,就一定有length
属性。该属性是一个动态的值,等于键名中的最大整数加上1
。
var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001
length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员会自动减少到length设置的值。当length属性设为大于数组个数时,读取新增的位置都会返回undefined。
var arr = [ 'a', 'b', 'c' ];
arr.length // 3
arr.length = 2;
arr // ["a", "b"]
数组本质上是对象的一种,所以我们可以为数组添加属性,但是这不影响length
属性的值。如果数组的键名是添加超出范围的数值,该键名会自动转为字符串。
var arr = [];
arr['p'] = 'abc';
arr.length // 0
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';
arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"
4.3 数组的遍历
遍历类似数组的对象,可以采用for
循环,也可以采用数组的forEach
方法。
// for循环
function logArgs() {
for (var i = 0; i < arguments.length; i++) {
console.log(i + '. ' + arguments[i]);
}
}
// forEach方法
function logArgs() {
Array.prototype.forEach.call(arguments, function (elem, i) {
console.log(i+'. '+elem);
});
}
//数组遍历
// for循环
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}
// while循环
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
4.4 in 运算符
检查某个键名是否存在的运算符in
,适用于对象,也适用于数组。如果数组的某个位置是空位,in
运算符返回false
var arr = [];
arr[100] = 'a';
100 in arr // true
1 in arr // false
五、对象
5.1基本概念
JavaScript 对象:对象只是一种特殊的数据。对象拥有属性和方法。
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数… 此外,JavaScript 允许自定义对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
- 布尔型可以是一个对象。
- 数字型可以是一个对象。
- 字符串也可以是一个对象
- 日期是一个对象
- 数学和正则表达式也是对象
- 数组是一个对象
- 甚至函数也可以是对象
5.2对象的创建
var 对象名 ={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象,含有四个属性
var person ={
name:"suc",
age:18,
email:suc@mail.ustc.edu.cn
}
1.对象赋值
person.age
>18
person.age=15
>15
2.使用一个不存在的对象属性,不会报错,undefined
person.girlfriend
>undefined
3.动态的删减属性,通过delete删除对象属性
delete person.name
>true
person
>{name: "suc", email: "suc@mail.ustc.edu.cn"}
4.动态的添加
person.age=18
person
>{name: "suc", email: "suc@mail.ustc.edu.cn", age: 18}
5.判断属性值或方法是否在这个对象中 in
'age' in person
>true
'toString' in person//继承
>true
6.判断方法和属性是否是这个对象自身拥有 hasOwnProperty()
person.hasOwnProperty('toString')
>false
person.hasOwnProperty('age')
>true
六、流程控制
6.1 If…else 语句
请使用 if…else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
6.2 三目运算
(condition1) ? ture-doing : else-doing; 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码
5 > 3 ? alert("5大于3") : alert("5小于3");
6.3 for 循环
for (let i=0;i<10;i++){
console.log(i)
}
forEach 循环
var age=[7,2,4,6,3,9,2];
//函数
age.forEach(function(value){
console.log(value)
})
for…in
var age=[7,2,4,6,3,9,2];
for (var num in age){
console.log(age[num])
}
6.4 思维导图
七、Map和Set
7.1 Map
- Map的创建
//空map设值key-value
var m = new Map();
m.set("cv",18);
m.set("nlp",19);
//构造参数传key-value
var m = new Map([['cv', 18], ['nlp', 19]]);
- Map中的方法
var m = new Map(); // 空Map
m.set('cv', 18); // 添加新的key-value
m.has('cv'); // 是否存在key 'cv': true
m.get('cv'); // 18
m.delete('cv'); // 删除key 'cv'
m.get('cv'); // undefined
- 对一个key重复设值,后面的值会将前面的值覆盖。
var m = new Map();
m.set('cv', 18);
m.set('cv', 19);
m.get('cv'); // 19
7.2 Set
Set和Map类似,但set之存储key,且key不重复。
- Set的创建。
//方法一:
var s1 = new Set(); // 空Set
s1.add(1);
s1.add(2);
s1.add(3);
//方法二:
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
- Set的方法
var s = new Set([1, 2, 3]);
s.add(3);
>>s; // Set{1,2,3}
s.delete(3);>>s;
// Set([1,2]);
s.has(1)//true 判断是否包含元素
7.3 Map及Set的遍历
Array可以采用下标进行循环遍历,Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了iterable类型,Array、Map、Set都属于iterable类型。
- 具有iterable类型的集合可以通过新的for … of循环来遍历。
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}
- 遍历:forEach
forEach是iterable内置的方法,它接收一个函数,每次迭代就自动回调该函数。
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});
Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});
Map的回调函数参数依次为value、key和map本身:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
八、函数
8.1 定义函数
定义方式一:
function abs(x) {
//手动抛异常
if(typeof x !=='number'){
throw 'Not a num';
}
if (x>10){
return x;
}else{
return -x;
}
}
定义方式二:
var abs1 = function (x) {
if (x>10){
return x;
}else{
return -x;
}
function(x){ … }是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数
8.2 arguments和rest
由于JavaScript的特性,函数传递过程中,传递的参数的个数可以小于或者大于规定的个数,并不会报错,然后对于这个问题有arguments关键字代表进来的所有参数,是一个数组。
arguments包含所有参数,有时候想使用多余的参数进行附加操作,需要排除已有的参数。
ES6引入新特性,获取除了已经定义的参数外的所有参数,rest参数只能写在最后面,必须使用…表示
var f1 = function (a,b) {
console.log("a->" + a);
console.log("b->" + b);
for(var i =0;i<arguments.length;i++)
console.log(arguments[i]);
}
function f2(a,b,...rest) {
console.log('a->'+a);
console.log('b->'+b);
console.log('rest->'+rest);
}
我们所有的全局变量都会绑定到window上,如果不同的js文件,使用了相同的全局变量,就会产生冲突
//唯一全局变量
var SucApp={};
//定义局部变量
SucApp.name='suc';
SucApp.add =function (a,b) {
return a+b;
}
8.3 JavaScript中的var 关键字
- 1. var定义的变量没有块作用域
for( let i = 0;i<10;i++){
console.log(i);
}
console.log("循环体之外" + i);//会报错
for( var i = 0;i<10;i++){
console.log(i);
}
console.log("循环体之外" + i);//依旧可以用
- 2. var定义的全局变量会自动添加全局window对象的属性
下面程序使用let定义变量name,这个变量不存在任何函数内,属于全局变量,但是与var定义全局变量不同,使用let定义的全局变量不会变成window对象的属性,因此上面的程序访问window.name将会看不到任何输出。
let name = "gg" ;
console.log(name);
console.log(windos.name);//报错
- 3. 使用var定义的变量会提前加载,而使用let定义的变量要等到程序流执行到定义变量的代码时才会加载。
var name ='gg';
function func(){
console.log(name);//undefined,如果下面name用let定义就会出错
var name = 'jj';
console.log(name);//jj
}
func();
8.4 函数作为方法调用
1.在 JavaScript 中你可以将函数定义为对象的方法。
以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
2.this 关键字
当函数没有被自身的对象调用时, this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口(window 对象)。
上面代码中fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
function myFunction() {
return this;
}
console.log(myFunction()); // 返回 window 对象
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
console.log(myObject.fullName()); //实例中 this 的值为 myObject 对象
3.call() 和 apply()
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。 两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
function getAge() {
var now =new Date().getFullYear();
return now - this.birth;
}
var suc={
name:'苏',
birth:2000,
age: getAge
};
console.log(getAge.apply(suc,[])); //20
console.log(getAge.call(suc)); //20
九、内部对象
9.1 标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
9.2 Data
1.Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象:
var myDate=new Date() //Tue Oct 13 2020 15:26:49 GMT+0800 (中国标准时间)
myDate.getTime()
now =new Date(1602574009709) //时间戳转时间
2. Date 对象方法
方法 | 描述 |
---|---|
Date() | 返回当日的日期和时间。 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数,时间戳 |
9.3 JSON
JSON:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript中一切皆对象,一切js支持的类型都可以用JSON来表示。
格式:
- 对象:{}
- 数组: []
- 所有的键值对都用 key :value
var user ={
name:'suc',
age:18,
sex: 'male'
};//
//对象转json字符串
var jsonUser = JSON.stringify(user);
//json字符串转对象
var obj=JSON.parse('{"name":"suc","age":18,"sex":"male"}');
格式比较
var user ={name:'suc',age:18,sex: 'male'}
var jsonuser ="{"name":"suc","age":18,"sex":"male"}"