JavaScript

判断浏览器类型

// /Chrome/i 正则表达式， i：代表部分大小写
var ua = navigator.userAgent        
if (/Chrome/i.test(ua)) {            console.log('我是谷歌呀')        
} else if (/firefox/i.test(ua)) {            console.log('我是火狐呀')        
} else if (/msie/i.test(ua)) {            console.log('我是IE呀')        
}

select下拉框

	var select = document.getElementById("selectId");
	var index = select.selectedIndex;//拿到选中项的索引
	var value = selected.options[index].value;
	var lable = select.options[index].text;

table

	var table= document.getElementById("tableId");
	table.rows;//获取行
	table.deleteRow(0);//删除行
	rows[0].cells;//获取行中单元格

节点操作

	var node= document.getElementById("node");
	node.parentNode;//获取父节点，如根据可以获取
	node.childNodes;//获取子节点
	node.innerHTML;//获取节点内的html元素：
123

	node.innerTEXT;//获取节点内的文本，标签不会获取：123

手动触发事件

	document.getElementById().click();

页面刷新

	history.go(0);

变长参数

	//arguments对象是一个类似数组的对象,方法参数就是它的元素
	arguments.length;//参数个数
	arguments[0];//取参数

查找元素

document.querySelectorAll("input[type='file']");
document.getElementById("id");
document.getElementsByName("name");
document.getElementsByTagName("input");

String

console.log("123456".substring(2,3));// 3
console.log("123456".substr(2,3));// 345

异步编程

function asy(fn){
	setTimeout(function(){
		//fn("异步编程");
	},0)
}
asy(function (str){
	console.log(str);
});
// 定时器
let interval = setInterval(function (){
	document.getElementById("p1").innerText = new Date().toLocaleString();
},1000);
// setTimeout是一次性的无需清除
setTimeout(function() {
	// 清除定时器
	window.clearInterval(interval);
}, 5000);
// Promise对象
let state = prompt("请输入一个数");
new Promise((resolve,reject) => {
	setTimeout(function (){
		if(state % 2 == 0){
			resolve(state + "是偶数");
		}else{
			reject(state + "不是偶数");
		}
	},2000);
// 获取两个返回参数
}).then(resolve => {
	console.log(resolve);
},reject => {
	console.log(reject);
// catch只获取参数二
}).catch(reject => {
	console.log(reject);
})

对象

let obj1 = new Object();
obj1.id = 1;
console.log(obj1.id);

let obj2 = {id : 2};
console.log(obj2.id);

function obj(id){
	this.id = id;
	this.log = function(){
		console.log(this.id);
	}
}
// 原型（静态）
obj.prototype = {
	count : 10,
	add : function (){
		// this.count++;操作实例
		obj.prototype.count++;// 操作原型
	}
}
let obj3 = new obj(3);
let obj4 = new obj(4);
obj3.log();
console.log(obj3.id == obj4.id);// false
console.log(obj3.count == obj4.count);// true
obj3.add();
obj4.add();
console.log(obj3.count);
console.log(obj4.count);
// 对象数组遍历
let map = [{id:1},{id:2}];
for (let item of map) {// 数组用of
	for(let key in item){// 对象用in
		console.log(key + " " + item[key]);
	}
}
console.dir({id:1});// 以对象形式输出
// 解构
const list = [1,2,3];
let [a,b,c] = list;
console.log(a,b,c);
const student = {
	name : "zhangsan",
	log : function (){
		console.log("log");
	}
}
let{log} = student;
log();
// 对象简写
let name = "lisi";
let age = 20;
let person = {
	name,
	age,
	sayHi : function (){
		console.log(this);
	}
}

继承

function father(id){
	this.id = id;
	this.msg = function (){
		console.log("father");
	}
}
function son(name){
	this.name = name;
	this.log = function (){
		console.log("son");
	}
}
// 子类原型持有父类实例
son.prototype = new father(1);
let son1 = new son("zhangsan");
son1.log();
son1.msg();
console.log(son1.id);
console.log(son1.name);

