JavaScript 实用方法

使用箭头函数

传统函数
js 复制代码
function add(a, b) {  return a + b;}
箭头函数
js 复制代码
const add = (a, b) => a + b;

对象属性简写

传统写法
js 复制代码
const name = 'John';
const person = {  name: name};
简洁写法
js 复制代码
const name = 'John';
const person = { name };

解构赋值

从对象中提取值
js 复制代码
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name, age);
从数组中提取值
js 复制代码
const arr = [1, 2, 3];
const [first, second, third] = arr;
console.log(first, second, third);

模板字符串

传统字符串拼接
js 复制代码
const name = 'Bob';
const message = 'Hello, ' + name + '!';
模板字符串
js 复制代码
const name = 'Bob';
const message = `Hello, ${name}!`;

可选链操作符(?.)

在访问可能为 null 或 undefined 的对象属性时,避免出现错误

传统方式
js 复制代码
const person = { address: { city: 'New York' } };
const city = person && person.address && person.address.city;
使用可选链:
js 复制代码
const city = person?.address?.city;

空值合并操作符(??)

当左侧的值为 null 或 undefined 时,返回右侧的值

传统方式
js 复制代码
const value = null;
const result = value!== null && value!== undefined? value : 'default';
使用空值合并操作符
js 复制代码
const result = value?? 'default';

使用扩展运算符(...)

数组复制 传统方式
js 复制代码
 const arr1 = [1, 2, 3];
 const arr2 = arr1.slice();
简洁方式
js 复制代码
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

函数参数合并

函数参数合并:传统方式
js 复制代码
function combineArrays(arr1, arr2) {     
	return arr1.concat(arr2);   
}
简洁方式
js 复制代码
  function combineArrays(...arrays) {     
  	return [].concat(...arrays);   
 }

利用隐式返回(在箭头函数中)

当箭头函数的主体只有一个表达式时,可以省略 return 关键字和大括号。

js 复制代码
const double = num => num * 2;

使用对象方法简写

传统方式
js 复制代码
const person = {  
	name: 'Alice',  
	sayHello: function() {    
		return `Hello, I'm ${this.name}!`;  
	}
};
简洁方式
js 复制代码
const person = {  
	name: 'Alice',  
	sayHello() {    
		return `Hello, I'm ${this.name}!`;  
	}
};

利用数组方法简化循环

forEach 替代传统的 for 循环

传统方式
js 复制代码
 const arr = [1, 2, 3];   
 for (let i = 0; i < arr.length; i++) {     
 	console.log(arr[i]);   
 }
简洁方式
js 复制代码
 const arr = [1, 2, 3];  
 arr.forEach(item => console.log(item));

map 创建新数组

传统方式
js 复制代码
const numbers = [1, 2, 3];   
const doubledNumbers = [];  
 for (let i = 0; i < numbers.length; i++) {     
 	doubledNumbers.push(numbers[i] * 2);   
 }
简洁方式
js 复制代码
  const numbers = [1, 2, 3];   
  const doubledNumbers = numbers.map(num => num * 2);

利用逻辑运算符的短路特性

传统方式
js 复制代码
let value;
if (condition) {  
	value = defaultValue;
} else {  
	value = someOtherValue;
}
简洁方式
js 复制代码
const value = condition? defaultValue : someOtherValue;
// 或者
const value = condition && defaultValue || someOtherValue;
相关推荐
计算机-秋大田2 分钟前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
GDAL33 分钟前
HTML 中的 Canvas 样式设置全解
javascript
m0_5287238138 分钟前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer39 分钟前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL44 分钟前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树1 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
GISer_Jing1 小时前
Javascript排序算法(冒泡排序、快速排序、选择排序、堆排序、插入排序、希尔排序)详解
javascript·算法·排序算法
贵州数擎科技有限公司1 小时前
使用 Three.js 实现流光特效
前端·webgl
JustHappy1 小时前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪1 小时前
刷刷题16
前端·javascript·面试