1.1 初识JavaScript
三种写法
1、行内式
2、内嵌式
3、外联式
<script src=""></script>
1.2 JS注释
1、单行注释//
2、多行注释/**/
1.3 JS输入输出语句
1、输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert() | 浏览器弹出警示框 | 浏览器 |
console.log() | 浏览器控制台打印输出信息 | 浏览器 |
prompt() | 浏览器弹出输入框,用户可以输入 | 浏览器 |
2、变量
(1)声明变量:var age;
(2)更新变量:多次赋值以最后一次为准
3、数据类型
(1)简单数据类型
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如21、0.21 | 0 |
Boolean | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如“张三”,在js中,字符串都带引号 | “” |
Undefined | var a;声明了变量a但是没有给值,此时a=undefined | undefined |
Null | var a=null;声明了变量a为空值 | null |
①数字型
-
最大值:Number.MAX_VALUE
-
最小值:Number.MIN_VALUE
-
无穷大:Infinity
-
无穷小:-Infinity
-
非数值:NaN
isNaN():判断是否为数字,若是则为false
②字符串型:可以是单引号,也可以是双引号,推荐是单引号。
转义字符:用“\”
字符串长度:str.length
字符串的拼接:用“+”
(2)获取数据类型:typeof num
(3)数据类型的转换
-
转换为字符串
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num=1;alert(num.toString()); |
String()强制转换 | 转成字符串 | var num=1;alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1;alert(num+"我是字符串"); |
-
转换成数字型
方式 | 说明 | 案例 |
---|---|---|
parseInt(string)函数 | 将string类型转成整数数值型 | parseInt('78') |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
Number()强制转换函数 | 将string类型转成数值型 | Number('12') |
js隐式转换(-*/) | 利用算术运算隐式转换成数值型 | '12'-0 |
-
转换成布尔型
使用Boolean()函数,代表空和否定的转化为false,其余为true
1.4 js运算符
(1)比较运算符中有:===全等 !==不全等
全等要求数据类型也要相等,判断相等是会转换数据类型
(2)运算符的优先级:
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++、--、! |
3 | 算术运算符 | 先*/%后+- |
4 | 关系运算符 | <=、>=、<、> |
5 | 相等运算符 | ==、!=、===、!== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
1.5 流程控制分支结构
1、if(多分支语句:if-else if)
if(条件表达式){ //为真继续进行,为假不执行 }
2、三元表达式(?:)
条件表达式 ?表达式1 :表达式2(若条件表达是为真是表达式1,假是表达式2)
3、switch
switch(表达式){ case value1: 执行语句1; break; case value2: 执行语句2; break; case value3: 执行语句3; break; default: 执行最后的语句; }
4、switch语句和if else if语句区别
-
一般情况下,他们两个语句可以相互替换
-
switch语句通常处理case为比较确定值的情况,而if语句更加灵活,常用于范围判断
-
switch语句进行判断后直接执行到程序的条件语句,效率更高,if语句需要逐条判断
-
分支较少,使用if执行效率高
-
分支较多,使用switch执行效率高
1.6 循环
1、for循环
2、while循环
3、do...while循环
1.7 数组
1、数组的创建
(1)用new创建数组
var 数组名 = new Array(); var arr = new Array();//创建一个新的空数组 var arr = new Array(2);//数组长度为2 var arr = new Array(2,3);//数组的数为2,3
(2)利用数组字面量创建数组
//使用数组字面量方式创建空数组 var 数组名 = []; //使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑',1,true];
2、数组的索引
数组名[数组下标]
3、数组新增元素
(1)修改数字长度:arr.length
(2)修改数组索引新增数组元素:arr[3]='pink';
1.8 函数
1、声明函数:
function 函数名() { //函数体 //函数名为动词 } function 函数名(形参1,形参2) { //函数体 //函数名为动词 }
函数表达式(匿名函数) var 变量名 = function(){};
2、调用函数:
函数名(); 函数名(实参1,实参2);
变量名();
3、形参与实参个数不匹配
-
如果实参的个数和形参的个数一致,则正常输出结果
-
如果实参的个数多于形参的个数,则,会取到形参个数
-
如果实参的个数少于形参的个数,则,结果是NaN
4、函数的返回值
在函数体中调用return语句,在后期调用函数的时候使用alert等语句。
return语句:return 返回的结果;
return返回数组:return [结果1,结果2];
5、arguments的使用
arguments存储了传递的所有实参,是一个伪数组(只有函数有arguments)
function fn(){ console.log(arguments); } fn(1,2,3);
伪数组:
-
具有数组的length属性
-
按照索引的方式进行存储
-
没有数组的一些方法:pop()、push()等
1.9 JS作用域和预解析
1、JS作用域:代码名字在某个范围内起作用和效果
目的:提高程序的可靠性,减少命名冲突
2、全局变量:在全局作用下的变量,在全局下都可以使用
局部变量:在函数内部的变量
注:在函数内部,没有声明直接赋值的变量也属于全局变量
3、预解析
(1)js引擎运行js分两步:预解析和代码执行
(2)预解析分为变量预解析(变量提升)和函数预解析(函数提升)
-
变量提升:把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
-
函数提升:把所有的函数声明提升到当前作用域的最前面。不调用函数
1.10 JS对象
1、对象是由属性和方法组成的
-
属性:事物的特征,在对象中用属性来表示(常用名词)
-
方法:事物的行为,在对象中用方法来表示(常用动词)
2、创建对象
-
利用字面量创建对象({})
var obj = { uname: '张三丰', age: 18, sex: '男', sayHi: function(){ console.log('hi~'); } } console.log(obj.uname);//对象名.属性名 console.log(obj['age']);//对象名['属性名'] obj.sayHi();//对象名.方法名
-
利用new Object创建对象
var obj =new Object();//创建了一个空对象 obj.uname = '张三丰'; obj.age = 18; obj.sex = '男'; obj.sayHi = function(){ console.log('hi~'); }; console.log(obj.uname); console.log(obj['age']); obj.sayHi();
-
利用构造函数创建对象
/*function 构造函数名() {//函数名首字母大写 this.属性 = 值; this.方法 = function() {} } new 构造函数名();*/ function Star(uname, age, sex) { this.uname = uname; this.age = age; this.sex = sex; } var ldh = new Star('刘德华',18,'男'); console.log(ldh.uname); console.log(ldh['age']);
new关键字执行过程
-
new构造函数可以在内存中创建一个空对象
-
this指向创建的空对象
-
执行构造函数的代码,给空对象添加属性和方法
-
返回这个对象
3、遍历对象
for...in语句用于对数组或者对象额属性进行循环操作
//for(变量 in 对象){} var obj = { uname: '张三丰', age: 18, sex: '男', sayHi: function(){ console.log('hi~'); } } for(var k in obj) { console.log(k);//得到属性名 console.log(obj[k]);//得到属性值 }
1.11 内置对象
1、JS中的对象:自定义对象、内置对象、浏览器对象
自定义对象:JS语言自带的对象
2、使用MDN、W3C
3、Math对象
Math.PI //圆周率 Math.floor() //向下取整 Math.ceil() //向上取整 Math.round() //四舍五入 Math.abs() //绝对值 Math.max() //最大值 Math.min() //最小值 Math.random() //随机数,[0,1) //得到两数之间的随机数 function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } //得到两数之间随机整数 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值 } //得到两数之间随机整数(包含两数) function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 }
4、日期对象
(1)Date()是一个构造函数,用new来创建日期对象
new Date(); //返回当前时间 new Date(value); new Date(dateString); //标准格式:2022-3-4 13:00:00
方法名 | 说明 |
---|---|
getFullYear() | 获取当年 |
getMonth() | 获取当月(0-11) |
getFDate() | 获取当天日期 |
getDay() | 获取星期几(周日0-周六6) |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒钟 |
(2)Date总的毫秒数(时间戳):距离1970年1月1日的时间
//valueOf()方法和getTime()方法 var date = new Date(); console.log(date.valueOf()); console.log(date.getTime()); //简单写法(最常用的写法) var date1 = +new Date(); //+new Date()返回总的毫秒数 console.log(date1); //H5新增的方法 console.log(Date.now());
//倒计时的案例 function countDown(time) { var nowTime = +new Date(); //返回当前时间总的毫秒数 var inputTime = +new Date(time); //返回用户输入时间总的毫秒数 var times = (inputTime - nowTime) / 1000; //times是总的秒数 var d = parseInt(times / 60 / 60 / 24); d = d < 10 ? '0' + d : d; var h = parseInt(times / 60 / 60 % 24); h = h < 10 ? '0' + h : h; var m = parseInt(times / 60 % 60); m = m < 10 ? '0' + m : m; var s = parseInt(times % 60); s = s < 10 ? '0' + s : s; return d + '天' + h + '时' + m + '分' + s +'秒'; } console.log(countDown('2022-3-4 13:00:00'));
5、数组对象
(1)检测是否为数组
-
instanceof运算符
-
Array.isArray()
var arr = []; var obj = {}; //方法一 console.log(arr instanceof Array);//true console.log(obj instanceof Array);//false console.log(obj instanceof Object);//true //方法二 console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false
(2)添加删除数组元素的方法
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1...) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减1 无参数、修改原数 | 返回它删除的元素的值 |
unshift(参数1...) | 向数组的开头添加一个或更多元素,注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减1 无参数、修改数组 | 并返回一个元素的值 |
//push()在数组末尾添加一个或多个数组元素 //方法1 var arr = [1,2,3]; arr.push(4,'pink'); console.log(arr);//[1, 2, 3, 4, 'pink'] //方法2 var arr = [1,2,3]; console.log(arr.push(4,'pink'));//5 console.log(arr);//[1, 2, 3, 4, 'pink'] //unshift在数组开头添加一个或多个数组元素 //方法1 arr.unshift('red','black'); console.log(arr);//['red', 'black', 1, 2, 3, 4, 'pink'] //方法2 console.log(arr.unshift('red','black'));//7 console.log(arr);//['red', 'black', 1, 2, 3, 4, 'pink'] //pop() 可以删除数组的最后一个元素 //方法1 arr.pop(); console.log(arr);// ['red', 'black', 1, 2, 3, 4] //方法2 console.log(arr.pop());//pink console.log(arr);// ['red', 'black', 1, 2, 3, 4] //shift在数组开头删除一个元素 //方法1 arr.shift(); console.log(arr);// ['black', 1, 2, 3, 4] //方法2 console.log(arr.shift());//red console.log(arr);// ['black', 1, 2, 3, 4]
(3)数组排序
方法名 | 说明 | 是否修改原数组 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组 返回新数组 |
sort() | 对数组元素进行排序 | 该方法会改变原来的数组 返回新数组 |
//reverse() var arr = ['red','pink','blue']; console.log(arr.reverse()); //sort() //sort对一位数可以,有双数不行 var arr1 = [3,4,7,1,5,6];//一位数字可以 arr1.sort(); console.log(arr1); //正确实现方式 var arr1 = [3,14,77,61,5,6];//一位数字可以 arr1.sort(function(a,b) { return a - b;//升序 return b - a;//降序 }); console.log(arr1);
(4)数组索引方法
方法名 | 说明 | 返回值 |
---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号 如果不存在,则返回-1 |
lastIndexOf() | 在数组中的最后一个索引 | 如果存在返回索引号 如果不存在,则返回-1 |
var arr = ['red','pink','blue']; console.log(arr.indexOf('blue'));//2,只返回第一个索引号 console.log(arr.lastIndexOf('blue'));//3,最后一个
//数组去重案例 function unique(arr) { var newArr = []; for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i])===-1){ newArr.push(arr[i]); } } return newArr; } var demo = unique(['c','a','z','a','x','a','x','c','b']); console.log(demo);
(5)数组转化为字符串
方法名 | 说明 | 返回值 |
---|---|---|
toString() | 把数组转换为字符串,逗号分隔每一项 | 返回一个字符串 |
join('分隔符') | 方法用于把数组中所有元素转换为一个字符串 | 返回一个字符串 |
var arr = [1,2,3]; console.log(arr.toString());//1,2,3 console.log(arr.join('-'));//1-2-3
6、字符串对象
(1)JS提供三种引用类型(基本包装类型):String、Number、Boolean
(2)字符串的不可变(认为变了其实是新开了一个地址)
(3)根据字符返回位置
方法名 | 说明 |
---|---|
indexOf('要查找的字符',开始的位置) | 返回指定内容在字符串中的位置,如果找不到就返回-1,开始位置是index索引号 |
lastIndexOf() | 从后往前找,只找第一个 |
(4)根据位置返回字符
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index 字符串的索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML5、IE8+支持和charAt()等效 |
(5)判断是否有该属性:对象['属性名']
(6)字符串操作方法
方法名 | 说明 |
---|---|
concat(str1,str2...) | concat()方法用于连接两个或多个字符串,拼接字符串 |
substr(start,length) | 从start开始(索引号),length取得个数 |
slice(start,end) | 从start开始,截取到end位置,end取不到(都是索引号) |
substring(start,end) | 从start开始,截取到end位置,end取不到(都是索引号),不接受负值 |
替换字符:replace('被替换的字符','替换为的字符')
字符转换为数组:split('分隔符')