js基础知识

//设置全局变量

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

js黑科技

点击打开链接

点击打开链接