版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/67642677
本文主要从JS以及一些好玩的demo,做一个汇总,会不定期地更新。。
js切片,将一维数组,切成n组长度3的二维数组
var a = [1, 2, 3, 4, 5, 6, 7, 8]
var result = []
function slice(l) {
do {
var newarr = l.splice(0, 3);
reult.push(newarr)
} while (l.length > 0)
}
slice(a)
console.log(result)//[[1,2,3],[4,5,6],[7,8]]
按位与(&) 0001 1001 0001 判断奇偶数,n&1,1只有最后一位为1,所以任何数与1进行&操作,都返回1。
按位或( | ) 0011 0101 0111 向下取浮点数,n|0,浮点数不参与位数运算,所以舍去,n|0=n
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
<input disabled/>
在el.getAttribute(“disabled”)会返回空,是读取这个key的value 而el.disabled则会返回true,经过js解析。
不会改变原字符串,返回一个新的字符串(所有的字符串方法都不会改变原字符串)。
var r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r=arr.filter(function(element,index,self){
return self.indexOf(element) == index;
})
//indexOf只返回元素在数组中第一次出现的位置,如果与元素位置不一致,说明该元素在前面已经出现过,是重复元素。
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
1.js函数的隐式转换默认会调用toString方法,可以手动添加ivalueOf方法,优先级更高 2.目的是针对产多个参数的函数进行“模块化”,其中个别参数需要进行不同处理,相当于把多个参数的函数,拆分成传一个参数的函数。
var show=true
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#chooseArea").length === 0){
show=false
}
});
result.split("\n")[0];//分割textarea 中的value
var a =10,b =2;
a=[b,b=a][0];
switch(add_step ){
case 5:level=1
......
}
精简写法
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
//利用对象属性赋值,可以跟函数,用策略模式,不仅仅是简单的数值赋值
JSON.parse(JSON.stringify(obj))//利用的是JS按值存储时的特点
方法一:
var a=[1,2,3],b=[4,5,6];
a.concat(b)// 返回一个新数组[1,2,3,4,5,6]
方法二:
[].push.apply(a,b)
或 Array.prototype.push.apply(a,b)//数组a改变,返回新的a数组长度
推荐使用方法一。方法二有数据大小限制(b不能过长),效率低,且会改变原数组。
var s=5;
var a=(++s)+(++s)+(++s);
var b=(s++)+(s++)+(s++);
console.log(s) //都等于8
console.log(a) //21
console.log(b) //18
思考: i=i++; console.log(i) i = i++原理:
把变量i的值取出来,放在一个临时变量里. 把变量i的值进行自加操作. 把临时变量的值作为自增运算前i的值使用. 经过以上三步操作以后,虽然变量i在第二步操作中进行了自增运算,但第三步操作以后又把原来的值赋给了它,所以最后输出结果为1.
let foo = 'outer';
function bar(func = x => foo) {
let foo = 'inner';
console.log(func());
}
bar(); //outer
let a = new Set([1, 2, 3]);
let b = new Set([3, 5, 2]);
// 并集
let unionSet = new Set([...a, ...b]);
//[1,2,3,5]
// 交集
let intersectionSet = new Set([...a].filter(x => b.has(x)));
// [2,3]
// ab差集
let differenceABSet = new Set([...a].filter(x => !b.has(x)));
function foo () {
console.log(this.a)
}
var obj1={
a:1,
foo:foo
}
var obj2={
a:2,
foo:foo
}
obj1.foo.call(obj2) //2
显示绑定优先级高于隐式绑定(对象包含)。
新建实例优先级高于显示绑定。
this指向主要有调用位置决定。new>显示>隐式>默认
_proto_
上面。以代码为例:
var c={
f:1
}
var a=Object.create(c)
console.log(a)
//这里打印出的 a 对象并不会直接挂载f属性,而是在_proto_当中
当访问由Object.create()创造的对象属性时,会依次沿着原型链查找,打印出最近的属性。 当对某个存在于原型链上的属性赋值时,有三种情况: 1.属性仅存在于原型链上的,会触发屏蔽属性,即在对象本身创建相关属性并赋值。 2.属性存在于原型链上,但是不可枚举属性中的被置为不可写(writeble=false),那么不会产生屏蔽属性,在严格模式下会报错。 3.属性存在于原型链,但是设置了setter访问器。也不会触发屏蔽属性。
if(aaa){
//这样会报错
}
if(typeof aaa !== 'undefined'){
//不会报错
}
var foo = 1
var bar = foo
var bar = 2 // foo=1
简单值(包括但不限于字符串,数字等等原始类型)是的赋值(即 bar=foo)通过复制值的方式,即每次赋值操作是对新的值的操作(bar的1和foo的1不是同一个1)。
var foo = [1]
var bar = foo
bar.push(2) // foo=[1,2]
bar = [3,4]
复合值(对象)的赋值(即 bar=foo)是通过复制引用的方式实现,两个引用指向同一个值。当进行bar.push操作时,是[1]的值再做操作,因此这两个引用指向的值都发生了改变,foo=bar=[1,2]。bar=[3,4]这个赋值操作是改变了bar的引用的指向,[1,2]的值本身并没有改变因此foo依旧等于[1,2]。
var foo = [1]
fn(x){
x.push(2) // foo=[1,2]
x = [3,4] // foo=[1,2]
}
fn(foo)
在复合类型最为参数传递的时候,本质上是对foo进行了一次引用的复制,指向同一个值,并不是传递了foo本身。因此,再做push操作时,本身值产生了改变(foo=[1,2]),但是赋值操作是改变引用,值没有改变,foo仍然等于[1,2]
[] == ![]
相等的原因是,!操作符会将 [] 取反,[] 本身是一个对象,而对象的布尔值都为真,所以 ![]
返回false。当 [] == false 比较时,即一个复合类型,一个简单类型做比较时,复合类型会被强制转换为简单类型,来取 []
所对应的value,是一个空值,所以最终得到[] == ![]
为true。a=b=c=1
这里的1会依次向左返回传递。 function fn(){
return a=1 // 函数fn也会返回右值1
}
promise.all
// 当需要在两个(多个)异步任务完成之后,执行某个函数(cb)
http('url1',cb)
http('url2',cb)
// 代码模拟
var a,b
function cb1(){
a = true
if(a && b){
cb()
}
}
function cb2(){
b = true
if(a && b){
cb()
}
}
http('url1',cb1)
http('url2',cb2)
promise.race
// 当需要在两个(多个)异步任务完成其中任何一个时,执行某个函数(cb)
http('url1',cb)
http('url2',cb)
// 代码模拟
var a,b
function cb1(){
if(!a){
a = true
cb()
}
}
function cb2(){
if(!a){
a = true
cb()
}
}
http('url1',cb1)
http('url2',cb2)
// css
.pseudo {
&::after {
display: inline-block;
margin-top: -6px!important;
}
}
// js
let dom = document.getElementsByClassName('ant-upload')[0].parentNode;
dom.setAttribute("class", "ant-form-item-children pseudo");