目录
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.错误处理
1995年出现在网景公司的浏览器中
1996年,IE3中,也出现了JS,叫做JScript
1997年,出现了国际标准规范 ECMAScript
2009年,出现了CommonJS规范,JS开始往服务器端发展,出现了Node.js
JS即可以运行在浏览器中,也可以运行在服务器端
解释型语言,编译一行执行一行
弱类型语言,
基于对象
跨平台,可以运行在不同的操作系统
开发浏览器端的交互效果,进行服务器端的开发。
浏览器自带的JS解释器,推荐使用谷歌浏览器
火狐 谷歌 欧朋 IE Safari
- 安装Nodejs
- www.nodejs.org 官网
- 打开命令行窗口
- node -v 回车 查看版本号
浏览器端:创建01.js和01.html两个文件,把js嵌入到html文件中
代码如下:
/*在01.html中引入js文件,打开html文件即可运行01.js文件*/
后端:NodeJs:
1.打开命令行
2.输入: node 拖拽js文件 回车
区分大小写
每行代码结束的分号可以省略
分为单行注释(//)和多行注释(/* */)
什么是变量?
变量是用于保存程序中的数据
声明一个变量:
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); //打印输出结果
注意:多个变量之间用逗号隔开
变量的名称可以由字母,数字,下划线,美元符号组成,不能以数字开头。不能使用关键字和保留字,不推荐使用汉字。
变量声明未赋值则为undefined(未定义,) 变量可以多次赋值,赋不同类型的值,这是弱类型语言的特点练习
var english = 50;
var math = 49;
var sum = english + math;
console.log(sum); //打印值
输出结果如下:
声明后必须赋值,不允许重新赋值
例如:const: userName='root';
示例代码如下:
const pi = 3.14;
var r = 5;
var L = 2 * pi * r;
var S = pi * r * r;
console.log('面积:' + S, '周长' + L); //打印输出结果
分为原始类型和引用类型
整数:
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);
输出结果如下:
只有两个值,分别是true,false,表示真和假,
条件的结果会是布尔型的值,还可以用于保存状态,例如是否登录,是否注册
var b1 = true;
console.log(b1, typeof b1);
输出结果如下:
只有一个值为null,,常和引用类型一起使用
程序运行过程中自动产生的转换。
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函数, |
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'
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。
alert() 弹出提示框,
prompt() 弹出提示(输入)框,需要使用变量保存用户输入的值,类型是字符串型;如果点击取消返回null
案例:满30减20
if(条件表达式){
语句块;
}
如果if后的语句块中只有一行语句,那可以省略大括号,
作为条件表达式出现隐式转为false:0 空字符 NaN undefined null
var total = 32;
if (total >= 30) {
//原来基础之上减20
total -= 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 else var 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('面条')
}
循环是一遍又一遍执行相同或者相似的内容
循环的两个要素:
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 = 0
while (i <= 100) {
if (i % 2 == 1) {
total += i;
}
i++;
}
console.log(total) //2500
在循环体执行后,就会跳出循环
案例:循环产生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)
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')
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++) { //外层循环:控制循环的行数————j
for (var i = 1, a = ''; i <= j; i++) { //内层循环:控制循环的列数————i
a += '*';
}
console.log(a); //每循环一行结束后,打印这一行
}
Number()/parseInt()/parseFloat()/alert()/prompt().....
函数:是一个功能体,需要提供若干个数据,返回处理的结果;
函数分为:系统函数和自定义函数
函数的作用:为了封装重复执行的代码
调用函数:函数名称(),可以多次调用同一个函数,每调用一次就执行一次函数体中的代码
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(); //100
getSum(); //100
getSum(); //100
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
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);
作用域:分为全局作用域和函数作用域,具体指变量和函数的可访问范围
全局变量:在函数外声明的变量,叫全局变量,在任何作用域下都可以访问到
局部变量:在函数内使用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);
//变量提升:JS程序执行前,会将var声明的变量提升到所在作用域的最前边,只是提升声明,赋值不提升
console.log(a);
var a = 1;
function fn(){
//var b 提升
console.log(b); //undefined
var b = 2;
//提升后 b=2
}
查看以下程序的输出结果
var c = 5;
function fun(){
// var c;
console.log(c); //undefined
var c =7;
//c=7;
}
fun();
全局函数:在全局作用域下创建的函数,可以在任意作用域下访问
局部函数:在函数作用域下创建的函数,只能在所在的作用域下访问
JS程序执行前,会将整个函数提升到所在作用域的最前边;可以先写调用,在写创建
特点:在函数内调用自身,本身属于死循环;
使用递归:递归要有跳出条件,结合者return
示例:使用递归计算斐波那契数列的第n项
//使用递归计算斐波那契数列的第n项
//第n项的值 = 第n-1项的值+第n-2项的值
//第一项 和第二项都是1
function 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使用递归会比较慢 |
---|
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
全局污染:全局变量的出现,可以在任何的作用域下访问到,对其他的变量造成了污染
解决方案:把变量都转为局部变量。
(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
什么是回调函数:将一个函数以实参形式传递,需要有形参来接收并调用
示例:
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('陌生人跑了')
})
例如:Number() / parseInt() / parseFloat()
补充:
isNaN()检测一个值是否为NaN,会自动调用Number转为数值,然后检测。常用于检测用户输入的值是否为数值,如果不是数值则为NaN 是NaN返回true 不是NaN返回false
isFinite() 检测一个值是否为有限值,如果是有限值返回true,不是有限值返回false 只有0做除数得到的结果是无限值infinity
eval():执行字符串中的表达式
对象是由一组属性和方法的集合
我的电脑包含的属性:品牌、颜色、尺寸、…… 方法(功能):玩游戏、敲代码、做设计
然哥的第一辆车:属性:轮子、颜色、型号 …… 方法:代步、拉货、
自定义对象,用户创建的对象
内置对象,JS官方提供的对象
宿主对象,根据不同的环境来划分,浏览器、NodeJS两种宿主对象
对象字面量:
内置构造函数:
自定义构造函数:
使用{}大括号创建新对象
属性名和属性值之间用冒号隔开,多组属性之间用逗号隔开
属性名的引号可加可不加,如果含有特殊字符必须加
案例:创建一个汽车对象,包含有汽车的品牌型号,颜色,长度,宽度
var car = {
品牌: '大众',
颜色: 'red',
宽: '1.5米',
高: '1.5米'
};
console.log(car)
对象.属性名
对象['属性名']
如果属性不存在返回undefined,如果属性名含有特殊符号只能使用第二种方式
案例:创建一个图书的对象,包含有图书的编号,名称,价格,作者;修改图书的价格,添加图书的出版社属性,打印整个对象
var book = {
eid: 01,
name: '高级开发',
price: 123,
autor: '老何'
}
book.name = '好书';
book.price = 100;
book.chuban = '河北高考';
console.log(book);
练习:创建一个轮播图对象,包含有编号,图片名称,图片大小,来源,
new Object()
创建一个空对象,需要单独添加每个属性
var bannor = new Object();
bannor.eid = 1;
bannor.name = '笑';
bannor['big'] = '120';
bannor.lao = '保定'
console.log(bannor)
使用循环,依次访问对象中的属性
for (var key in bannor) { //key代表对象中的每个属性名 console.log(key, bannor[key]) }
//检测属性是否存在
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)
方法所对应的是一个函数,需要调用
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); //11
var b = jisuan.jian(6, 5); //1
console.log(a, b)
原始类型:直接将数据存储在栈内存中
引用类型:在堆内存中保存数据,会生成一个地址,把地址保存在栈内存(变量)中
null':空地址,用于销毁对象,一旦一个引用类型不被任何地址所指向,就会自动销毁。
数组是数据的集合,每一个数据称为一个元素
[ 元素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 ]
数组[ 下标 ]
下标:JS自动为每个元素添加的编号,从0开始的整数
案例:创建数组,包含有一组城市的名字,修改下标为2的元素,在数组最后添加若干个新的元素,最后打印数组
var city = ['保定', '石家庄', '北京', '天津'];
city[2] = '刘家窑';
city[4] = '安新县';
city[5] = '雄安';
console.log(city) //[ '保定', '石家庄', '刘家窑', '天津', '安新县', '雄安' ]
数组.length
查看当前数组中元素的数量有多少,可以在末尾添加新的元素 数组[ 数组.length]
案例:创建一个空数组,使用数组的长度添加若干个国家
var city = []
city[city.length] = '中国';
city[city.length] = '日本';
city[city.length] = '挪威';
console.log(city)
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)
索引数组:以0及以上的整数作为下标
关联数组:以字符串作为下标,需要单独添加元素
对象和数组的区别 |
---|
相同点:两者都可以保存有多个数据 |
不同点:对包保存一条数据,有多个属性,例如一个员工有编号,有姓名,有性别;数组保存了一组数据,有多个元素,例如一组商品,有小米,戴尔,联想 |
案例:创建一个数组,数组里边包含有一组商品,每一个商品包含的属性有标题、价格
var shop = [{ title: '小米Air', price: 1250 },
{ title: '联想', price: 3560 },
{ title: '戴尔', price: 6550 }]
console.log(shop);
依次访问数组中的每个元素
//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)
API:应用程序编程接口,JS提供的一些函数或者对象中的方法
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 和f
console.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); //删除de
arr.splice(3, 1, 'm'); //将f替换为m
arr.splice(1, 0, 'z'); //在b前边插入z
console.log(arr); //[ 'a', 'z', 'b', 'c', 'm', 'g', 'h' ]
push():在数组的末尾添加元素,返回数组长度
pop():删除数组末尾的一个元素,返回删除的元素
unshift():在数组的开头添加元素,返回数组长度
shift():删除数组开头的一个元素,返回删除的元素
数组中的元素还是数组,用于对一组数据进行二次分类
[ [ ] , [ ] , [ ] ]
案例:创建一个数组,包含有多个城市,对这组城市进行分类,同一个省份下的城市放到一起
var arr1 = ['广东', '江苏', '湖南']; //省份
var arr2 = [['广州', '深圳', '珠海'], ['南京', '苏州', '无锡'], ['长沙', '张家界', '湘潭']]; //城市
//珠海 张家界
console.log(arr2[0][2]);
console.log(arr2[2][1]);
包装对象:是为了将原始类型的数据,像引用类型的数据一样,具有属性和方法
JS有三种包装对象:
Number()对象,String()对象、Boolean对象()
案例:创建数组,包含一组数据,分别使用数组下的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
转换字符本身的意义
\ ' 将具有特殊意义的引号转为普通字符
案例:打印出路径:C:\Users\web
console.log('C:\\Users\\web'); //C:\Users\web
案例:声明变量保存字符串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
案例:声明变量保存用户输入的邮箱,如果不含有@打印‘邮箱格式不正确’,否则打印格式正确
var str = '[email protected]';
if (str.indexOf('@') === -1) {
console.log('邮箱格式不正确')
} else { console.log('邮箱格式正确') };
slice(start,end):用于截取字符串,start:开始的下标 end:结束的下标,(不包含end本身), end为空截取到最后,如果为负数表示倒数
案例:截取[email protected],分别截取出用户名和域名
var email = '[email protected]';
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
用于字符串的查找和替换
/ / :用于写规则
i :ignore 忽略大小写
g :global 全局查找
不需要创建,可以直接使用
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.6799482811279387
console.log(Math.random()) //0.9096023001148013
console.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);
用于对日期时间的存储和计算
四种格式:如下
//创建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)
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 + '秒')
用于调试,有兼容性问题,不同的解释器显示可能不同
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
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())
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 = 11
if (age < 18 || age > 60) {
throw '请提供一个合法的年龄'
}
} catch (error) {
//catch:捕获错误,解决错误
//error:形参,用于接收try中出现的错误信息
console.log(error)
age=26;
}