日常前端学习知识积累

最新推荐文章于 2024-04-26 23:21:47 发布

越来越棒鸭

最新推荐文章于 2024-04-26 23:21:47 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/weixin_43221323/article/details/105837176

版权

2020/04/29

Number.toFixed(n) 方法可把 Number 四舍五入为小数位数为n的数字。
js 校验字符串是否为数字和字母组合：
/^[0-9a-zA-Z]$/.test() //true，说明有英文字母或数字
var p = /[0-9]/; var b = p.test(string);//true,说明有数字
var p = /[a-z]/i; var b = p.test(string);//true,说明有英文字母
var p = /[0-9a-z]/i; var b = p.test(string);//true,说明有英文字母或数字
parseInt()将字符串(String)类型转为整数类型，得到的是整数或者NaN；
Number() 函数把对象(Object)的值转换为数字，得到的是数字（整数，小数等）或者NaN。
判断版本号

 function compareVersion(v1, v2) {
            //首先把字符串变为数组
            let v1Array = v1.split('.')
            let v2Array = v2.split('.')
                //注意，逐个比较时取较短的长度
            let len = Math.min(v1Array.length, v2Array.length)
            let index = 0
                //注意，逐个比较用while比
            while (index < len) {
                //注意，把字符串变为整数才能比较
                var diff = parseInt(v1Array[index]) - parseInt(v2Array[index])
                if (diff > 0) {
                    return 1
                } else if (diff < 0) {
                    return -1
                } else {
                    index++
                }
            }
            return 0
        }
 console.log(compareVersion('1.2.3', '1.1')) // 1
 console.log(compareVersion('1.2.3', '1.2')) //0

2020/05/01

手写一个简单模板引擎
用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery）

经验不足的同学可能会写出如下的代码：

<body>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
        <li>test7</li>
        <li>test8</li>
        <li>test9</li>
        <li>test10</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('ul li');
        for(var i = 0, len = lis.length; i < len; i++) {
            lis[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }
    </script>
</body>

你运行一下代码会发现，无论你点击哪个列表，控制台都是输出10。

这是因为var声明的变量是函数作用域的，而不是块级作用域的。也就是说，for循环10次，每次都是改变同一个i，所以它的值会从0一直加到10。
还有个问题是闭包导致的，闭包保存的是外部变量的引用，而不是值。也就是说，循环10次监听器创建了10 个闭包，它们里面的i引用的是同一个啊。所以全部都指向了10。

要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var，因为let支持块级作用域。改成如下就正常了：

        for(let i = 0, len = lis.length; i < len; i++) {
            lis[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }

还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：

        for(var i = 0, len = lis.length; i < len; i++) {
            (function (i) {
                lis[i].addEventListener('click', function () {
                    console.log(i);
                }, false);
            })(i)
        }

如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：

var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('ul li');
        ul.addEventListener('click', function (e) {
            var target = e.target;
            if(target.nodeName.toLowerCase() === 'li') {
                console.log([].indexOf.call(lis, target));
            }
        }, false);

实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符，如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前
js 向上取整、向下取整、四舍五入

// 1.只保留整数部分（丢弃小数部分）
parseInt(5.1234);// 5
// 2.向下取整（<= 该数值的最大整数）和parseInt()一样
Math.floor(5.1234);// 5    
// 3.向上取整（有小数，整数就+1）
Math.ceil(5.1234);

// 4.四舍五入（小数部分）
Math.round(5.1234);// 5
Math.round(5.6789);// 6
// 5.绝对值
Math.abs(-1);// 1
// 6.返回两者中的较大值
Math.max(1,2);// 2
// 7.返回两者中的较小值
Math.min(1,2);// 1
// 8.随机数（0-1）
Math.random();

vue中为什么使用key?
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确地识别此算法。作用主要是为了高效地更新虚拟DOM。

2020/05/19
indexOf 是查某个指定的字符串在字符串首次出现的位置（索引值）（从左往右）
lastIndexOf 是查某个指定的字符串在字符串最后一次出现的位置（索引值）（从右往左）
在这里插入图片描述

2020/05/21
Map对象的用法：
初始化：var map = new Map()
查找：map.has(key) // true false
设值：map.set(key,value)
取值：map.get(key)
删除：map.delete(key)
遍历：map.keys()

浅拷贝和深拷贝都只针对于像 Object, Array 这样的引用数据类型，浅拷贝从内存中拷贝，只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；但深拷贝是从栈中拷贝，会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；

浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来

浅拷贝：Object.assign() 展开运算符(...) 直接用=赋值 for···in只循环第一层

深拷贝：
JSON.parse(JSON.stringify(obj))
jQuery.extend()

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝

递归进行逐一赋值

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

js遍历中遇到的坑
for of 遍历的只是值（原始数组的遍历）适用遍历数/数组对象/字符串/map/set等（拥有迭代器对象的集合）

for in 遍历的只是键（原始对象的遍历）（index索引为字符串型数字，不能直接进行几何运算、遍历顺序有可能不是按照实际数组的内部顺序、使用for in会遍历数组所有的可枚举属性，包括原型）

使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

ES6中的Set 在vue中v-for形式使用 v-for of 形式，可以多重嵌套set,遍历结果不变

ES6中的Map在vue中 v-for 形式使用 v-for in形式 , 可以多重嵌套map,遍历结果不变

Vue2 开始 v-for 目前只支持 Array | Object | number | string

原文链接：https://blog.csdn.net/qq_24147051/article/details/101019962

2020/05/23

一个表达式中如果有减号 (-)、乘号 (*) 或除号 (/) 等运算符时，知JS 引擎在计算之前，会试图将表达式的每个分项转化为 Number 类型道（使用 Number(x) 做转换）。如果转换失败，表达式将返回 NaN 。如果其中有一个变量是字回符串，则会将两边都作为字符串相加。
一元加操作符也可以实现与 Number 相同的作用，在应用于一个不包含有效数字字符串时，将变量的值设置为NaN。字符串变量变成数值变量

+'12abc';// NaN
+'123';// 123
+'+123';//123

2020/06/16

vue移动端组件自适应高度的解决方案：见收藏
vue 动态绑定类名的方法：见收藏
css 中的图片可以用 object-fit 属性来消除拉伸变形感
二叉搜索树的中序遍历结果是一个从小到大的有序结果
vue + mockjs 的使用：应该注意工程化，不要把内容都糅在一起

越来越棒鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