JavaScript数组与对象方法完全指南

// 增删元素示例
const fruits = ['apple', 'banana'];

// 添加元素
fruits.push('orange'); // ['apple', 'banana', 'orange']
fruits.unshift('kiwi'); // ['kiwi', 'apple', 'banana', 'orange']

// 删除元素
fruits.pop(); // ['kiwi', 'apple', 'banana']
fruits.shift(); // ['apple', 'banana']

// 添加：在索引1处删除0个元素，添加2个元素
fruits.splice(1, 0, 'mango', 'grape'); 
// ['apple', 'mango', 'grape', 'banana']

// 删除：从索引2开始删除1个元素
fruits.splice(2, 1); // ['apple', 'mango', 'banana']

// 替换：将索引1处的元素替换为指定元素
fruits.splice(1,1,'orange'); //['apple', 'orange', 'banana']

// 查找与访问示例
const numbers = [5, 12, 8,12, 130, 44];

// 基本查找
numbers.indexOf(12); // 1
numbers.lastIndexOf(12); // 3
numbers.includes(130); // true

// 条件查找
const found = numbers.find(num => num > 10); // 12
const foundIndex = numbers.findIndex(num => num > 100); // 4

// 安全访问
numbers.at(1); // 12
numbers.at(-1); // 44（最后一个元素）

// 迭代与转换示例
const numbers = [1, 2, 3, 4];

// 遍历
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8

// 转换
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// 聚合
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 10

// 扁平化
const nested = [1, [2, 3], [4, [5]]];
nested.flat(); // [1, 2, 3, 4, [5]]
nested.flat(2); // [1, 2, 3, 4, 5]

// 先map后扁平化
const phrases = ["hello world", "goodbye moon"];
const words = phrases.flatMap(phrase => phrase.split(" ")); 
// ["hello", "world", "goodbye", "moon"]

// 排序与操作示例
const fruits = ['banana', 'apple', 'cherry'];

// 排序
fruits.sort(); // ['apple', 'banana', 'cherry']（字典序）

// 自定义排序
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b); // [1, 5, 25, 40, 100]
numbers.sort((a, b) => b - a); // [100, 40, 25, 5, 1]

// 反转
fruits.reverse(); // ['cherry', 'banana', 'apple']

// 切片
const sliced = fruits.slice(1, 3); // ['banana', 'apple']
const sliced1 = fruits.slice(1); // ['banana', 'apple']
const sliced2 = fruits.slice(-1); // ['apple']

// 连接
const moreFruits = fruits.concat(['orange', 'kiwi']); 
// ['cherry', 'banana', 'apple', 'orange', 'kiwi']
const moreFruits1 = fruits.concat(‘mengo'); 
// ['cherry', 'banana', 'apple', 'orange', 'kiwi'，'mengo']

// 连接为字符串
fruits.join(' and '); // 'cherry and banana and apple'

// 其他方法示例
const ages = [32, 33, 16, 40];

// 检查
ages.every(age => age > 18); // false
ages.some(age => age > 18); // true

// 填充
const emptyArray = new Array(3);
emptyArray.fill('default'); // ['default', 'default', 'default']

// 复制内部元素到target位置
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 5); // [4, 5, 3, 4, 5]（将索引3-5复制到索引0）

// 类型检查
Array.isArray(arr); // true
Array.isArray({}); // false

// 对象操作示例
const person = { name: 'Alice', age: 30 };

// 合并对象
const job = { title: 'Developer' };
const merged = Object.assign({}, person, job); 
// { name: 'Alice', age: 30, title: 'Developer' }

// 获取键、值、条目
Object.keys(person); // ['name', 'age']
Object.values(person); // ['Alice', 30]
Object.entries(person); // [['name', 'Alice'], ['age', 30]]

//检查对象是否有置顶属性
Object.hasOwn(person,'name'); //true

// 冻结对象
Object.freeze(person);
person.age = 31; // 静默失败（严格模式下报错）

// 密封对象
Object.seal(person);
person.location = 'Paris'; // 不能添加新属性
delete person.name; // 不能删除属性

