数据类型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 }
数组降维
1、
// 数组降维: 把二维数组降低地道一维数组
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]
2、
// 数组降维: 把二维数组降低地道一维数组
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);
输出结果如下：
