JavaScript常用数组、运算符，方法、技巧(长期更新)

js常用方法，简写代码技巧

Array

js数组常用方法

js 复制代码

/**
 * @description: JS 数组常用方法、技巧
 * @return {*}
 */

// 1.0 初始化一维数组
const arr0 = Array(5).fill(0);
console.log('arr0', arr0); // arr0 [ 0, 0, 0, 0, 0 ]

// 1.1 初始化二维数组
const matrix = Array(5)
	.fill(0)
	.map(() => Array(5).fill('content'));
console.log('matrix', matrix);
/*
	matrix [
		[ 'content', 'content', 'content', 'content', 'content' ],
		[ 'content', 'content', 'content', 'content', 'content' ],
		[ 'content', 'content', 'content', 'content', 'content' ],
		[ 'content', 'content', 'content', 'content', 'content' ],
		[ 'content', 'content', 'content', 'content', 'content' ]
	]
*/

// 2.0 过滤数组中虚假值 （ 0，undefined ，null，false， '' ）
const arr1 = [0, undefined, false, null, ' ', 123, '', '123'];
console.log('arr1', arr1.filter(Boolean)); // [' ', 123, '123']

// 3. 数组查找

// 3.0 indexOf  查找元素在数组中的下标，找不到返回 -1
if (arr1.indexOf('123') !== -1) {
	console.log("arr1.indexOf('123')", arr1.indexOf('123')); // 7
}

// 3.1 includes  查找元素是否存在于数组中，存在返回 true，不存在返回 false
console.log("arr1.includes('123')", arr1.includes('123')); // true
console.log('arr1.includes(true)', arr1.includes(true)); // false

// 3.2 find  查找数组中第一个满足条件的元素，找不到返回 undefined
console.info(
	"arr1.find( '123' )",
	arr1.find((item) => item === '123')
); // arr1.find( '123' ) 123

console.info(
	'arr1.find( true )',
	arr1.find((item) => item === true)
); // arr1.find( true ) undefined

// 3.3 findIndex  查找数组中第一个满足条件的元素的下标，找不到返回 -1
console.info(
	"arr1.findIndex( '123' )",
	arr1.findIndex((item) => item === '123')
); // arr1.findIndex( '123' ) 7

console.info(
	'arr1.findIndex( true )',
	arr1.findIndex((item) => item === true)
); // arr1.findIndex( true ) -1

// 4.0 打乱数组
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log('arr2', arr2);
arr2.sort(() => Math.random() - 0.5);
console.log('randomSort-arr2:', arr2);

// 5.0 检测是否为安全数组，若不是返回安全数组
const safeArr = (arr) => {
	return Array.isArray(arr) ? arr : [];
};
console.log('safeArr([])', safeArr([])); // []
console.log('safeArr(123)', safeArr(123)); // []
console.log('safeArr(null)', safeArr(null)); // []
console.log('safeArr(undefined)', safeArr(undefined)); // []
console.log('safeArr([1,2,3])', safeArr([1, 2, 3])); // [1,2,3]

// 6.0 数组清空
const arr3 = [1, 2, 3];
console.log('arr3', arr3); // [1,2,3]
// Array.length = 0 主要是清空字面量指向的真实数组，但不会释放内存
arr3.length = 0;
console.log('arr3', arr3); // []
arr3 = []; // Array = [] 释放内存，为 arr 重新赋值一个空数组

// 7.0 实现并集、交集、差集、补集
const arr4 = new Set([1, 2, 3, 4, 5]);
const arr5 = new Set([4, 5, 6, 7, 8]);
// 并集
let union = new Set([...arr4, ...arr5]); // Set { 1, 2, 3, 4, 5, 6, 7, 8 }
// 交集
let intersection = new Set([...arr4].filter((x) => arr5.has(x))); // Set { 4, 5 }
// 差集 (arr4 相对于 arr5 的差集)
let difference = new Set([...arr4].filter((x) => !arr5.has(x))); // Set { 1, 2, 3 }

// 8.0 map 循环
//  只有当 arr 为基本数据类型时，map 不会改变原始数组；arr 为引用类型时，还是会改变原数组的
const citys = [
	{
		name: '北京',
	},
	{
		name: '上海',
	},
	{
		name: '广州',
	},
];
const newCitys = citys.map((item) => {
	item.name = item.name + '市';
	item.country = 'zh-cn';
	return item;
});
console.log('citys', citys); // [{ name: '北京市', country: 'zh-cn' }, { name: '上海市', country: 'zh-cn' }, { name: '广州市', country: 'zh-cn' }]
console.log('newCitys', newCitys); // [{ name: '北京市', country: 'zh-cn' }, { name: '上海市', country: 'zh-cn' }, { name: '广州市', country: 'zh-cn' }]

JS 逻辑运算符

逻辑运算符

后面执行条件可以为函数调用之类...... 减少嵌套 if...else

js 复制代码

let foo = 10;
if (foo === 10) {
    doSomething(foo);
}
function doSomething(arg) {
    arg = arg || 10;
    return arg;
}
// 等同于
foo === 10 && doSomethind(foo);

可选链

可选链运算符 ?. 读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符。

但是直接使用链式运算符.引用深层不存在的属性，为空undefined或null的情况下不会引起错误，使用可选链?.会返回 undefined，不会抛出错误

对象属性调用

js 复制代码

const obj = {
    name: 'Fa_ce',
    info: {
        age: 18,
    },
};
const hasDog = obj.info?.dog;
const age = obj.info?.age;

const hasCat = obj.info.cat.age;
// TypeError: Cannot read properties of undefined (reading 'age')

// 访问动态属性也可以使用可选链
let key = 'age';
console.info(obj.info?.[key]);

方法调用

js 复制代码

fun.getMethods?.();

空合并算子

??，当左侧操作数为空或未定义时，返回其右侧操作数，否则返回其左侧操作数

js 复制代码

const foo = null ?? 'Fa_ce';
console.info(foo); // Fa_ce

const bar = 0 ?? 233;
console.info(bar); // 0

||= 和 ??=

||= 运算符用于给变量赋值，仅当左侧的变量为假(false, null, undefined, 空字符串等)时才会执行赋值操作

js 复制代码

let x = null;
x ||= '5';
console.info(x); // 5

let y = 10;
y ||= '5';
console.info(y); // 10

??= 运算符用于给变量赋值，仅当左侧的变量为null或undefined时才会执行赋值操作

js 复制代码

let x = null;
x ??= '5';
console.info(x); // 5

let y = 10;
y ??= '5';
console.info(y); // 10

let z = '';
z ??= '5';
console.info(z); // '' 对空字符串，不会执行赋值操作