(快速复习)JavaScript基础知识

变量

• var

常量

• const

基础数据类型

• boolean
• number
• string
• undefined
• null
• object
• array
• function

类型转换

• typeof

var num=1;
var emptyValue=null;
console.log(typeof num); //number
console.log(typeof enmptyValue); //object

• 不同数据类型自动转换

注释

// 单行注释

/* 
 多行注释
*/ 

/**
 文档注释
*/

赋值操作符

• =

一元操作符

• -（负数）
• +（正数）（用在字符前面可转化为number类型）
• 自减
• 自增

算术操作符

• .-
• .+
• .*
• /
• %
• **

比较操作符

• .>
• <
• .>=
• <=
• ==
• ===

逻辑操作符

• &&
• ||

var a=null;
var b=5;
var c=a||b;
console.log(c); //5

• !

三目运算符

var temperature=10;
console.log(temperature>15?'在家':'出门');

代码块

• var 可外部访问
• let / const 不可外部访问

流程控制

• if…else
• if…else if…else
• switch…case…default
• while
• do…while
• for

声明函数

function add(a,b){
	return a+b;
}

调用函数

console.log(add(1,1)); //2

函数表达式

var plus=add;
console.log(plus(1,1)); //2

//匿名函数
var multiply=function(a,b){
	return a+b;
}; 
console.log(multiply(1,1)); //2

变量和函数提升

默认参数

function greetings(name="ZWW",weather){
	console.log("你好,"+name+"今天是:"+weather);
}

greetings(undefined,"晴天");

递归

function sum(n){
	if(n===1){
		return 1;
	}
	return n+sum(n-1);
}

function fib(n){
	if(n<=1){
		return 1;
	}
	return fib(n-1)+fib(n-2);
}

arguments

function log(){
	for(let i=0;i<arguments.length;i++){
		console.log(arguments[i]);
	}
}

log('a','b','c');

作用域

var / let

箭头函数

闭包

function squareSum(a,b){
	function square(x){
		return x*x;
	}

	return square(a)+square(b);
}

console.log(squareSum(2,3)); //13

function person(){
	let name="ZWW";
	function getName(){
		return name;
	}

	return getName;
}

var getName=person();
console.log(getName); //函数构造
console.log(getName()); //ZWW

柯里化

function sumThreeNums(a,b,c){
	return a+b+c;
}

function sumThreeNumsCurry(a){
	return function(b){
		return function(c){
			return a+b+c;
		};
	};
}

console.log(sumThreeNumsCurry(1)(2)(3)); //6

var fixedTwo=sumThreeNumsCurry(1)(2);
console.log(fixedTwo(3)); //6
console.log(fixedTwo(4)); //7

自执行函数

• 形成自己的作用域

var num1=10;

(function(){
	var num1=20;
	console.log(num1); //20
})();

console.log(num1); //10

回调函数

function request(cb){
	console.log("开始执行回调");
	cb("success");
	console.log("回调执行结束");
}

function callback(result){
	console.log("正在执行回调");
	console.log("request:"+result);
}

request(callback);

创建数组

var arr1=[1,2,3];
var arr1=new Array(1,2,3);
var arr1=Array(1,2,3);
var arr1=Array.of(1,2,3);

删除数组

• 修改length

var arr=[1,2,3,4,5];
arr.splice(1,2);
console.log(arr); //[1,4,5];

数组遍历

• for
• for…of

var arr=[1,2,3,4,5];
for(let ele of arr){
	console.log(ele);
}

• forEach

arr.forEach((ele,index,self)=>{
	console.log(ele);
	console.log(index);
	consle.log(self);
})

栈模式

• push()
• pop()

队列模式

• push()
• shift() 头部移除
• unshift() 头部插入

反转数组

var arr=[1,2,3];
console.log(arr.reverse());

var str="hello";
console.log(str.split("").reverse().join("")); //olleh

数组排序

• sort

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

arr.sort((a,b)=>{
	if(a>b){
		return -1;
	}else if(a<b){
		return 1;
	}else{
		return 0;
	}
});

console.log(arr); //[6,5,4,3,2,1]

数组连接

• concat()

