龙空技术网

20个有用的js小技巧

RemoveS 70

前言:

此刻小伙伴们对“js小”大概比较关注,看官们都需要了解一些“js小”的相关内容。那么小编同时在网摘上收集了一些有关“js小””的相关内容,希望兄弟们能喜欢,我们一起来了解一下吧!

1. 使用对象解构以方便访问对象的属性:

const person = { name: 'John', age: 30, city: 'New York'};const { name, age, city } = person;console.log(name); // 输出: Johnconsole.log(age); // 输出: 30console.log(city); // 输出: New York
2. 使用模板字符串来拼接字符串和变量:
const name = 'John';const age = 30;const message = `My name is ${name} and I am ${age} years old.`;console.log(message); // 输出: My name is John and I am 30 years old.
3. 使用箭头函数以简洁的方式定义函数:
const add = (a, b) => a + b;console.log(add(2, 3)); // 输出: 5
4. 使用扩展运算符合并数组:
const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const mergedArr = [...arr1, ...arr2];console.log(mergedArr); // 输出: [1, 2, 3, 4, 5, 6]
5. 使用Array.map()将数组转换为另一个格式的数组:
const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map(num => num * 2);console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

6. 使用Array.filter()过滤数组中的元素:

const numbers = [1, 2, 3, 4, 5];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); // 输出: [2, 4]
7. 使用Array.reduce()将数组中的元素求和:
const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((total, num) => total + num, 0);console.log(sum); // 输出: 15
8. 使用Array.includes()检查数组中是否包含某个元素:
const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3)); // 输出: trueconsole.log(numbers.includes(6)); // 输出: false
9. 使用Array.every()检查数组中所有元素是否满足某个条件:
const numbers = [1, 2, 3, 4, 5];console.log(numbers.every(num => num > 0)); // 输出: trueconsole.log(numbers.every(num => num > 5)); // 输出: false
10. 使用Array.some()检查数组中是否有元素满足某个条件:
const numbers = [1, 2, 3, 4, 5];console.log(numbers.some(num => num > 4)); // 输出: trueconsole.log(numbers.some(num => num > 5)); // 输出: false
11. 使用Array.find()找到数组中满足条件的第一个元素:
const numbers = [1, 2, 3, 4, 5];console.log(numbers.find(num => num > 3)); // 输出: 4console.log(numbers.find(num => num > 5)); // 输出: undefined
12. 使用Array.findIndex()找到数组中满足条件的第一个元素的索引:
const numbers = [1, 2, 3, 4, 5];console.log(numbers.findIndex(num => num > 3)); // 输出: 3console.log(numbers.findIndex(num => num > 5)); // 输出: -1
13. 使用Array.sort()对数组进行排序:
const numbers = [3, 1, 5, 2, 4];numbers.sort((a, b) => a - b);console.log(numbers); // 输出: [1, 2, 3, 4, 5]
14. 使用Array.reverse()反转数组中的元素的顺序:
const numbers = [1, 2, 3, 4, 5];numbers.reverse();console.log(numbers); // 输出: [5, 4, 3, 2, 1]
15. 使用Array.splice()从数组中删除元素:
const numbers = [1, 2, 3, 4, 5];numbers.splice(2, 1);console.log(numbers); // 输出: [1, 2, 4, 5]
16. 使用Array.slice()复制数组中的一部分元素:
const numbers = [1, 2, 3, 4, 5];const copiedNumbers = numbers.slice(1, 4);console.log(copiedNumbers); // 输出: [2, 3, 4]
17. 使用Array.concat()将多个数组合并为一个数组:
const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const mergedArr = arr1.concat(arr2);console.log(mergedArr); // 输出: [1, 2, 3, 4, 5, 6]
18. 使用Array.join()将数组中的元素以指定的分隔符连接成一个字符串:
const numbers = [1, 2, 3, 4, 5];const joinedString = numbers.join('-');console.log(joinedString); // 输出: "1-2-3-4-5"
19. 使用Array.lastIndexOf()查找数组中指定元素最后一次出现的索引:
const numbers = [1, 2, 3, 4, 5, 3];console.log(numbers.lastIndexOf(3)); // 输出: 5
20. 使用Array.from()将类数组对象转换为数组:
const nodeList = document.querySelectorAll('p');const arr = Array.from(nodeList);console.log(arr); // 输出: [p, p, p, ...]

标签: #js小