// 属性与原型操作
const obj = {};

// 定义属性
Object.defineProperty(obj, 'id', {
  value: 1,
  writable: false, // 不可写
  enumerable: true, // 可枚举
  configurable: false // 不可配置
});

// 获取属性描述符
const descriptor = Object.getOwnPropertyDescriptor(obj, 'id');
// { value: 1, writable: false, enumerable: true, configurable: false }

// 原型操作
const parent = { greet() { return 'Hello'; } };
const child = Object.create(parent); // 创建继承parent的对象
Object.getPrototypeOf(child) === parent; // true

// 设置原型
const newProto = { bye() { return 'Goodbye'; } };
Object.setPrototypeOf(child, newProto);
child.bye(); // 'Goodbye'

// 其他对象方法
// 精确比较
Object.is(NaN, NaN); // true（不同于 ===）
Object.is(0, -0); // false（不同于 ===）

// 从键值对创建对象
const entries = [['name', 'Bob'], ['age', 25]];
const newObj = Object.fromEntries(entries); 
// { name: 'Bob', age: 25 }

// 检查对象是否在原型链中
Array.prototype.isPrototypeOf([]); // true

// 检查自身属性
Object.hasOwn(newObj, 'name'); // true
Object.hasOwn(newObj, 'toString'); // false（继承属性）

// 防止扩展
Object.preventExtensions(newObj);
newObj.location = 'London'; // 静默失败（严格模式下报错）

//按条件分组对象数组
const inventory = [
  { name: 'asparagus', type: 'vegetables' },
  { name: 'bananas', type: 'fruit' },
  { name: 'goat', type: 'meat' }
];

// 分组
const grouped = Object.groupBy(inventory, ({ type }) => type);
/*
{
  vegetables: [{name:'asparagus', type:'vegetables'}],
  fruit: [{name:'bananas', type:'fruit'}],
  meat: [{name:'goat', type:'meat'}]
}
*/

// 深拷贝
const original = { a: 1, b: { c: 2 } };
const arr = [1,2,[3,4,[55]]];
const copy = structuredClone(original);  // { a: 1, b: { c: 2 } }
const copyArr = structuredClone(arr);   // [1,2,[3,4,[55]]]

// 1. 避免在循环中创建函数
// 差
const results = data.map(item => {
  return processItem(item); // 每次迭代创建新函数
});

// 优
function process(item) { /*...*/ }
const results = data.map(process);

// 2. 减少不必要的中间数组
// 差
const filtered = array.filter(x => x > 10);
const result = filtered.map(x => x * 2);

// 优
const result = array.reduce((acc, x) => {
  if (x > 10) acc.push(x * 2);
  return acc;
}, []);

// 3. 大数据集使用TypedArray
const largeData = new Float64Array(1000000);

// 1. 工厂模式
function createUser(name) {
  return Object.assign(Object.create(userProto), {
    name,
    createdAt: new Date()
  });
}

// 2. 组合模式
const canEat = { eat() { /*...*/ } };
const canWalk = { walk() { /*...*/ } };
function createPerson(name) {
  return Object.assign({ name }, canEat, canWalk);
}

// 3. 观察者模式
function createObservable(target) {
  return new Proxy(target, {
    set(obj, prop, value) {
      console.log(`Property ${prop} changed`);
      obj[prop] = value;
      return true;
    }
  });
}

const numbers = [3, 1, 2, 3, 4, 2, 5, 1];

// 方法1: Set + 展开运算符
const unique1 = [...new Set(numbers)].sort((a, b) => a - b);

// 方法2: filter + indexOf
const unique2 = numbers
  .filter((num, index) => numbers.indexOf(num) === index)
  .sort((a, b) => b - a); // 降序

// 方法3: reduce
const unique3 = numbers.reduce((acc, num) => {
  if (!acc.includes(num)) acc.push(num);
  return acc;
}, []).sort((a, b) => a - b);

console.log(unique1); // [1, 2, 3, 4, 5]
console.log(unique2); // [5, 4, 3, 2, 1]
console.log(unique3); // [1, 2, 3, 4, 5]

