JavaScript基础

JS语法规范

• 区分大小写
• 每行代码结束的分号可以省略
• 分为多行注释（//）和多行注释（/**/）

变量

变量的声明和赋值

va r a = 1;//声明赋值

或者

let b = 1;

等同于

var a;//声明变量      
a = 1;//变量赋值

let b;
b = 1;

var变量可以提升

console.log(a); //undefined
var a = 1;

let变量不可以提升

console.log(b);//报错
let  b = 1;

常量

声明必须赋值，不允许重新赋值

const  a =  3;
a = 4;//报错

数据类型

分为原始类型和引用类型

原始类型分为

检测数据类型： typeof

• 数值型（number）

就是数字，分为整型和浮点型，就是整数和小数

var  a = 10;
var  b = 10.10

• 字符串型(string)

被引号包含的数据，不区分大小写

var b = 'hello'

• 布尔型(boolean)

分为true和false， true是1，false是0

• 未定义型(undefined)

变量声明了没有赋值，其值就是undefined

var a;
console.log(a);//undefined

• 空(null)

值是null，类型是object

var a = null;
console.log(a, typeof a);//object

引用类型

Object 、 Array 、 Date、 Function

数据类型转换

隐式类型转换(自动转换)

在运算过程中自动产生的数据转换

• 数字+字符串

  数字转换为字符串

var  a = 1;
var  b = '2';
console.log(a+b);//'12'

• 数字+布尔型

  布尔型转换为数字

var  a = 1;
var  b = true;
console.log(a+b);//2

• 布尔型+字符串

  布尔型转字符串

var  a = true;
var  b =  'hello'
console.log(a+b);//'truehello'

加号(+)的作用

执行数字之间的加法作用

执行字符串之间的拼接

其余运算符

纯数值字符串转换为数值，其他字符串转为NaN

NaN: Not a Number

在一个数据转换为数值型的时候，没有成功得到一个数字就返回NaN

强制类型转换（手动转换）

• 其他类型转为数值型

  Number()

var  a1 = Number('1'); //1
var  a2 = Number('1a'); //NaN
var  a3 = Number(true); //1
var  a4 = Number(false); //0
var  a5 = Number(undefined); //NaN
var  a6 = Number(null);//0
console.log(a1,a2,a3,a4,a5,a6)

其他类型转为整型

parseInt()

var  a1 = parseInt('3.14');//3
var  a2 = parseInt('2.18a');//2
var  a3 = parseInt('a6.18');//NaN
var  a4 = parseInt(true);//NaN
var  a5 = parseInt(false);//NaN
var  a6 = parseInt(undefined);//NaN
var  a7 = parseInt(null);//NaN
console.log(a1,a2,a3,a4,a5,a6,a7)

其他类型转为浮点型,就是转为小数

parseFloat()

var  a1 = parseFloat('3.12');//3.12
var  a2 = parseFloat('4.13a');//4.13
var  a3 = parseFloat('a1.13');//NaN
var  a4 = parseFloat(true);//NaN
var  a5 = parseFloat(false);//NaN
var  a6 = parseFloat(undefined);//NaN
var  a7 = parseFolat(null);//NaN
console.log(a1,a2,a3,a4,a5,a6,a7)

• 其他型转为布尔型（ Boolean() ）

var  a1 = Boolean('');//false
var  a2 = Boolean('0');//true
var  a3 = Boolean(0);//false
var  a4 = Boolean(1);//true
var  a5 = Boolean(undefined);//false
var  a6 = Boolean(null);//false
console.log(a1,a2,a3,a4,a5,a6,a7) 

• 其他类型转字符串（ String() ）

var e1 = String(123.4);//123.4
var e2 = String(true);//true
var e3 = String(false);//false
var e4 = String(undefined);//undefined
var e5 = String(null);//null
console.log(e1,e2,e3,e4,e5);

运算符

算数运算符

+、-、*、/、%、++、--

++自增

在原来基础上加1

前++

var  a = 1;
//++a是表达式，a是变量，++a不等于a
//赋值给b的是++a的值，不是a的值
//1.++在a的前面，先做自增a = a + 1,此时a = 2
//2.把a的值作为表达式a++的值，a++表达式的值等于2
//3.最后把a++表达式的值赋值给b
var  b = ++a;
console.log(a,b);//2,2

后++

