JavaScript复习笔记（一）
javascript是一种运行在客户端的脚本语言。
脚本语言：不需要编译，运行过程中js解释器（js引擎）逐行来进行解释并执行。
Js的组成：
- ECMAScript：JS语言核心部分，描述了该语言的语法和基本对象
- DOM：文档对象模型
- BOM：浏览器对象模型
Js三种书写方式：
- 行内式js
- 内嵌式JS
- 外部JS文件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script>
//2.内嵌式js
alert('hello world');
script>
<script src="my.js">script>
head>
<body>
<input type="button" value="点击我" onclick="alert('hello world!')"/>
body>
html>
Js输入输出语句
- alert(msg):浏览器弹出警示框
- console.log(msg):浏览器控制台打印输出信息
- prompt(info):浏览器弹出输入框，用户可输入相关信息
<script>
//1.用户输入姓名
var myname=prompt("请输入您的姓名");
//2.输出这个姓名
alert(myname);
script>
变量
严格区分大小写，遵守驼峰命名法（首字母小写，后面的单词首字母大写）
声明变量的特殊情况：
- 只声明不赋值，结果是undefined 未定义的
- 不声明不赋值，直接使用变量会报错
- 不声明直接赋值使用，可以使用，但是不提倡。
数据类型
js的变量数据类型是只有程序在运行过程中，根据等号右边的值来判断的
js是动态语言，变量的数据类型是可以变化的
var num = 10;//num属于数字型
num="aaa";//num变成字符串
- 数字类型
程序里面数字前面加0，表示八进制
数字前面加0x，表示十六进制
var num1=010;//十进制：8
var num2=0x9；//十进制：9
//数字的最大值
console.log(Number.MAX_VALUE);
//数字的最小值
onsole.log(Number.MIN_VALUE);
//无穷大
console.log(Number.MAX_VALUE*2);//Infinity 无穷大
console.log(-Number.MAX_VALUE*2);//-Infinity 无穷小
//非数字
console.log("hs"-11);//NaN 非数字
//isNaN()用来判断非数字，并且返回一个值，如果是数字返回false，如果不是数字返回true
console.log(isNaN(2));//false
console.log(isNaN("aa"));//true
- 字符串类型 String
①字符串引号嵌套：Js可以用单引号嵌套双引号，也可以双引号嵌套单引号
②字符串转义字符，都是 \ 开头的
\n：换行符
\t： tab缩进
\b：空格
③字符串长度 length
④字符串拼接
console.log(12+12);//24
console.log("我叫"+"李海燕")；//我叫李海燕
console.log("11"+22)//1122
- 布尔型Boolean
布尔型有两个值：true和false，true表示真，false表示假
布尔型和数字型相加的时候，true作为1，false作为0 - Undefined 和 Null
如果一个变量声明未赋值就是undefined 未定义数据类型
如果一个声明变量给null值，里面存的值为空
undefined和数字相加最后结果是NaN
null和数字相加最后结果是数字本身
- 获取变量数据类型(typeof)
var num=10;
console.log(typeof num);//number
var str='aa';
console.log(typeof str);//string
var flag=true;
console.log(typeof flag);//boolean
- 数据类型转换
①转换为字符串
toString()
String()强制转换
加号拼接字符串
//1.把数字型转换为字符串
var num=10;
var str=num.toString();
console.log(typeof str);
//2.利用String（变量）
console.log(String(num));
//3.利用+拼接字符串的方法实现转换效果
console.log(num+'');
②转换为数字型
var age=prompt("请输入您的年龄");
//1.parseInt(变量) ,可以把字符型的转换为数字型，得到整数
console.log(parseInt(age));
console.log(parseInt('3.09'));//3 取整
console.log(parseInt('120px'));//120 会去掉px单位
console.log(parseInt('rem120px'));//NaN
//2.parseFloat(变量),可以把字符型的转换为数字型，得到小数 浮点数
console.log(parseFloat('3.14'));//
console.log(parseFloat('120px'));//120 会去掉px单位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number(变量)
var str='123';
console.log(Number(str));
console.log(Number('12'));//12
//4.利用了算数运算 - * / 隐式转换
console.log('12'-0);//12
console.log('123'-'120');//3
③转换为布尔型
Boolean()函数将其他类型转换为布尔型
代表空、否定的值会被转换为false，如’'、0、NaN、null、undefined
其它的值都会被转换为true
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
运算符
- 递增和递减运算符
在JavaScript中，递增（++）和递减（–）放在变量前时，可以称为前置递增（递减）运算符；放在变量后面时，可称为后置递增（递减）运算符。
必须和变量配合使用。
//注意：
var a=10;
var b=a++ + ++a;//a++ = 10,a = 11; ++a = 12
console.log(b);//22
- 比较运算符
//1.== 判断等号（会转型）
console.log(18 == '18');//true
console.log(18 == 18);//true
console.log(18 != '18');//false
//2. === 全等，要求值和数据类型都一致
console.log(18 === '18');//false
console.log(18 === 18);//true
- 逻辑运算符
返回值是布尔值，常用于多个条件的判断
&&（逻辑与）、||（逻辑或）、！（逻辑非）
- 赋值运算符
把数据赋值给变量
=、+=、-=、*=、/=、%=
num += 2 与 num = num + 2 一致
流程控制
- 分支语句
if、if-else、if-else if（多分支语句）
switch-case
//if
var year = prompt("请你输入年份");
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('你输入的是闰年');
} else {
alert('你输入的是平年');
}
//switch，变量与case的值需要是全等的关系才能匹配上
switch(变量){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
......
default:
执行最后的语句;
}
三元表达式：条件表达式 ? 表达式1 ： 表达式2
- 循环结构
for 循环,重复执行某些代码,通常跟计数有关系
//for语法结构
for(初始化变量;条件表达式;操作表达式)
{
循环体
}
while 循环,当…的时候
循环体需要操作表达式,防止死循环
//while循环结构
while(条件表达式){
//循环体
}
do while循环
执行思路,跟while不同的地方在于do while先执行一次循环体,再判断条件
如果条件为真继续执行循环;如果条件为假,则退出循环
至少会执行一次循环体代码
//do while 循环结构
do{
循环体
}while(条件表达式)
continue 关键字 : 跳出本次循环,继续下一次循环
break 关键字 : 直接结束整个循环(循环结束)
//练习:简易ATM
var deposit = 0;
do {
var num = prompt("请输入您要的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出");
switch (num) {
case '1':
var money = prompt("请您输入存的钱数：");
deposit += parseFloat(money);
alert('您现在存的钱是：' + deposit + '元');
break;
case '2':
var money = prompt("请您输入取的钱数：");
deposit -= parseFloat(money);
alert('您现在存的钱是：' + deposit + '元');
break;
case '3':
alert('您现在存的钱是：' + deposit + '元');
break;
case '4':
alert('您正在退出');
break;
}
} while (num != 4);
数组
数据就是一组数据的集合，存储在单个变量中
数组中的数据称为数组元素
数组中可以存放任意类型的数组元素
- 数组创建方式：
- 利用new创建数组
var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组
- 利用数组字面量创建数组
var 数组名 = ['a','b','c'];
var arr = [];//创建一个新的空数组
- 获取数组元素
根据索引（下标）获取数组元素，索引从0开始。如 arr[2]
//可以通过for循环遍历数组
var arr=['red','blue','green'];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
- 数组中新增元素
//1.通过修改length长度
var arr=['red','blue','green'];
arr.length=5;
console.log(arr);//[ "red", "blue", "green", <2 empty slots> ]
console.log(arr[4])//由于没有给值，所以是undefined
//2.新增数组元素 修改索引号 追加数组元素
var arr=['red','blue','green'];
arr[3]='pink';//如果原来该位置有数据，则替换该数据
console.log(arr);// [ "red", "blue", "green", "pink" ]
//调换数组的顺序
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newarr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newarr[newarr.length] = arr[i];
}
console.log(newarr);// [ "purple", "pink", "blue", "green", "red" ]
4.冒泡排序
通过重复地走访要排序的数列，一次比较两个元素，如果顺序有误就把他们进行交换，直到数列排序完成。
//冒泡排序
var arr=[5,4,3,2,1]
for (var i = 0; i <= arr.length-1; i++) {//外层循环管 趟数
for(var j=0;j<=arr.length-i-1;j++){//里面的循环管 每一趟的交换次数
//内部交换两个变量的值
if(arr[j]>arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);//1,2,3,4,5
函数
函数就是封装了一段可以被重复执行调用的代码块
目的：就是让大量代码重复使用
关键字：function
1.声明函数(命名函数)
function get(){
}
2.调用函数
get();
- 可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1,形参2,...){声明函数时里面是形参
}
函数名(实参1,实参2,...);//调用的是实参
- 函数的返回值格式
function 函数名(){
return 需要返回的结果;
}
函数名();// 返回的结果
注意事项：
return 终止函数（return 后面的代码不会被执行）
return 只能返回一个值，可返回一个数组
函数如果没有return，则返回undefined
- arguments的使用
当我们不确定有多少个参数传递的时候，可以使用arguments来获取。
只有函数才有arguments对象，每个函数都内置好了这个arguments。
function fn(){
console.log(arguments);//里面存储了传递过来的所有实参
}
fn(1,2,3);
//1.利用函数求任意个数的最大值
function getMax(){
var max=arguments[0];
for (var i = 0; i < arguments.length; i++) {
if(arguments[i]>max){
max=arguments[i];
}
}
return max;
}
console.log(getMax(1,3,5,7));
console.log(getMax(5,3,41));
console.log(getMax(1,4,11,50,45));
//2.利用函数翻转任意数组reverse
function reverse(arr){
var newArr=[];
for (var i = arr.length-1; i >=0; i--) {
newArr[newArr.length]=arr[i];
}
return newArr;
}
var arr1=reverse([1,3,5,8,9]);
console.log(arr1)//[ 9, 8, 5, 3, 1 ]
- 函数第二种声明方式
函数表达式（匿名函数）
var 变量名=function(){}
函数表达式也可以进行传递参数: 变量名(参数)
作用域
代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性以及减少命名冲突。
- 全局作用域：整个script标签或者是在一个单独的js文件中
- 局部作用域：在函数内部就是局部作用域，这个变量只在函数内部起效果和作用
根据作用域的不同分为全局变量和局部变量
- 全局变量在全局下都可以使用（如果在函数内部没有声明直接使用的变量也是全局变量）
- 局部变量在局部作用域下的变量，只能在函数内部使用（函数的形参也可看作局部变量）
全局变量只有在浏览器关闭的时候才会销毁，比较占内存资源
局部变量则当我们程序执行完毕就会销毁，比较节约内存资源
预解析
js引擎运行js分为两步： （1）预解析 （2）代码执行
（1）预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
（2）代码执行：按照代码书写的顺序从上往下执行
预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
（1）变量提升：就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
（2）函数提升：就是把所有函数声明提升到当前作用域的最前面 不调用函数
对象
对象是一组无序的相关属性和方法的集合，所有的事物都是对象。
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示
创建对象的三种方式：
- 利用字面量创建对象
对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。
（1）里面的属性或者方法采取键值对的形式。键 属性名：值 属性值
（2）多个属性或者方法中间用逗号隔开
（3）方法冒号后面跟的是一个匿名函数
调用对象的属性采取 对象名.属性名
调用对象的方法采取 对象名.方法()
var obj = {};//创建了一个空对象。
var obj = {
uname:'张三',
age:14,
say:function(){
console.log('hello');
}
}
//调用对象的属性
console.log(obj.uname);//张三
console,log(obj['uname']);//张三
//调用对象的方法
obj.say();//hello
- 利用 new Object 创建对象
利用 = 赋值的方法添加对象的属性和方法
每个属性和方法之间用分号结束
var obj=new Object();//创建了一个空对象
obj.uname='张三';
obj.age=14;
obj.say=function(){
console.log('hello');
}
- 利用构造函数来创建对象
前两种创建对象的方式一次只能创建一个对象
构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
//构造函数的格式：
function 构造函数名(){
this.属性=值;
this.方法=function(){}
}
new 构造函数名()
//构造函数名字首字母要大写
//构造函数不需要return就能返回结果
function Star(uname,age){
this.uname=uname;
this.age=age;
this.say=function(h){
console.log(h);
}
}
var zs=new Star('张三',14);
var ls=new Star('李四',15);
console.log(zs.uname);//张三
zs.say('hello');//hello
遍历对象属性
for…in 语句对数组或者对象的属性进行循环操作
//for(变量 in 对象)
var obj={
name:'张三',
age:15
}
for(var k in obj){
console.log(obj[k])；//张三 15
}
内置对象
内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或最基本而必要的功能（属性和方法）。
可以通过MDN/W3C查询文档来学习内置对象的使用。
MDN网址
- Math对象
1.数字对象Math的使用
console.log(Math.PI);//圆周率
console.log(Math.max(2,5));//5
console.log(Math.max());//-Infinity
2.封装自己的数学对象
var myMath={
PI:3.141592653,
max:function(){
var max=arguments[0];
for(var i=0;i<arguments.length;i++){
if(arguments[i]>max){
max=arguments[i];
}
}
return max;
},
min:function(){
var min=arguments[0];
for(var i=0;i<arguments.length;i++){
if(arguments[i]<min){
min=arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);//3.141592653
3.Math三个取整方法
（1）Math.floor() 向下取整
console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1
（2）Math.ceil() 向上取整
console.log(Math.ceil(1.1));//2
console.log(Math.ceil(1.9));//2
（3）Math.round() 四舍五入
console.log(Math.round(1.1));//1
console.log(Math.round(1.9));//2
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.5));//-1 .5特殊往大取
4.得到一个两数之间的随机整数
//Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
- 日期对象
Date() 日期对象是一个构造函数，必须使用new来调用创建
1.使用Date() 如果没有参数，返回当前系统的当前时间
var date=new Date();
2.参数常用的写法 数字型 2019,10,01 或者 字符串型 '2019-10-1 8:8:8'
var date1=new Date(2019,10,01);
console.log(date1); //Date Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间) 月份比输入加了一个月
var date2=new Date('2019-10-1 8:8:8')
console.log(date2);//Date Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)
3.日期格式化
var date=new Date();
console.log(date.getFullYear());//年份
console.log(date.getMonth()+1);//月份 返回的月份小一个月 所以要记得月份+1
console.log(date.getDate());//返回几号
console.log(date.getDay());//星期几 周一到周六返回的是1-6，但是周日返回的是0
console.log(date.getHours());//时
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒
- 数组对象
1.检测是否为数组
(1)instanceof
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false
(2)Array.isArray(参数)
console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj));//false
2.添加删除数组元素方法
(1)push() 在数组末尾添加一个或者多个数组元素
push完毕之后，返回的结果是新数组的长度，原数组也会发生变化
(2)unshift() 在数组开头添加一个或者多个数组元素
unshift完毕之后，返回的结果是新数组的长度，原数组也会发生变化
(3)pop() 可以删除数组的最后一个元素
pop返回的是删除的那个数组元素，原数组也会发生变化
(4）shift() 可以删除数组的第一个元素
shift返回的是删除的那个数组元素，原数组也会发生变化
3.数组排序
(1)翻转数组
var arr=[1,5,7,2];
arr.reverse();
console.log(arr);//2,7,5,1
(2)数组排序（冒泡排序）
var arr=[1,5,7,11,2];
arr.sort(function(a,b){
//return a-b;//升序
return b-a;//降序
});
console.log(arr);//1,2,5,7,11
4.数组索引方法
(1)indexOf 返回该数组元素的索引号，只返回第一个满足条件的索引号，如果找不到则返回-1
var arr=[1,2,7,11,2];
arr.indexOf(2);//1
(2)lastIndexOf 从后面开始查找
arr.indexOf(2);//4
5.数组转换为字符串
(1)toString()
(2)join(分隔符) 默认分隔符为，
- 字符串对象
为了方便操作基本数据类型，JavaScript提供了三种特殊的引用类型：String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本的数据类型就有了属性和方法。
包装执行过程如下：
//1.生成临时变量，把简单类型包装为复杂数据类型
var temp=new String('ABC');
//2.赋值给我们声明的字符变量
str=temp;
//3.销毁临时变量
temp=null;
字符串不可变指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
所以不要大量拼接字符串
1.根据字符返回位置
var str='好好学习，天天向上';
console.log(str.indexOf('好'));//0
console.log(str.indexOf('好'，1));//从索引号1开始往后找 1
console.log(str.lastIndexOf('好'));//1
2.根据位置返回字符
charAt(index) 根据索引返回字符
charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下哪个键
str[index] H5新增
3.字符串拼接与截取
（1）concat('字符串1','字符串2'...)
（2）substr('截取的起始位置','截取几个字符')
4.替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符
5.字符转换为数组 split('分隔符')
var str='1,2,3';
console.log(str.split(','));//[ "1", "2", "3" ]
简单数据类型与复杂数据类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string , number , boolean , undefined , null 都是简单数据类型
如果有个变量我们以后打算存储为对象, 暂时没想好放啥, 这个时候就给 null- 引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型
通过new关键字创建的对象都是复杂数据类型（系统对象、自定义对象），如Object、Array、Date等