海浪Code

Appearance

time时间相关 ​

时间间隔计算 ​

JavaScript
// 时间间隔计算函数
// 2022年8月2日21:14:11
function timeDiff(value) {
    currentTime = new Date().getTime()
    endTime = Date.parse(new Date(value))
    timeStamp = endTime - currentTime
    day = Number.parseInt(timeStamp / (1000 * 3600 * 24))
    hour = Number.parseInt((timeStamp / 1000 / 3600) % 24)
    minute = Number.parseInt((timeStamp / 1000 / 60) % 60)
    second = Number.parseInt((timeStamp / 1000) % 60)
    return [day, hour, minute, second]
}

数值计算相关 ​

向下取整 ​

javascript
Math.floor()

数组相关 ​

增 ​

unshift - 可以向数组的开头添加一个或更多元素，并返回新的长度。

push - 可以向数组末尾添加新的项目，并返回新的长度

splice

删 ​

shift - 可以把数组的第一个元素删除，并返回第一个元素的值

pop - 移除数组的最后一个元素，并返回最后一个元素

splice - 可以对数组进行添加/删除的操作，然后返回被删除的项目

delete - 删除数组中的元素

JavaScript
arr = [1,2,3,4]
console.log(arr)
delete arr[1]
console.log(arr)  //[ 1, <1 empty item>, 3, 4 ]

// 数组元素值消失
// 通过索引号访问，得到undefined
// 数组长度不变

改 ​

filter - 可以返回按照给定条件过滤出来的数组

查 ​

indexOf - 可以返回某个字符串在首次出现的位置

lastIndexOf - 可以返回某个字符串在最后出现的位置

some - 判断数组中是否有满足条件的元素

javascript
// 语法：array.some(function(currentValue,index,arr),thisValue)
// currentValue - 当前元素的值
// index - 当前元素的索引值
// arr - 当前元素属于的数组对象
// thisValue - 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
// 如果省略了 thisValue ，"this" 的值为 "undefined"

let arr = [1,2,3,4,56]

// 检测数组中是否有大于40的元素
let res = arr.some((item)=>{
  return item>40
})
console.log(res)

生成随机数数组 ​

javascript
// 生成一个20个长度的随机数数组，要求里面的元素大小范围是1-5，并且每个数字出现的次数都是偶数次
function generateArray() {
  var array = []
  var counts = [0, 0, 0, 3, 0]

  while (!isEvenCounts(counts)) {
    array = []
    counts = [0, 0, 0, 0, 0]

    for (var i = 0; i < 20; i++) {
      var randomNumber = Math.floor(Math.random() * 5) + 1
      array.push(randomNumber)
      counts[randomNumber - 1]++
    }
  }

  return array
}

function isEvenCounts(counts) {
  for (var i = 0; i < counts.length; i++) {
    if (counts[i] % 2 !== 0) {
      return false
    }
  }

  return true
}

var result = generateArray()
console.log(result)

数组去重 ​

javascript
arr = [1,2,3,4,5,2,3,4]
console.log([...new Set(arr)])

分隔数组 ​

javascript
/* 将一个数组分成指定长度的若干份 */
const splitArray = (oldArr, num) => {
  let newArr = oldArr.sort((a,b)=>a-b)
  let re = []
  let len = oldArr.length
  for(let i=0;i<len;i+=num){
    let temparr = newArr.slice(i,i+num)
    re.push(temparr)
  }
  return re
};

使用map在数组中转化值 ​

javascript
arr = ['1','2',3,'4','5']
let newArr = arr.map(Number)
console.log(newArr)

打乱一个数组 ​

javascript
var arr = ['A', 'B', 'C', 'D', 'E']
console.log(arr.slice().sort(() => Math.random() - 0.5))
//slice()生成一个数组的副本，sort()数组排序的方法，里面传递一个比较函数，当生成的随机数大于0.5时，数组的元素交换位置，否则相反

对象相关 ​

对象作为参数进行传递 ​

javascript
const createProduct = ({ name, description, price }) => {
  console.log(name, description, price)
}

createProduct({
  name: 'Peop',
  description: '111',
  price: 22,
})

解构赋值 ​

javascript
let person = {
  name: 'Zhang San',
  age: 22,
}

let { name, age } = person

扩展运算符浅拷贝数组和对象 ​

javascript
arr = [1,2,3,4,5]
obj = {username:'lucy',age:22}

console.log([...arr,1,2])
console.log({...obj,address:'Beijing'})

为代码的执行计时 ​

javascript
console.time("timer-1")
arr = ['1','2',3,'4','5']
obj = {username:'lucy',age:22}

let newArr = arr.map(Number)
console.log(newArr)
console.timeEnd("timer-1")

交换两个变量的值 ​

javascript
a = 5
b = 7

;[a, b] = [b, a]
console.log('A=', a)
console.log('B=', b)
// 解构赋值的思想，这是为了防止在某些特定情况下，上一行代码的结尾没有分号，导致解构赋值语法被错误地解释为函数调用或其他语句的一部分。添加分号可以确保代码的可靠性。

Tab选项卡 ​

Tab选项卡切换核心代码 ​

  • .tab div是切换按钮
  • #content div是内容区
javascript
function init() {
  // TODO 待补充代码
  let tabs = document.querySelectorAll(".tabs div");
  let contents = document.querySelectorAll("#content div");
  tabs.forEach((item, index, arr) => {
    item.onclick = function () {
      arr.forEach((item) => {
        item.classList.remove("active");
      });
      item.classList.add("active");
      contents.forEach((item) => {
        item.classList.remove("active");
      });
      contents[index].classList.add("active");
    };
  });
}
init();

工具函数 ​

javascript
/* 数组排序函数 */
function _arraySort(arr){
  return arr.sort((a,b)=>{
    return a.age-b.age
  })
}

/* 数组洗牌算法 */
function shuffleArray(array) {
  console.log(array.sort(()=>Math.floor(Math.random()*10 -5)))
  return array;
}

/* 随机返回数组中的一个元素 */
function _randomItem(arr){
  return Math.floor(Math.random() * arr.length)
}

/* 返回数据的类型 */
function getType(data){
  return Object.prototype.toString.call(data).slice(8,-1).toLowerCase();
}

// 获取当前element元素所有的兄弟元素
function getSiblings(element){
  return [...element.parentNode.children].filter(child=>child !== element)
}