var  a = 1;
//a++是表达式，a是变量，a++不等于a
//赋值给b的是a++的值，不是a的值
//1.++在a的后面，把a的值作为表达式a++的值，此时a =1, a++表达式的值等于1
//2.在做自增a = a +1,此时a = 2
//3.最后a++表达式的值赋值给b, b = 1
var  b = a++;
console.log(a,b)//2,1

--自减

在原来的基础上减1， 其他执行流程跟++自增一样

比较运算符

<、 > 、 >= 、<=、、= 、!==

==：比较两者的值是否相同，会发生隐式转换

===：比较两者的类型和值，都相同true,否则false

console.log('1' == 1); //true
console.log('1' === 1); //false

逻辑运算符

&& || !

&&: 逻辑与，如果第一个条件为false,就不用执行第二个

||:逻辑或，如果第一个条件为true，就不用执行第二个

!：非，取反向

console.log(false && true); //false
console.log(true || false); //true

赋值运算符

=、+=、-=、/=、%=、*=

三目运算符

一目运算符：一个运算符连接一个操作数据++ -- ！

二目运算符：一个运算符连接两个操作数据+ - / * = ...

三目运算符: 两个运算符连接三个操作数据 ？ ：

条件表达式 ? 表达式1 ：表达式2

如果条件表达式正确，执行表达式1

如果条件表达式错误，执行表达式2

console.log(1 < 2 ? true : false); // true
console.log(3 > 5 ? true : false); // false

流程控制

if-else

if(条件表达式) {

语句块1

}else {

语句块2

}

如果条件表达式为true, 就执行语句块1，否则就执行语句块2

if(1 > 0){
	console.log('true');

}else{
	console.log('false');
}

或者
if(1 > 3) {
	console.log(3);
}else  if (1 > 2) {
	console.log(2);
}else  if (1>0){
	console.log(1)
}

switch-case

switch(表达式){//表达式通常是一个变量

​ case 值1：

​ 语句；

​ break;//结束switch语句，不在往后执行

​ case 值2：

​ 语句；

​ break;//结束switch语句，不在往后执行

​ .....

​ default:

​ 语句n;//如果表达式和case中的每个值比较为false

}

表达式和case的值做比较，使用的是全等于，要求值和类型相等

switch(100){
	case 100: 
		console.log(100);
		break;
	case 90:
		console.log(90);
		break;
	case 80:
		console.log(80);
		break;
	default:
		console.log(60);
}

循环

while循环

while(条件表达式){

​ 循环体

}

var i = 0;
while(i < 10){
	//循环体
	console.log(i)
	//增量
	i++
}

do-while循环

do{

​ 循环体

}while(条件表达式)

var i = 0;
do{
	//循环体
	console.log(i)
	//增量
	i++
}while(i < 10)

for循环

for(初始值；条件表达式；增量){

​ 循环体

}

先执行初始值-->条件表达式 -->循环体-->增量

for(var i = 0; i<= 10; i++) {
	console.log(i);
}

break和continue

continue: 跳过后续循环体代码，还会往后继续执行

break: 跳出循环，结束循环的执行

for(var i = 0; i <= 10; i++) {
	// 当i= 5时
	if(i === 5) {
		//continue;//跳过，继续往后执行
		break;//跳出循环
	}
	console.log(i);
}

函数

保存一段可重复利用的代码

创建函数方式

声明方式创建

function 函数名称（参数列表）{//行参

​ 函数体；

​ return 值；//返回值，函数调用后返回的值

}

函数名称(实参)

function fn(){
	console.log('a');
}
fn()

赋值方式创建

var 函数名 = function(){

​ 函数体；

​ return 值；

}

var fn = function() {
	console.log('a');
}
fn()

参数

• 行参：在函数被调用时接收到的传入的值或变量
• 实惨：在调用函数时传入的值或者变量
• 实参可以跟行参数量不一样，没有赋值的行参显示undefined

function fn(a,b){//行参：在函数被调用时接收到的传入的值或变量
	//行参：虽然没有var，但是它属于局部变量
	console.log(a,b);//1，2
}
var i = 1;
fun(i, 2);
console.log(a,b);//会报错，a和b是局部变量

变量作用域

作用域： 一个变量的可用范围

• 全局作用域：变量在任意位置可用
• 函数作用域：变量在函数内部可用
• 块级作用域：变量{}内部可用，es6新增

变量作用域：全局变量和局部变量

• 全局变量：全局作用域可用
• 局部变量：函数作用域和块级作用域可用

