专栏首页前端加油站前端开发知识汇总--JS

前端开发知识汇总--JS

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/67642677

前言

本文主要从JS以及一些好玩的demo,做一个汇总,会不定期地更新。。

JS

  • 數組切片
 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

  • js null类型为对象的原因 在js最初的设计当中,规定存储数据中,最后一位为0,代表对象,为1代表简单类型,而null在内存当中,全部为0来存储,所以null在JS当中代表对象。
  • js 十进制基数指数
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
  • attribute 与 property区别 property可以看成是html中属性在JS当中的映射。这种映射只存在于html规范中的属性,自定义的property会返回undefined。比如:
<input disabled/>

在el.getAttribute(“disabled”)会返回空,是读取这个key的value 而el.disabled则会返回true,经过js解析。

  • JS replace

不会改变原字符串,返回一个新的字符串(所有的字符串方法都不会改变原字符串)。

  • JS filter 数组去重
 var r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
     r=arr.filter(function(element,index,self){
       return self.indexOf(element) == index;     
   })

//indexOf只返回元素在数组中第一次出现的位置,如果与元素位置不一致,说明该元素在前面已经出现过,是重复元素。

  • JS 禁用浏览器回退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
  • JS函数柯里化

1.js函数的隐式转换默认会调用toString方法,可以手动添加ivalueOf方法,优先级更高 2.目的是针对产多个参数的函数进行“模块化”,其中个别参数需要进行不同处理,相当于把多个参数的函数,拆分成传一个参数的函数。

  • 大文件分割上传 file.slice(start,end); 参考
  • 下拉菜单点击除当前DOM的其他位置,让列表消失
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
  • ArrayBuffer 是一块存储数组的内存,可以通过int16/int32等等去查看他。(不能直接访问)高速数组。参考
  • event.target 和 event.currentTarget区别 event.currentTarget,拿到的是绑定事件的DOM,最上层的。 event.target是正在执行的dom event.target通过不同操作选择上下级元素。
  • __dirname在nodejs中代表绝对路径。
  • 火狐浏览器 event is not defined解决办法 element.bind(“click”, function (e) { var event = e || window.event; } 函数中传递e参数。原因是:firefox使用w3c的事件对象模型,不同于IE。

JS小技巧

  • 快速交换数值(对象亦可)
 var a =10,b =2;
 a=[b,b=a][0];
  • 替代switch的精简方法 告别if…else/告别switch/告别短路 传统写法
switch(add_step ){
case 5:level=1
......
}

精简写法

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
//利用对象属性赋值,可以跟函数,用策略模式,不仅仅是简单的数值赋值
  • 深拷贝一个数组 在某些时候处理数组时,不想数组本身产生变化,可以使用Array.concat()写法
  • 深拷贝一个对象
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不能过长),效率低,且会改变原数组。

  • setTimeout较setInterval的优势 IOS的webview,或者Safari,这两个浏览器有一个特点就是在滚动的时候是不执行JS的,如果使用了setInterval,会发现在滚动结束后会执行多次由于滚动不执行JS积攒回调,如果回调执行时间过长,就会非常容器造成卡顿问题和一些不可知的错误,但是使用setTimeout就依然只会执行一次,执行结束后再准备执行下一次。
  • i++,++i区别 1.i++ 会在返回表达式之后将i递增,++i 则会在返回表达式之前对i递增。 // 不论前置后置,i都加了1. 2.i++返回一个临时变量,临时变量只能作为右值,左值为内存地址,右值为地址中存储的数据
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.

  • JS词法作用域 js采取的是词法作用域,所以,无论函数在哪里被调用,或者以任何形式被调用,其词法作用域只由其被声明时的位置决定。(这里的func是获得不了函数里面的foo的)
let foo = 'outer';

function bar(func = x => foo) {
  let foo = 'inner';
  console.log(func()); 
}

