js日常用到知识点汇总

1、js数字转化为千分位格式
搜索了一些只有整数的千分位分割符，现在是不管整数，带小数(不分割小数点以后的数字)都可以分割

function toQfw(num){
	let str=num.toString();//转换为字符串
    let reg=str.indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;//千分符的正则
    return str.replace(reg, '$1,');//千分位格式化;
}
console.log( toQfw(3708205.23) ) //3,708,205.23
console.log( toQfw(3708205) ) //3,708,205

2、Array.from 方法用于将两类对象转为真正的数组
这个方法不错，拆解后台数据的时候很好用

1
2
3

let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3};
Array.from(arrayLike, (v, k) => v); // ["a", "b", "c"]
Array.from(arrayLike, (v, k) => k); // [0, 1, 2]

3、两种编程方式：命令式编程和声明式编程
命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。
声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

例如：让一个数组里的数值翻倍

//命令式编程风格实现：
var numbers = [1,2,3,4,5]
var doubled = []
for(var i = 0; i < numbers.length; i++) {
	var newNumber = numbers[i] * 2
 	doubled.push (newNumber)
}
console.log (doubled) //=> [2,4,6,8,10]

//我们直接遍历整个数组，取出每个元素，乘以二，
//然后把翻倍后的值放入新数组，每次都要操作这个双倍数组，直到计算完所有元素

//声明式编程方法：
var numbers = [1,2,3,4,5]
var doubled = numbers.map (function (n) {
	return n * 2
})
console.log (doubled) //=> [2,4,6,8,10]

//map利用当前的数组创建了一个新数组，新数组里的每个元素
//都是经过了传入map的函数(这里是function (n) { return n*2 })的处理

//map函数所做的事情是将直接遍历整个数组的过程归纳抽离出来，
//让我们专注于描述我们想要的是什么(what)。注意，我们传入map的是一个纯函数；
//它不具有任何副作用(不会改变外部状态)，它只是接收一个数字，返回乘以二后的值

再例如：求一个list里所有值的和

//命令式编程：
var numbers = [1,2,3,4,5]
var total = 0 for(var i = 0; i < numbers.length; i++) {
  	total += numbers[i]
}
console.log (total) //=> 15

//声明式编程：
var numbers = [1,2,3,4,5]
var total = numbers.reduce (function (sum, n) {
  	return sum + n
});
console.log (total) //=> 15

声明式编程的总结

　　声明式编程让我们去描述我们想要的是什么，让底层的软件/计算机/等去解决如何去实现它们。

　　在很多情况中，就像我们看到的一样，声明式编程能给我们的编程带来真正的提升，通过站在更高层面写代码，我们可以更多的专注于what，而这正是我们开发软件真正的目标。

　　问题是，程序员习惯了去描述how，这让我们感觉很好很舒服——强力——能够控制事情的发生发展，不放走任何我们不能看见不能理解的处理过程。

　　有时候这种紧盯着how不放的做法是没问题的。如果我需要对代码进行更高性能的优化，我需要对what进行更深一步的描述来指导how。有时候对于某个业务逻辑没有任何可以归纳提取的通用实现，我们只能写命令式编程代码。

　　但大多数时候，我们可以、而且应该寻求声明式的写代码方式，如果没有发现现成的归纳提取好的实现，我们应该自己去创建。起初这会很难，必定的，但就像我们使用SQL和D3.js， 我们会长期从中获得巨大的回报！

4、点击空白处关闭弹窗几种方法

4.1jQuery 写法

$(document).mouseup(function(e){
	var _con = $(' 目标区域 ');   // 设置目标区域
 	if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    	some code...   // 功能代码
 	}
});

4.2vue.js 写法（写在mounted里面）

document.addEventListener('mouseup',(e) =>{
	var _con = document.getElementById('more-oprate')
	if(_con) {
		if(!_con.contains(e.target)) {
			this.isShowBtn = ''
        }
    }
})

持续更新中……