全局作用域

//定义全局变量
var a = 1;
console.log(a);// 1 可以访问到
function fn(){
	//函数访问先在函数内部找a
	//函数内部没有定义a变量，那么就会再往外层去找
	//找到全局变量a
	console.log(a);//1 可以访问到
}
fn();

函数作用域

function fun() {
	//定义局部变量
	var a = 1;
	//函数内访问时会先在函数内部找a
	//函数内部定义过a变量，就找到局部变量a
	console.log(a);//1
}
fun();
console.log(a);//报错，函数内部定义的函数只能在函数内部有效，外部不能访问

函数本质是一个变量，只不过这个变量的值保存的是一个函数

var a = function() {
	console.log('b');
}
a;//只是访问变量的值，函数并不会执行
console.log(a);//打印是个函数，是变量的值
a();//调用函数

• 全局函数：全局作用域可用
• 局部函数：函数作用域和块级作用域可用

//全局函数
function fun() {
	function a() {
		//局部函数
		console.log(a);
	}
	a();//可用调用
}
fun();//可以调用
a();//报错

声明提前

声明方式创建

console.log(a);//var a;声明提前，但是没有赋值
//a()//会报错 undefined不是一个函数
var a = function () {
	console.log('a')；
}
a()

赋值方式创建

a();//可以调用，会把声明和赋值一起提前
function a() {
	console.log('a');
}

匿名函数

创建匿名函数

创建函数不指定名字的函数，节约内存，用完释放

(function (参数){
	代码块
})

匿名函数自调用

(function (str) {
	var n = 1;
	console.log(str);
})('hello');
(functin () {
	var n =2;
	console.log(n);
})()

回调函数

函数作为实参传递到另一个函数,在另一个函数内当作行参被使用

function tao(madai) {
	madai();//传入的行参，调用传递的回调函数
}
function dong() {
	
}
tao(dong);//dong是回调函数
tao(function () {})//匿名函数是回调函数

递归

函数内调用自己的函数，return返回值

function fn() {
	fn();
	return 返回值；//要有跳出条件，结合着return
}

系统函数

isNaN(): 判断值是不是NaN,隐式转换为数值型,是NaN为true,不是NaN为false

var a = 1;
var b = '1a';
console.log(isNaN(a));//false
console.log(isNaN(b));//true

isFinite():判断值是不是有限值，只有infinity是无限值

var a = 3/2;
console.log(isFinite(a));//true

var b = 3/0;
console.log(isFinite(b));//false

eval():执行字符串表达式

var a = 3.14
console.log(eval('parseInt(a)'));//3

对象

自定义对象

• 对象字面量

  var 对象名称 =

  var obj = {name: 'wang', sex: '男'}
  console.log(obj);//{name: 'wang', sex: '男'}
  

• 内置构造函数

  var 对象名称 = new Object();//创建一个空对象，添加属性需要一步步添加

  var obj = new Object();
  obj.name = 'wang';
  obj['sex'] = '男';
  console.log(obj);//{name: 'wang', sex: '男'}
  

访问属性

• 对象.属性名
• 对象['属性名']
• 访问没有的属性，返回undefined

var obj = {name: 'wang', sex: '男'};
console.log(obj.name);//wang
console.log(obj['sex']);//男

遍历属性

for(var k in 对象) {
k//每个属性名
对象[k]//属性名代表的属性值
}

var obj = {name: 'wang', sex: '男'}
for (var k in obj) {
	console.log(k, obj[k])//name wang    sex 男
}

检测属性是否存在

• 对象.属性名 === undefined
• 对象.hasOwnProperty('属性名')
• ‘属性名’ in对象

对象中的方法

方法对应的是一个函数

var person = {
	name: 'ding',
	play: function() {
		//this指代调方法的对象
		console.log(this.name)//ding
	}
}
person.play()

数组

数组创建

字面量

var 数组名称 = [元素1，元素2...]

var arr = ['a','b']
console.log(arr)

构造函数

var 数组名称 = new Array();

var arr = new Array();
arr[0] = 'a';
arr[1] = 'b';
console.log(arr);//['a','b']

数组的访问

• 数组[下标]，下标是以0开始的数字
• 不存在的元素，结果是undefined

var arr = ['a','b'];
console.log(arr[0], arr[1]);//a, b

数组的长度

数组.length

var arr = ['a','b'];
console.log(arr.length);//2

数组末尾添加元素

