//设置全局变量
var $ = function (id) {
return document.getElementById(id);
};
$('idName');
//获取元素内容
1.元素.innerHTML
2.元素.innerText
//添加内容
1.元素.innerHTML+="<a>a</a>";
$("").html("<a>a</a>");
2.元素.innerText+="a";
$("").text("a");
3. 元素. insertAdjacentText(where,el,html)
//where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
//el:用于参照插入位置的html元素对象
//html:要插入的html代码
4. 元素.insertAdajcentHTML(swhere,stext)
//swhere: 指定插入html标签语句的地方,
//stext:要插入的内容
//将具有length属性的对象转成数组
Array.prototype.slice.call(arguments);
var a='12345';
Array.prototype.slice.call(a);//['1','2','3','4','5']
var a={length:2,0:'1',1:'2'}
Array.prototype.slice.call(a);//['1','2']
5.slice截取
数组.slice();
字符串.slice();
6.toArray() toString()
7.onpageshow事件 onresize事件
8.查询所有DOM元素
document.getElementsByTagName("*").length;
9.定义图片元素
var img=new Image();
img.src='……';
10.forEach循环
arr.forEach((item,index)=>{
console.log('arr['+index+']='+item);
})
11.默认参数
volume=(a,w=3,h=4)=>(a*w*h);
volume(2)//24
12.扩展运算符----> ...
arr=[1,2,3,4];
console.log(...arr)//1 2 3 4
13.find
//ES6语法:从数组中查找某个值
const pets=[
{type:'dog',name:'max'},
{type:'cat',name:'kar'},
{type:'dog',name:'tommy'}
];
var pet=pets.find(pet=>pet.type==='doy'&&pet.name==='max');
console.log(pet);//{type:'dog',name:'max'}
14.双重非位运算简写
Math.floor(4.9)===4//true
简写:
~~4.9===4//true
15.判断某值是否是整数
var i=10;
console.log(Number.isInteger(i))//ture
16.for of(es6,typescript)
var my=[1,2,3,4];
for(var n of my){
if(n>2) break;
console.log(n);//1 2
}
for(var n of "abcd"){
console.log(n);//a b c d;把每个字符串打印出来
}
17.字符串转数字(一元字符)
console.log(1++"2"+"3");//33 (+2=2——>数字类型)
(在“2”之前的额外+被视为一个一元运算符)。因此,JavaScript将“2”的类型转换为数字,然后将一元+符号应用于它(即将其视为正数)。结果,下一个操作现在是1 + 2,当然这会产生3。但是,我们有一个数字和一个字符串之间的操作(即3和“3”),所以JavaScript再次转换数值赋给一个字符串并执行字符串连接,产生“33”。
18.递归导致的堆栈溢出问题解决
var list=readHugeList();
var neatListItem=function(){
var item=list.pop();
if(item){
setTimeout(neatListItem,0);
}
};
19.关于浏览器的js操作
window.location.reload();//重新加载
window.location.search;//浏览器地址参数即问号以后部分
window.history.back();//返回上一页
window.history.go(-1);//刷新上一页
20.toFixed
num.toFixed(2);//四舍五入保留2位数——保留小数位数0~20
20.js黑科技
(1)单行写一个评级组件
var rate=1;//rate等于几就是几星
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
(2)JavaScript 错误处理的方式的正确姿势
try{
//执行代码
}catch(e){
window.location.href="http://stackoverflow.com/search?q=[js]+"e.message
}
(3)论如何优雅的取随机字符串
Math.random().toString(16).substring(2);//13位
Math.random().toString(36).substring(2);//11位
(4)论如何优雅的取整
var a =~~2.33;
var b=2.33|0;
var c=2.33>>0;
(5)实现金钱格式化
var test1 ='1234567890';
var format =test1.replace(/\B(?=(\d{3})+(?!\d))/g,',');
console.log(format);// 1,234,567,890
(6)最短的代码实现数组去重
[...new Set([1, "1", 2, 1, 1, 3])];//[1, "1", 2, 3]
(7)用最短的代码实现一个长度为m(6)且值都n(8)的数组
Array(6).fill(8);//[8, 8, 8, 8, 8, 8]
21.当前标签类型
e.target.nodeName === 'IMG';//当前标签是否是img标签
$(e.target).prop('tagName') === 'A';//当前标签是否是a标签
网络知识来源:
作者:月飞鱼
链接:https://www.jianshu.com/p/c5005fad4274