JavaScript

1、页面渲染出来的样式

img


2、后台返回数据

img


3、想要实现的效果

img

4、将一样对象集的属性的值留一个，其余删除，不是去重效果


const list = [
    { name: '星期六', age: 11, id: 1 },
    { name: '星期六', age: 12, id: 2 },
    { name: '星期六', age: 13, id: 3 },
    { name: '星期五', age: 14, id: 4 },
    { name: '星期五', age: 15, id: 5 },
]

const formatList= Object.values(list.reduce((p, c) => p[c.name] ? p : (p[c.name] = c, p), {}))

console.log(formatList)

img

将一样对象集的属性的值留一个 ？保留规则是什么？ 星期六 有三个保留哪个？后面的覆盖前面的？

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/774701
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Javascript正则表达式常用的验证（验证手机号，电话，邮箱，网址等）
  • 除此之外, 这篇博客: javascript字符串方法：查找、截取、替换、转换大小写、连接、去空格、提取、转换为数组中的 如果希望用数组的方式处理字符串，可以先把它转换为数组 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • split(): 将字符串转换为数组：

      var str1 = "a,b,c,d,e,f" 
  var arr = str1.split(",") // 用逗号分隔
  // var arr = str1.split(" ") // 用空格分隔
  // var arr = str1.split("|") // 用竖线分隔
  arr[0]  //  返回 a
  arr[0] = "H"    // 可以接受赋值，当前 arr[0] 返回 H

    如果忽略分隔符，被返回的数组将包含index[0]中的整个字符串
    如果分隔符是""(空字符串)，被返回的数组僵尸间隔单个字符的数组：

        <!DOCTYPE html>
	<html>
	<body>
	
		<h1>JavaScript 字符串方法</h1>
		
		<p id="demo"></p>
		<p id="demo2"></p>
		
		<script>
		var str1 = "abcdef" 
		var arr1 = str1.split() // 忽略分隔符
		var arr2 = str1.split("") // 用空字符串分隔
		var text1 = "";
		var text2 = "";
		var i;
		for (i = 0; i < arr1.length; i++) {
		  text1 += arr1[i] + "<br>"
		}
		document.getElementById("demo").innerHTML = text1;   // 返回abcdef
		
		for (i = 0; i < arr2.length; i++) {
		  text2 += arr2[i] + "<br>"
		}
		document.getElementById("demo2").innerHTML = text2;  
		// demo2 返回：
		//  a
		//  b
		//  c
		//  d
		//  e
		//  f
	</script>
	
	</body>
	</html>
  • 您还可以看一下 吴华老师的Javascript面向对象特效&框架封装实战课程中的 第二种面向对象方式封装全选，不选，反选小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:
    1. 关于优化页面样式的方法：
    2. 使用合适的字体、字号和颜色，注意保证可读性和美观性；
    3. 为不同的元素添加合适的间距和边框，以分隔不同的部分；
    4. 选择合适的布局方式，可以使用 flexbox 或者 grid 等现代布局方式来实现；
    5. 使用动画或者过渡效果来增强用户体验，但需要注意不要过度使用；

    6. 可以使用 CSS 预处理器，如 Sass、Less 等来简化 CSS 的编写，并且提高代码的可维护性。

    7. 关于处理后台返回的数据：

    8. 首先根据数据的格式，使用合适的方法进行数据的解析和处理。如果数据为 JSON 格式，可以使用 JSON.parse() 方法将字符串转换成对象，方便进行操作；
    9. 在处理数据之前需要对数据进行有效性检查，以避免在操作数据时出现错误；

    10. 可以使用数据绑定技术，如 Vue、React 等框架，以提高数据操作效率，并且方便进行数据的展示和交互。

    11. 关于实现特定效果的方法：

    12. 首先需要明确要实现的效果，将目标分解成具体的步骤；
    13. 根据需求选择合适的技术栈和工具，如使用 Canvas 实现动画效果，使用 JavaScript 操作 DOM 元素等；

    14. 在实现过程中需要遵循良好的设计原则和代码规范，以提高代码可读性和可维护性。

    15. 关于将属性值相同的对象集中保留一个的方法：

    16. 首先需要根据属性值进行排序或者分类；
    17. 使用遍历的方式逐个比对属性值，将相同属性值的对象合并，最后只保留一个；
    18. 可以使用 reduce() 方法来实现，代码如下：
    const arr = [{a: 1, b: 2}, {a: 2, b: 2}, {a: 1, b: 3}, {a: 3, b: 4}];

const result = arr.reduce((acc, cur) => {
  if (!acc[cur.a]) {
    acc[cur.a] = cur;
  }
  return acc;
}, {});

console.log(Object.values(result));
// 输出 [{a: 1, b: 2}, {a: 2, b: 2}, {a: 3, b: 4}]

    上述代码通过遍历数组并且使用 reduce() 方法，在遍历的过程中将包含相同属性值的对象合并，并且只保留一个，最后输出结果。