数组[数组.length] = 值

var arr = ['a', 'b', 'c'];
arr[arr.length] = 'd';
console.log(arr);

遍历

for(var i = 0; i < 数组.length; i++) {
i代表下标
数组[i] 下标对应的元素
}

var arr = ['a', 'b', 'c'];
for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

数组常用API

toString()

数组转为字符串

var arr = ['a', 'b', 'c'];
console.log(arr.toString());//a,b,c

join()

数组转为字符串，默认分割为逗号，可以指定分割符号

var arr = ['a','b','c'];
console.log(arr.join(' '));//a b c

concat()

数组拼接

var arr1 = [1,2,3];
var arr2 = [4,5,6];
console.log(arr1(arr2));//1,2,3,4,5,6

reverse()

翻转数组元素

var arr = ['a','b','c'];
console.log(arr.reverse());//['c','b','a']

sort()

数组排序，默认是按照首字母Unicode码从小到大

sort(function(a,b){
	return a-b;//数字从小到大排序
	//return b-a;//数字从大到小排序
})

slice(start,end)

截取数据，返回截取到的元素

var arr = ['a','b','c','d'];
console.log(arr.slice(1,3));//b,c

splice(start, count,v1,v2)

删除数据，count删除几个，替换的值v1,v2,，返回删除的元素

var arr = ['a','b','c','d'];
console.log(arr.splice(1,2,'o','r'),arr);

push()

数组末尾添加一个或多个元素，返回数组的长度

var arr = ['a','b','c','d'];
console.log(arr.push('e','f'));//6

pop()

删除数组末尾最后一个元素，返回删除的元素

var arr = ['a','b','c','d'];
console.log(arr.pop());//d

unshift()

数组开头添加一个或者多个元素，返回数组的长度

var arr = ['a','b','c','d'];
console.log(arr.unshift('e','f'));//e,f,a,b,c,d

shift()

删除数组开头一个元素，返回删除的值

var arr = ['a','b','c','d'];
console.log(arr.shift());//b,c,d

indexOf

判断数组是否含有某个元素，存在返回下标，不存在返回-1

var arr = ['a','b','c','d'];
console.log(arr.indexOf('c'));//2
console.log(arr.indexOf('e'));//-1

字符串

字符串API

length

字符串长度

var str = 'hello';
console.log(str.length);//5

charAt()

获取下标对应的字符，也可以使用数组格式，字符串[下标]

var str = 'hello';
console.log(str.charAt(4));//o

indexOf()

查找字符串，返回满足条件的第一个下标，找不到返回-1

var str = 'hello';
console.log(str.indexOf('l'));//2
console.log(str.indexOf('w'));//-1

lastIndexOf()

查找字符串，返回满足条件最后一个下标，找不到返回-1

var str = 'hello';
console.log(str.lastIndexOf('l'));//3

toUpperCase()

将英文字母转大写

var str = 'hello';
console.log(str.toUpperCase());//HELLO

toLowerCase()

将英文字母转小写

var str = 'HELLO';
console.log(str.toLowerCase());//hello

slice(start,end)

截取字符串，返回截取的字符串

var str = 'hello';
console.log(str.slice(1,3));//el

substr(start,count)

截取字符串,countd等于数量，返回截取到的字符串

var str = 'hello';
console.log(str.substr(1,3));//ell

Math对象

Math.PI()

圆周率 ，等于3.141592653589793

Math.abs()

求绝对值

var num = Math.abs(-3.14);
console.log(num);//3.14

Math.ceil()

向下取整

var num = Math.ceil(3.4);
console.log(num);//4

Math.floor()

向上取整

var num = Math.floor(3.4);
console.log(num);//3

Math.round()

四舍五入

var num = Math.round(3.4);
console.log(num);//3

Math.max()

获取一组数字最大值

var num = Math.max(10,20,30,15);
console.log(num)；//30

Math.min()

获取一组数字最小值

var num = Math.min(10,20,30,15);
console.log(num)；//10

Math.pow(x,y)

计算x的y次方

var num = Math.pow(2,3);
console.log(num);//8

Math.random()

获取随机，范围0～1 ,>=0 <1

var num = Math.random();
console.log(num);

Date()对象

创建Date()

• var dt = new Date('2021/6/17 10:20:30')；

• var dt = new Date(2021,5,17,10,20,30) ；

  月份范围0～11代表1～12月

