Nodejs Set和Map的使用

數據類型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);

輸出結果如下:

Nb3L8O.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章