详解javascript对数组和json数组的操作

下面是详解 JavaScript 对数组和 JSON 数组的操作的完整攻略。

JavaScript 数组操作

声明和初始化数组

JavaScript 中声明和初始化一个数组可以使用以下方式：

// 声明空数组
var arr = [];

// 声明同时初始化数组
var arr = [1, 2, 3];

// 使用 Array 构造函数声明和初始化数组
var arr = new Array(1, 2, 3);

数组基本操作

添加元素

在数组末尾添加元素可以使用 push 方法：

var arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

在数组开头添加元素可以使用 unshift 方法：

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

删除元素

删除数组末尾元素可以使用 pop 方法：

var arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

删除数组开头元素可以使用 shift 方法：

var arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

查找元素

查找数组中某个元素的下标可以使用 indexOf 方法：

var arr = [1, 2, 3];
var index = arr.indexOf(2);
console.log(index); // 1

数组遍历

可以使用 for 循环和 forEach 方法来遍历数组：

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach(function(item) {
  console.log(item);
});

数组高级操作

数组排序

可以使用 sort 方法来对数组进行排序：

var arr = [3, 1, 2];
arr.sort();
console.log(arr); // [1, 2, 3]

默认情况下是按照字符串排序的，可以传入一个比较函数进行自定义排序：

var arr = [
  { name: "Tom", age: 18 },
  { name: "Bob", age: 20 },
  { name: "Alice", age: 19 }
];
arr.sort(function(a, b) {
  return a.age - b.age;
});
console.log(arr); // [{name: "Tom", age: 18}, {name: "Alice", age: 19}, {name: "Bob", age: 20}]

数组过滤

可以使用 filter 方法来过滤数组中的元素：

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(item) {
  return item > 3;
});
console.log(newArr); // [4, 5]

数组映射

可以使用 map 方法来对数组中的元素进行映射：

var arr = [1, 2, 3];
var newArr = arr.map(function(item) {
  return item * 2;
});
console.log(newArr); // [2, 4, 6]

JSON 数组操作

声明和初始化 JSON 数组

使用 JSON 格式声明和初始化一个数组可以使用以下方式：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];

JSON 数组基本操作

JSON 数组的基本操作和普通 JavaScript 数组基本相同。

添加元素

在 JSON 数组末尾添加元素可以使用 push 方法：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  }
];
arr.push({
  id: 3,
  name: "Alice",
  age: 19
});
console.log(arr);

在 JSON 数组开头添加元素可以使用 unshift 方法：

var arr = [
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
arr.unshift({
  id: 1,
  name: "Tom",
  age: 18
});
console.log(arr);

删除元素

删除 JSON 数组末尾元素可以使用 pop 方法：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
arr.pop();
console.log(arr);

删除 JSON 数组开头元素可以使用 shift 方法：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
arr.shift();
console.log(arr);

查找元素

查找 JSON 数组中某个元素的下标可以使用循环和 id 等参数进行遍历和比对。

示例代码：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
var target = 2;
var index;
for (var i = 0; i < arr.length; i++) {
  if (arr[i].id === target) {
    index = i;
    break;
  }
}
console.log(index);

JSON 数组遍历

可以使用循环和 forEach 方法来遍历 JSON 数组：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i].name);
}

arr.forEach(function(item) {
  console.log(item.name);
});

JSON 数组高级操作

JSON 数组过滤

可以使用 filter 方法来对 JSON 数组中的元素进行过滤：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
var newArr = arr.filter(function(item) {
  return item.age > 18;
});
console.log(newArr);

JSON 数组映射

可以使用 map 方法来对 JSON 数组中的元素进行映射：

var arr = [
  {
    id: 1,
    name: "Tom",
    age: 18
  },
  {
    id: 2,
    name: "Bob",
    age: 20
  },
  {
    id: 3,
    name: "Alice",
    age: 19
  }
];
var newArr = arr.map(function(item) {
  return {
    id: item.id,
    name: item.name.toUpperCase(),
    age: item.age + 1
  }
});
console.log(newArr);

希望这份攻略能够对你有所帮助！