首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发知识汇总--JS

前端开发知识汇总--JS

作者头像
j_bleach
发布2019-07-02 11:17:34
1.2K0
发布2019-07-02 11:17:34
举报
文章被收录于专栏:前端加油站前端加油站

版权声明:本文为博主原创文章,未经博主允许不得转载。 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….

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年03月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • JS
  • JS小技巧
    • updating….
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档