Js之基础语法整理篇_、丶←′丶'j:∴一

一、数据类型

1.1 基本数据类型

1.1.1 Number型

• Number型又叫数字型，默认为0
• Number型常见的进制数：二进制、八进制、十六进制

var num1 = 010; //八进制数0~7，在数字面前加0，表示八进制数
var num2 = 0x9; //十六进制0~9 a~f 在数字面前0x，表示十六进制数
1
2

• 数字型有范围，最大值（Number.MAX_VALUE）,最小值（Number.MIN_VALUE）
• 数字型三个特殊值：Infinity（无穷大）、-Infinity（无穷小）、NaN(非数字)

//isNaN()用于判断该数是否为数字 若是数字则返回false，若不是返回true
console.log(isNaN(12)); //返回false
console.log(isNaN('Hsu'));//返回true
1
2
3

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
2
3

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
1
2
3
4
5
6

• 转换为字符串型：toString()、String()、加号拼接字符串

var str = 变量名.toString();
console.log(String(变量名));
console.log(变量名 + '');
1
2
3

• 转换为数字型的方式：parseInt(string)\parseFloat(string)\Number()\通过运算转换(- * /)

console.log(parseInt(3.14));//显示为3 自动取整
console.log(parseInt(120px)); //自动去掉单位
1
2

• 转换为布尔型：Boolean()，代表空/否定的值会转换为false，常见的有’ ’ 、0、NaN、null、undefined
• 进制转换 parseInt(str,n) :将n进制数的字符串转换为10进制数

parseInt(str,2);
parseInt(str,8);
parseInt(str,16);
1
2
3

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
3
4
5
6

• ||：逻辑或

//逻辑或短路运算 表达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
1
2
3
4

• ！：逻辑非

2.2.4 赋值运算符

• 概念：用来把数据赋值给变量的运算符 = 、+=、-=、*=、/=、%=

三、流程控制-分支

3.1 分支流程控制

3.1.1 if、else、else if

• 语法格式如下：

//if else语法结构
    if(条件表达式){
        //执行语句1
    } else{
        //执行语句2
    }
1
2
3
4
5
6

• 典型案例：判断用户输入是否为闰年

if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
	return true
}else{
	return false
}
1
2
3
4
5

3.1.2 三元表达式方式

• 语法格式

//条件表达式 ？ 表达式1 ：表达式2
//执行思路:若条件表达式为true执行表达式1 否则执行表达式2
num > 5 ? '大于5' : '不大于5';
1
2
3

3.1.3 switch语句

• 针对特定值的选项执行不同的语句
• 语法格式

switch(表达式){
        case value1:
            执行语句1;
            break;
        case value2:
            执行语句2;
            break;
        default:
            执行最后的语句;
    }
1
2
3
4
5
6
7
8
9
10

四、循环结构

4.1 for循环

• 语法格式

//语法结构
    for (初始化变量; 条件表达式; 操作表达式){
        //循环体
    }
1
2
3
4

4.2 while循环

• 语法格式

//while 循环语法结构
    while(条件表达式){
        //循环体
    } //先判断后执行
1
2
3
4

4.3 do…while循环

<script>
    //语法结构
    do{
        //循环体
    }while(条件表达式) //先执行后判断
</script>
1
2
3
4
5
6

4.4 contiunue、break

• Continue关键字用于立即跳出本次循环，继续下次循环
• break关键字用于立即跳出整个循环

五、数组

5.1 数组的基本操作

• 创建数组
• 1.利用new创建

var arr = new Array(); //创建了一个空的数组
1

• 2.利用数组字面量创建数组（常用）

var arr = [];
1

• 数组初始化，数据用逗号分隔

var arr = [1, 2, 3, 4];
1

• 修改数组长度

arr.length = 5; //改成数组长度为5，且未定义元素为undefined
1

• 新增数组元素
• 1.通过数组下标新增数组元素
• 2.通过length将新的元素插入数组最后(常用，因为一般数组长度未知)

newArr[new.Arr.length] = arr [i];
1

• 遍历数组
• 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;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

六、函数、作用域

6.1 函数的基本概念和使用

• 函数的概念：封装了一块能够被重复调用执行的代码块
• 函数的使用：声明函数 + 调用函数

//声明函数
    function 函数名(){
        //函数体
    }
//调用函数
    函数名();
1
2
3
4
5
6

• 函数的参数：形参/实参
• 形参：在声明函数的小括号里的参数
• 实参：在函数调用的小括号里的参数
• 函数的返回值：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');
};
1
2
3
4
5
6
7

• 2.利用new Object创建对象

var obj = new Object();
obj.unmae = 'Xu';
obj.sayHi = function(){
	console.log("你好！");
};
1
2
3
4
5

• 3.利用构造函数创建对象

function 构造函数名(){
	this.属性 = 值;
	this.方法 = function(){}
}
new 构造函数名();
1
2
3
4
5

• 变量对象：for … in 遍历对象

for(遍历 in 对象){};
1

7.2 内置对象

7.2.1 数学对象Math.

• Math对象不是一个构造函数，不需要new来调用

7.2.2 日期对象Date()

• 只能通过调用date()构造函数来实例化日期对象，没有字面量
• 日期对象的调用方式

//1.使用Date() 如果没有参数返回当前系统的当前时间
    var date = new Date();
	//常用写法
	var date2 = new Date('2020-4-26 8:8:8');
1
2
3
4

7.2.3 数组对象

• 常见的数组内置对象

• 数组排序的完美写法

//升序排序
arr.sort(function(a, b){
	return a - b;
})
//降序排序
arr.sort(function(a, b){
	return b - a;
})
1
2
3
4
5
6
7
8

• 数组去重操作

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;
}
1
2
3
4
5
6
7
8
9