前端开发知识汇总--JS

j_bleach

已于 2022-09-04 14:13:46 修改

阅读量1.8k

点赞数

分类专栏： js web 文章标签：前端开发 javascript

于 2017-03-28 20:14:37 首次发布

本文链接：https://blog.csdn.net/j_bleach/article/details/67642677

版权

本文汇总了JavaScript中的核心概念，包括数组切片、位运算符应用、JS中的null类型、属性与属性的区别、深拷贝、异步操作、this的四种调用规则等，并分享了一些实用的代码技巧和最佳实践，适合前端开发者巩固和提升JS技能。

摘要由CSDN通过智能技术生成

前言

本文主要从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);
        });