数组裁切

• slice()

map数组

var arr=[1,2,3];
var mappedArr=arr.map(ele=>ele*2);
console.log(mappedArr); //[2,4,6]
console.log(arr); //[1,2,3]

reduce数组

var arr=[1,2,3,4];
var result=arr.reduce((previous,current)=>previous+current);
console.log(result); //10

数组过滤

var arr=[1,2,3,4,5,6];
var filteredArr=arr.filter(item=>item>4);
console.log(filteredArr);

数组测试

var arr=[1,2,3,4,5];
var result=arr.every(item=>item >2);
console.log(result); //false;
var result=arr.some(item=>item>7);
console.log(result); //true

destrcuturing解构操作符

function person(){
	let name="ZWW";
	let position="前端工程师";
	return [name,position];
}

var [myName,myPosition]=person();
console.log(myName,myPosition);

rest操作符

var arr=[1,2,3,4,5,6,7];
var [a,b,...rest]=arr;
console.log(a,b,rest);// 1 2 [3,4,5,6,7]

function variousArgs(...args){
	console.log(args);
}

variousArgs(arr); //[1,2,3,4,5,6,7]

多维数组

var arr=[];
for(let i=0;i<4;i++){
	var arr[i]=[];
	for(let j=0;j<4;j++){
		var arr[i][j]=i+j;
	}
}

创建对象

var employee={
	name:"张三",
	age:20,
	"birth-day":"1901-10-1",
	position:"前端工程师",
	signIn:function(){
		console.log("张三打卡");
	}
}

var employee2=new Object();
employee2.name="李四";
employee2.age=30;
employee2.position="后端工程师";
employee2.signIn=function(){
	console.log("李四打卡");
};

对象属性

console.log(employee.name);
console.log(employee["name"]);

省略key

var name="ZWW";
var employee={
	name,
	signIn(){
		console.log(this.name+"打卡");
	}
};

遍历对象属性

console.log(Object.keys(employee));

for(key in employee){
	console.log(key);
}

删除对象属性

delete employee.name;

构造器

function Employee(name,position){
	this.name=name;
	this.position=position;
}

var emp1=new Employee("张三","前端工程师");
var emp2=new Employee("李四","后台工程师");

this

• this指向包裹其作用域的this

getters和setters

var person={
	firstName:"三",
	lastName:"张",
	get fullName(){
		return this.firsttName+this.lastName;
	},
	set fullName(fullName){
		let [lastName,firstName]=fullName.split(",");
		this.lastName=lastName;
		this.firstName=firstName;
	}
};

function Employee(name,position){
	this.name=name;
	this.position=position;
}
var emp=new Employee("张三","前端工程师");
Object.defineProperty(emp5,"info",{
	get:function(){
		return this.name+" "+this.position;
	},
	set:function(info){
		let[name,position]=info.split(" ");
		this.name=name;
		this.position=position;
	}
});

console.log(emp.info); //赵六 前端工程师
emp.info="赵七 后端工程师";

原型

• Object.getPrototypeOf()

Object.create()

var manager=Object.create(emp);
console.log(Object.getOwnPropertyNames(manager)); //获取对象的属性

原型链

修改原型指向

function Manager(){}

Manager.prototype.department="技术部";
Object.setPrototypeOf(manager,Manager.prototype); //修改了manager的原型为Manager
console.log(manager.department);
console.log(Object.getPrototypeOf(manager)); 

spread操作符

// 1
var post={
	id:1,
	title:"标题1",
	content:"这是内容"
};
console.log(post);

var postClone={...post};
console.log(post === postClone); //false

var post2={
	...post,
	author:"ZWW"
};
console.log(post2);

// 2
var arr=[1,2,3];
var arrClone=[...arr];
var arr2=[...arr,4,5,6];

//3
function savePost(id,title,content){
	console.log("保存了文章:",id,title,content);
savePost(...[2,"标题","内容"]);
}

Destructuring&Rest

// 1
var post={
	id:1,
	title:"标题1",
	content:"内容",
	comments:null
};

var {id,title}=post;
console.log(id,title); //1 标题1