function deepMerge(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key]);
      }
    }
  }
  
  return deepMerge(target, ...sources);
}

function isObject(item) {
  return item && typeof item === 'object' && !Array.isArray(item);
}

// 使用示例
const defaultConfig = {
  api: { baseURL: '/api', timeout: 30000 },
  logging: { level: 'info' }
};

const userConfig = {
  api: { baseURL: 'https://api.example.com' },
  features: { analytics: true }
};

const mergedConfig = deepMerge({}, defaultConfig, userConfig);
/*
{
  api: { baseURL: 'https://api.example.com', timeout: 30000 },
  logging: { level: 'info' },
  features: { analytics: true }
}
*/

// 从API获取的数据
const apiResponse = [
  { id: 1, name: 'Alice', department: 'HR', salary: 60000 },
  { id: 2, name: 'Bob', department: 'IT', salary: 80000 },
  { id: 3, name: 'Charlie', department: 'IT', salary: 75000 }
];

// 1. 获取IT部门员工
const itEmployees = apiResponse.filter(emp => emp.department === 'IT');

// 2. 计算IT部门平均薪资
const totalSalary = itEmployees.reduce((sum, emp) => sum + emp.salary, 0);
const avgSalary = totalSalary / itEmployees.length;

// 3. 转换为名称-薪资映射
const salaryMap = Object.fromEntries(
  itEmployees.map(emp => [emp.name, emp.salary])
);
// { Bob: 80000, Charlie: 75000 }

// 4. 按薪资排序
const sortedEmployees = [...itEmployees].sort((a, b) => b.salary - a.salary);

// 表单数据转换为对象
function formDataToObject(formElement) {
  const formData = new FormData(formElement);
  return Object.fromEntries(formData.entries());
}

// 使用示例
const form = document.querySelector('#userForm');
const userData = formDataToObject(form);
// { name: 'Alice', email: 'alice@example.com', ... }

// 验证表单数据
function validateFormData(data) {
  const errors = {};
  
  if (!data.name) errors.name = 'Name is required';
  if (!data.email.includes('@')) errors.email = 'Invalid email format';
  
  return Object.keys(errors).length ? errors : null;
}

// 购物车状态管理
const cartState = {
  items: [
    { id: 1, name: 'Laptop', price: 999, quantity: 1 },
    { id: 2, name: 'Mouse', price: 25, quantity: 2 }
  ],
  discount: 0.1
};

// 添加商品
function addToCart(item) {
  const existingItem = cartState.items.find(i => i.id === item.id);
  
  if (existingItem) {
    return {
      ...cartState,
      items: cartState.items.map(i => 
        i.id === item.id 
          ? { ...i, quantity: i.quantity + 1 } 
          : i
      )
    };
  } else {
    return {
      ...cartState,
      items: [...cartState.items, { ...item, quantity: 1 }]
    };
  }
}

// 计算总价
function calculateTotal(cart) {
  return cart.items.reduce(
    (total, item) => total + (item.price * item.quantity), 0
  ) * (1 - cart.discount);
}

// 深度冻结对象（不可变状态）
function deepFreeze(obj) {
  Object.freeze(obj);
  
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (obj[prop] !== null &&
        typeof obj[prop] === 'object' &&
        !Object.isFrozen(obj[prop])) {
      deepFreeze(obj[prop]);
    }
  });
  
  return obj;
}

// 扁平化嵌套对象
function flattenObject(obj, prefix = '') {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    const prefixedKey = prefix ? `${prefix}.${key}` : key;
    
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      Object.assign(acc, flattenObject(value, prefixedKey));
    } else {
      acc[prefixedKey] = value;
    }
    
    return acc;
  }, {});
}

// 使用示例
const nestedObj = {
  user: {
    name: 'Alice',
    address: {
      city: 'Paris',
      country: 'France'
    }
  },
  roles: ['admin', 'editor']
};

const flatObj = flattenObject(nestedObj);
/*
{
  'user.name': 'Alice',
  'user.address.city': 'Paris',
  'user.address.country': 'France',
  'roles': ['admin', 'editor']
}
*/