JS在平时开发中经常遇到的比较实用的场景（更新中...）

获取当前时间标准时间转换成年月日时分秒（补0），如：2022-10-31 09:10:22


// 标准时间转换成年月日时分秒（补0）
function getTime(date) {
    
    
  let Y = date.getFullYear(),
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
    D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
    h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()),
    m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()),
    s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
}
console.log(getTime(date)) // 2022-10-31 09:10:22

JS合并两个数组（Array），合并两个对象（Object）

方法1：

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
const obj1 = {
    
    
  a:1,
}
const obj2 = {
    
    
  b:1,
}
const obj = Object.assign({
    
    }, obj1, obj2);//{a:1,b:1}

方法2：

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj1 = {
    
    
  a:1,
}
const obj2 = {
    
    
  b:1,
}
const obj = {
    
    ...obj1,...obj2};//{a:1,b:1}

JS动态添加点击事件并下载文件

// PDF.save(that.htmlTitle + '.pdf')
const aLink = document.createElement('a')
document.body.appendChild(aLink)
const url = URL.createObjectURL(that.toBlob(PDF.output('datauristring')))
aLink.href = url
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, 0)
let day = date.getDate().toString().padStart(2, 0)
let hour = date.getHours().toString().padStart(2, 0)
let minutes = date.getMinutes().toString().padStart(2, 0)
let seconds = date.getSeconds().toString().padStart(2, 0)
aLink.download = '评审结果-' + year + month + day + hour + minutes + seconds + '.pdf'
aLink.click()
window.URL.revokeObjectURL(url)

JS数组前面接一个对象

let arrList = [
	{
    
    
	    label: "选项1",
	    value: "value1"
	},{
    
    
	    label: "选项2",
	    value: "value2"
	},
	...
]
arrList .unshift({
    
    
    label: "全部",
    value: ""
})
console.log(arrList)

5.JS获取最近10年年份数据

//获取最近十年的年份
const getYear = () => {
    
    
    let yearArr = []
    for (let i = new Date().getFullYear(); i > new Date().getFullYear() - 10; i--) {
    
    
        yearArr.push(
            {
    
    
                label: i.toString(),
                value: i.toString()
            })
    }
    return yearArr
}

6.js中日期字符串转时间戳

