三十的博客

JavaScript 基础技巧手册（新手友好版）

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

一、数组操作必备

1. 删除数组元素

javascript 
let fruits = ["苹果", "香蕉", "橘子"];
fruits.splice(1, 1); // 删除第2个元素
console.log(fruits); // ['苹果', '橘子']

关键点 ​：

2. 检查重复项

javascript 
function hasDuplicate(list, item) {
  return list.filter((x) => x === item).length > 1;
}

// 使用示例
let names = ["张三", "李四", "张三"];
console.log(hasDuplicate(names, "张三")); // true

3. 快速清空数组 ​

javascript 
let arr = [1, 2, 3];
arr.length = 0; // 清空数组
console.log(arr); // []

4. 数组转对象（带索引）

javascript 
const fruits = ["苹果", "香蕉", "橘子"];
const obj = { ...fruits };
// {0: '苹果', 1: '香蕉', 2: '橘子'}

5. 交换变量值（无临时变量）​

javascript 
let a = 1;
let b = 2;
[a, b] = [b, a]; // ES6解构赋值
console.log(a, b); // 2 1

二、对象实用操作

1. 合并两个对象

javascript 
let obj1 = { name: "小明" };
let obj2 = { age: 18 };

// 方法1（推荐）
let merged = { ...obj1, ...obj2 };
// { name: '小明', age: 18 }

// 方法2（旧浏览器兼容）
let merged2 = Object.assign({}, obj1, obj2);
javascript 
let obj1 = { name: "小明", age: 22 };
let obj2 = { name: "小美", age: 18, sex: "女" };

// {name: '小美', age: 18, sex: '女'}
let merged = { ...obj1, ...obj2 };

// {name: '小美', age: 18, sex: '女'}
let merged2 = Object.assign({}, obj1, obj2);

2. 判断空对象

javascript 
let obj = {};

// 最佳写法
console.log(Object.keys(obj).length === 0); // true

// 传统写法
function isEmpty(obj) {
  for (let key in obj) {
    return false;
  }
  return true;
}

3. 动态属性名

javascript 
const dynamicKey = "email";
const user = {
  name: "Alice",
  [dynamicKey]: "alice@example.com", // 动态计算属性名
};

4. ​ 对象属性批量删除

javascript 
const data = { id: 1, tmp1: "x", tmp2: "y" };
["tmp1", "tmp2"].forEach((k) => delete data[k]);
// {id: 1}

三、日常开发小技巧

1. 快速生成 1-100 随机数

javascript 
let randomNum = Math.floor(Math.random() * 100) + 1;

拆解说明 ​：

2. 代替简单 if-else

javascript 
// 原写法
let status;
if (score >= 60) {
  status = "及格";
} else {
  status = "不及格";
}

// 简化写法
let status = score >= 60 ? "及格" : "不及格";

3. ​ 快速深拷贝（JSON 法）​

javascript 
const obj = { a: 1 };
const copy = JSON.parse(JSON.stringify(obj));

4. 浏览器环境检测

javascript 
const isBrowser = typeof window !== "undefined";

5. 生成随机十六进制颜色

javascript 
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

四、常见坑与解决方案

1. 浮点数计算精度问题

javascript 
console.log(0.1 + 0.2); // 0.30000000000000004

// 正确做法
let sum = (0.1 * 10 + 0.2 * 10) / 10;
console.log(sum); // 0.3

2. 数组去重最优方案

javascript 
let arr = [1, 2, 2, 3];

// 现代浏览器（推荐）
let uniqueArr = [...new Set(arr)];

// 兼容旧浏览器
let uniqueArr2 = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
#Javascript