var {id,title:headline}=post;
console.log(id,headline); //1 标题1

var {id,title,comments="没有评论"}=post;
console.log(comments); //null

// 2
var post2={
	id:2,
	title:"标题2",
	content:"内容",
	comments:[
	{
		userId:1,
		comment:"评论1"
	},{
		userId:2,
		comment:"评论2"
	},{
		userId:3,
		comment:"评论3"
	}
  ]
};

var {comments:[,comment]}=post2;
console.log(comment);

// 3 
function getId(idKey,obj){
	let {[idKey]:id}=obj;
	return id;
}
console.log(getId("userId",{userId:3})); //3

// 4
var {comments,...rest}=post2;
console.log(rest); //获取post的其他属性

值传递&引用传递

call&apply&bind

• 指定this主体

定义class

成员方法

实现继承

class Employee {
	constructor(name,position){
		this.name=name;
		this.position=position;
	}

	signIn(){
		console.log(this.name+"打卡")；
	}

	get info(){
		return this.name+" "+this.position;
	}

	set info(info){
		let [name,position]=info.split(" ");
		this.name=name;
		this.position=position;
	}
}

class Manager extends Employee{
	constructor(name,position,dept){
		super(name,position);
		this.dept=dept;
	}

	signIn(){
		super.signIn();
		console.log("额外信息:"+this.position+"打卡");
	}
}

成员变量

静态成员变量

class Page{
	static count=0;
	static increaseViewCount(){
		Page.count++;
	}
}

Page.count++;
Page.increaseViewCount();

字符串的定义与转义

字符串的遍历

var str="Hello";

for(let i=0;i<str.length;i++){
	console.log(str.charAt(i));
}

for(let c in str){
	console.log(c);
}

字符串裁切

• slice()
• substring()

字符拼接

字符串大小写

• toUpperCase()
• toLocaleLowwerCase()

去除空格

• trim()

模板字符串

function greeting(strings,gender){
	let genderStr="";
	if(gender==="M"){
		genderStr="先生";
	}else if{gender==="F"}{
		genderStr="女士";
	}
	return `${string[0]}${gender}`;
}

var gender="M";
var result=greeting`你好，峰华${gender}`;

创建正则表达式

var str="where when what";

var re=/wh/; //结尾加g代表全局搜索，每次搜索都会保存
var re2=new RegExp("wh");

console.log(re.exec(str)); //返回匹配wh的信息
console.log(re.test(str)); //true
console.log(re2.exec(str));
console.log(re2.test(str));

字符匹配

var str=`This str contains 123 CAPITALIZED letters and _-&^% symbols`;

console.log(/T/.test(str)); //true
console.log(/This/.test(str)); //true

特殊字符匹配

var str=`This str contains 123 CAPITALIZED letters and _-&^% symbols`;

console.log(str.match(/Th.s/)); //.匹配任意字符
console.log(str.match(/\d/)); //匹配数字
console.log(str.match(/\w/)); //匹配字母和下划线
console.log(str.match(/\s/)); //匹配空格和换行符
console.log("你好".match(/u4f60/)); //匹配unicode编码

匹配次数

var str=`This str contains 123 CAPITALIZED letters and _-&^% symbols`;

console.log(str.match(/This.*/)); //.匹配的字符出现多次，不匹配换行符
console.log(str.match(/T+/)); //T出现的次数

console.log(str.match(/t?/));
console.log(/t{2}/); //t出现2次
console.log(/\d{1,3}/); //1-3次

区间、逻辑和界定符

var str=`This str contains 123 CAPITALIZED letters and _-&^% symbols`;

console.log(str.match(/[a-z]/)); //匹配a到z的字符
console.log(str.match(/[^0-9]/)); //匹配不是0到9的字符
console.log(str.match(/This|contains/)); //匹配This或者containes的字符

var str="this that this and that";
console.log(str.match(/^this/)); //取开头的this
console.log(str.match(/that$/)); //取结尾的this
console.log(str.match(/\bthat\b/)); //单独单词的that
console.log(str.match(/(aa){2}/)); //aa出现2次

常见正则表达式