var date = \'2015-03-05 17:59:00.0\';
date = date.substring(0,19);    
date = date.replace(/-/g,\'/\'); //必须把日期\'-\'转为\'/\'
var timestamp = new Date(date).getTime();
console.log(timestamp)

js中获取当前时间时间戳

let nowdateChuo = new Date().getTime(); //转换成时间戳

js中根据时间戳获取信息

// 简单的一句代码
let dataChuo = '1670917331000'
let date = new Date(dataChuo); //获取一个时间对象

date.getFullYear();  // 获取完整的年份(4位,1970)
date.getMonth();  // 获取月份(0-11,0代表1月,用的时候记得加上1)
date.getDate();  // 获取日(1-31)
date.getTime();  // 获取时间(从1970.1.1开始的毫秒数)
date.getHours();  // 获取小时数(0-23)
date.getMinutes();  // 获取分钟数(0-59)
date.getSeconds();  // 获取秒数(0-59)

js中根据时间戳拼接时间

// 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
let date = new Date(1398250549490);
let Y = date.getFullYear() + '-';
let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = date.getMinutes() + ':';
let s = date.getSeconds(); 
console.log(Y+M+D+h+m+s); 
// 输出结果：2014-04-23 18:55:49

判断是否为IE浏览器内核

// 登录ie内核浏览器  禁止访问该系统推荐使用Google（谷歌浏览器）
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
if (userAgent.indexOf('Trident') !== -1 || userAgent.indexOf('MSIE') !== -1) {
    
     //表示使用的是IE的内核
  alert("该系统暂时不支持IE内核浏览器，推荐使用Google（谷歌浏览器）")
} else{
    
    
  this.onNavgate()
}

JS 判断当前浏览器是谷歌Google、火狐Firefox、Safari、Edge还是其他浏览器的方法

detectBrowser() {
    
    
    const userAgent = navigator.userAgent;
    if (userAgent.indexOf("Chrome")!== -1 && userAgent.indexOf("Safari") !== -1 && userAgent.indexOf("Edg") === -1) {
    
    
        return "Chrome"; // Chrome
    } else if (userAgent.indexOf("Firefox") !== -1) {
    
    
        return "Firefox"; // Firefox
    } else if (userAgent.indexOf("Safari") !== -1 && userAgent.indexOf("Chrome") === -1 && userAgent.indexOf("Edge") === -1) {
    
    
        return "Apple Safari"; // Safari
    } else if (userAgent.indexOf("Edg") !== -1) {
    
    
        return "Microsoft Edge"; // Edge
    } else {
    
    
        return "Unknown browser"; // 其他浏览器...（可根据自己需要确定是否新增其他浏览器的判断）
    }
},

JS根据数组中某多个字段生成新数组

let arrnew = res.map((item,index) => {
    
    
    return Object.assign({
    
    },{
    
    'gwid':item.gwid,'dwid':item.dwid})
})

13.JS拼接字符串

const name = 'zhangsan';
const score = 100;
const result = `${
      
      name}${
      
      score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

14.JS读取数组的尾部元素的方法
方法1：

const array = [ 1, 2, 3, 4, 5 ]
const lastArr = array[ array.length - 1 ] // 5

方法2：

const array = [ 1, 2, 3, 4, 5 ]
const lastEle = array.at(-1) // 5
const ele1 = array.at(0) // 1

15.JS中findIndex的使用

// findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则，它返回 -1，表示没有元素通过测试。
const array = [ -1, 0, 10, 10,  20, 100 ]
const index1 = array.findIndex((num) => num < 0) // 0
const index2 = array.findIndex((num) => num >= 10) // 2

16.VUE中动态获取当前时间

  export default {
    
    
    data() {
    
    
      return {
    
    
        timer: "", //定义一个定时器
        nowTime: "",
      }
    }
  }
        getTime() {
    
    
        this.timer = setInterval(() => {
    
    
          let timeDate = new Date();
          let year = timeDate.getFullYear();
          let mounth = timeDate.getMonth() + 1;
          let day = timeDate.getDate();
          let hours = timeDate.getHours();
          hours = hours >= 10 ? hours : "0" + hours;
          let minutes = timeDate.getMinutes();
          minutes = minutes >= 10 ? minutes : "0" + minutes;
          let seconds = timeDate.getSeconds();
          seconds = seconds >= 10 ? seconds : "0" + seconds;
          let week = timeDate.getDay();
          let weekArr = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ];

           this.nowTime = `${
      
      year}/${
      
      mounth}/${
      
      day} ${
      
      hours}:${
      
      minutes}:${
      
      seconds} ${
      
      weekArr[week]}`
        }, 1000);
      },
    beforeDestroy() {
    
    
      if (this.timer) {
    
    
        clearInterval(this.timer);
      }
    }

17.vue 动态三元绑定类名

<div :class="[score<60?'syWholeLeftSmall':'syWholeLeft']">

18.JS将一个字符串分割成数组。以逗号分隔

扫描二维码关注公众号，回复： 16716541 查看本文章

var str = "你的,字符串,需要,分割";
var arr = str.split(",");

console.log(arr);  // 输出: ["你的", "字符串", "需要", "分割"]

19.有一个数组里面有的对象有jsid 字段，有的没有jsid 字段，利用Js怎么筛选出这个数组中带有jsid 字段的对象？

var arr = [
    {
    
    name: 'John', age: 25},
    {
    
    name: 'Jane', age: 30, jsid: '123'},
    {
    
    name: 'John', age: 35},
    {
    
    name: 'Adam', age: 40, jsid: '456'}
];

var filtered = arr.filter(function(item) {
    
    
    return item.jsid !== undefined;
});

console.log(filtered);  // 输出: [ { name: 'Jane', age: 30, jsid: '123' }, { name: 'Adam', age: 40, jsid: '456' } ]

20.假设你有一个包含对象的数组，并且你想要修改数组中的某个对象的一个属性。

// 初始数组
let array = [
    {
    
    id: 1, value: 'a'},
    {
    
    id: 2, value: 'b'},
    {
    
    id: 3, value: 'c'},
    {
    
    id: 4, value: 'd'}
];

// 假设我们要修改id为2的对象，修改其value属性
let objectIdToUpdate = 2;
let newValue = 'new value';

// 遍历数组查找要更新的对象
for(let i = 0; i < array.length; i++) {
    
    
    if(array[i].id === objectIdToUpdate) {
    
    
        // 如果找到了，更新它的值
        array[i].value = newValue;
        break;
    }
}

console.log(array); // 输出更新后的数组

21.在js中，怎么根据一个数组中的所有id去另外一个数组中查询出所有相同id的数据？

方法一：使用filter与includes
javascript
复制
let ids = [1, 2, 3, 4, 5];  // 假设这是你的id数组
let data = [
  {
    
    id: 1, name: 'data1'},
  {
    
    id: 2, name: 'data2'},
  {
    
    id: 3, name: 'data3'},
  {
    
    id: 4, name: 'data4'},
  {
    
    id: 5, name: 'data5'},
  // 其他数据...
];

let result = data.filter(item => ids.includes(item.id));
或者，如果你更喜欢使用展开运算符和includes：
方法二：使用展开运算符与includes
javascript
复制
let ids = [1, 2, 3, 4, 5];  // 假设这是你的id数组
let data = [
  {
    
    id: 1, name: 'data1'},
  {
    
    id: 2, name: 'data2'},
  {
    
    id: 3, name: 'data3'},
  {
    
    id: 4, name: 'data4'},
  {
    
    id: 5, name: 'data5'},
  // 其他数据...
];

let result = data.filter(item => ...ids.map(id => item.id === id));
上述两种方法都会返回一个新的数组，其中包含所有id存在于ids数组中的数据对象。

JS在平时开发中经常遇到的比较实用的场景（更新中...）

猜你喜欢