在 JavaScript 中常见的数据处理方式

在 JavaScript 中常见的数据处理方式

当涉及到JavaScript数据处理时，有很多强大而且灵活的工具和技术可供使用。无论你是处理来自后端API的数据、用户输入还是本地存储的数据，JavaScript都提供了丰富的功能来操作、转换和组织数据。

在本博客中，我将介绍一些常见的JavaScript数据处理技术和最佳实践。

1、字符串

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

toUpperCase ： 把一个字符串全部变为大写：

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'

toLowerCase： 把一个字符串全部变为小写：

var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'

indexOf ： 会搜索指定字符串出现的位置

var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1

substring 和 slice ： 返回指定索引区间的子串，这两个方法在处理正数参数时的行为是一致的，不同之处在于对负数参数的处理方式，slice 接受负数作为参数，表示从字符串的末尾开始计数

var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'

replace ： 替换字符串中的指定子字符串

var str = "Hello, World!";
console.log(str.replace("World", "John")); // 输出 "Hello, John!"

split ： 将字符串分割成字符串数组，使用指定的分隔符

var str = "Hello, World!";
console.log(str.split(",")); // 输出 ["Hello", " World!"]

2、数组

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素

length ： 访问对应数组的长度，直接给Array的length赋一个新的值会导致Array大小的变化

var arr = [1, 2, 3, 4, 5];

arr.length = 3; // 将数组长度更改为 3
console.log(arr); // 输出 [1, 2, 3]

arr.length = 5 // 将上面的数组 [1, 2, 3] 的长度变更为5
console.log(arr) // 输出 [1, 2, 3, undefined, undefined]

push() ： 方法将一个或多个元素添加到数组的末尾，并返回新的数组长度。

const arr = [1, 2, 3];
const newLength = arr.push(4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]
console.log(newLength); // 输出 5

pop() ： 移除数组末尾的元素，并返回被移除的元素

const arr = [1, 2, 3, 4];
const removedElement = arr.pop();
console.log(arr); // 输出 [1, 2, 3]
console.log(removedElement); // 输出 4

unshift() ： 方法将一个或多个元素添加到数组的开头，并返回新的数组长度

const arr = [2, 3, 4];
const newLength = arr.unshift(1);
console.log(arr); // 输出 [1, 2, 3, 4]
console.log(newLength); // 输出 4

shift() ： 移除数组开头的元素，并返回被移除的元素

const arr = [1, 2, 3, 4];
const removedElement = arr.shift();
console.log(arr); // 输出 [2, 3, 4]
console.log(removedElement); // 输出 1

concat() >>> 合并两个或多个数组，并返回一个新的数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出 [1, 2, 3, 4]

slice() ： 从数组中复制指定的部分并返回一个新数组，不会修改原始数组

const arr = [1, 2, 3, 4, 5];
const subArray = arr.slice(1, 4);
console.log(subArray); // 输出 [2, 3, 4]

splice() ： 修改数组，可以删除、替换或插入元素，并返回被删除的元素组成的数组

const arr = [1, 2, 3, 4, 5];
const removedElements = arr.splice(1, 2, 'a', 'b');
console.log(arr); // 输出 [1, 'a', 'b', 4, 5]
console.log(removedElements); // 输出 [2, 3]

join() ：方法将数组中的所有元素连接成一个字符串，并返回连接后的字符串

const arr = [1, 2, 3, 4];
const str = arr.join('-');
console.log(str); // 输出 "1-2-3-4"

reverse() ：方法用于反转数组中的元素顺序，会修改原始数组。

const arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // 输出 [4, 3, 2, 1]

sort() ： 方法对数组的元素进行排序，默认以字母顺序排序，会修改原始数组

const arr = [3, 1, 4, 2];const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
arr.sort();
console.log(arr); // 输出 [1, 2, 3, 4]

数组的遍历处理

for 循环

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 结果：控制台循环打印1，2，3，4，5

forEach() 方法 ： 在数组的每个元素上执行提供的回调函数

// 语法：
arr.forEach(function(currentValue, index, array) {
    // currentValue：当前元素的值。
    // index：当前元素的索引。
    // array：正在被遍历的数组
});

