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 ，不包含返回-1

const 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"

posted @ 2021-07-24 14:24 雨落風閱讀(194) 評論(0) 收藏舉報

刷新頁面返回頂部

雨落風