bar(); //outer
  • JS求交集并集
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)));
  • this全面解析 this调用规则分4种条件。 1.显示绑定。2.隐式绑定(包括对象包含,及回调函数)。3.新建实例。4.默认绑定。 举例分析:
 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>显示>隐式>默认
  • Object.create() 分析 Object.create创建对象最大的特点是Object.create一个对象是需要指定原型的(或者传入null)。 如果什么都不传入,会报错。当传入的值为null时,那么create出来的对象是没有原型的一个字面量。当传入一个对象时,会将此对象的挂载在_proto_上面。

以代码为例:

var c={
f:1
}
var a=Object.create(c)
console.log(a)
//这里打印出的 a 对象并不会直接挂载f属性,而是在_proto_当中

当访问由Object.create()创造的对象属性时,会依次沿着原型链查找,打印出最近的属性。 当对某个存在于原型链上的属性赋值时,有三种情况: 1.属性仅存在于原型链上的,会触发屏蔽属性,即在对象本身创建相关属性并赋值。 2.属性存在于原型链上,但是不可枚举属性中的被置为不可写(writeble=false),那么不会产生屏蔽属性,在严格模式下会报错。 3.属性存在于原型链,但是设置了setter访问器。也不会触发屏蔽属性。

  • typeof typeof 自身有一个安全机制,可以对未声明的变量返回undefined字符串,而不会报错。即
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]

  • === 和 == 区别 == 会在比较中进行强制类型转换,=== 则不会。性能角度两个差距不大。 a == b 如果一个是字符串类型,一个是数字类型,会将字符串类型强制转换为数字类型。 如果一个是布尔类型,一个是数字类型,会将布尔类型转换为数字类型。 如果一个是复合类型,一个是简单类型,会将复合类型转换为简单类型。
  • [] == ![] 解析 [] == [] // false 原因是两个复合类型做比较时,他们的内存地址不同。 而 [] == ![] 相等的原因是,!操作符会将 [] 取反,[] 本身是一个对象,而对象的布尔值都为真,所以 ![] 返回false。当 [] == false 比较时,即一个复合类型,一个简单类型做比较时,复合类型会被强制转换为简单类型,来取 [] 所对应的value,是一个空值,所以最终得到[] == ![] 为true。
  • = 赋值语句 会将等式赋值语句的右值作为返回结果。 a=b=c=1 这里的1会依次向左返回传递。
 function fn(){
     return a=1 // 函数fn也会返回右值1
 }
  • 模拟一个promise.all和promise.race

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)
  • Promise.resolve / Promise.reject Promise.resolve 接收一个非promise , 非thenable的值时,会立即返回传入的结果。 Promise.reject 不论接收何值都会,都会拒绝这个Promise。
  • js动态修改伪类元素样式
// 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");

updating….

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6知识库汇总一

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 什么是JSON

    我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台...

    j_bleach
  • ES6知识库汇总三

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • JS学习系列 04 - 提升

    到目前为止,大家应该很熟悉作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个...

    liuxuan
  • ECMAScript 6 与 ECMAScript 5 哪里不一样?

    const 声明会阻止对于变量绑定与变量自身值的修改,这意味着 const 声明并不会阻止对成员的修改。

    Leiy
  • PHP中函数和语言结构的区别

    关于PHP中的函数和语言结构的区别,本文给大伙逐步分析。函数众所周知它的三要素为:函数名、参数、返回值,调用方式采用函数名加括号()的形式进行调用。语言结构可以...

    周俊辉
  • JavaScript 的 this 原理

    ruanyf
  • JavaScript中的this图解

    学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。

    javascript.shop
  • Python - 变量的作用域

    局部变量:在函数内部,类内部,lamda.的变量,它的作用域仅在函数、类、lamda里面

    小菠萝测试笔记
  • Node.js UDP打洞

    https://www.cnblogs.com/xiii/p/5052586.html

    小贝壳

扫码关注云+社区

领取腾讯云代金券