• var dt = new Date(16882300000)；

  存储距离计算机元年的毫秒数对应的日期时间

• var dt = new Date();

  存储当地操作系统的时间

获取时间

getFullYear() 、 getMonth() 、getDate()、getHours()、getMinutes()、getSeconds()、getMilliseconds()

var dt = new Date();//获取当前时间
var year = dt.getFullYear();//获取年
var month = dt.getMonth()+1;//获取月
var date = dt.getDate();//获取天
var hours = dt.getHours();//获取小时
var minutes = dt.getMinutes();//获取分
var seconds = dt.getSeconds();//获取秒
var milliseconds = dt.getMilliseconds();//毫秒
console.log(year,month,date,hours,minutes,seconds,milliseconds)

设置时间

setFullYear()、setMonth()、setDate()、setHours() 、setMinutes() 、setSeconds()、setMilliseconds

var dt = new Date();//获取当前时间
dt.setFullYear(2022);//获取年
dt.setMonth(5);//获取月
dt.setDate(20);//获取天
dt.setHours(10);//获取小时
dt.setMinutes(15);//获取分
dt.setSeconds(35);//获取秒
console.log(dt);

转本地字符串，用于测试

toLocaleString()、toLocaleDateString()、toLocalTimeString()

var dt = new Date();
console.log(dt.toLocaleString());//获取完整的日期时间
console.log(dt.toLocaleDateString());//获取日期部分
console.log(dt.toLocaleTimeString());//获取时间部分

原始类型对象

让原始类型的数据与引用类型的数据一样，具有属性和方法，一共有三种包装对象，数值对象、字符串对象、布尔对象

Number对象

• 创建

  new Number()，数据强制转为数值型，返回对象

var  n1 = new Number('33');//数据强制转为数值型，返回对象
console.log(n1, typeof n1);//{33},object
var  n2 = Number('3')；//数据转为数值型，返回字符串
console.log(n2, typeof n2);//3,number

• toFixed(n)

强制保留小数点n位

var num = 4
console.log(num.toFixed(2));//4.00

String对象

创建

new String(),数据转为字符串，返回对象

var n1 = new String('hello');
console.log(n1, typeof n1);//{'hello'},object
var n2 = String('hello');//数据转为字符串，返回字符串
console.log(n2, typeof n2);//hello,object

Boolean对象

创建

new Boolean(),数据转为布尔型，返回对象

var n1 = new Boolean(1);//数据转为布尔型，返回对象
console.log(n1, typeof n1);//{true},object
var n2 = Boolean(1);//数据转为布尔型，返回布尔
console.log(n2, typeof);//true, string

ES6

块级作用域

let、const

let是常量

const是变量

声明的变量和常量都是局部的

大括号之间的语句块都是块级作用域

if for while....

箭头函数

() => {}

箭头的函数只有一行代码并且是return形式

let x = [1,2,4,3]
x.sort((a,b) => {
	return a-b;
});
//x.sort((a,b) => return a-b);//省略大括号
console.log(x);[1,2,3,4]

模版字符串

``

模板字符串${JS表达式}

let obj = {
	name: 'wang',
	sex: 1,
	isWork: 0
}
console.log(`姓名${obj.name},性别${obj.sex ? '男' : '女' },营业${obj.isWork ? '是' : '否' }`);

参数的默认值

//es6之前
function fn(a, b) {
	b = b || 0,
	console.log(a,b);
}
fn(5000);

//es6
function fn(a, b = 0) {//b没有值默认的参数为0
	console.log(a,b);
}
fn(5000);

错误处理

常见错误

• 语法错误：(SyntaxError)

  出现中文符号，缺少括号等

• 引用错误：(ReferenceError)

  使用了未声明的变量

• 类型错误：(TypeError)

  函数或者对象下的方法找不到

• 自定义错误：

  程序员自己指定的错误

  throw 错误内容

错误处理

try{

​ 尝试执行，可能出现的错误

}catch(err) {

​ 捕获错误，一旦try中出现错误才会执行

​ 将错误放入到 err中

​ 进行错误处理

}

let age = 75;
//尝试执行，可能产生错误，出现错误不会影响后边代码执行
try{
	if(age > 60 || age < 18) {
	//自定义错误
	throw '非法的年龄';
	}
}catch(err){
	//捕获错误，一旦try中出现错误才会执行
	//err会报错错误信息
	console.log(err);
	//解决错误
	age = 20;
}
console.log(20)