// 案例：
const arr = [1, 2, 3, 4, 5];
arr.forEach((element) => {
  console.log(element);
});

map() 方法 ： 通过对数组的每个元素应用提供的函数来创建一个新数组

// 语法
array.map(function(currentValue, index, array) {
    // currentValue：当前元素的值。
    // index：当前元素的索引。
    // array：正在被遍历的数组
	// 在此处执行操作或处理，并返回一个值
    return returnValue
});
// 案例
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((element) => {
  return element * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

filter() 方法 ： 根据指定条件筛选出满足条件的元素，并创建一个新的数组

// 语法
array.filter(function(currentValue, index, array) {
	// 在此处执行条件判断，并返回一个布尔值
});
// 案例
const arr = [1, 2, 3, 4, 5];
const filteredArray = arr.filter((element) => {
  return element % 2 === 0;
});
console.log(filteredArray); // [2, 4]

reduce() 方法 ： 通过对数组的每个元素执行一个归约函数来将数组的所有值归约为单个值

// 语法
array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // accumulator：累积器，在每次执行回调函数时记录上一次的结果。
    // currentValue：当前被处理的元素。
    // currentIndex：当前元素在数组中的索引。
    // array：正在被处理的数组。
    // initialValue (可选)：初始值，如果提供了初始值，则它作为累积器的初始值；如果没有提供初始值，则数组中的第一个元素将作为初始值
 	// 在此处执行操作或处理，并返回一个值用作累积器的新值
}, initialValue);
// 案例
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

3、对象

对象是一种无序的集合数据类型，它由若干键值对组成

处理对象数据的方法有以下几种常见的方式：

属性访问：通过点语法或方括号语法访问对象的属性值。

const obj = { name: 'John', age: 30 };

console.log(obj.name); // 输出 "John"
console.log(obj['age']); // 输出 30

属性赋值：通过点语法或方括号语法为对象设置属性值。

const obj = {};

obj.name = 'John';
obj['age'] = 30;

console.log(obj); // 输出 { name: 'John', age: 30 }

对象方法：在对象中定义方法以执行特定的操作。

const obj = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}. I am ${this.age} years old.`);
  }
};

obj.greet(); // 输出 "Hello, my name is John. I am 30 years old."

对象的添加与新增

let obj = {
	name: 'john'
}
console.log(obj.age) // undefined
obj.age = 18 // 新增一个 age 属性
delete obj.age
delete obj['name']

判断对象是否具有指定属性

let obj = {
	name: 'john'
}
obj.hasOwnProperty('name') // true

对象遍历：使用 for...in 循环遍历对象的属性。

const obj = { name: 'John', age: 30 };

for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

// 输出：
// name: John
// age: 30

对象解构赋值：将对象的属性解构为独立的变量

const obj = { name: 'John', age: 30 };

const { name, age } = obj;

console.log(name); // 输出 "John"
console.log(age); // 输出 30

对象复制（浅拷贝）：将一个对象复制到另一个对象

const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1 }; // 使用对象扩展运算符进行浅拷贝

console.log(obj2); // 输出 { name: 'John', age: 30 }

Object.keys()：获取对象的所有键组成的数组。

const obj = { name: 'John', age: 30 };

const keys = Object.keys(obj);

console.log(keys); // 输出 ['name', 'age']

对象与 JSON 格式之间的转换（深拷贝）：在 JavaScript 和 JSON 之间进行数据的相互转换。这在进行数据的传输、存储和交互时非常有用

// JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串
const obj = { name: 'John', age: 30 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出 '{"name":"John","age":30}'

// JSON.parse()：将 JSON 字符串转换为 JavaScript 对象。
const jsonStr = '{"name":"John","age":30}';
const obj = JSON.parse(jsonStr);
console.log(obj); // 输出 { name: 'John', age: 30 }

以上是我对 JavaScript 中常见的数据处理方式的理解，欢迎留言讨论本文相关内容。

这里是爱打球的前端开发小白欢迎留言讨论本文相关内容，愿与诸位共勉。