前端JavaScript基础
目录
JavaScript基础
1:JS概述
1.1:历史:
1.2:现状:
1.3:特点:
1.4:应用场景
2.搭建开发环境
2.1:浏览器:
2.2:服务器端
2.3:运行JS
3.语法规范
4.变量
4.1:声明变量
4.2变量的命名规范
4.3变量赋值
5.常量
6.数据类型
6.1数值型:
6.2字符串型
6.3布尔型
6.4未定义型
6.5空
7.数据类型的转换
7.1隐式转换
7.2强制转换
8.运算符
9.浏览器函数
10.流程控制:(选择执行)
1.if语句
11.循环执行
1.while循环
2.break
3.do-while 循环
4.for 循环
12.函数
1.创建一个普通函数
2.创建带有参数的函数
3.创建带有返回值的函数
4.变量的作用域
1.变量提升
2.函数的作用域
3.函数提升
13.递归
14.匿名函数
1.创建函数
2.匿名函数自调用
3.回调函数
15.系统函数(全局函数)
16.对象:(万物皆对象)
1.JS中的对象:
2.自定义对象的创建
3.使用对象字面量来创建对象
4.访问属性
5.使用内置构造函数来创建对象:
6.遍历对象:
7.检测属性是否存在
8.对象中的方法
17.数据的存储
18.数组
1.字面量创建数组
2.元素的访问
3.数组的长度
4.使用内置构造函数创建数组
5.数组的分类
6.数组的遍历
7.API
8.二维数组
19.字符串对象
1.转义字符 \
2.API
3.匹配模式(了解)
20.Math 对象
21.Data对象
1.创建对象
2获取
3.转为本地字符串格式
4.修改
22.Number对象
23.Boolean对象
5.错误处理
JavaScript基础
1:JS概述
1.1:历史:
1995年出现在网景公司的浏览器中
1996年,IE3中,也出现了JS,叫做JScript
1997年,出现了国际标准规范 ECMAScript
2009年,出现了CommonJS规范,JS开始往服务器端发展,出现了Node.js
1.2:现状:
JS即可以运行在浏览器中,也可以运行在服务器端
1.3:特点:
解释型语言,编译一行执行一行
弱类型语言,
基于对象
跨平台,可以运行在不同的操作系统
1.4:应用场景
开发浏览器端的交互效果,进行服务器端的开发。
2.搭建开发环境
2.1:浏览器:
浏览器自带的JS解释器,推荐使用谷歌浏览器
火狐 谷歌 欧朋 IE Safari
2.2:服务器端
- 安装Nodejs
- www.nodejs.org 官网
- 打开命令行窗口
- node -v 回车 查看版本号
2.3:运行JS
浏览器端:创建01.js和01.html两个文件,把js嵌入到html文件中
代码如下:
/*在01.html中引入js文件,打开html文件即可运行01.js文件*/
<script src="01.js"></script>
后端:NodeJs:
1.打开命令行
2.输入: node 拖拽js文件 回车
3.语法规范
区分大小写
每行代码结束的分号可以省略
分为单行注释(//)和多行注释(/* */)
4.变量
什么是变量?
变量是用于保存程序中的数据
4.1:声明变量
声明一个变量:
var x = 1; //使用关键字var声明变量,x是变量名称,在内存中开辟了一块空间,把数据保存进去
var id = 1;
var name = '小明';
var sex = '男';
var birthday = '1999-02-15';
var salary = '5000';
console.log(id, name, sex, birthday, salary); //在控制台输出变量保存的数据
输出结果如下:
一次声明多个变量:
var a=1,b=2,c;var danjia=10,shuliang=5,zongjia=danjia*shuliang;
console.log(zongjia); //打印输出结果
注意:多个变量之间用逗号隔开
4.2变量的命名规范
变量的名称可以由字母,数字,下划线,美元符号组成,不能以数字开头。不能使用关键字和保留字,不推荐使用汉字。
4.3变量赋值
变量声明未赋值则为undefined(未定义,) 变量可以多次赋值,赋不同类型的值,这是弱类型语言的特点练习
var english = 50;
var math = 49;
var sum = english + math;
console.log(sum); //打印值
输出结果如下:
5.常量
声明后必须赋值,不允许重新赋值
例如:const: userName='root';
示例代码如下:
const pi = 3.14;
var r = 5;
var L = 2 * pi * r;
var S = pi * r * r;
console.log('面积:' + S, '周长' + L); //打印输出结果
6.数据类型
分为原始类型和引用类型
- 原始类型:数值型、字符串型、布尔型、未定义型、空
- 引用类型:对象
6.1数值型:
整数:
1 2 3 4 5 6 7 8 9 10(十进制)
1 2 3 4 5 6 7 10 11 12(八进制) 以0开头的数字
1 2 3 4 5 6 7 8 9 a b c d e f 10(十六进制) 以0X开头的数字,a~f代表10~15,不区分大小写
示例代码如下:
var n1 = 10; //十进制
var n2 = 010; //八进制
var n3 = 0xa;//十六进制
浮点型:
3141.5e-1
314.15
23.415e1
var n4 = 314.15;
var n5 = 3.1415E+2;
var n6 = 3141.5E-1;
console.log(n4, n5, n6);
输出结果如下:
6.2字符串型
- 被引号所包含的数据,不区分单双引号
- 查看任意一个字符的unicode码
- 'a'.charCodeAt() 查看a字符的unicode码
6.3布尔型
只有两个值,分别是true,false,表示真和假,
条件的结果会是布尔型的值,还可以用于保存状态,例如是否登录,是否注册
var b1 = true;
console.log(b1, typeof b1);
输出结果如下:
6.4未定义型
- 只有一个值为undefined
- 声明了变量未赋值则为undefined
6.5空
只有一个值为null,,常和引用类型一起使用
7.数据类型的转换
7.1隐式转换
程序运行过程中自动产生的转换。
- 数值加字符串
var n1 = 2 + '3'; console.log(n1, typeof n1); //结果数值转为字符串
2.数值+布尔型
var n2 = 2 + true;
console.log(n2, typeof n2); //结果布尔型转为数值型1 true-->1 false-->0
3.字符串+布尔型
var n3 = '2' + true;
console.log(n3, typeof n3); //结果布尔型转为字符串型
总结:JS中+号的作用
加法运算
字符串之间的拼接
注意:NaN:not a number(不是一个数字) 再将数据转为数值型的时候,没有成功返回的结果。NaN和任何数字执行加减乘除等运算,结果还算NaN
结论 |
---|
隐式转换为数值,会自动调用Number函数, |
7.2强制转换
- 强制转为数值型
Number(‘5’) //5
Number(‘5a’) //NaN
Number(‘true’) //1
Number(false) //0
Number(undefined) //NaN
Number(null) //0
- 强制转为整型
parseInt()
用于将字符串和一个小数转为整型,其他转换都是NaN
parseInt(1.9) //1
parseInt('3.14') //3
parseInt('3.14a') //3
parseInt('a3.14') //NaN
- 强制转为浮点型
parseFloat()
用于将字符串转为浮点型
- 强制将数值型和布尔型转为字符串
toString
var num =5;
var a=num.toString() //'5'
8.运算符
1算术运算符
+ - * / % ++ --
%:取余
++:自增:在原来的基础之上+1
--:自减:在原来的基础之上-1
2.比较运算符
< > > = < = == === != ! ==
==:等于,比较值是否相同
===:全等于,先比较类型,再比较值(推荐用法)
总结:NaN和任何值比较(< > > = < = == === )都是false
面试题 |
---|
+ - ,隐式转换 console.log(5 + +'3'); //8 |
自增和自减,隐式转换 var a = '2'; a++; console.log(a); //3 |
3.逻辑运算符
&&:(并且):关联的两个条件都是true,结果是true
示例代码如下:
var salary = 7000;
console.log(salary >= 6000 && salary <= 10000); //true
||:(或者):关联的两个条件至少有一个为true,结果是true,否则false
!非(取反):
示例代码如下:
console.log(!true); //取反 //false
短路逻辑:
特点:
&& 当地一个条件为false,就不在执行第二个条件
|| 当第一个条件为true,就不在执行第二个条件
短路逻辑: |
---|
不用关心整体上是true还是false,重点是看第二部分是否执行; |
4.运算符
模拟计算机底层的运算过程,先将值转为二进制然后在运算,运算完成在把结果转回成十进制
- &:按位与,上下两位都是1,结果是1,否则是0
- |:按位或,上下两位含有1,结果是1,否则是0
- ^:按位异或,上下两位不同是1,否则是0
- >>按位右移,去掉最后的若干位
- << 按位左移,在最后补若干个0
5.赋值运算符
计算赋值:先执行计算,在执行赋值
= += -= *= /= %= &= |=
6.三目运算符
一目运算符:由一个运算符连接了一个操作数据或者表达式 a++,a-- !(取反)
二目运算符:由一个运算符连接了两个操作数据或者表达式 1+1,
三目运算符:由两个运算符连接了三个操作数据或者表达式 ?:
三目运算符:条件表达式 ? 表达式1: 表达式2;
如果条件表达式为true,执行表达式1,否则执行表达式2。
9.浏览器函数
alert() 弹出提示框,
prompt() 弹出提示(输入)框,需要使用变量保存用户输入的值,类型是字符串型;如果点击取消返回null
10.流程控制:(选择执行)
1.if语句
案例:满30减20
if(条件表达式){
语句块;
}
如果if后的语句块中只有一行语句,那可以省略大括号,
作为条件表达式出现隐式转为false:0 空字符 NaN undefined null
var total = 32;if (total >= 30) {//原来基础之上减20total -= 20;}console.log(total); //12
案例:判断一个人是否满18岁,如果满18岁打印成年人
var age = 26;if (age >= 18) {console.log('成年人'); //成年人}
if(条件表达式){
语句块1;
}else{
语句块2;
}
//是否为成年人var age = 21;if (age >= 18) {console.log('成年人');} else {console.log('未成年人')}
案例:假设从数据库中获取到了用户的性别(1/0),打印出对应的男或者女,使用if else 和三目运算符两种写法
if—else嵌套
// if elsevar sex = 1;if (sex === 1) {console.log('男');} else {console.log('女');}//三目var r = sex === 1 ? '男' : '女';console.log(r);
if(条件表达式1){
语句块1;
}else if(条件表达式2){
语句块2;
}else{
语句块n;
}
var n = 5;if (n === 1) {console.log('去非洲找女朋友')} else if (n === 2) {console.log('去印度找女朋友')} else if (n === 3) {console.log('去日本找女朋友')} else {console.log('回八宝山')//以上所有的条件都为false才会执行}
案例:声明一个变量,保存从数据库中读取的订单状态码,根据订单的状态码打印对应的汉字状态1-等待付款 2-等待发货 3-运输中 4-已签收 5-已取消 其他-无法追踪
var statu = 1;if (statu === 1) {console.log('等待付款')} else if (statu === 2) {console.log('等待发货')} else if (statu === 3) {console.log('运输中')} else if (statu === 4) {console.log('已签收')} else if (statu === 5) {console.log('已取消')} else {console.log('无法追踪')}
案例:声明变量保存一个人的成绩,根据成绩来打印对应的状态90以上优秀, 80-90良好,70-80中等,60-70及格,60以下不及格
var a = 100;if (a >= 0 && a <= 100) {if (a >= 90) {console.log('优秀');} else if (a >= 80) {console.log('良好');} else if (a >= 70) {console.log('中等');} else if (a >= 60) {console.log('及格');} else if (a < 60) {console.log('不及格');}} else {console.log('非法')}
案例 “根据存款的额度,显示对应的状态
0以下:非法的值 0~50000以下 普通客户 50000~500000以下 优质客户 500000~1000000以下金牌客户 10000000钻石客户
var money = 0;if (money < 0) {console.log('非法');} else if (money <= 50000) {console.log('普通客户')} else if (money <= 500000) {console.log('优质客户')} else if (money <= 1000000) {console.log('金牌客户')} else if (money <= 10000000) {console.log('钻石客户')}
switch-case语句
根据一个表达式的值,选择执行对应的语句块,属于是一种特殊的多想分支语句
switch后的表达式在和case后的值比较的时候只能进行全等于(===),要求值和类型都相同
switch(表达式){
case 值1: //会将表达式和值1比较
语句块1;
break; //结束,跳出switch-case语句
case 值2;
语句块2;
break;
default:
语句块n;
}
案例:1-非洲 2-印度 3-日本
var n = 5;switch (n) {case 1:console.log('非洲');break;case 2:console.log('印度')break;case 3:console.log('日本')default:console.log('八宝山')}
案例:声明变量保存任意一个城市名称,根据城市的名称打印对应的美食
var city = '北京';switch (city) {case '保定':console.log('驴肉火烧')break;case '石家庄':console.log('火哥烤冷面')break;case '北京':console.log('北京烤鸭')break;case '安徽':console.log('安徽牛肉板面')break;default:console.log('面条')}
11.循环执行
循环是一遍又一遍执行相同或者相似的内容
循环的两个要素:
- 循环条件:可以控制循环的次数
- 循环体 :要重复执行的相同或者相似内容
1.while循环
while(循环条件){
循环体;
}
案例:打印十次煎饼,范围1~10
var i = 1;while (i <= 10) {console.log('然哥第' + i + '次买煎饼');i++;}
练习:使用循环打印20~11之间的所有整数var i = 20;while (i > 10) {console.log(i);i--;}
案例:使用循环打印出80、75、70、65、60
var i = 80;while (i >= 60) {console.log(i);i -= 5;}console.log(i); //跳出循环之后查询i的值
案例:使用循环,结合if判断,打印出1~100之间所有的偶数
var i = 1;while (i <= 100) {if (i % 2 == 0) {console.log(i);}i++;}
案例:使用循环计算1~100之间所有整数的和
var i = 1;var total = 0;while (i <= 100) {total += i;i++;}console.log(total);
案例:计算1~100之间所有奇数的和
var i = 1;var total = 0while (i <= 100) {if (i % 2 == 1) {total += i;}i++;}console.log(total) //2500
2.break
在循环体执行后,就会跳出循环
案例:循环产生1~10的所有整数
var i = 1;while (true) {console.log(i);if (i === 10) {break;}i++;}
案例:当循环条件为true的情况下,计算11~20之间所有整数的乘积,
var i = 11;var chengji = 1;while (true) {if (i > 20) {break;}chengji *= i;i++;}console.log(chengji)
3.do-while 循环
do{
循环体;
}while(循环条件);
案例:循环打印1~10之间所有的整数
var i = 1;
do {console.log(i);i++;
} while (i <= 10);
练习:打印10~1之间所有的整数var i = 10;
do {console.log(i);i--;
} while (i >= 1);
案例:使用循环打印50,55,60,65,70
var i = 50;
do {console.log(i);i += 5;
} while (i <= 70);
案例:打印出1~100之间所有能被三整除的数字
var i = 1;
do {if (i % 3 === 0) {console.log(i);}i++;
} while (i <= 100);
案例:计算出1~100之间所有能被7整除的数字的和
var i = 1;
var sum = 0;
do {if (i % 7 === 0) {sum += i;}i++
} while (i <= 100);
console.log(sum); //735
练习:声明变量保存用户输入的值,如果输入正确强制结束循环,警示框弹出登录成功,如果输入的次数超过三次,强制结束循环,警示框弹出‘超出限制’
var i = 0;
do {var r = prompt('请输入密码');i++;if (r !== '123456' && i === 3) {alert('次数过多,强制下线');break;} else if (r === '123456') {alert('登录成功')break;}} while (true);
案例:要求死循环,弹出提示框,使用变量保存用户输入的值,在循环条件的位置判断是否正确
do {var r = prompt('请输入密码');
} while (r !== '123456')
4.for 循环
1.for(初始值;循环条件;增量){
循环体;
}
2.关键字:break和continue
break 跳出循环 结束,不在执行任何循环中的内容
continue 跳过某一次循环,不执行某一次中跳过的循环体部分,还会执行下一次循环
3.循环嵌套
在一个循环体的内部,还有其他的循环;任意两个循环之间都可以相互嵌套
案例:打印1~100之间所有能被4整除的数字
for (var i = 1; i <= 100; i++) {if (i % 4 === 0) { console.log(i); }}
案例:计算1~100之间所有能被5整除的数字的和
for (var i = 1, sum = 0; i <= 100; i++) {if (i % 5 === 0) {sum += i;}
}
console.log(sum) //1050
案例:打印出1900~2000年所有的闰年
for (var year = 1900; year <= 2000; year++) {if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {console.log(year + '是闰年');}
}
案例:假设有本金一万元,利率是3%(0.03),计算五年后的本金和利息共有多少
for (var a = 10000, i = 1; i <= 5; i++) {a = a + a * 0.03;// console.log(a)
}
console.log(a)
案例:打印1~10之间所有整数,不包含5
for (var i = 1; i <= 10; i++) {if (i === 5) {continue;}console.log(i)
}
案例:打印1~100之间所有的奇数,
for (var i = 1; i <= 100; i++) {if (i % 2 === 0) {continue;} else if (i % 2 === 1) {console.log(i)}
}
案例:使用循环打印* * * * *
for (var i = 1, a = ''; i <= 5; i++) {a += '*';
}
console.log(a);
练习:打印直角三角形
for (var j = 1; j <= 9; j++) { //外层循环:控制循环的行数————jfor (var i = 1, a = ''; i <= j; i++) { //内层循环:控制循环的列数————ia += '*';}console.log(a); //每循环一行结束后,打印这一行
}
12.函数
Number()/parseInt()/parseFloat()/alert()/prompt().....
函数:是一个功能体,需要提供若干个数据,返回处理的结果;
函数分为:系统函数和自定义函数
函数的作用:为了封装重复执行的代码
调用函数:函数名称(),可以多次调用同一个函数,每调用一次就执行一次函数体中的代码
1.创建一个普通函数
function 函数名称(){函数体; //封装的要重复执行的代码}
创建函数://创建函数function laba(){//函数体console.log('买煎饼喽,好大又好吃。')console.log('快来买吧!!')}//调用laba();
案例:创建一个函数getSum,在函数体中封装计算1~100之间所有整数的和,并打印出来
function getSum() {for (var i = 1, sum = 0; i <= 100; i++) {sum += i;}console.log(sum);}getSum(); //100getSum(); //100getSum(); //100
2.创建带有参数的函数
function 函数名称(参数列表){ //用于接收传递的数据函数体}
调用:函数名称(参数列表) ——实际传递的数据
案例:计算任意两个数字相加的和
function add(a, b) { //用于接收数据(形参)console.log(a + b);}//调用 add(3, 5); //实参:实际传递数据
参数:创建函数时的参数称为形参,调用函数时的参数称为实参,实参会赋值给形参;多个参数之间用逗号隔开,实参的数量可以多于或者少于形参的数量,如果形参未赋值则为undefined
案例:创建函数,getSum,在函数体中计算1~任意直接所有整数的和
function getSum(a) {for (var i = 1, sum = 0; i <= a; i++) {sum += i;}console.log(sum)};getSum(2)
案例:创建函数gerRun,计算出任意两个年份之间所有的闰年个数并打印出来,调用多次
function getRun(a, b) {for (var count = 0; a <= b; a++) {if (a % 4 === 0 && a % 100 !== 0 || a % 400 === 0) {count++;}}console.log(count);}getRun(2000, 2100); //25
3.创建带有返回值的函数
function 函数名称(参数列表){函数体;return 值; //返回值,函数调用后得到的结果}
调用:函数名称(参数列表)
return:返回,用于将函数调用的结果返回出去;return后不加值或者在函数中不写return,则返回undefined;return一旦执行,跳出函数,结束函数的调用;
案例:创建一个函数getMax1,传递任意两个数字,返回最大值
function getMax1(a, b) {if (a - b > 0) {return a;} else {return b;}
}
var result = getMax1(150, 150)
console.log(result)//三目运算符
function getMax1(a, b) {return a > b ? a : b
}
var result = getMax1(10, 150)
console.log(result)
案例:创建函数getMax2,传递任意是哪个数字,返回最大值
function getMax2(a, b, c) {if (a > b && a > c) {return a;} else if (b > c) {return b;} else {return c;}
}
var result = getMax2(30, 55, 20);
console.log(result);//三目运算符
function getMax2(a, b, c) {var max = a > b ? a : b;return max > c ? max : c;
}
var result = getMax2(30, 55, 20);
console.log(result);
案例:创建一个函数getStatus,传递订单的状态码,返回对应的中文状态 1-等待付款 2-等待发货 3-运输中 4- 已签收 5-已取消
function getStatus(a) {switch (a) {case 1:return '等待付款';case 2:return '等待发货';case 3:return '运输中';case 4:return '已签收';case 5:return '已取消';}
}
var result = getStatus(4);
console.log(result);
对比return和break |
---|
return 用于函数中,一旦执行就会跳出函数,结束函数的调用 |
break 用于switch-case语句和循环,一旦执行就会跳出循环,结束相应的语句 |
案例:创建一个函数isRun,传递任意一个年份查看是否为闰年,返回一个布尔类型的值
function isRun(year) {if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {return true;}return false;
}
var result = isRun(2000);
console.log(result);//三目运算符
function isRun(year) {return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}
var result = isRun(2000);
console.log(result);
4.变量的作用域
作用域:分为全局作用域和函数作用域,具体指变量和函数的可访问范围
全局变量:在函数外声明的变量,叫全局变量,在任何作用域下都可以访问到
局部变量:在函数内使用var声明的变量,叫局部变量,只能在当前的作用域下访问到
//全局作用域
var a='北京市城管'; //全局变量function shi(){var b='石景山城管'; //局部变量//函数作用域//函数内访问全局变量console.log(a);
}
function hai(){var c='海淀城管'; //局部变量//函数作用域
}
shi();
//在全局作用域访问局部变量
console.log(b)
注意:在函数中,不加var声明的变量是全局变量,严格模式下会报错(不推荐)
案例:
function fun(){var m1=m2=m3=4;//赋值是从后往前
}
fun()
console.log(m3);
console.log(m2);
console.log(m1);
1.变量提升
//变量提升:JS程序执行前,会将var声明的变量提升到所在作用域的最前边,只是提升声明,赋值不提升
console.log(a);
var a = 1;
function fn(){//var b 提升console.log(b); //undefinedvar b = 2;//提升后 b=2
}
查看以下程序的输出结果var c = 5;
function fun(){// var c;console.log(c); //undefined var c =7;//c=7;
}
fun();
2.函数的作用域
全局函数:在全局作用域下创建的函数,可以在任意作用域下访问
局部函数:在函数作用域下创建的函数,只能在所在的作用域下访问
3.函数提升
JS程序执行前,会将整个函数提升到所在作用域的最前边;可以先写调用,在写创建
13.递归
特点:在函数内调用自身,本身属于死循环;
使用递归:递归要有跳出条件,结合者return
示例:使用递归计算斐波那契数列的第n项
//使用递归计算斐波那契数列的第n项//第n项的值 = 第n-1项的值+第n-2项的值//第一项 和第二项都是1function fib(n) {//计算第n项的值,只需要返回第n-1项和第n-2项相加的和if (n === 1 || n === 2) {return 1;};return fib(n - 1) + fib(n - 2)}fib(5)console.log(fib(5))
斐波那契数列使用递归的时候涉及到太多的函数嵌套,属于CPU密集型算法,JS属于单线程运行(只利用其中一个内核),JS使用递归会比较慢 |
---|
14.匿名函数
1.创建函数
function fn(){ } (函数声明创建) |
---|
var fun = function () { } //变量名称就是函数名称 (函数表达式创建) |
对比函数名称和函数名称()的区别
函数名称本质上就是一个变量,保存了一个函数
函数名称(),调用函数,执行函数体中的代码,最终返回结果
对比函数声明和函数表达式两种创建函数的区别
函数声明创建的函数存在函数提升,可以先调用在创建;
函数表达式创建的函数使用了变量,只存在变量的提升,必须先创建在调用
案例:使用函数表达式创建函数,计算任意两个数字所有整数相加的和,并返回结果
var fn = function (a, b) {for (var i = a, sum = 0; i <= b; i++) {sum += i;}return sum;}console.log(fn(1, 100)); //5050
2.匿名函数自调用
全局污染:全局变量的出现,可以在任何的作用域下访问到,对其他的变量造成了污染
解决方案:把变量都转为局部变量。
(function(){//函数体封装的代码,都是在函数作用域下,变量都是局部变量//局部变量var n =1;})()
示例:
//轮播图1//用于记录播放到了第几张(function () {var n = 1;console.log(n)})();//轮播图2(function () {var n = 5;console.log(n)})();//轮播图3(function () {var n = 6;console.log(n);})();console.log(n) //n is not defined
3.回调函数
什么是回调函数:将一个函数以实参形式传递,需要有形参来接收并调用
示例:
function ran(madai) {console.log('第一棒开始');console.log('到达第一棒终点');//第二棒从这开始//实参会赋值给形参// madai=dong// madai()=dong()// 调用传递进来的函数madai();}function dong() {console.log('第二棒开始');console.log('到达第二棒终点');}//调用ran,传递的实参是一个函数,叫做回调函数ran(dong); //回调函数ran(function () { //回调函数console.log('陌生人跑了')})
15.系统函数(全局函数)
例如:Number() / parseInt() / parseFloat()
补充:
isNaN()检测一个值是否为NaN,会自动调用Number转为数值,然后检测。常用于检测用户输入的值是否为数值,如果不是数值则为NaN 是NaN返回true 不是NaN返回false
isFinite() 检测一个值是否为有限值,如果是有限值返回true,不是有限值返回false 只有0做除数得到的结果是无限值infinity
eval():执行字符串中的表达式
16.对象:(万物皆对象)
对象是由一组属性和方法的集合
我的电脑包含的属性:品牌、颜色、尺寸、…… 方法(功能):玩游戏、敲代码、做设计
然哥的第一辆车:属性:轮子、颜色、型号 …… 方法:代步、拉货、
1.JS中的对象:
自定义对象,用户创建的对象
内置对象,JS官方提供的对象
宿主对象,根据不同的环境来划分,浏览器、NodeJS两种宿主对象
2.自定义对象的创建
对象字面量:
内置构造函数:
自定义构造函数:
3.使用对象字面量来创建对象
使用{}大括号创建新对象
属性名和属性值之间用冒号隔开,多组属性之间用逗号隔开
属性名的引号可加可不加,如果含有特殊字符必须加
案例:创建一个汽车对象,包含有汽车的品牌型号,颜色,长度,宽度
var car = {品牌: '大众',颜色: 'red',宽: '1.5米',高: '1.5米'};console.log(car)
4.访问属性
对象.属性名
对象['属性名']
如果属性不存在返回undefined,如果属性名含有特殊符号只能使用第二种方式
案例:创建一个图书的对象,包含有图书的编号,名称,价格,作者;修改图书的价格,添加图书的出版社属性,打印整个对象
var book = {eid: 01,name: '高级开发',price: 123,autor: '老何'}book.name = '好书';book.price = 100;book.chuban = '河北高考';console.log(book);
5.使用内置构造函数来创建对象:
练习:创建一个轮播图对象,包含有编号,图片名称,图片大小,来源,
new Object()
创建一个空对象,需要单独添加每个属性
var bannor = new Object();bannor.eid = 1;bannor.name = '笑';bannor['big'] = '120';bannor.lao = '保定'console.log(bannor)
6.遍历对象:
使用循环,依次访问对象中的属性
for (var key in bannor) { //key代表对象中的每个属性名console.log(key, bannor[key]) }
7.检测属性是否存在
//检测属性是否存在console.log(student.sex === undefined);//console.log(student.hasOwnProperty('sex'));//console.log('sex' in student);
对象.属性名=undefined true表示不存在,false表示存在
对象.hasOwnProperty(‘属性名’) true表示存在,false表示不存在
‘属性名’ in 对象 true表示存在,false表示不存在
案例:创建一个商品对象,包含有商品的编号,名称,价格,如果价格存在打九折,如果产地属性不存在,添加该属性
var shop = {eid: 1,name: '高洋洋',price: 120}if (shop.hasOwnProperty('price')) { //('price' in shop) 也可以判断shop.price *= 0.9}if (shop.chandi === undefined) {shop.chandi = '保定'}console.log(shop)
8.对象中的方法
方法所对应的是一个函数,需要调用
var ran = {ename: '然哥',sex: '女',//方法play1: function () {console.log('然哥正在玩单杠');},play2: function () {//方法内部访问属性名// console.log(ran.ename + '正在玩泥巴') //然哥正在玩泥巴console.log(this.ename + '正在玩泥巴') //this指代当前所在的对象}};//调用对象中的方法ran.play1();ran.play2();console.log(ran)
案例:创建一个圆对象,包含属性有半径和圆周率,添加两个方法,分别是计算圆的周长和面积,最后调用
var yuan = {r: 4,pi: 3.14,zhouchang: function () {return 2 * this.pi * this.r;},mianji: function () {return this.pi * this.r * this.r;}}var S = yuan.mianji();var l = yuan.zhouchang();console.log(S, l)
案例:创建一个计算器对象,添加两个方法,传递任意两个数字,分别计算相加和相减,并返回结果
var jisuan = {jia: function (a, b) {return a + b;},jian: function (a, b) {return a - b;}}var a = jisuan.jia(5, 6); //11var b = jisuan.jian(6, 5); //1console.log(a, b)
17.数据的存储
原始类型:直接将数据存储在栈内存中
引用类型:在堆内存中保存数据,会生成一个地址,把地址保存在栈内存(变量)中
null':空地址,用于销毁对象,一旦一个引用类型不被任何地址所指向,就会自动销毁。
18.数组
数组是数据的集合,每一个数据称为一个元素
1.字面量创建数组
[ 元素1,元素2]
var name = [];console.log(name) //[]var name = ['然哥', '小东东', '小亮亮', '小华华'];console.log(name) //[ '然哥', '小东东', '小亮亮', '小华华' ]var name = ['然哥', '小东东', true, 20];console.log(name) //[ '然哥', '小东东', true, 20 ]
案例:创建数组,包含有一组商品的名称;创建数组,包含有一组员工的工资;
//创建数组,包含有一组商品的名称;
var shop = ['羽毛球', '足球', '篮球', '乒乓球']
console.log(shop) //[ '羽毛球', '足球', '篮球', '乒乓球' ]
//创建数组,包含有一组员工的工资
var salary = [200, 800, 622, 505, 759]
console.log(salary) //[ 200, 800, 622, 505, 759 ]
2.元素的访问
数组[ 下标 ]
下标:JS自动为每个元素添加的编号,从0开始的整数
案例:创建数组,包含有一组城市的名字,修改下标为2的元素,在数组最后添加若干个新的元素,最后打印数组
var city = ['保定', '石家庄', '北京', '天津'];
city[2] = '刘家窑';
city[4] = '安新县';
city[5] = '雄安';
console.log(city) //[ '保定', '石家庄', '刘家窑', '天津', '安新县', '雄安' ]
3.数组的长度
数组.length
查看当前数组中元素的数量有多少,可以在末尾添加新的元素 数组[ 数组.length]
案例:创建一个空数组,使用数组的长度添加若干个国家
var city = []
city[city.length] = '中国';
city[city.length] = '日本';
city[city.length] = '挪威';
console.log(city)
4.使用内置构造函数创建数组
new Array(元素1,元素2,元素3)
new Array(3) 创建一个数组,初始化长度为3,可以添加更多个
案例:使用两种方式创建数组;1.创建一个数组,包含有一组汽车名称;2.创建数组,初始化篮球上上的5个位置,分别添加具体内容
//包含有一组汽车名称;
var car = new Array('长城', '大众', '宝马');
console.log(car)
//初始化篮球上上的5个位置,分别添加具体内容
var bk = new Array(5);
bk[0] = '第一个人';
bk[1] = '第二个人';
bk[2] = '第三个人';
bk[3] = '第四个人';
bk[4] = '第五个人';
console.log(bk)
5.数组的分类
索引数组:以0及以上的整数作为下标
关联数组:以字符串作为下标,需要单独添加元素
对象和数组的区别 |
---|
相同点:两者都可以保存有多个数据 |
不同点:对包保存一条数据,有多个属性,例如一个员工有编号,有姓名,有性别;数组保存了一组数据,有多个元素,例如一组商品,有小米,戴尔,联想 |
案例:创建一个数组,数组里边包含有一组商品,每一个商品包含的属性有标题、价格
var shop = [{ title: '小米Air', price: 1250 },{ title: '联想', price: 3560 }, { title: '戴尔', price: 6550 }]
console.log(shop);
6.数组的遍历
依次访问数组中的每个元素
//for -in for(var key in 数组){ key 代表每个元素的下标 数组[key] 每个元素 }//for 循环 for(var i=0;i<数组.length;i++){ i 代表每个元素的下标 数组[i] 每个元素 }
案例:使用for循环遍历数组,遍历得到每一个元素,并求和
var salary = [5000, 13000, 8500, 9000];
for (var i = 0, sum = 0; i < salary.length; i++) {console.log(salary[i]);sum += salary[i];
}
console.log(sum); //35500
案例:创建数组包含有一组员工的姓名,将姓名为’然哥‘的数据修改为’ran‘;
var arr = ['然哥', '亮亮', '东东', '然哥'];
for (var i = 0; i < arr.length; i++) {if (arr[i] === '然哥') {arr[i] = 'ran'}
}
console.log(arr);
案例:创建一个数组,包含有一组成绩,统计成绩在70~80之间的数量
var arr = [75, 76, 78, 71, 26, 52];
for (var i = 0, count = 0; i < arr.length; i++) {if (arr[i] >= 70 && arr[i] <= 80) {count++;}
}
console.log(count) //4
案例:创建数组:包含一组数字,遍历数组查找最大值
var arr = [-75, -76, -78, -71, -26, -52, -100];
//声明变量,用于保存最大值,吃实话第一个数作为最大值
var max = arr[0]
for (var i = 0; i < arr.length; i++) {if (max < arr[i]) {max = arr[i]}
}
console.log(max)
7.API
API:应用程序编程接口,JS提供的一些函数或者对象中的方法
- toString():将数组转为字符串,元素之间按照逗号分隔
- join('-'):将数组转为字符串,元素之间默认按照逗号分隔,可以按照指定字符分隔
- concat(数组1,数组2):拼接多个数组,数组1,数组2....等要拼接的数组
- reverse(): 翻转数组中的元素,返回翻转后的数组
- sort():对数组进行排序,默认是按照unicode编码从小到大排列 返回排序后的数组
- slice():截取数组中的元素,start开始的下标,end结束的小标,不包含end本身,如果end为空截取到最后;返回截取的元素
- splice(start,count,v1,v2):删除数组中的元素,start:开始的下标 ,count: 删除的数量 如果count为空则删除到最后,如果下标为负数,表示倒数,v1、v2表示要添加的元素,返回删除的元素
push():在数组的末尾添加元素,返回数组长度
pop():删除数组末尾的一个元素,返回删除的元素
unshift():在数组的开头添加元素,返回数组长度
shift():删除数组开头的一个元素,返回删除的元素
如何学习一个API
1.作用
2.需要哪些参数
3.函数的返回值
reverse(): 翻转数组中的元素,返回翻转后的数组
var arr = ['a', 'b', 'c', 'd'];//翻转arr.reverse();console.log(arr) //[ 'd', 'c', 'b', 'a' ]
sort():对数组进行排序,默认是按照unicode编码从小到大排列 返回排序后的数组
var arr = [23, 9, 78, 6, 45];// arr.sort(); //默认按照unicode编码从小到大 [ 23, 45, 6, 78, 9 ]arr.sort(function (a, b) {// return a - b; //从小到大 [ 6, 9, 23, 45, 78 ]return b - a; //从大到小 [ 78, 45, 23, 9, 6 ]})console.log(arr); //[ 78, 45, 23, 9, 6 ]
slice():截取数组中的元素,start开始的下标,end结束的小标,不包含end本身,如果end为空截取到最后;返回截取的元素
var arr = ['高洋洋', '尹泽飞', '赵友鹏', '赵伟杰', '褚浩楠', '江彪'];//var a = arr.slice(2); //[ '赵友鹏', '赵伟杰', '褚浩楠', '江彪' ]//var a = arr.slice(2, 5); //[ '赵友鹏', '赵伟杰', '褚浩楠' ]//var a = arr.slice(-3); //[ '赵伟杰', '褚浩楠', '江彪' ]//var a = slice(-3, -1); //[ '赵伟杰', '褚浩楠' ]console.log(a);
案例:创建数组包含a~h,每个字母是一个元素,分别截取b~d,f;把两部分拼接起来
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];var a = arr.slice(1, 4); //截取b~d [ 'b', 'c', 'd' ]var b = arr.slice(-3,-2); //截取f [ 'f' ]var c = a.concat(b); //拼接 a~d 和fconsole.log(c); //[ 'b', 'c', 'd', 'f' ]
splice(start,count,v1,v2):删除数组中的元素,start:开始的下标 ,count: 删除的数量 如果count为空则删除到最后,如果下标为负数,表示倒数,v1、v2表示要添加的元素,返回删除的元素
案例:创建包含数组a~h删除de,替换f为m,在下标1的位置插入z。
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];arr.splice(3, 2); //删除dearr.splice(3, 1, 'm'); //将f替换为marr.splice(1, 0, 'z'); //在b前边插入zconsole.log(arr); //[ 'a', 'z', 'b', 'c', 'm', 'g', 'h' ]
push():在数组的末尾添加元素,返回数组长度
pop():删除数组末尾的一个元素,返回删除的元素
unshift():在数组的开头添加元素,返回数组长度
shift():删除数组开头的一个元素,返回删除的元素
8.二维数组
数组中的元素还是数组,用于对一组数据进行二次分类
[ [ ] , [ ] , [ ] ]
案例:创建一个数组,包含有多个城市,对这组城市进行分类,同一个省份下的城市放到一起
var arr1 = ['广东', '江苏', '湖南']; //省份var arr2 = [['广州', '深圳', '珠海'], ['南京', '苏州', '无锡'], ['长沙', '张家界', '湘潭']]; //城市//珠海 张家界console.log(arr2[0][2]);console.log(arr2[2][1]);
19.字符串对象
包装对象:是为了将原始类型的数据,像引用类型的数据一样,具有属性和方法
JS有三种包装对象:
Number()对象,String()对象、Boolean对象()
- new String(): 将数据转为字符串,返回对象类型
- String(): 将数据转为字符串,返回字符串类型
案例:创建数组,包含一组数据,分别使用数组下的API和String函数转为字符串
var str1 = '2';//字面量var str2 = new String(2); //内置构造函数var str3 = String(2);//普通函数,将数据强制转为字符串console.log(str2, typeof str2);console.log(str1 + 1, str2 + 1); //21 21
1.转义字符 \
转换字符本身的意义
\ ' 将具有特殊意义的引号转为普通字符
案例:打印出路径:C:\Users\web
console.log('C:\\Users\\web'); //C:\Users\web
2.API
- length 获取字符串的长度
- charAt():获取字符串中下标对应的字符,也可以使用数组的写法 字符串[下标]
- indexOf():查找某一个字符或字符串第一次出现的下标,找不到返回-1
- lastIndexOf():查找字符或者字符串最后一次出现的下标,找不到返回-1
- toUpperCase():将英文字符转为大写
- toLowerCase():将英文字符转为小写
- slice(start,end):用于截取字符串,start:开始的下标 end:结束的下标,(不包含end本身), end为空截取到最后,如果为负数表示倒数
- substr(start,count):截取字符串,start:是开始的下标, count:截取的长度,如果count为空,表示截取到最后,如果下标为负数表示倒数
- split( ):将字符串按照指定的字符切割为数组
案例:声明变量保存字符串javascript,遍历字符串,统计a字符出现的次数
var str = 'javascript';
for (var i = 0, count = 0; i < str.length; i++) {if (str.charAt(i) === 'a') {count++}
}
console.log(count); //2
- indexOf():查找某一个字符或字符串第一次出现的下标,找不到返回-1
- lastIndexOf():查找字符或者字符串最后一次出现的下标,找不到返回-1
案例:声明变量保存用户输入的邮箱,如果不含有@打印‘邮箱格式不正确’,否则打印格式正确
var str = '1258479385@qq.com';
if (str.indexOf('@') === -1) {console.log('邮箱格式不正确')
} else { console.log('邮箱格式正确') };
- oUpperCase():将英文字符转为大写
- toLowerCase():将英文字符转为小写
slice(start,end):用于截取字符串,start:开始的下标 end:结束的下标,(不包含end本身), end为空截取到最后,如果为负数表示倒数
案例:截取ran@tedu.cn,分别截取出用户名和域名
var email = 'ran1234@tedu.cn';
var a = email.indexOf('@');
var user = email.slice(0, a);
var yum = email.slice(a + 1);
console.log(user, yum)
substr(start,count):截取字符串,start:是开始的下标, count:截取的长度,如果count为空,表示截取到最后,如果下标为负数表示倒数
案例:声明变量保存一个人的身份证号码,分别截取出出生的年月日和性别
var card = '130632199905140638';
var year = card.substr(6, 4); //年
var mouth = card.substr(10, 2); //月
var day = card.substr(12, 2); //日
var sex = card.substr(-2, 1); //性别
if (sex % 2 === 0) { //三目:var sex= sex%2===0?'女':'男';sex = '女';
} else {sex = '男';
}
console.log(year + '年' + mouth + '月' + day + '日' + '性别' + sex); //1999年05月14日性别男
split( ):将字符串按照指定的字符切割为数组
案例:截取web.2009.js.jpg,截取后缀名
var str = 'web.2009.js.jpg';
var arr = str.split('.');
console.log(arr[arr.length - 1]) //jpg
3.匹配模式(了解)
用于字符串的查找和替换
- search(/ran/i) 查找满足条件的第一个,返回下标,找不到返回-1
- match(/ran/ig) 查找满足条件的所有,格式为数组
- replace(/ran/ig,'xxxx') 查找并替换
/ / :用于写规则
i :ignore 忽略大小写
g :global 全局查找
20.Math 对象
不需要创建,可以直接使用
1. PI 圆周率
//圆周率console.log(Math.PI); //3.141592653589793
2. abs() 绝对值
//绝对值console.log(Math.abs(20 - 52)) //32
3. ceil() 向上取整
//向上取整console.log(Math.ceil(15.1)) //16
4. floor() 向下取整
//向下取整console.log(Math.floor(4.9)) //4
5. round() 四舍五入取整
//四舍五入console.log(Math.round(4.49)) //4
6. pow() 计算X的Y次方
//次方console.log(Math.pow(4, 2)) //16
7. 获取一组数字的最大值
//求最大值console.log(Math.max(10, 15, 20, 1, 9, 8)); //20
8. 获取一组数字的最小值
//求最小值console.log(Math.min(10, 15, 20, 1, 9, 8)); //1
9. 获取随机数 范围 >=0 <1
//随机console.log(Math.random()) //0.6799482811279387console.log(Math.random()) //0.9096023001148013console.log(Math.random()) //0.39052541748913394
案例:产生0-9之间的随机整数
//产生一个0-9之间的随机整数//0~1 * 10 0~9.x 向下取整 0~9 Math.floor()var n = Math.floor(Math.random() * 10);console.log(n);
案例:随机抽人名
var arr = ['陈聪', '胡福文', '大号正', '刘璐', '高利贷', '王骄傲', '郭悠', '小叮当', '郭晶晶', '阿强', '王宝强']var n = Math.floor(Math.random() * arr.length);console.log(n, arr[n]);
案例:声明变量,保存数组(a~h),随机取4个字母,把取到的随机放入到一个新数组
// 练习:声明变量,保存数组(a~h),随机取4个字母,把取到的随机放入到一个新数组var zimu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];var xin = []; //创建新数组用于保存取到的数据for (var i = 0; i < 4; i++) {var n = Math.floor(Math.random() * zimu.length); //取1~25随机数xin.push(zimu[n]) //把随机取到的放入到新数组}console.log(xin) //[ 'h', 'h', 'f', 'h' ]
案例:双色球,红球:1~33之间随机取六个,按照从小到大的排序
蓝球:1~16之间随机取一个,可以和红球代表的数字重复
var red = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33];var blue = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]var end = [];for (var i = 0; i < 6; i++) {var n1 = Math.floor((Math.random() * red.length))end.push(red[n1]);end.sort(function (a, b) {return a - b;})red.splice(n1, 1);}var n2 = Math.floor((Math.random() * blue.length))end.push(blue[n2]);console.log(end);
21.Data对象
用于对日期时间的存储和计算
1.创建对象
四种格式:如下
//创建Date对象
var time1 = new Date('2020/10/22 11:20:30');//不写具体几点,默认0时0分0秒
var time2 = new Date(2020, 9, 22, 11, 20, 30); //月份0~11 → 1~12
var time3 = new Date(); //存储当前电脑操作系统的时间
var time4 = new Date(100);//距离计算机元年的毫秒数所对应的时间
console.log(time1)
console.log(time2)
console.log(time3)
console.log(time4)
2获取
getFullYear/Month/Date/Hours/Minutes/Seconds/Milliseconds
案例:创建Date时间,保存当前操作系统的时间,打印出来格式如下:'XXXX 年XX月XX日 XX时 XX分 XX秒 星期四'
var time = new Date(); //获取当前电脑操作系统的时间
var year = time.getFullYear(); //获取年
var month = time.getMonth() + 1; //获取月
var date = time.getDate(); //获取日
var hour = time.getHours(); //获取时
var minute = time.getMinutes(); //获取分
var second = time.getSeconds(); //获取秒
//如果秒数小于10,在前边拼接0
if (second < 10) {second = '0' + second
};
var day = time.getDay(); //获取星期
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
day = week[day]; //if day ===2 那么day重新定义为星期二
console.log(year + '年' + month + '月' + date + '日' + ' ' + hour + '时' + minute + '分' + second + '秒' + ' ' + day);
案例:计算距离2021年元旦还有 X天 X小时 X分
var a = new Date('2021/1/1')
var b = new Date()
var A = a.getTime();
var B = b.getTime();
var c = A - B; //计算两者相差的毫秒数
// console.log(a - b) //Date对象相减就能得到相差的毫秒数
//把单位由毫秒转为秒
var c = parseInt(c / 1000)
// console.log(c); //6081866
//计算相差的天数=总的相差的秒数/一天的秒数
var day = parseInt(c / (24 * 60 * 60));
// console.log(day) //70
//总的相差秒数%一天的秒数,结果是不满一天
var hour = c % (24 * 60 * 60); //不满一天的秒
//转为小时
hour = parseInt(hour / (60 * 60))
// console.log(hour)
var minute = c % (60 * 60);
minute = parseInt(minute / 60)
// console.log(minute);
var second = c % 60;
// console.log(second)
console.log(day + '天' + hour + '时' + minute + '分' + second + '秒')
3.转为本地字符串格式
用于调试,有兼容性问题,不同的解释器显示可能不同
- toLocaleString()
- toLocaleDateString()
- toLocaleTimeString()
var time = new Date();
console.log(time);
//转为本地字符串格式
console.log(time.toLocaleString()); //2020-10-22 15:26:00
console.log(time.toLocaleDateString()); //2020-10-22
console.log(time.toLocaleTimeString()); //15:29:22
4.修改
setFullYear()/Month/Date/Hours/Minutes/Seconds/Milliseconds
setTime() 设置距离计算机元年的毫秒数,会产生一个具体的日期时间
修改不能设置星期
案例:一个员工入职、2020/10/22 三年后合同到期,计算出到期时间
var time1 = new Date('2020/10/20');
//复制一份入职时间,作为到期时间
var time2 = new Date(time1); //复制一个对象
//三年后合同到期,计算出到期时间
time2.setFullYear(time2.getFullYear() + 3)
//分别打印出两个日期时间的本地字符串
console.log(time1.toLocaleString()); //2020-10-20 00:00:00
console.log(time2.toLocaleString()); //2023-10-20 00:00:00
案例:
var time1 = new Date('2020/10/23');
//复制一份入职时间,作为到期时间
var time2 = new Date(time1);//复制一个对象
//三年后合同到期,计算出到期时间
time2.setFullYear(time2.getFullYear() + 3)
//复制一份到期时间,作为续签时间
var time3 = new Date(time2);
//合同到期前一个月续签
time3.setMonth(time3.getMonth() - 1);
//如果是周末提前到周五
console.log(time3.getDay());
if (time3.getDay() === 6) {time3.setDate(time3.getDate() - 1)
} else if (time3.getDay() === 0) {time3.setDate(time3.getDate() - 2)
}
console.log(time3.getDate())
console.log(time3.toLocaleDateString())
22.Number对象
- new Number() : 将数据转为数值,返回对象
- Number() : 将数据转为数值,返回数值
- toFixed(n) : 保留小数点后n为
23.Boolean对象
- new Boolean(): 返回对象 强制将数据转为布尔型
- Boolean(): 返回布尔型 强制将数据转为布尔型
5.错误处理
1.语法错误:SyntaxError 不符合语法规范,例如出现中文的符号,缺少括号,出现后不执行任何代码。
console.log('开头');
var a = 1; //中文分号
console.log('结束');
//SyntaxError
2.引用错误: ReferenceError 出现了未声明的变量,影响后续的代码
console.log('开头');
var b = 2;
console.log(a); //变量使用错误
console.log('结束');
//ReferenceError: a is not defined
3.类型错误:TypeError 使用了不存在的对象中的方法或者函数 ,影响后续代码
console.log('开头');
var arr = ['a', 'b', 'c']
console.log(arr.revers()); //reverse 拼错
console.log('结束');
//TypeError: arr.revers is not a function
4.范围错误: RangeError 超出了JS规定的范围,影响后续代码的执行
console.log('开头');
var laptop = new Array(-3); //数组初始化长度设置了负数
console.log('结束');
//RangeError: Invalid array length
5.自定义错误: throw 错误内容 影响后续代码的执行
console.log('开头');
var age = 10;
if (age < 18 || age > 60) {//自定义错误throw '请提供一个合法的年龄'
}
console.log('结束');
// throw '请提供一个合法的年龄'
6.try{ //尝试执行,可能出现错误,一旦出现错误就会执行catch中的语句
}catch(err){ //err, 形参,接收try出现的错误信息, 执行解决错误的代码
}
try {//尝试执行,放可能出现的错误代码//即使有错误,也不会阻止后续代码的执行var age = 11if (age < 18 || age > 60) {throw '请提供一个合法的年龄'}
} catch (error) {//catch:捕获错误,解决错误//error:形参,用于接收try中出现的错误信息console.log(error)age=26;
}
前端JavaScript基础相关推荐
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 前端---JavaScript基础4
文章目录 前端---JavaScript基础3 call&apply 原型链 原型链操作 例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...
- 前端---JavaScript基础3
文章目录 前端---JavaScript基础3 普通对象与函数对象 原型及属性判断 构造函数继承 原型继承 组合继承 寄生组合式继承 前端-JavaScript基础3 普通对象与函数对象 原型及属性判 ...
- 前端---JavaScript基础2
文章目录 前端---JavaScript基础2 对象类型判断 call函数 对象属性操作 深拷贝方法 前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...
- 前端---JavaScript基础1
文章目录 前端---JavaScript基础1 数据类型 面向对象 对象创建方式 对象类型判断 前端-JavaScript基础1 JS是 解释型语言:跨平台 慢 编译型语言:不能跨平台 快 数据类型 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 前端JavaScript基础知识点
JavaScript基础 阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容 变量的声明及使用 数据类型 类型转换 运算符 JavaScript的组成 E ...
- 菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...
- 前端——javascript基础-ECMAScript
文章目录 JavaScript简介 ECMAScript JavaScript的引入方式 javascript得输出方式: 变量 五种基本数据类型 运算符 数据类型转换 if语句 switch语句 w ...
最新文章
- opencv-Canny边缘检测(Python)
- 这周面了阿里,多线程都要问这么难了???
- python--面向对象--14
- mysql 里面不等于符号_mysql 不等于 符号写法
- ubuntu定时执行python脚本方法及实例代码
- 编写一个可以打印不同长度数组内容的函数模板
- 快速简单高效的搭建 SolrCloud 集群
- 数据分析的五个阶段及价值
- DotNetTextBoxV3.0在线编辑器控件Ver3.4.6 Open Source免费开源版
- matlab条形图颜色矩阵,Matlab条形图 – 根据符号和大小填充不同颜色的条形图
- ISO IEC 27001 企业信息安全管理要求
- 【DPD数字预失真】射频功放的Volterra级数数字预失真系统开发
- flex横向纵向间距,自适应排列
- 如何看懂k线图:K线详细分析图解
- 怎么在LinkedIn领英安全添加到3万个好友?
- Git扩展工具--GitExtension的安装和配置--2021-8-22
- 云监控无线煤气报警器如何解决联动问题?
- vue中使用vue-infinite-scroll
- [RK3288-Android8.1]cw2015驱动调试曲折
- QQ好友清单整理方法与工具
热门文章
- 破解完全入门篇(转载)
- 【Houdini】HDA的制作和参数编辑
- Apache Kylin 在 58 同城的实践与优化
- 提取excel文件原生图标并替换给exe简单方法
- Macropodus自然语言处理(NLP)工具包(Albert+BiLSTM+CRF)
- 巨无霸Win8PE X64服务器维护专用,昨非在线PE系统03PE+WIN8PE+WIN10PE维护专用超精简U盘启动盘v6.23...
- DataWhale数据挖掘实践_智慧海洋(二)
- ts 数组转换对象 对象转换数组的公共方法
- python实现修改桌面壁纸
- 尚观科技java培训 - 笔记学习体系大纲