1.数字格式化(每三位增加一个,)
function formate(num) {
let index = (num || 0).toString().indexOf('.');
if (index == -1)
//从右到左添加逗号
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
else {
let str = (num || 0).toString();
let str1 = str.substring(0,index);
let str2 = str.substring(index+1);
// 小数部分的需要先倒转然后再加逗号最后再倒转
return str1.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + str2.split('').reverse().join('').replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('').reverse().join('')
}
}
当然,用for循环也可以实现
另外一种正则表达式写法'123456789'.replace(/(?!^)(?=(\d{3})+$)/g, ',') // 123,456,789
2.将json对象中的_连接线命名转为小驼峰
function exchange(obj) {
let str = JSON.stringify(obj, null, 4);//json转为字符串
let len = str.length, res = '';
for(let i =0;i < len; i++) {
if (str[i] == '_' && i < len -1) {
res += str[++i].toLocaleUpperCase();
} else {
res += str[i];
}
}
return JSON.parse(res)//字符串转为json
}
知识点:
JSON对象转字符串
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。 将JSON对象转为字符串 JSON.stringify(value[, replacer[, space]])
- value: 必需， 要转换的 JavaScript 值（通常为对象或数组）。
- replacer: 可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
- space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
字符串转JSON对象
- JSON.parse(str)
- var obj = eval('(' + str + ')')
- var obj = str.parseJSON();
3.顺序存储的树使用缩进打印出来
4.实现Array.reverse()
Array.prototype._reverse = function() {
const len = this.length;
const mid = Math.floor(len / 2);//floor向下取整 ceil向上取整
// l: left pointer; r: right pointer;
let l = 0, r = len - 1, temp;
while (l <= mid || r >= mid) {
temp = this[l];
this[l] = this[r];
this[r] = temp;
l++;
r--;
}
};
// 使用for循环也可以,不过这样速度慢
5.数组去重(数据量很大)
function unique(arr){
var r = [], hash = {};//不是用map,直接用对象
for(let i=0;i<arr.length;i++){
if (!hash[arr[i]]) {
hash[arr[i]] = 1;
r.push(arr[i])
}
}
return r;
}
6.sleep指定时间后执行其他代码
用Promise实现
const sleep = function(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
sleep(2000).then(()=> console.log('xxx'));
用async/await实现 1
const sleep = async function(time) {
await new Promise((resolve) => setTimeout(resolve, time));
}
sleep(2000).then(()=> console.log('xxx'));
2
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
(async function() {
console.log('Do some thing, ' + new Date());
await sleep(3000);
console.log('Do other things, ' + new Date());
})();
7.通过JS给DOM元素添加class属性改变元素样式
document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
// 注意:不要加.,只需要类名字符串就可以了
8.通过JS给DOM元素设置style
// 第一种写法
(this.$el.querySelector('.range-bar') as any).style.height = `${this.rangeBarHeight}px`;
(this.$el.querySelector('.range-bar') as any).style.backgroundColor = `${this.barRightColor}`;
// 第二种写法(各个样式字符串用;分隔)
(this.$el.querySelector('.range-bar') as any).style.cssText = `height:${this.rangeBarHeight}px; background-color: ${this.barRightColor}`;
注意: 如果使用document.querySelector('.classname').style.cssText = ""这种方式只有第一个类名为classname的元素生效
9.字符串数组按照长度递增排序(or长度递减排序)
let arr = ['132','qwedd','q','2r','qwd'];
arr = arr.sort(function(a,b){
return a.length-b.length; //长度递增排序
})
//输出 ["q", "2r", "132", "qwd", "qwedd"]
//倒叙
let arr = ['132','qwedd','q','2r','qwd'];
arr = arr.sort(function(a,b){
return b.length-a.length;//长度递减排序
})
10.将URL地址中的参数解析成对象
function getUrlkey(url) {
var params = {};
var urls = url.split("?");
var arr = urls[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
// 这样写确实可以解决一般URL的解析,但是当URL中有#瞄点时,该方法会失效
可以解决URL有#的情况
function searchUrl(url) {
var params = {};
var urls = url.split("?");
var arr = urls[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
let a = arr[i].split("=");
if (i == l - 1 && a[1].indexOf('#') != -1) {
params[a[0]] = a[1].split('#')[0];
} else {
params[a[0]] = a[1];
}
}
return params;
}
URL完整格式&语法
url是（ Uniform Resource Locator ）统一资源定位符的缩写。
scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]
所以query之后最多只有#fragment
11.获取URL中指定参数的值
function getUrlParams(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let param = window.location.search.substr(1).match(reg);
return param && param[2]; //未考虑有#的情况
}
完整版本
let url = "xxx";
function getUrlParams(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// let param = window.location.search.substr(1).match(reg);//url未通过变量给出
let param = url.substr(1).match(reg); //url通过变量给出
if (!param) return null
else if (param[2].indexOf('#') != -1) {
return param[2].split('#')[0]
} else return param[2]
}
使用URL对象参考文章
const url = new URL(window.location.href);
const paramValue = url.searchParams.get( paramName );
console.log(paramValue);
URL对象的详细介绍和使用方法
12. 检查一个元素是否在可视区域内
可以使用 IntersectionObserver 这个 API来检验某个元素是否进入了"视口"（viewport），即用户能不能看到它。
const callback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// `entry.target` 是 dom 元素
console.log(`${entry.target.id} is visible`);
}
});
};
const options = {
threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById( btn );
const bottomBtn = document.getElementById( bottom-btn );
observer.observe(btn);
observer.observe(bottomBtn);
options 参数能自定义 Observer 的行为。threshold 属性一般用的比较多，它定义的是 Observer 触发时，需要出现在可视区域中元素的可见百分比。
