一、数据类型
1.1 基本数据类型
1.1.1 Number型
- Number型又叫数字型,默认为0
- Number型常见的进制数:二进制、八进制、十六进制
var num1 = 010; //八进制数0~7,在数字面前加0,表示八进制数
var num2 = 0x9; //十六进制0~9 a~f 在数字面前0x,表示十六进制数
- 数字型有范围,最大值(Number.MAX_VALUE),最小值(Number.MIN_VALUE)
- 数字型三个特殊值:Infinity(无穷大)、-Infinity(无穷小)、NaN(非数字)
//isNaN()用于判断该数是否为数字 若是数字则返回false,若不是返回true
console.log(isNaN(12)); //返回false
console.log(isNaN('Hsu'));//返回true
1.1.2 Boolean型
- Boolean型又叫布尔型,只有两个值:true、false,在加法运算时,true当作1,false当作0。
1.1.3 String型
- String型又称字符串型,其语法为" " 或 ’ ’
- 字符串转义符:
- \n :换行符
- \ :斜杠
- ‘:单引号’
- \t:tab缩进
- \b:空格
- 检测获取字符串长度的方式:str.length (空格也算一个字符)
- 字符串的拼接方式:str1 + str2 + …
console.log('沙漠'+'骆驼'); //显示沙漠骆驼
console.log(12+12); //显示24
console.log('12'+12); //显示1212 字符串与任何其他类型相拼接,最终结果为字符串型
1.1.4 Undefined、Null、数据类型转换
- 如果一个变量声明未赋值,就是undefined型,undefined型与数字相加结果为NaN。
- 如果一个变量赋值为NUll型,与数字相加结果为数字本身
- 获取变量数据类型的方式:typeof 变量名
var num = 10;
console.log(typeof(num)); //输出为Number
//prompt取过来的值时字符串型的
var age = prompt('请输入您的年龄');
console.log(typeof(age)); //输出为string
//在控制台中,显示的结果若为黑色就是string型,紫色为Number、蓝色为Boolean、浅灰色为undefined和null
- 转换为字符串型:toString()、String()、加号拼接字符串
var str = 变量名.toString();
console.log(String(变量名));
console.log(变量名 + '');
- 转换为数字型的方式:parseInt(string)\parseFloat(string)\Number()\通过运算转换(- * /)
console.log(parseInt(3.14));//显示为3 自动取整
console.log(parseInt(120px)); //自动去掉单位
- 转换为布尔型:Boolean(),代表空/否定的值会转换为false,常见的有’ ’ 、0、NaN、null、undefined
- 进制转换 parseInt(str,n) :将n进制数的字符串转换为10进制数
parseInt(str,2);
parseInt(str,8);
parseInt(str,16);
1.2 复杂数据类型
二、标识符、运算符
2.1 标识符、关键字、保留字的概念
1.标识符:开发人员为变量、属性、函数、参数取得名字,不能是关键字或保留字。
2.关键字:JS本身已经使用了的字,不能当变量名的方法名。break、case、catch、continue等等。
3.保留字:预留的关键字,如boolean、byte、char、class、const等。
2.2 运算符
2.2.0 运算符的优先级
小括号>一元运算符(++ – !)>算术运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符
2.2.1 算术运算符
- 用于执行两个变量或值得算术运算:加、减、乘、除、取余,在运算符左右要加两个空格,优先级为:先乘除后加减
- 尽量避免浮点数的运算和浮点数的比较
2.2.2 递增/递减运算符
- ++ 变量名:前置递增运算符,先执行加1再返回值
- 变量名++:后置递增运算符,先执行返回值后执行加1
- 递减运算符用法同递增运算符
2.2.3 关系运算符
- 用于两个数据进行比较时所用的运算符,返回值为一个布尔值
- 常见的关系运算符有:> 、<、 >=、 <=、 !=、 ===(全相等:比较对象的类型、值都相等)
2.2.4 逻辑运算符
- &&:逻辑与
//逻辑与短路运算 表达式1&&表达式2 若1为真,则返回2;若1为假,则返回1
console.log(123 && 456); //456 除了0之外的所有数字都为真
console.log(0 && 456); //0
console.log(0 && 1 + 2 && 456 * 56789); //0
console.log('' && 1 + 2 && 456 * 56789); //''
//如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
- ||:逻辑或
//逻辑或短路运算 表达1||表达式2 若1为真,则返回1;若1为假,则返回2
console.log(123 || 456); //123
console.log(123 || 456 || 456 + 123); //123
console.log(0 || 456 || 456 + 123); //456
- !:逻辑非
2.2.4 赋值运算符
- 概念:用来把数据赋值给变量的运算符 = 、+=、-=、*=、/=、%=
三、流程控制-分支
3.1 分支流程控制
3.1.1 if、else、else if
- 语法格式如下:
//if else语法结构
if(条件表达式){
//执行语句1
} else{
//执行语句2
}
- 典型案例:判断用户输入是否为闰年
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
return true
}else{
return false
}
3.1.2 三元表达式方式
- 语法格式
//条件表达式 ? 表达式1 :表达式2
//执行思路:若条件表达式为true执行表达式1 否则执行表达式2
num > 5 ? '大于5' : '不大于5';
3.1.3 switch语句
- 针对特定值的选项执行不同的语句
- 语法格式
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
四、循环结构
4.1 for循环
- 语法格式
//语法结构
for (初始化变量; 条件表达式; 操作表达式){
//循环体
}
4.2 while循环
- 语法格式
//while 循环语法结构
while(条件表达式){
//循环体
} //先判断后执行
4.3 do…while循环
<script>
//语法结构
do{
//循环体
}while(条件表达式) //先执行后判断
</script>
4.4 contiunue、break
- Continue关键字用于立即跳出本次循环,继续下次循环
- break关键字用于立即跳出整个循环
五、数组
5.1 数组的基本操作
- 创建数组
- 1.利用new创建
var arr = new Array(); //创建了一个空的数组
- 2.利用数组字面量创建数组(常用)
var arr = [];
- 数组初始化,数据用逗号分隔
var arr = [1, 2, 3, 4];
- 修改数组长度
arr.length = 5; //改成数组长度为5,且未定义元素为undefined
- 新增数组元素
- 1.通过数组下标新增数组元素
- 2.通过length将新的元素插入数组最后(常用,因为一般数组长度未知)
newArr[new.Arr.length] = arr [i];
- 遍历数组
- 1.通过for循环遍历数组
- 2
- [ ]
5.2 数组排序之冒泡排序
- 冒泡排序的概念:把一系列数据按照一定的顺序进行排列显示
- 冒泡排序的算法思想:重复的走访要排序的数列,一次比较两个元素,如果顺序错误就交换至到走访完所有的数列为止
//外层for循环:一共需要的趟数 length-1
//里层for循环:每一趟需要交换的次数 length-次数+1
var arr = [5,4,3,2,1];
for(var i = 0; i < arr.length; i++){
for(var j = 0; j< arr.length - i; j++){
//比较两个变量的值看是否需要交换顺序
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr [j + 1];
arr[j + 1] =temp;
}
}
}
六、函数、作用域
6.1 函数的基本概念和使用
- 函数的概念:封装了一块能够被重复调用执行的代码块
- 函数的使用:声明函数 + 调用函数
//声明函数
function 函数名(){
//函数体
}
//调用函数
函数名();
- 函数的参数:形参/实参
- 形参:在声明函数的小括号里的参数
- 实参:在函数调用的小括号里的参数
- 函数的返回值:return语句
6.2 arguments
- arguments的使用:函数的一个内置对象,所有函数都内置了一个arguments对象,对象中存储了传递的所有实参
- arguments是伪数组,具有数组的length属性,按照索引的方式进行存储,但是没有数组的一些方法
6.3 作用域
- 概念:代码在某个范围内起的作用和效果,目的是提高程序的可靠性。
- 有全局作用域和局部作用域两种,局部作用域采取就近原则
- 预解析:JS解析器在运行js代码的时候分为两步:预解析和执行。js会把js里面的所有的var还有function提升到当前作作用域的最前面,然后再按照代码的书写顺序从上往下执行。预解析分为变量预解析和函数预解析。
- 变量预解析(变量提升):把所有的变量声明提升到当前作用域的最前面,不提升赋值操作。
- 函数预解析(函数提升):把所有的函数声明提升到当前作用域的最前面,不提示调用函数。
七、对象和内置对象
7.1 对象的基本知识
-
对象是一组无序的相关属性和方法的集合,是由属性和方法组成的。所有的事物都是对象,例如字符串、数值、数组、函数等。属性是事物的特征,方法是事物的行为。
-
创建对象的三种方式:利用字面量创建对象、利用new Object创建对象、利用构造函数创建对象。
-
1.利用对象字面量创建对象
var obj = {
//对象的一些属性
uname:'Hsu',
//对象的方法
sayHi:function(){
console.log('Hi');
};
- 2.利用new Object创建对象
var obj = new Object();
obj.unmae = 'Xu';
obj.sayHi = function(){
console.log("你好!");
};
- 3.利用构造函数创建对象
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
new 构造函数名();
- 变量对象:for … in 遍历对象
for(遍历 in 对象){};
7.2 内置对象
7.2.1 数学对象Math.
- Math对象不是一个构造函数,不需要new来调用
Math.PI | 圆周率 |
---|---|
Math.max(a,b,c) | 输出a、b、c中的最大值 |
Math.min(a,b,c) | 输出a、b、c中的最小值 |
Math.abs() | 取绝对值 |
Math.ceil() | 向上取整 |
Math.floor() | 向下取整 |
Math.round() | 四舍五入 |
random() | 随机数 |
7.2.2 日期对象Date()
- 只能通过调用date()构造函数来实例化日期对象,没有字面量
- 日期对象的调用方式
//1.使用Date() 如果没有参数返回当前系统的当前时间
var date = new Date();
//常用写法
var date2 = new Date('2020-4-26 8:8:8');
日期的格式化语法 | 概念 |
---|---|
date.getFullYear() | 返回当前日期的年 |
date.getMonth() | 返回当前的月份(0-11) |
date.getDate() | 返回几号 |
date.getDay() | 返回周几,周日为0 |
7.2.3 数组对象
- 常见的数组内置对象
语法格式 | 概念 |
---|---|
instanceof(arr) | 判断是否为数组 |
Array.isArray(arr) | 判断是否为数组 |
arr.push() | 将参数添加到arr数组中最后位 |
arr.unshift() | 在数组最前面添加元素 |
arr.pop() | 删除数组的最后一个元素 |
shift() | 删除数组的第一个元素 |
arr.reverse(数组名) | 翻转数组 |
arr.sort() | 数组排序 有bug |
arr.indexOf(x) | 返回x的索引号,有多个x的时候返回第一个的索引号,若找不到元素,返回-1 |
arr.toString() | 数组转换为字符串 |
arr.join() | 用括号里的数分隔数组,且输出为字符串 |
- 数组排序的完美写法
//升序排序
arr.sort(function(a, b){
return a - b;
})
//降序排序
arr.sort(function(a, b){
return b - a;
})
- 数组去重操作
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;
}