js常用
深度赋值
var newObj = JSON.parse(JSON.stringify(obj));.then(res=>{
//服务端响应的数据
}).catch(e=>{
//接受异常错误信息
})查找数组
查找数组是否包含某个值 indexOf
var array = [1,2,3,4,5,6,7,8,9]
console.log(array.indexOf(1)) //array数组包含1 返回1的下标
console.log(array.indexOf(10)) //array数组不包含10 返回-1查找数组中对象是否包含某个值 findIndex
let array = [
{ id: "a", index_name: "晓看天色" },
{ id: "b", index_name: "暮看云" },
{ id: "c", index_name: "春赏百花" },
{ id: "d", index_name: "东赏雪" },
{ id: "e", index_name: "宠辱不惊" },
{ id: "f", index_name: "去留无意" },
{ id: "g", index_name: "再会" },
];
let obj1 = { id: "a", index_name: "遇见" };
let obj2 = { id: "zzz", index_name: "遇见" };
let index = array.findIndex((item) => item.id === obj1.id) // array数组包含obj1的id等于a ，包含返回下标
let index = array.findIndex((item) => item.id === obj2.id) // array数组不包含obj1的id等于zzz ，不包含返回-1const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
const result = arr.find(item => item.id === 2);
console.log(result);
// { id: 2, name: 'Bob' }const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
const result = arr.filter(item => item.name === 'Charlie');
console.log(result);
// [{ id: 3, name: 'Charlie' }]
reduce方法
const data = [{ a: 'aaa', b: 1 },{ a: 'aaa', b: 2 },{ a: 'bbb', b: 1 },{ a: 'bbb', b: 2 }];
const result = data.reduce((acc, curr) => {
if (!acc[curr.a]) {
acc[curr.a] = [];
}
acc[curr.a].push(curr);
return acc;
}, {});
console.log(result)
// {
// aaa:[{ a: 'aaa', b: 1 },{ a: 'aaa', b: 2 }]，
// bbb:[{ a: 'bbb', b: 1 },{ a: 'bbb', b: 2 }]
// }
类型转换
数字保留位数的控制
// 1.toFixed比较新的方法，含有四舍五入的运算(IE 5.5+才支持)。
2.453255.toFixed(2) //2.45
2.447088.toFixed(2) //2.45
// 2.向下取整（<= 该数值的最大整数）和parseInt()一样
Math.floor(5.1234); // 5
// 3.向上取整（有小数，整数就+1）
Math.ceil(5.1234); // 6
// 4.四舍五入（小数部分）
Math.round(5.4234);// 5
Math.round(5.6789);// 6
Math.round(5.5789);// 6
// 5.返回两者中的较大值
var a=1
var b=5
Math.max(a,b);// 5
// 6.返回两者中的较小值
Math.min(1,2);// 1
字符串转数字
// 1. parseInt() 进行转换时，将字符串转成相应的整数。浮点数以后的数字都不要了。
parseInt("1234blue"); //returns 1234
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
// 2.parseFloat() 方法与parseInt()方法的处理方式相似。
// 使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN数字转字符串
// 1. toString();
var i = 10;
var s = i.toString();
console.log(typeof s); //将输出 String
对象转字符串相互转换
// 1. JSON.stringify() 对象转字符串
var obj = {
id: 0,
name: '张三',
age: 12
}
var objToStr = JSON.stringify(obj)
console.log(objToStr) //{"id":0,"name":"张三","age":12}
// 2. JSON.parse() 字符串传对象
let str = '{"id":0,"name":"张三","age":12}'
let strToObj = JSON.parse(str)
console.log(strToObj) //{id:0,name:"张三",age:12}数组与字符串的相互转换
// 1. join() 数组转字符串
var a = [0,1,3,5,4];
var b = a.join(",");
console.log(b)//"0,1,3,5,4"
// 2. split() 字符串转数组
var s = "abc,abcd,aaa";
var ss = s.split(",");
console.log(ss) //[abc,abcd,aaa]时间
let data=new Date();
// 当前时间戳
let year = data.getFullYear()
// 当前年
let month=data.getMonth()+1
month=month< 10 ? "0"+month:month
// 当前月
let day=data.getDate()
day=day< 10 ? "0"+day:day
// 当前日
let hour = data.getHours()
// 当前时
let minute = data.getMinutes()
// 当前分
let second = data.getSeconds()
// 当前秒
`${year}年${month}月${day}日 ${hour}时${minute}分${second}秒`
`${year}-${month}-${day} ${hour}:${minute}:${second}`
时间戳
var timen=new Date().getTime() //获取当前时间戳
//时间戳转时间格式
timeshift(date1){
var date = new Date(date1);
var YY = date.getFullYear();
var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) ;
var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) ;
var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) ;
var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return YY + '-' + MM + '-'+ DD +" "+hh+ ':' + mm + ':'+ ss
}
//时间格式转时间戳
timestamp(strtime){
var date = new Date(strtime);
//传入一个时间格式，如果不传入就是获取现在的时间了，这样做不兼容火狐。
// Date()参数形式有7种
// new Date("month dd,yyyy hh:mm:ss");=>new Date("September 16,2016 14:15:05");
// new Date("month dd,yyyy");=>new Date("September 16,2016");
// new Date("yyyy/MM/dd hh:mm:ss");=>new Date("2016/09/16 14:15:05");
// new Date("yyyy/MM/dd");=>new Date("2016/09/16");
// new Date(yyyy,mth,dd,hh,mm,ss);=>new Date(2016,8,16,14,15,5); => 月份从0～11
// new Date(yyyy,mth,dd);=>new Date(2016,8,16);
// new Date(ms);=>new Date(1474006780);
// 可以这样做
var date = new Date(strtime.replace(/-/g, '/'));
// 有三种方式获取，在后面会讲到三种方式的区别
time1 = date.getTime();//精确到毫秒:1398250549123
time2 = date.valueOf();//精确到毫秒:1398250549123
time3 = Date.parse(date);//只能精确到秒，毫秒将用0来代替:1398250549000
console.log(time1,time2,time3)//1398250549012 1398250549012 1398250549000
return time1;
}
// 传入 年 周 日 返回时间戳
dateFromWeek(year, week, day){
// year 年
// week 周
// day 需要输出星期几对应的日期 (0-6, 0代表周日)
var date1 = new Date(year, 0, 1);
var dayMS = 24*60*60*1000;
var firstDay = (7-date1.getDay())*dayMS;
var weekMS = (week-2)*7*dayMS;
var result = date1.getTime()+firstDay+weekMS+day*dayMS;
date1.setTime(result);
// return date1.toLocaleDateString();
return date1;
}
// 传入时间返回第几周
function theWeek(time){
var d1 = new Date(time)
var d2 = new Date(time)
d1.setMonth(0)
d2.setDate(1)
var rq = d1-d2
var days=Math.ceil(rq/(24*60*60*1000))
var num = Math.ceil(days/7)
return num
}
theWeek('2021-01-02') //1
//------------
var selectTime = Date.getTime();// 获取时间戳
var selectDay = Date.getDay();// 获取星期
//获取上下一周，adas（时间戳）
xiazhoudsi(adas){
var date=new Date(adas);
var currentFirstDate=new Date(date);
var formatDate = function(date){
var year = date.getFullYear();//年
var month = (date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1);//月
var day = (date.getDate()<10?'0'+date.getDate():date.getDate());//日;
return year+'.'+month+'.'+day
};
var addDate= function(date,n){
date.setDate(date.getDate()+n);
return date;
};
var setDate = function(date){
var week = date.getDay()-1;
date = addDate(date,week*-1);
currentFirstDate = new Date(date);
var weekList=[];
for(var i = 0;i<7;i++){
weekList[i]=formatDate(i==0 ? date : addDate(date,1));
}
return weekList
};
var thisWeek=setDate(addDate(currentFirstDate,0));//本周
var nextWeek=setDate(addDate(currentFirstDate,7));//下周
var today=formatDate(date);//今日日期
return nextWeek
},
延时器
setTimeout(function(){
// 延时内容
},3000)
// 简写:
setTimeout(() => {
// 延时内容
}, 500)
clearTimeout() //清理延时定时器
定时器
setInterval(function(){
// 定时执行内容
},3000)
// 简写:
setInterval(()=>{
// 定时执行内容
},3000)
clearInterval() //清除定时器
简单 js 方法
排列 sort
// 数组.sort() // 数组排列
var arr = [6, 3, 2, 5, 10, 30, 5, 30, 50, 40, 65];
arr.sort(function (a, b) {
return b - a; //从大到小
// return a - b; //从小到大
});
console.log(arr) //[65, 50, 40, 30, 30, 10, 6, 5, 5, 3, 2]js 删除或添加指定位置
// splice
let arr=[1,2,3,4]
//arr.splice(参数一，参数二，可选参数三)
//参数一：指定下标位置开始
//参数二：删除数量 （可以选择0，0就是不删除）
//参数三：添加的参数
arr.splice(1,1) //[1,3,4]
arr.splice(1,1,'替换参数') //[1,‘替换参数’,3,4]
arr.splice(1,0,'追加参数') //[1,2,‘追加参数’,3,4]
判断是否有逗号
var reg = RegExp(/,/); //可以 /更换内容/
if (reg.exec(a)) {
console.log("有")
} else {
console.log("无")
}
页面存储
// 页面存储(当浏览器关闭的时,存储内容也会关闭)
sessionStorage.setItem("名称", "存出内容"); //存出
sessionStorage.getItem("名称"); //读取
sessionStorage.removeItem("名称"); //删除
sessionStorage.clear(); //删除所有
// 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage.setItem("名称", "存出内容");//存出
localStorage.getItem("名称");//读取
localStorage.removeItem("名称");//删除
Cookie 存出
// Cookie的使用（js-cookie插件）
// 1.安装
npm install js-cookie --save
// 2.引入
import Cookies from 'js-cookie'
// 用法
// 一.存出
Cookies.set('名称', '存出内容'); //存出字符串
Cookies.set('名称', {name:1}); //存出对象
Cookies.set('名称', '存出内容', { expires: 7 }); //创建有效期为7天的cookie
Cookies.set('名称', '存出内容', { expires: 7, path: '' });//为当前页创建有效期7天的cookie
Cookies.set('名称', '存出内容', {expires:new Date(new Date().getTime() + 15 * 60 * 1000) });//Cookie从现在起15分钟后过期时
Cookies.set('名称', '存出内容', { expires: 0.5}); //指定要在半天（12小时）内到期的分数：
Cookies.set('foo', 'bar', { expires: 1/48 }); //30分钟后过期
Cookies.set('name', 'value', { expires: 7, path: '当前页面路由' });//为当前页创建有效期7天的cookie
// 二.读取
Cookies.get('name'); // => 'value'
Cookies.get('名称'); // => '{name:1}'
Cookies.get(); // => { name: 'value' } //获取所有cookie
// 三.删除
Cookies.remove('name');
//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', { path: '' }); // 删除成功
//注意，删除不存在的cookie不会报错也不会有返回
删除
删除对象的某个值
var obj={
name: 'zhagnsan',
age: 19
}
delete obj.name //true
console.log(obj) //{age: 19}
数组追加
let arr=[1,2,3,4,5]
let arrer=[6,7,8]
arrer=arrer.concat(arr)
console.log(arrer)// [6, 7, 8, 1, 2, 3, 4, 5]
js（jq）激活选项
$(function () {
$('.item').click(function () {
$(this).addClass('activ').siblings().removeClass('activ')
})
})
递归(获取所有的 id)
var arr = [
{
id: 1,
type: '',
children: [
{
id: 2,
type: '',
children: [
{
id: 3,
type: '',
children: [
{
id: 4,
type: '',
children: [],
},
],
},
],
},
],
},
]
function getIds(arr, result = []) {
arr.forEach((item) => {
result.push(item.id)
if (item.children.length) {
return getIds(item.children, result)
}
})
console.log(result)
return result
}
console.log(getIds(arr)) //[1, 2, 3, 4]
数组去除重复的参数
arrquchong(arr){
let obj={}
arr=arr.reduce((newArr,next)=>{
obj[next.deviceBigName]?"":(obj[next.deviceBigName]=true&&newArr.push(next))
return newArr
},[])
},
一级数组同样的变成子类数组
var a = [
{ a: 1, b: 'a1您好1' },
{ a: 1, b: 'a1您好2' },
{ a: 1, b: 'a1您好3' },
{ a: 2, b: 'a2您好1' },
{ a: 2, b: 'a2您好2' },
{ a: 3, b: 'a3您好1' },
{ a: 3, b: "a3您好2"}
]
function deal(arr){
let newArr = [{ ...arr.shift(), children: [] }];
// 先将数组中所有的第一项分配，然后再从数组里面分配children
for(var i = 0; i < newArr.length; i ++){
for(var j = 0; j < arr.length; j ++){
if(arr[j].a === newArr[i].a) {
newArr[i].children.push(arr.shift());
j --;
}else {
newArr.push({ ...arr.shift(), children: [] });
break;
}
}
}
return newArr;
}
console.log(deal(a));
//[
// { "a":1, "b":"a1您好1", "children":[ {"a":1,"b":"a1您好2"}, {"a":1,"b":"a1您好3"} ] },
// { "a":2, "b":"a2您好1", "children":[{"a":2,"b":"a2您好2"}] },
// { "a":3, "b":"a3您好1", "children":[{"a":3,"b":"a3您好2"}]}
//]var a = [{ a: 1, b: 'a1您好1' }, { a: 1, b: 'a1您好2' }, { a: 1, b: 'a1您好3' }, { a: 2, b: 'a2您好1' }, { a: 2, b: 'a2您好2' }, { a: 3, b: 'a3您好1' }, { a: 3, b: "a3您好2"}]
function ifdataarr(array,varw){
let alpha=new Object()
let alparr=new Array()
for(var i=0;i<array.length;i++){
let factoy=array[i]
let label=factoy.a
if (alpha[label]==undefined) {
alparr.push({a:label,children:[factoy]})
alpha[label]=alparr.length-1
}else{
alparr[alpha[label]].children.push(factoy)
}
}
console.log(alpha,'<=======')
console.log(alparr,'<=======')
}
ifdataarr(a)
数字拆分
average(num,length){
let [arr,n]=[Array.from({length},()=>~~(num/length)),num%length];
while(n>0){
arr[arr.length-n--]++
}
return arr
},
average("要拆分的总数"，"要拆分的数量")
average(9,2) //[5,4]
average(9,3) //[3,3,3]
average(10,3) //[4,3,3]
average(11,3) //[4,4,3]
document.write(document.documentElement.innerText.replace(/\s/g,'<br>'))
判断类型、判断数据是否有值
1、typeof
let obj = {}
typeof obj === Object
// 根据typeof判断对象也不太准确
表达式 返回值
typeof undefined 'undefined'
typeof null 'object'
typeof true 'boolean'
typeof 123 'number'
typeof "abc" 'string'
typeof function() {} 'function'
typeof {} 'object'
typeof [] 'object'
2、判断是否为数组 Array.isArray(obj)
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });
3、判断对象里面是否包含某个字段
//用法：Reflect.has(obj, propName)
Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false
Reflect.has({name:"搞前端的半夏"}, "toString"); //true
//用法：Object.hasOwn
Object.hasOwn({name:"搞前端的半夏"}, "name"); // true
Object.hasOwn({name:"搞前端的半夏"}, "age"); // false
Object.hasOwn({name:"搞前端的半夏"}, "toString"); //true
4、判断数据是否有值
function isEmpty(v) {
switch (typeof v) {
case 'undefined':
return false;
case 'string':
if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return false;
break;
case 'boolean':
if (!v) return false;
break;
case 'number':
if (0 === v || isNaN(v)) return false;
break;
case 'object':
if (null === v || v.length === 0) return false;
for (var i in v) {
return true;
}
return false;
}
return true;
}
isEmpty() //true
isEmpty([]) //true
isEmpty({}) //true
isEmpty(0) //true
isEmpty(Number("abc")) //true
isEmpty("") //true
isEmpty(" ") //true
isEmpty(false) //true
isEmpty(null) //true
isEmpty(undefined) //true
字符串拦截替换
1、拦截字符串指定位置
var str = 'abcd9999';
var newStr = str.slice(2);
console.log(newStr); // 输出 cd9999;
newStr = str.slice(-2);
console.log(newStr); // 输出 99;
newStr = str.slice(2,4);
console.log(newStr); // 输出 cd;
newStr = str.slice(2,-2);
console.log(newStr); // 输出 cd99;
2、拦截字符串替换
var sei='1231231;252135135'
sei.replace(";"," ")
console.log(sei) //=>1231231252135135
3、拦截字符串替换
let str = 'aaabbbcccddd'
str = str.match(/aaa(\S*)ddd/)[1]
console.log(str) // bbbccc
let str1 = 'name="xiaoming",age="18"'
str1 = str1.match(/"(\S*)"/)[1]
console.log(str1) // 得到的是 xiaoming
4、截取指定两个字符之间的内容
let str = 'aaabbbcccddd'
str = str.match(/aaa(\S*)ddd/)[1]
console.log(str) // bbbccc
let str1 = 'name="xiaoming",age="18"'
str1 = str1.match(/"(\S*)"/)[1]
console.log(str1) // 得到的是 xiaoming
5、截取指定字符串之前的内容：
let str1 = 'name="xiaoming",age="18"'
str1 = str1.match(/=(\S*)/)[1]
console.log(str1) // 得到的是 name
6、截取指定字符串之后的内容：
let str1 = 'name="xiaoming",age="18"'
str1 = str1.match(/name=(\S*)/)[1]
console.log(str1) // 得到的是 "xiaoming",age="18"
