本文共 4369 字，大约阅读时间需要 14 分钟。

数据类型set

作用和数组类似，和数组不同的是：它不能存放重复的元素

• 应用场景：数组去重

• eg01:基本使用

let set1 = new Set([10, 20, 30, 40, 10, 20, 30, 50]);console.log(set1); // Set(5) { 10, 20, 30, 40, 50 }

• eg02:数组去重

let arr = [10, 20, 30, 40, 10, 20, 30, 50];let set = new Set(arr);console.log(set); // Set(5) { 10, 20, 30, 40, 50 }let arrNew = [...set];console.log(arrNew); // [ 10, 20, 30, 40, 50 ]

• eg03:数组去重，把上面操作变成一句话

let arr = [10, 20, 30, 40, 10, 20, 30, 50];let arrNew = [...new Set(arr)];console.log(arrNew); // [ 10, 20, 30, 40, 50 ]

模板字符串

• es5

字符串没有格式，里面也不能写变量

• es6

模板字符串

let author = "波波";let str = `    静夜思        ${
     author}    床前明月光,    低下鞋两双,    举头望明月,    低头思阿香. `;console.log(str);

• eg01:

let name = "千里";let age = 38;let score = 100;console.log(`我的名字是${
     name},我的年龄是${
     age},我的成绩是${
     score}`);

• eg02:

function test() {
     return "哈哈哈";}console.log(`我是神雕大侠，我在笑:${
     test()}`); // 我是神雕大侠，我在笑

补充数组的方法

1.forEach()

遍历数组，把遍历出来的每一项交给回调函数.

没有返回值

let arr = [10, 20, 30, 40];arr.forEach(function (item, index) {
     // item 就是遍历出来的每一项  // index就是遍历出来的每一项对应的索引  console.log(item, index);});

eg01:

let arr = [10, 20, 30, 50, 33, 22];let max = -Infinity;arr.forEach((item, index) => {
     if (item > max) {
       max = item;  }});console.log(max); // 50

2.map()

遍历数组的，有返回值

let arr = [10, 20, 30, 40];let arrNew = arr.map(function (item, index) {
     // item 就是遍历出来的每一项  // index就是遍历出来的每一项对应的索引  //   console.log(item, index);  return item * item;});console.log(arrNew); // [ 100, 400, 900, 1600 ]

3.filter(); 过滤器

filter()方法会返回一个新的数组，新的数组中的元素是通过检查后符合条件的元素

eg01:

let arr = [10, 20, 11, 21, 30, 31, 34, 56, 67];let arrNew = arr.filter(function (item, index) {
     // item 就是遍历出来的每一项  // index就是遍历出来的每一项对应的索引  //   console.log(item, index);  return item % 2 == 0; // 如果条件成立，会返回当前项，如果条件不成立，不会返回当前项});console.log(arrNew); // [ 10, 20, 30, 34, 56 ]

eg02:

let arr = [  {
    name: "波波", age: 38 },  {
    name: "千里", age: 18 },  {
    name: "哲锴", age: 28 },  {
    age: 45 },];let arrNew = arr.filter((item, index) => {
     return item.name;});console.log(arrNew);

补充对象解构赋值

let obj = {
     name: "波波",  age: 38,  gender: "男",  score: 100,};// 1.// let { name, age, gender, score } = obj;// console.log(name, age, gender, score); // 波波 38 男 100// 2. obj2就相当于是obj对象里面除了name属性之前的属性们组成的一个对象let {
    name, age, ...obj2 } = obj;console.log(obj2); // { gender: '男', score: 100 }

数组降维

// 数组降维: 把二维数组降低地道一维数组var arr = [  [10, 20],  [30, 40, 50],  [60, 70],];// 使用扩展运算符...var arrNew = [];// 遍历二维数组arr.forEach((v) => {
     //   console.log(v);  arrNew.push(...v);});console.log(arrNew); // [10, 20, 30, 40, 50, 60, 70]

// 数组降维: 把二维数组降低地道一维数组var arr = [10, 20, [30, 40, 50], 60, 70];// 使用扩展运算符...var arrNew = [];// 遍历二维数组arr.forEach((v) => {
     if (Array.isArray(v)) {
       arrNew.push(...v);  } else {
       arrNew.push(v);  }});console.log(arrNew); // [10, 20, 30, 40, 50, 60, 70]

数组去重

数组去重：把数组中重复的项给去掉

• 一: 补充去重的方法1：排序后判断法

var arrNew = [];// 排序arr.sort((a, b) => {
     return a - b;});console.log(arr); // [10, 10, 20, 20, 30, 40, 50]// 判断arr.forEach((v, i) => {
     if (v !== arr[i + 1]) {
       arrNew.push(v);  }});console.log(arrNew); // [ 10, 20, 30, 40, 50 ]

• 二：补充去去重的方法2：使用对象法

原理：是利用的对象的属性不能重名

对象的语法复习：

取值：

属性名不存在，取出的是undefined

属性名存在，取出的肯定是对应的属性值

赋值：

属性名不存在，就相当于是动态的添加属性

属性名存在，那就修改原来的属性值

var obj = {
   }; // 检测有没有重复的元素var arrNew = []; // 去重后存放元素的数组// 遍历要去重的数组arr.forEach((v) => {
     // 判断  if (obj[v] == undefined) {
       arrNew.push(v); // 不存在就把当前这个v存起来    obj[v] = "值"; // 把当前这个元素作为obj对象的属性存进obj对象里  }});console.log(arrNew); // [ 10, 20, 30, 40, 50 ]

数组升维

var arr = [    {
    type: "电子产品", name: "iPhone", price: 8888 },    {
    type: "家具", name: "桌子", price: 100 },    {
    type: "食品", name: "瓜子", price: 10 },    {
    type: "家具", name: "椅子", price: 380 },    {
    type: "电子产品", name: "小米手机", price: 1380 },    {
    type: "食品", name: "辣条", price: 5 },    {
    type: "食品", name: "咖啡", price: 50 },];var obj = {
   };var arrNew = [];arr.forEach((v) => {
       //   console.log(v);    if (obj[v.type] === undefined) {
           // 第一次出现这个产品类型        obj[v.type] = 1;        // 把当前遍历出来的这个数据存进arrNew中        arrNew.push({
               type: v.type,            data: [v],        });    } else {
           arrNew.forEach((v2, j) => {
               if (v.type === v2.type) {
                   arrNew[j].data.push(v);            }        });    }});console.log(arrNew);

输出结果如下：

转载地址：http://ccclf.baihongyu.com/