【Vue】字符串，对象，集合常用方法与代码示例（珍藏版）
在 Vue.js 中，字符串操作通常不是由 Vue 自身提供的功能，而是直接使用 JavaScript 中的字符串方法。以下是一些常见的 JavaScript 字符串操作方法，这些方法在 Vue.js 中同样适用。
目录
字符串
方法列表
在 Vue.js 中，字符串操作通常不是由 Vue 自身提供的功能，而是直接使用 JavaScript 中的字符串方法。以下是一些常见的 JavaScript 字符串操作方法，这些方法在 Vue.js 中同样适用。
| 序号 | 方法 | 作用 |
|---|---|---|
| 1 | includes() | 检查字符串是否包含指定的子字符串。 |
| 2 | startsWith() | 检查字符串是否以指定的子字符串开始。 |
| 3 | endsWith() | 检查字符串是否以指定的子字符串结束。 |
| 4 | slice() | 提取字符串的某个部分并返回一个新字符串。 |
| 5 | substring() | 提取字符串之间的字符。 |
| 6 | substr() | 从起始索引号提取字符串中指定数目的字符。 |
| 7 | replace() | 替换字符串中指定的值。 |
| 8 | toUpperCase() | 将字符串转换为大写。 |
| 9 | toLowerCase() | 将字符串转换为小写。 |
| 10 | trim() | 去除字符串两端的空白字符。 |
| 11 | concat() | 连接两个或多个字符串。 |
| 12 | charAt() | 返回指定位置的字符。 |
| 13 | charCodeAt() | 返回指定位置的字符的 Unicode 编码。 |
| 14 | split() | 将字符串分割成字符串数组。 |
代码示例
在 Vue.js 中使用 JavaScript 字符串操作方法是相当直接的，因为 Vue.js 允许在其模板表达式中使用纯 JavaScript 表达式。下面是每个方法的用法示例：
// 1. includes() - 检查字符串str中是否包含子字符串"World"。
let str = "Hello World!";
console.log(str.includes("World")); // 输出: true
// 2. startsWith() - 检查字符串str是否以"Hello"开头。
console.log(str.startsWith("Hello")); // 输出: true
// 3. endsWith() - 检查字符串str是否以"!"结尾。
console.log(str.endsWith("!")); // 输出: true
// 4. slice() - 提取字符串str从索引0到索引5之前的部分。
console.log(str.slice(0, 5)); // 输出: "Hello"
// 5. substring() - 提取字符串str从索引6到索引11之前的字符。
console.log(str.substring(6, 11)); // 输出: "World"
// 6. substr() - 从字符串str的索引6开始提取5个字符。
console.log(str.substr(6, 5)); // 输出: "World"
// 7. replace() - 将字符串str中的"Hello"替换为"Goodbye"。
console.log(str.replace("Hello", "Goodbye")); // 输出: "Goodbye World!"
// 8. toUpperCase() - 将字符串str转换为大写字母。
console.log(str.toUpperCase()); // 输出: "HELLO WORLD!"
// 9. toLowerCase() - 将字符串str转换为小写字母。
console.log(str.toLowerCase()); // 输出: "hello world!"
// 10. trim() - 去除字符串strWithWhitespace两端的空白字符。
let strWithWhitespace = " Hello World! ";
console.log(strWithWhitespace.trim()); // 输出: "Hello World!"
// 11. concat() - 连接字符串str和str2。
let str2 = " Have a nice day!";
console.log(str.concat(str2)); // 输出: "Hello World! Have a nice day!"
// 12. charAt() - 返回字符串str中索引6处的字符。
console.log(str.charAt(6)); // 输出: "W"
// 13. charCodeAt() - 返回字符串str中索引6处字符的Unicode编码。
console.log(str.charCodeAt(6)); // 输出: 87
// 14. split() - 将字符串str按照空格分割成数组。
console.log(str.split(" ")); // 输出: ["Hello", "World!"]
对象
方法列表
| 序号 | 方法 | 作用 |
|---|---|---|
| 1 | Object.keys() | 返回一个包含给定对象所有自身可枚举属性名称的数组。 |
| 2 | Object.values() | 返回一个包含给定对象所有自身可枚举属性值的数组。 |
| 3 | Object.entries() | 返回一个给定对象自身可枚举属性的键值对数组。 |
| 4 | Object.assign() | 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。 |
| 5 | Object.freeze() | 冻结一个对象，其他代码不能删除或更改任何属性。 |
| 6 | Object.seal() | 密封一个对象，防止添加新属性同时将所有现有属性标记为不可配置。 |
代码示例
在 Vue.js 中使用 JavaScript 的 `Object` 方法通常是为了操作数据对象。以下是如何在 Vue.js 组件中使用这些 `Object` 方法的示例：
<script>
export default {
data() {
return {
userInfo: {
name: 'Alice',
age: 25,
location: 'Wonderland'
}
};
},
computed: {
// 使用 Object.keys() 获取对象的所有键
userKeys() {
return Object.keys(this.userInfo);
},
// 使用 Object.values() 获取对象的所有值
userValues() {
return Object.values(this.userInfo);
},
// 使用 Object.entries() 获取键值对数组
userEntries() {
return Object.entries(this.userInfo);
}
},
methods: {
// 使用 Object.assign() 合并对象
updateUser() {
const newInfo = { location: 'Looking Glass', job: 'Explorer' };
this.userInfo = Object.assign({}, this.userInfo, newInfo);
},
// 使用 Object.freeze() 冻结对象
freezeUser() {
Object.freeze(this.userInfo);
},
// 使用 Object.seal() 密封对象
sealUser() {
Object.seal(this.userInfo);
}
},
mounted() {
// 在组件挂载时进行对象操作的例子
this.updateUser();
// 注意：在冻结或封闭对象后，Vue将无法响应式地更新这些对象
// this.freezeUser();
// this.sealUser();
}
};
</script>在模板中，你可以这样展示这些数据：
<template>
<div>
<h3>User Information:</h3>
<p>Keys: {{ userKeys.join(', ') }}</p>
<p>Values: {{ userValues.join(', ') }}</p>
<ul>
<li v-for="[key, value] in userEntries" :key="key">{{ key }}: {{ value }}</li>
</ul>
<button @click="updateUser">Update User</button>
<!-- 注意：冻结或封闭对象后，尝试修改将不会有任何响应式效果 -->
<!-- <button @click="freezeUser">Freeze User</button> -->
<!-- <button @click="sealUser">Seal User</button> -->
</div>
</template>在这个例子中：
- `userKeys` 计算属性使用 `Object.keys()` 来获取 `userInfo` 对象中的所有键。
- `userValues` 计算属性使用 `Object.values()` 来获取 `userInfo` 对象中的所有值。
- `userEntries` 计算属性使用 `Object.entries()` 来获取 `userInfo` 对象中的键值对数组。
- `updateUser` 方法使用 `Object.assign()` 来更新 `userInfo` 对象的属性。
- `freezeUser` 和 `sealUser` 方法分别使用 `Object.freeze()` 和 `Object.seal()` 来冻结和密封 `userInfo` 对象。
请注意，当你使用 `Object.freeze()` 或 `Object.seal()` 后，Vue 将无法响应式地更新这些对象，因为这些操作会阻止 Vue 设置观察者来追踪数据变化。因此，通常不建议在 Vue 的响应式数据上使用这两个方法，除非你有特殊的需求，并且明白这样做的后果。
集合(数组)
方法列表
| 序号 | 方法 | 作用 |
|---|---|---|
| 1 | join() | 使用指定分隔符将数组元素连接成字符串。 |
| 2 | push() | 添加元素到数组末尾并返回新长度。 |
| 3 | pop() | 移除数组末尾元素并返回该元素。 |
| 4 | shift() | 移除数组第一个元素并返回该元素。 |
| 5 | unshift() | 将参数添加到数组开头并返回新长度。 |
| 6 | reverse() | 反转数组元素。 |
| 7 | sort() | 对数组进行排序，可以提供比较函数以按数值大小排序。 |
| 8 | slice() | 截取数组的一部分并返回，不影响原数组。 |
| 9 | splice() | 对数组进行元素删除、添加或替换。 |
| 10 | toString() | 将数组转换为字符串。 |
| 11 | indexOf() | 查找元素在数组中的索引，不存在则返回-1。 |
| 12 | forEach() | 遍历数组，对数组的每个元素执行函数，无返回值。 |
| 13 | map() | 创建一个新数组，其结果是数组中每个元素调用函数后的返回值。 |
| 14 | filter() | 创建一个新数组，包含通过测试的所有元素。 |
| 15 | find() | 查找数组中符合条件的第一个元素的值。 |
| 16 | findIndex() | 查找数组中符合条件的第一个元素的索引。 |
| 17 | every() | 测试数组的所有元素是否都通过了指定函数的测试。 |
| 18 | some() | 测试数组中是否有元素通过了指定函数的测试。 |
| 19 | reduce() | 对数组中的每个元素执行函数，结果汇总为单个返回值。 |
代码示例
// 1. join()
// 使用指定分隔符将数组元素连接成字符串。
let arr = [1, 2, 3, 4, 5];
let str = arr.join(','); // '1,2,3,4,5'
// 2. push() 和 pop()
// push(): 添加元素到数组末尾并返回新长度。
// pop(): 移除数组末尾元素并返回该元素。
let arr = ['张三', '李四', '王五'];
let count = arr.push('马六'); // ['张三', '李四', '王五', '马六'], count = 4
let item = arr.pop(); // '马六', arr = ['张三', '李四', '王五']
// 3. shift() 和 unshift()
// shift(): 移除数组第一个元素并返回该元素。
// unshift(): 将参数添加到数组开头并返回新长度。
let arr = ['张三', '李四', '王五'];
let item = arr.shift(); // '张三', arr = ['李四', '王五']
let count = arr.unshift('马六'); // ['马六', '李四', '王五'], count = 3
// 4. reverse()
// 反转数组元素。
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
// 5. sort()
// 对数组进行排序，注意默认排序为按字符串比较。
let arr = [12, 2, 43, 5, 2, 5];
arr.sort(); // [12, 2, 2, 43, 5, 5]
// 若要按数值大小排序，需提供比较函数。
arr.sort((a, b) => a - b); // [2, 2, 5, 5, 12, 43]
// 6. slice()
// 截取数组的一部分并返回，不影响原数组。
let arr = ['张三', '李四', '王五', '马六'];
let newArr = arr.slice(1, 3); // ['李四', '王五']
// 7. splice()
// 对数组进行元素删除、添加或替换。
let arr = ['张三', '李四', '王五', '马六'];
arr.splice(2, 1, '七郎'); // ['王五'], arr = ['张三', '李四', '七郎', '马六']
// 8. toString()
// 将数组转换为字符串。
let arr = [1, 2, 3, 4, 5, 6];
arr.toString(); // '1,2,3,4,5,6'
// 9. indexOf()
// 查找元素在数组中的索引，不存在则返回-1。
let arr = ['张三', '李四', '王五', '马六'];
arr.indexOf('李四'); // 1
arr.indexOf('李四', 2); // -1
// 10. forEach()
// 遍历数组，无返回值。
let arr = ['张三', '李四', '王五', '马六'];
arr.forEach((value, index, self) => {
console.log(`${value}--${index}--${self === arr}`);
});
// 输出:
// 张三--0--true
// 李四--1--true
// 王五--2--true
// 马六--3--true
// 11. map()
// 创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。
let arr = ['张三', '李四', '王五', '马六'];
let newArr = arr.map(item => `你好：${item}`);
// ['你好：张三', '你好：李四', '你好：王五', '你好：马六']
// 12. filter()
// 创建一个新数组，包含通过测试的所有元素。
let arr = [1, 2, 3, 4, 5, 6];
let newArr = arr.filter(item => item > 3); // [4, 5, 6]
// 13. find()
// 查找数组中符合条件的第一个元素的值。
let arr = ['张三', '李四', '王五', '马六'];
let result = arr.find(item => item === '李四'); // '李四'
// 14. findIndex()
// 查找数组中符合条件的第一个元素的索引。
let arr = ['张三', '李四', '王五', '马六'];
let index = arr.findIndex(item => item === '李四'); // 1
// 15. every()
// 测试数组的所有元素是否都通过了指定函数的测试。
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.every(item => item > 0); // true
// 16. some()
// 测试数组中是否有元素通过了指定函数的测试。
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.some(item => item > 3); // true
// 17. reduce()
// 对数组中的每个元素执行一个由您提供的函数(接收四个参数)，将其结果汇总为单个返回值。
let arr = [10, 20, 30, 40, 50];
let sum = arr.reduce((prev, now) => prev + now); // 150
let sumWithInitial = arr.reduce((prev, now) => prev + now, 110); // 260互相转换
在 Vue.js 中，集合通常指的是数组或对象等数据结构。将这些集合转换为字符串或从字符串转换回集合，一般是通过 JSON 的序列化和反序列化来完成的。下面提供了两个例子，展示了如何在 Vue 组件中实现这两种转换。
将集合（数组或对象）转换为字符串
<template>
<div>
<p>Original Array: {{ originalArray }}</p>
<p>Stringified Array: {{ stringifiedArray }}</p>
</div>
</template>
<script>
export default {
data() {
return {
originalArray: ['Vue.js', 'React', 'Angular']
};
},
computed: {
stringifiedArray() {
// 使用 JSON.stringify 来将数组转换为字符串
return JSON.stringify(this.originalArray);
}
}
};
</script>
在上面的例子中，originalArray 是一个包含前端框架名称的数组，stringifiedArray 计算属性使用 JSON.stringify() 方法将这个数组转换为 JSON 字符串。
将字符串转换为集合（数组或对象）
<template>
<div>
<p>Original String: {{ jsonString }}</p>
<p>Parsed Array: {{ parsedArray }}</p>
</div>
</template>
<script>
export default {
data() {
return {
// 表示数组的 JSON 字符串
jsonString: '["Vue.js", "React", "Angular"]'
};
},
computed: {
parsedArray() {
// 使用 JSON.parse 来将字符串解析为数组
return JSON.parse(this.jsonString);
}
}
};
</script>
在这个例子中，jsonString 是一个表示数组的 JSON 字符串。parsedArray 计算属性使用 JSON.parse() 方法将这个字符串解析回 JavaScript 数组。
这些操作在处理组件状态、存储和检索来自本地存储或服务器响应的数据时非常有用。在使用 JSON.parse() 时，应该注意异常处理，因为如果 JSON 字符串格式不正确，它会抛出错误的。
注意事项
在使用 Vue.js 时处理字符串、对象和集合（数组），有一些注意事项需要考虑，这些注意事项通常与 Vue 的响应式系统有关。以下是一些关键点：
字符串
1. 响应性更新：在 Vue 实例中，当你更改一个字符串类型的数据属性时，视图将自动更新以反映这个变化。
2. 直接赋值：对于字符串的更新，直接赋值即可，例如 `this.myString = 'new value';`。
3. 字符串操作：执行如 `slice` 或 `replace` 等不会改变原字符串的操作时，需要将结果赋值回响应式属性，以确保视图更新。
对象
1. 添加或删除属性：Vue 不能检测普通对象的属性添加或删除。如果你需要在对象上添加新的响应式属性，应该使用 `Vue.set` 或者在 Vue 3 中的 `reactive` 或 `set` 方法，例如 `Vue.set(this.myObject, 'newKey', 'newValue');`。
2. 响应性丢失：直接赋值一个新对象给一个响应式对象将会替换原对象，并且如果新对象不是响应式的，那么响应性将会丢失。要解决这个问题，可以使用 `Object.assign` 或展开运算符来更新对象的属性，而不是替换整个对象。
3. 嵌套对象：对于嵌套对象，如果你需要保持内部对象的响应性，应该确保内部对象在创建时就是响应式的。
集合（数组）
1. 变异方法：Vue 包裹了数组的变异方法，如 `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, 和 `reverse`，这些方法可以触发视图更新。当你使用这些方法时，Vue 的响应式系统能够检测到变化并更新 DOM。
2. 非变异方法：非变异方法如 `filter`, `concat`, 和 `slice` 不会改变原数组，而是返回一个新数组。如果你使用这些方法，需要将返回的新数组赋值给一个响应式属性来确保更新视图。
3. 索引和长度的变化：Vue 不能检测到数组索引的直接设置或数组长度的修改。例如，`this.myArray[0] = 'newValue'` 或 `this.myArray.length = 0` 不会触发视图更新。你应该使用 `Vue.set` 或数组的变异方法来进行这些类型的更新。
4. 响应式数组的替换：如果你需要替换整个数组，你应该使用一个新的数组来替换旧的数组，这样可以保持响应性。
Vue 3 的 Composition API
在 Vue 3 中，使用 Composition API 时有一些额外的注意事项：
1. reactive vs. ref：`reactive` 用于创建响应式对象，而 `ref` 用于创建响应式的基本类型值。正确使用这两者对于管理响应式状态至关重要。
2. toRefs：当你需要将响应式对象的属性传递给组合函数时，应该使用 `toRefs` 以保持属性的响应性。
3. readonly：当你不希望响应式状态被修改时，可以使用 `readonly` 方法来创建一个只读的响应式状态。
4. watchEffect 和 watch：在使用 `watchEffect` 或 `watch` 来响应状态变化时，确保正确处理 cleanup 函数以避免内存泄漏。
记住，Vue 的响应式系统是自动的，但是遵循这些最佳实践可以确保你的应用程序以可预测的方式工作，避免出现常见的陷阱。
有用请点赞，养成良好习惯！
疑问、交流、鼓励请留言！
前往低代码交流专区
更多推荐
26
0- 0
已为社区贡献5条内容
所有评论(0)