js中的增删改查——数组对象，接口

Posted 2023-04-02 爱学习的Akali King

js中的增删改查

• 对数组或对象增删改查
• • 增加数据
  • 删除数据
  • 修改数据
  • 查询数据
• 对接口数据增删改查
• • 查询用户信息
  • 添加用户信息
  • 修改用户信息
  • 删除用户信息

对数组或对象增删改查

在javascript中，可以通过数组和对象来进行数据的增删改查。

增加数据

可以使用数组的push()方法或对象的属性赋值来增加数据。

例如，使用push()方法向数组中增加一个元素：

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

使用属性赋值向对象中增加一个属性：

var obj = name: 'Tom',
		   age: 18;
obj.gender = 'male';
console.log(obj); // name: 'Tom', age: 18, gender: 'male'

---

删除数据

可以使用数组的splice()方法或对象的delete操作符来删除数据。

例如，使用splice()方法从数组中删除一个元素：

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

使用delete操作符从对象中删除一个属性：

var obj = name: 'Tom',
		   age: 18, 
		   gender: 'male';
delete obj.gender;
console.log(obj); // name: 'Tom', age: 18

---

修改数据

可以直接通过数组或对象的索引或属性名来修改数据。

例如，通过数组的索引修改一个元素：

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

通过对象的属性名修改一个属性：

var obj = name: 'Tom', 
		   age: 18;
obj.age = 20;
console.log(obj); // name: 'Tom', age: 20

---

查询数据

可以使用数组的indexOf()方法或对象的属性访问符来查询数据。

例如，使用indexOf()方法查询数组中是否包含某个元素：

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

使用属性访问符查询对象中的属性值：

var obj = name: 'Tom', age: 18;
console.log(obj.name); // 'Tom'
console.log(obj.age); // 18

对接口数据增删改查

在JavaScript中，可以使用Ajax技术来对接口中的数据进行增删改查。以下是一个简单的示例：

假设我们有一个用户管理的接口，可以通过该接口获取、添加、修改和删除用户信息。接口地址为：http://csdnexmple.com

---

查询用户信息

可以使用Ajax的GET方法来获取用户信息：

$.ajax(
  url: 'http://csdnexmple.com',
  type: 'GET',
  success: function(data) 
    // 处理返回的数据
    console.log(data);
  ,
  error: function(jqXHR, textStatus, errorThrown) 
    // 处理错误
    console.log(textStatus + ': ' + errorThrown);
  
);

---

添加用户信息

可以使用Ajax的POST方法来添加用户信息：

$.ajax(
  url: 'http://csdnexmple.com',
  type: 'POST',
  data: 
    name: '张三',
    age: 20,
    gender: '男'
  ,
  success: function(data) 
    // 处理返回的数据
    console.log(data);
  ,
  error: function(jqXHR, textStatus, errorThrown) 
    // 处理错误
    console.log(textStatus + ': ' + errorThrown);
  
);

---

修改用户信息

可以使用Ajax的PUT方法来修改用户信息：

$.ajax(
  url: 'http://csdnexmple.com/1',
  type: 'PUT',
  data: 
    name: '李四',
    age: 25,
    gender: '男'
  ,
  success: function(data) 
    // 处理返回的数据
    console.log(data);
  ,
  error: function(jqXHR, textStatus, errorThrown) 
    // 处理错误
    console.log(textStatus + ': ' + errorThrown);
  
);

---

删除用户信息

可以使用Ajax的DELETE方法来删除用户信息：

$.ajax(
  url: 'http://csdnexmple.com/1',
  type: 'DELETE',
  success: function(data) 
    // 处理返回的数据
    console.log(data);
  ,
  error: function(jqXHR, textStatus, errorThrown) 
    // 处理错误
    console.log(textStatus + ': ' + errorThrown);
  
);

以上所有代码仅为示例，实际应用中需要根据具体情况进行修改。

js数组的增删改查

array

数组的增删改：

• push 从数组后面推入一个元素或多个元素

var arr = [1,2,3];
?
// 返回：修改后数组的长度
arr.push(4,5,6);

 

• pop 删除数组最后一个元素

// 数组的pop方法用于将数组的最后一个元素移除
var arr = [1,2,3];
?
// 返回 被删除的元素；
arr.pop();

 

• unshift 从数组前面添加一个或多个元素

var arr = [1,2,3];
?
// 返回：修改后数组的长度
arr.unshift(4,5,6);

 

• shift 用于将数组的第一个元素移除

// 数组的shift方法用于将数组的第一个元素移除
var arr = [1,2,3];
?
// 返回 被删除的元素；
arr.shift(); 

 

• splice：可进行数组任何位置的增删改

// 数组的splice方法用于从数组的指定位置移除、添加、替换元素
var arr = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘];
?
// 对原数组操作
// 作用：从索引3开始移除，总共移除1个元素 ，
// 返回:被移除元素的数组
arr.splice(3,1); 
console.log(arr);
?
?
// 在c的后面添加7和8两个元素
// 作用：从索引3开始添加，移除0个元素，把7，8加入；
// 返回：一个空数组
// 操作原数组；
arr.splice(3,0,7,8); 
?
?
?
// 作用：从索引1开始替换，总共替换1个，用0替换 ；
// 返回：被替换元素的数组
arr.splice(1,1,0);
console.log(arr); 

 

与字符串互转

• join 用于将数组中的多元素以指定分隔符连接成一个字符串

var arr = [‘刘备‘,‘关羽‘,‘张飞‘];
var str = arr.join(‘|‘); 
console.log(str);  //  刘备|关羽|张飞

 

• split 字符串的方法：转数字，后面为分隔的字符

// 这个方法用于将一个字符串以指定的符号分割成数组
var str = ‘刘备|关羽|张飞‘;
var arr = str.split(‘|‘);
console.log(arr);

 

查找元素

• indexOf：根据元素查找索引，如果这个元素在数组中，返回索引，否则返回-1，找元素在不在数组内部

var arr = [10,20,30]
console.log(arr.indexOf(30));  // 2
console.log(arr.indexOf(40));  // -1

 

• findIndex方法用于查找满足条件的第一个元素的索引，如果没有，则返回-1

var arr = [10, 20, 30];
var res1 = arr.findIndex(function (item) 
  return item >= 20;
);
// 返回 满足条件的第一个元素的的索引
console.log(res1);  
?
?
var res2 = arr.findIndex(function (item) 
  return item >= 50;
);
// -1
console.log(res2);