JS把数据添加到列表中的几种常见方法

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');

console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3

const colors = ['blue', 'green'];
colors.unshift('red');

console.log(colors); // ['red', 'blue', 'green']

const numbers = [1, 2];
const newNumbers = numbers.concat(3);

console.log(numbers); // [1, 2]
console.log(newNumbers); // [1, 2, 3]

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // 末尾添加
const arr3 = [0, ...arr1]; // 开头添加

console.log(arr2); // [1, 2, 3]
console.log(arr3); // [0, 1, 2]

const letters = ['a', 'c'];
letters.splice(1, 0, 'b'); // 在索引1处插入

console.log(letters); // ['a', 'b', 'c']

<input type="text" id="itemInput">
<button onclick="addItem()">添加</button>
<ul id="itemList"></ul>

<script>
  const items = [];
  
  function addItem() {
    const input = document.getElementById('itemInput');
    const text = input.value.trim();
    
    if (text) {
      items.push(text); // 添加到数组
      input.value = ''; // 清空输入框
      renderList(); // 重新渲染列表
    }
  }
  
  function renderList() {
    const list = document.getElementById('itemList');
    list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
  }
</script>

const defaultItems = ['加载中...'];
const fetchedData = ['item1', 'item2'];
const userAdded = ['custom'];

// 合并数据（保留默认项在开头）
const finalList = [...defaultItems, ...fetchedData, ...userAdded];