//手机号
var moblieRe=/^1[3-9]\d{9}/g;
console.log("13509222264"); //true
console.log("10354584414"); //false

//邮箱
var emailRe=/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2-5})/;
console.log(emailRe.test("admin@163.com")); //true

//用户名
var usernameRe=/^[a-zA-Z][a-zA-Z0-9_]{5,14}$/g;
console.log(usernameRe.test("abc")); //false

字符串替换

var str="Tish 1is 2an 3apple";
console.log(str.replace(/\d+/g,"")); //Tish is an apple
console.log(str.replace("Tish","This")); //This 1is 2an 3apple

字符串分隔

• split()

Number

Math

• abs()
• sin()
• floor()
• ceil()
• pow()
• trunc()

Date

JSON

• JSON.parse()
• JSON.stringify()

Set

• set.add()
• set.forEach()
• set.delete()

Map

• map.set(key,value)
• map.get()
• map.has()
• map.forEach()
• map.entries()

异常捕获

• try…catch…finally…

异常抛出

function fetchData(){
	console.log("获取数据...");
	throw "404";
}

try{
	fetchData();
}catch(e){
	if(e==="404"){
		console.error("未查询到数据");
	}
}

//获取数据...
//未查询到数据

Error对象

class ApiError extends Error{
	constructor(url,...params){
		super(...params);
		this.url=url;
		this.name="ApiError";
	}
}

function fetchData(){
	console.log("获取数据...");
	return new ApiError("/post","404");
}

try{
	fetchData();
}catch(e){
	console.log(e);
	console.log(e.name); //ApiError
	console.log(e.message); //404
}

捕获多个异常

class ApiError extends Error{
	constructor(url,...params){
		super(...params);
		this.url=url;
		this.name="ApiError";
	}
}

function fetchData(){
	console.log("获取数据...");
	return new ApiError("/post","404");
}

try{
	fetchData();
}catch(e){
	if(e instanceof ReferenceError){
		console.log("程序异常");
	}else if(e instanceof ApiError){
		console.log("API 异常")
	}
}

setTimeOut

console.log("第一行代码");
var timer=setTimeOut(()=>{
	console.log("1秒后执行");
},1000);
console.log("第二行代码");
setTimeOut(()=>{
	clearTimeout(timer);
	console.log("timer被销毁");
},500)

setInterval

var interval=setInterval(()=>{
	var date=new Date();
	console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds}`);
},1000);

setTimeout(()=>{
	clearInterval(interval);
});

promise

var promise=new Promise(resolve=>{
	setTimeout(()=>{
		resolve("执行成功");
	},2000);
});

promise.then(value=>console.log(value));
console.log("在promise之前执行");

var promise=new Promise((resolve,reject)=>{
	setTimeout(()=>{
		reject("执行成功");
	},2000);
});

promise.catch(error=>console.log(error));
console.log("在promise之前执行");

new Promise((resolve,reject)=>{
	setTimeout(()=>{
		reject("promise 异常");
	});
}).then(value=>{
	console.log(value);
	throw "then1 异常";
	return value+10;
}).then(value=>{
	console.log(value);
	return new Promise((resolve)=>{
		resolve(value+20);
	});
}).catch(error=>{
	console.log(error);
})

var p1=new Promise(resolve=>{
	setTimeout(()=>{
		resolve(1);
	},1000);
});

var p2=new Promise(resolve=>{
	setTimeout(()=>{
		resolve(2);
	},2000);
});

var p3=new Promise(resolve=>{
	setTimeout(()=>{
		resolve(3);
	});
},500);

Promise.all([p1,p2,p3]).then(values=>console.log(values));

async & await

async function async1(){
	let result1= await async2();
	try{
		let result2=await async3();
	}catch(e){
		console.log(e);
	}
	console.log(result1);
}

async function async2(){
	return new Promise((resolve)=>{
		setTimeout(()=>{
			resolve(10);
		},1000)
	});
}

async function async3(){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			reject(8);
		},500)
	});
}

模块

• 导出

export function formatDate(date){
	return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
}

• html页

<script src="" type="module"></script>

• js文件

import {formatDate} from "绝对路径"

• 默认导出 default
• 别名 as