JS方法及代码片段

1、合并两个数组

const merge1 = arr1.concat(arr2)
// or
const merge2 = [...arr1,...arr2]

2、合并数组并去重

const merge1 = [...new Set(arr1.concat(arr2))]
// or
const merge2 = [...new Set([...arr1,...arr2])]

3、将字符串 转化为 数组

const toNumber = str.split('')
// or
const toNumber = [...str]
// or
const toNumber = Array.from(str)
// or
const toNumber = Object.assign([],str)

4、检查数组是否包含值

const include = arr2.includes(value) // 返回布尔值
// or
const include2 = arr2.indexOf(value) //返回下标，不存在返回-1

5、函数节流

/** Function throttling timer version */
function throttle(callback: Function, delay: number) {
   let timer: number | null
   return function () {
     if (timer) return
     const args = arguments //Use closure to save parameter array
     timer = setTimeout(() => {
       callback.apply(null, args)
       timer = null
     }, delay)
   }
}

6、对象通用方法

const obj = { a: 1, b: 2, c: 3, d: 4 }
//Object.keys()
// Will return an array consisting of the given object's own enumerable properties
Object.keys(obj) // ['a', 'b', 'c', 'd']
//Object.values()
// Returns an array of all enumerable property values of the given object itself
Object.values(obj) // [1, 2, 3, 4]
//Object.entries()
// Returns an array of key-value pairs for the given object's own enumerable properties
Object.entries(obj) // [['a', 1], ['b', 2], ['c', 3], ['d', 4]]
//Object.fromEntries()
//Convert the list of key-value pairs into an object, which is the reverse operation of Object.entries()
Object.fromEntries( [['a', 1], ['b', 2]]) // { a: 1, b: 2 }
// hasOwnProperty()
// Returns a Boolean value indicating whether the object has the specified attribute in its own properties (that is, whether it has the specified key)
obj.hasOwnProperty('a') // true
obj.hasOwnProperty('fff') // false
//Object.assign()
// Used to copy the values of all enumerable properties from one or more source objects to the target object. It will return the target object.
const target = { a: 1, b: 2 }
const source = { b: 4, c: 5 }
const result = Object.assign(target, source) // { ...target, ...source } has the same effect
console.log(result) // {a: 1, b: 4, c: 5}

7、空值合并：?? (仅允许在左侧为“null”或“undefined”时提供默认值。)

		const user = { name: null, age: undefined };
        const userName = user.name ?? 'Anonymous';
        const userAge = user.age ?? 18;
        console.log(userName); // Anonymous
        console.log(userAge); // 18

8、对象属性简写

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

9、动态修改属性名

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

10、字符串 includes()、startsWith() 和 endsWith()

// 分别检查子字符串的存在、开始、结束
const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

11、Async/Await

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData('https://api.example.com/data');