• uni-app：js实现数组中的相关处理

    一、查询数组中，某一项中的某个数据为指定值的项（find() 方法）

    使用分析

    • 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素，如果找不到符合条件的元素，则返回 undefined。
    • 使用 find() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.id === 0 来查找 id 为 0 的那一项数据。

    效果展示

    这里查询id为1的那一项的数据信息

    核心代码

    const item = array.find(item => item.id === 1);

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9. 				
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array =[
    17. 					{
    18. 						id:0,
    19. 						name:'张三',
    20. 						age:18
    21. 					},
    22. 					{
    23. 						id:1,
    24. 						name:'李四',
    25. 						age:28
    26. 					},
    27. 	
    28. 					{
    29. 						id:2,
    30. 						name:'王五',
    31. 						age:38
    32. 					},
    33. 					{
    34. 						id:3,
    35. 						name:'赵六',
    36. 						age:48
    37. 					}
    38. 				]	
    39. 			console.log('初始数组');
    40. 			console.log(array);
    41. 			//查询数组中指定id值的具体项（这里指定id为1） 
    42. 			console.log('查询id为1的那一项数据');
    43. 			const item = array.find(item => item.id === 1);
    44. 			console.log(item);
    45. 		}
    46. 	};
    47. script>
    48. <style>
    49.  
    50. style>

    二、查询数组中，某一项中的某个数据为指定值的项，存在多项数据的情况（filter() 方法）

     使用分析

    • 使用数组的 filter() 方法。filter() 方法会返回一个新数组
    • 使用 filter() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.name === '张三' 来筛选出 name 为 "张三" 的所有项。

    效果展示

    这里查询name为‘张三’的全部项的数据信息

    核心代码

    const items = array.filter(item => item.name === '张三');

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '张三',
    34. 					age: 48
    35. 				}
    36. 			];
    37. 			console.log('初始数组');
    38. 			console.log(array);
    39. 			console.log('查询name为‘张三’的全部项');
    40. 			const items = array.filter(item => item.name === '张三');
    41. 			console.log(items);
    42.  
    43. 		}
    44. 	};
    45. script>
    46. <style>
    47.  
    48. style>

    注：find（）和 filter（）,前者只返回满足条件的第一个的元素，而不是所有，后者即返回全部满足条件的数据

    三、查询数组中，某一项中的某个数据为指定值时，对应该项中其他值的信息

    方法一：使用循环遍历数组进行查询

    使用分析

    通过for循序对数组进行遍历，array[i].id即为每一项中的id值

    效果展示

    这里查询id为2时，该项的name值

    核心代码

    let name = '';
                for (let i = 0; i < array.length; i++) {
                    if (array[i].id === 2) {
                        name = array[i].name;
                        break;
                    }
                }

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '张三',
    34. 					age: 48
    35. 				}
    36. 			];
    37. 			console.log('初始数组');
    38. 			console.log(array);
    39. 			console.log('查询id为2的项中的name值');
    40. 			let name = '';
    41. 			for (let i = 0; i < array.length; i++) {
    42. 				if (array[i].id === 2) {
    43. 					name = array[i].name;
    44. 					break;
    45. 				}
    46. 			}
    47. 			console.log(name);
    48. 		}
    49. 	};
    50. script>
    51. <style>
    52.  
    53. style>

    方法二：使用find()方法和三目运算进行配合

     使用分析

    • find() 方法返回第一个满足条件的元素，而不是所有。如果没有任何元素满足条件，则返回 undefined
    • 如果find()方法查询到了数据，通过三目运算进行输出

    效果展示

    这里查询id为2时，该项的name值

    核心代码

    const item = array.find(item => item.id === 2);
    const name = item ? item.name : '';

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '张三',
    34. 					age: 48
    35. 				}
    36. 			];
    37. 			console.log('初始数组');
    38. 			console.log(array);
    39. 			console.log('查询id为2的项中的name值');
    40. 			const item = array.find(item => item.id === 2);
    41. 			//三目运算，如果item的值存在说明找到了对应的数据就输出值，如果不是就输出空值
    42. 			const name = item ? item.name : '';
    43. 			console.log(name);
    44. 		}
    45. 	};
    46. script>
    47. <style>
    48.  
    49. style>

    四、判断数组中，是否存在有一项中某个数据为指定值的项

      使用分析

    • 数组的 some() 方法来判断是否存在满足条件的元素。some() 方法会遍历数组中的每一个元素，如果其中任意一个元素返回 true，则 some() 方法的返回值为 true；如果所有元素都返回 false，则 some() 方法的返回值为 false。
    • 使用 some() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.name === '李四' 来查找 name 属性等于 "李四" 的元素。如果找到了匹配的项，则将 hasItem 设置为 true；否则设置为 false。

    效果展示

    这里判断name中是否含有‘李四’和‘王麻子’

    核心代码

    const hasItem = array.some(item => item.name === '李四');

    if (hasItem) {
            console.log('数组中存在 name 值为 "李四" 的数据');
    } else {
            console.log('数组中不存在 name 值为 "李四" 的数据');
    }

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];
    37. 			console.log("初始数组")
    38. 			console.log(array)
    39. 			//判断是否有name为'李四'的数据
    40. 			const hasItem = array.some(item => item.name === '李四');
    41. 			if (hasItem) {
    42. 				console.log('数组中存在 name 值为 "李四" 的数据');
    43. 			} else {
    44. 				console.log('数组中不存在 name 值为 "李四" 的数据');
    45. 			}
    46. 			//判断是否有name为'王麻子'的数据
    47. 			const hasItem1 = array.some(item => item.name === '王麻子');
    48. 			
    49. 			if (hasItem1) {
    50. 				console.log('数组中存在 name 值为 "王麻子" 的数据');
    51. 			} else {
    52. 				console.log('数组中不存在 name 值为 "王麻子" 的数据');
    53. 			}
    54. 		}
    55. 	};
    56. script>
    57. <style>
    58.  
    59. style>

    五、修改数组中某一项中的某个值为指定值时，该项对应别的数据的值

       使用分析

    • 使用 find() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.id === 2 来查找 id 属性等于 2 的元素。如果找到了匹配的项，则将对应的 age 值修改为 55，并输出修改后的数组；否则输出“数组中不存在 id 值为 2 的元素”。

    效果展示

    这里修改id为2对应的age值

    原始数据

    修改后数据

    核心代码

    const item = array.find(item => item.id === 2);
    if (item) {
            item.age = 55;
            console.log('修改成功，新的数组数据为：', array);
    } else {
            console.log('数组中不存在 id 值为 2 的元素');
    }

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			const item = array.find(item => item.id === 2);
    38. 			if (item) {
    39. 				item.age = 55;
    40. 				console.log('修改成功，新的数组数据为：', array);
    41. 			} else {
    42. 				console.log('数组中不存在 id 值为 2 的元素');
    43. 			}
    44. 		}
    45. 	};
    46. script>
    47. <style>
    48.  
    49. style>

    六、数组的插入（push向后插入，unshift向前插入，splice指定项插入）

    1、push向后插入

    使用分析

    • push 方法可以在数组末尾添加新元素

    效果展示

    这里向数组末尾添加了一条新对象

            {
                     id: 4,
                     name: '钱七',
                     age: 58
            }

    原始数据

    修改后数据

    核心代码

    array.push({
             id: 4,
             name: '钱七',
             age: 58
    });

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.push({
    38. 			  id: 4,
    39. 			  name: '钱七',
    40. 			  age: 58
    41. 			});
    42. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    43. 		}
    44. 	};
    45. script>
    46. <style>
    47.  
    48. style>

    2、unshift向前插入

    使用分析

    • 向数组开头插入元素：可以使用 unshift 方法向数组开头插入新元素。

    效果展示

    这里向数组最前端添加了一条新对象

            {
                     id: -1,

                    name: '王小二',

                    age: 25
            }

    原始数据

    修改后数据

    核心代码

    array.unshift({

            id: -1,

            name: 'New Person',

            age: 25

    });

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.unshift({
    38. 			  id: -1,
    39. 			  name: '王小二',
    40. 			  age: 25
    41. 			});
    42. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    43. 		}
    44. 	};
    45. script>
    46. <style>
    47.  
    48. style>

     3、splice指定位置插入

    使用分析

    • 使用 splice 方法在数组中的任意位置插入新元素。该方法可以接受三个参数，第一个参数是要插入的位置（索引），第二个参数是要删除的元素个数（设置为 0 表示不删除元素），第三个参数以及后续参数是要插入到数组中的元素。

    效果展示

    这里向下标为3的位置添加了一条新对象（也就是该项的下标要为三）

            {

                    id: 5,

                    name: 'New Person',

                    age: 30

            }

    原始数据

    修改后数据

    核心代码

    array.splice(3, 0, {
            id: 5,
            name: 'New Person',
            age: 30
     });

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.splice(3, 0, {
    38. 			  id: 5,
    39. 			  name: 'New Person',
    40. 			  age: 30
    41. 			});
    42. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    43. 		}
    44. 	};
    45. script>
    46. <style>
    47.  
    48. style>

    七、寻找数组中某一项中的某个值为指定值时，对这一项进行替换

       使用分析

    • 使用数组的 findIndex 方法找到数组中特定元素的索引，然后使用这个索引进行替换操作，这里通过寻找id为2的值，对这一项进行替换

    效果展示

    原始数据

    修改后数据

    核心代码

    const index = array.findIndex(item => item.id === 2);
    if (index !== -1) {
            array[index] = {
                    id: -1,
                    name: '替换者',
                    age: 30
            };
    }

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			const index = array.findIndex(item => item.id === 2);
    38. 			if (index !== -1) {
    39. 			  array[index] = {
    40. 			    id: -1,
    41. 			    name: '替换者',
    42. 			    age: 30
    43. 			  };
    44. 			}
    45. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    46. 		}
    47. 	};
    48. script>
    49. <style>
    50.  
    51. style>

    八、数组的删除（pop末尾删除，shift开头删除，splice指定位置删除，filter 删除符合特定条件的元素）

    1、pop末尾删除

    使用分析

    • pop 方法删除数组末尾的元素

    效果展示 

    原始数据

    修改后数据

    核心代码

    array.pop();//删除数组末尾项

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.pop();//删除数组末尾项
    38. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    39. 		}
    40. 	};
    41. script>
    42. <style>
    43.  
    44. style>

    2、shift开头删除

    使用分析

    • 使用 shift 方法删除数组开头的元素

    效果展示

    原始数据

    修改后数据

    核心代码

    array.shift();;//删除数组首项

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.shift();;//删除数组首项
    38. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    39. 		}
    40. 	};
    41. script>
    42. <style>
    43.  
    44. style>

     3、splice指定位置删除

    使用分析

    • splice 方法删除指定位置的元素，第一个参数为索引，第二个参数为要删除的元素个数

    效果展示

    原始数据

    修改后数据

    核心代码

    array.splice(2, 1);//从数组中的索引为 2 的位置开始，删除 1 个元素。你也可以根据需要指定删除多个元素。这里也就是删除下标为2的元素即name为王五的这一项

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			array.splice(2, 1);//找到下标为2的位置，删除一个元素
    38. 			console.log(array); // 打印数组，可以看到新的对象被成功添加
    39. 		}
    40. 	};
    41. script>
    42. <style>
    43.  
    44. style>

     4、filter 删除符合特定条件的元素

    使用分析

    • 删除符合特定条件的元素（只是筛选需要的项，组成新数组）

    效果展示

    原始数据

    修改后数据

    核心代码

    var new_array = array.filter(item => item.id !== 2);//创建一个新的数组，其中不包含 id 为 2 的元素。原始数组不会被修改，而是返回一个新的数组

    完整代码

    1. <template>
    2. 	<view>
    3. 	view>
    4. template>
    5. <script>
    6. 	export default {
    7. 		data() {
    8. 			return {
    9.  
    10. 			}
    11. 		},
    12. 		methods: {
    13.  
    14. 		},
    15. 		onLoad() {
    16. 			const array = [{
    17. 					id: 0,
    18. 					name: '张三',
    19. 					age: 18
    20. 				},
    21. 				{
    22. 					id: 1,
    23. 					name: '李四',
    24. 					age: 28
    25. 				},
    26. 				{
    27. 					id: 2,
    28. 					name: '王五',
    29. 					age: 38
    30. 				},
    31. 				{
    32. 					id: 3,
    33. 					name: '赵六',
    34. 					age: 48
    35. 				}
    36. 			];		
    37. 			var new_array = array.filter(item => item.id !== 2);
    38. 			console.log("原数组",array); // 原数组
    39. 			console.log("新数组",new_array); // 打印数组，可以看到新的对象被成功添加
    40. 			
    41. 		}
    42. 	};
    43. script>
    44. <style>
    45.  
    46. style>

    九、数组的拷贝（复制）

    uni-app：js实现数组中的相关处理-数组复制-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/weixin_46001736/article/details/134283969?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134283969%22%2C%22source%22%3A%22weixin_46001736%22%7D

     

  • 相关阅读:
    【C++】构造函数与类的组合以及初始化
    css设置 图片根据宽或高 等比例缩放
    MSVC 和 Visual Studio 代码诊断的未来
    什么是神经网络？
    openfeign整合sentinel进行降级
    【Python】数据结构与算法
    面向5G通信的射频关键技术解决毫米波传播距离短难题
    Day51——JavaScript事件绑定，jQuery类库
    手机 IOS 软件 IPA 签名下载安装详情图文教程
    关于制作一个Python小游戏(三)
  • 原文地址：https://blog.csdn.net/weixin_46001736/article/details/133921010