数组

// 排序
console.log([1,3,2].sort(function (o1,o2){
	return o2-o1;// 逆序（sort无参或o1-o2：顺序）
}));
let ary = [1,2,3];
ary.unshift("零");// 头部插入
ary.push(function (){console.log(4);});// 尾部插入
for (let item of ary) {
	if(typeof item === "function"){
		item();
	}
	console.log(typeof item + " " + item);
}
let ary1 = [1,2,3];
// splice(截取位置，截取个数，从截取位置补充)，截取的元素组成新的数组，会改变原数组
let ary2 = ary1.splice(1,0,4);
// slice(截取位置，结束位置（不包含）)，截取的元素组成新的数组，不会改变原数组
let ary3 = ary1.slice(1,3);
console.log(ary1,ary2,ary3);

字符串、JSON 转换

// 注意引号规范，一行用"'"，多行用"`"。
let str = `{
	"id" : 1,
	"name" : "lisi",
	"flag" : true,
	"addr" : {"city":"sz"},
	"ary" : [1,2,3]
}`;
// 字符串转JSON
let json = JSON.parse(str);
console.log(json);
// JSON转字符串
console.log(JSON.stringify(json));

选择器

document.querySelector("#btn");// id
document.querySelectorAll("a");// 标签
document.querySelectorAll(".cls");// 类
document.querySelectorAll("#btn p");// 后代：#btn内部所有p标签
document.querySelectorAll("#btn>p");// 子代：#btn内下一级p标签
// 结构选择器
document.querySelectorAll("#btn ul li:first-child");
// #btn下的ul下的第二个li
document.querySelectorAll("#btn ul li:nth-child(2)");

事件

// 多事件注册
function add(){}
btn.addEventListener("click",add);
btn.addEventListener("click",function (){});
// 事件解绑
btn.removeEventListener("click",add);
window.onload = function (){}// 页面加载完成后立即执行
history.back();// 页面历史后退
history.forward();// 页面历史前进
history.go();// 正数前进、负数后退、0刷新
document.getElementById("btn").onclick = function (){
	location.href = "http://www.baidu.com";// 跳转
	//location.reload();// 刷新页面
	//location.replace("http://www.baidu.com");// 没有历史
}

localStorage

// 本地存储
localStorage.setItem("key","value");
localStorage.getItem("key");

模板字符串

let title = "登鹳雀楼";
console.log(`${title}
锄禾日当午
汗滴禾下土`);

this对象

let fun = function (){
	console.log(this);
}
fun();// window
// 改变this指向
fun.call({});// {}
document.querySelector("#p1").onclick = function(){
	// window.setTimeout(function (){
	// 	console.log(this);// window
	// },1000);
	// 箭头函数是静态的，始终指向作用域下的this
	window.setTimeout(() => {console.log(this);},1000);// p
}

stream流

let person = [
	{
		name : "zhangsan",
		age : 20
	},
	{
		name : "lisi",
		age : 30
	},
	{
		name : "wangwu",
		age : 40
	},
	{
		name : "zhaoliu",
		age : 50
	},
];
person.forEach((person,index) => console.log(index + person.name));
console.log(person.filter(person => person.age > 30)
				.map(person => person.name + "###"));
console.log(person.every(person => person.age > 30));
console.log(person.some(person => person.age > 30));
console.log(person.find(person => person.age == 50));
console.log(person.findIndex(person => person.age == 50));

导入导出

// 导出
// 方式一
// export let name = "zhangsan";
// export function log(){
// 	console.log(name);
// }
// 方式二
// let name = "lisi";
// function log2(){
// 	console.log(name);
// }
// export{name,log2}
// 方式三
export default{
	name : "wangwu",
	log3 : function (){
		console.log(1);
	}
}
// 导入
import * as m1 from "./m1.js";
//import {name as name1,log} from "./m1.js";// 解构
//import m1 from "./m1.js";// default独有的
m1.default.log3();