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);

可选链

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

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

  1. 对象属性调用
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]);
  1. 方法调用
js 复制代码
fun.getMethods?.();

空合并算子

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

js 复制代码
const foo = null ?? 'Fa_ce';
console.info(foo); // Fa_ce

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

||= 和 ??=

  1. ||= 运算符用于给变量赋值,仅当左侧的变量为假(false, null, undefined, 空字符串等)时才会执行赋值操作
js 复制代码
let x = null;
x ||= '5';
console.info(x); // 5

let y = 10;
y ||= '5';
console.info(y); // 10
  1. ??= 运算符用于给变量赋值,仅当左侧的变量为nullundefined时才会执行赋值操作
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); // '' 对空字符串,不会执行赋值操作
相关推荐
迷雾漫步者1 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-1 小时前
验证码机制
前端·后端
燃先生._.2 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖3 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235243 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240254 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar4 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人5 小时前
前端知识补充—CSS
前端·css
GISer_Jing5 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试