js的数组、对象、map、set存储数据

数组

1. js数组不区分元素类型，数组的使用，请参考我的另一篇文章javascript Array的基本用法

对象（经常使用的属性和方法）

1. key，value的形式来存储数据
2. 对象属性、方法

• 对象属性分为三种“私有属性”，“实例属性”，“类属性”；
  私有属性是对象内部使用var或者let定义的一些属性
  实例属性通过object.property.propertyName或者通过在构造函数this方式进行赋值
  类属性就是直接调用的，例如Number.MAX_VALUE等一些属性
• 对象方法分为三种“私有方法”，“实例方法”，“类方法”
  私有方法是对象内部使用的方法
  实例方法通过object.property.functionName或者通过在构造函数内this方式进行赋值
  类方法functionName.methodName = function(){}
• __proto__属性是保存当前对象的原型对象，对象通过这个属性产生了原型链
• constructor属性，保存当前对象的构造函数，js通过构造函数来实现对象的实例化

let obj = {
  id: 1,
  name: 'name'
}
console.log(obj.constructor)

constructor属性打印

• hasOwnProperty(propertyName)方法，用来判断该propertyName属性是否在当前对象实例中，而不是在原型链中
• isPrototypeOf(Object)方法，用来判断当前对象是否在传入的参数对象的原型链上

function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));  //true
console.log(MyObject)
console.log(obj)

注意：对象的__proto__（原型链上的属性）和constructor属性，MyObject在obj的原型链上

对象的__proto__和constructor属性

• in操作符
  使用方法：propertyName in obj ---- 返回true或者false
  无论properyName是在原型中还是在实例中，只要有这个属性就会返回true
• （能力有限，能想到的只能这么多属性和方法，打扰了，各位）

集合Set

Set 没有键名，只有键值，不允许有重复值（敲黑板，画重点），重复的值是绝对相等（===），但是NaN和NaN是相等的值，两个对象总是不相等的。

• size属性
• add(value) 返回set本身，所以可以进行链式操作
• delete(value) 返回布尔值，表示是否删除成功
• has(value) 返回布尔值，表示是都有此value值
• clear(value) 无返回值
• 遍历 keys() values() entires() forEach()

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
 
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )

• 扩展运算符，内部使用for of循环，所以也可以用于Set结构

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

// 数组去重
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];  // 方法1
let unique = Array.from(new Set(arr))  // 方法2
// [3, 5, 2]

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构：{2, 4, 6}
 
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构：{2, 4}

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// set {1}

Map映射

key值相等，后者会覆盖前者，key值相等的概念是绝对相等（===），key值实际上是和内存地址绑定的，只要内存地址不一样，就默认是map的两个成员。

• map.size属性
• map.set(key, value) 其中key是否相同是严格的相等，除了+0 和 -0两个相等，返回map本身，所以可以进行链式操作
• map.get(key)
• map.delete(key) 返回布尔值，表示是都删除成功
• map.clear() 无返回值
• map遍历方法
  map.keys()，map.values()，map.entires()

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
 
for (let key of map.keys()) {
  console.log(key);
}
// "F"  "T"
 
for (let value of map.values()) {
  console.log(value);
}
// "no"   "yes"
 
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"    "T" "yes" 
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"   "T" "yes"

• 将map的keys=>数组，将map的values值=>数组，将map值=>数组，

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
 
[...map.keys()]
// [1, 2, 3]
 
[...map.values()]
// ['one', 'two', 'three']
 
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
 
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

• map的连接操作
  因为map.set()返回的是此map，所以map就可以使用连接操作
  map.set('a', 1).set('b', 2)

Set <=> Array 相互转换

• 应用：数组去重，set合并，set取交集，set取并集，set取差集等等应用场景

// set => array
Array.from(set)
[...set.keys()]
[...set.values()]
[...set.entries()]
[...set]
[...set1, ...set2, ...set3]
// array => set
new Set(arr)

Map <=> Array 相互转换

// map转成数组
[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]
// 数组转成map
new Map([['a', 1], ['b', 2]])

Map <=> Object

// map => object
function mapToObj (map) {
  let obj = Object.create(null)
  for (let [key, value] of map) {
    obj[key] = value
  }
  return obj
}
mapToObj(new Map().set('a', 1).set('b', 2)) // {a: 1, b: 2}
// object => map
function objToMap(obj) {
  let map = new Map()
  for (let key of Object.keys(obj)) {
    map.set(key, obj[key])
  }
  return map
}
objToMap({a: 1, b: 2})   // {"a" => 1, "b" => 2}

JSON <=> Map

// json => map
JSON.stringify(([...map]))
// msp => json
// 当json数据是对象的时候，使用上面使用的objToMap方法
objToMap(JSON.parse('{a: 1, b: 2}'))
// 当json数据是数组的时候
new Map(JSON.parse('[{a: 1}, {b: 2}]'))

Set <=> Map 相互转换

//  set => map
let set = new Set([['a', 1], ['b', 2]])
let map = new Map(set)
// map => set
let map = new Map([['a', 1], ['b', 2]])
let set = new Set(map)

• 依照小生看来，还是需要借助Array对象作为中间层呀！

敲黑板，画重点

一定要仔细看看Map和Set中举的例子鸭

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！