常用的便捷javascript代码,在日常开发中你用了吗?

119 阅读4分钟

1634049128139509.png

1、对象解构

从对象中提取数据变得更加简洁和直观。对象解构不仅适用于提取已有的对象属性,还可以与默认值、嵌套对象和别名一起使用,使代码更加灵活和可读。

const { name, client_id } = { name: '半壳椰子', client_id: 1 }
console.log(name); // 输出:半壳椰子
console.log(client_id); // 输出:1

2、数组解构赋值

数组解构赋值方式使得从数组中获取特定元素变得非常简便和直观,适用于需要从数组中提取固定位置元素的场景,如处理日期范围的情况。

这种写法也很适合用在接收后端传递的数据时, Element UI 时间选择范围组件的情形,可以直接通过解构将 startend 分别传给后端处理。

const date = ['2024-08-08', '2024-08-10']
const [start, end] = date
console.log(start)// 输出:'2024-08-08'
console.log(end) // 输出:'2024-08-10'

3、对象合并

使用对象展开运算符的方式能够非常方便地将两个或多个对象的属性合并到一个新对象中,是 JavaScript 中常见且便捷的对象操作方法。

const userInfo1 = { name: '半壳椰子', client_id: 1 }
const userInfo2 = { age: 50, school: '野鸡大学' }

const userInfo = { ...userInfo1, ...userInfo2 }
console.log(userInfo); // 输出:{ name: '半壳椰子', client_id: 1, age: 50, school: '野鸡大学' }

4、判断数组是否满足

some 方法用于检查数组中是否至少有一个元素满足指定的条件(回调函数返回 true)。它会遍历数组中的每个元素,直到找到满足条件的元素为止,如果找到则立即返回 true,否则返回 false。

let array = [1, 2, 3, 4, 5]

// 判断数组中是否存在大于3的元素
let hasGreaterThan3 = array.some(element => element > 3)
console.log(hasGreaterThan3) // true

// 判断数组中是否存在负数
let hasNegativeNumber = array.some(element => element < 0)
console.log(hasNegativeNumber) // false

5、数组去重

使用 Set 来实现数组去重确实是一种简单且高效的方法。Set 对象存储的是唯一值,因此向 Set 中添加重复的值时,它只会保留一个副本。

let array = [1, 2, 3, 3, 4, 4, 5]

// 使用 Set 去重
let uniqueArray = Array.from(new Set(array))

console.log(uniqueArray)// 输出 [1, 2, 3, 4, 5]

6、两个数组交集的取值

找到两个数组的交集,我们可以使用 Array.prototype.filter() 方法和 Array.prototype.includes() 方法。这种方法可以有效地找到两个数组中相同的元素,即交集。

const array1 = [1, 2, 3, 4, 5]
const array2 = [3, 4, 5, 6, 7]

// 使用 filter 和 includes 方法找到交集
const intersection = array1.filter(value => array2.includes(value))

console.log(intersection); // 输出:[3, 4, 5]

7、数组求和

reduce 方法接受一个回调函数作为参数,这个回调函数可以接受四个参数:累加器(accumulator)、当前元素(current value)、当前索引(current index)和数组本身(array)。回调函数可以进行任意的操作,但必须返回累加器的新值。

const numbers = [1, 2, 3, 4, 5]

// 使用 reduce 方法求和
const sum = numbers.reduce((accumulator, currentValue) => { 
    return accumulator + currentValue
}, 0)

console.log(sum); // 输出 15

8、使用变量作为对象的键

在 JavaScript 中,使用变量作为对象的键名是一种强大的技术,可以根据需要动态定义和更新对象的结构。

// 定义一个动态的键名
const dynamicKey = 'name'

// 定义一个对应的值
const value = '半壳椰子'

// 创建一个对象,并使用动态的键名
const obj = { [dynamicKey]: value }

console.log(obj) // 输出:{ name: '半壳椰子' }

9、提取文件扩展名

这段代码使用了 lastIndexOf 方法来找到文件名中最后一个点号的位置,然后使用 slice 方法从该位置开始提取字符串,以获取文件的扩展名。通过位运算符 >>> 确保即使未找到点号,操作也是安全的,返回一个空字符串作为默认值。

const fileName = 'example.png'

const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2)

const extension = getFileExtension(fileName) // 提取文件扩展名 'png'

console.log(extension) // 输出 'png'

10、根据指定条件判断,是否给对象的属性赋值

使用了短路求值 (&&) 和扩展运算符 (...),如果 condition 为真,则通过 {key: value} 对象字面量的形式将 key 属性添加到 newObject 中;否则,newObject 保持为空对象 {}。这种方法简洁地实现了条件性添加属性到对象的需求。

const condition = true
const value = '你好,椰子'

// 使用短路求值和扩展运算符来有条件地添加属性到对象中
const newObject = {...(condition && {key: value})}
// 如果条件为真,则将 value 赋给 newObject.key 属性;否则 newObject 将为空对象 {} 

console.log(newObject); // 输出: { key: '你好,椰子' }