【ES6 symbol】

类型

js的八种类型:Number String Boolean Object Function BiInt Undefined Symbol

注: null 是空对象类型 new Array 是方法,是函数 {}是object 类型

symbol 是原始数据类型。是独一无二的值。静态方法

let sy=symbol('kk);
    console.log(sy);  //打印结果是:“symbol('kk)”

拦截器

object.defineProperty():修改、新增,静态方法,会直接在上一个对象定义一个新属性

object.defineProperty
(操作对象 , 键名 ,{ value : 键值})
//---------------------------
const object={};
object.defineProperty(object,'property',{
	value:42,
	writble:false
}):

writble: 设置为false 不允许修改 defineProperty 对象添加的值 , true 允许修改; 默认为false

eumerable: 设置为true 允许被循坏拿取, 设置成false 不允许被循坏拿取; 默认为false

configurble: 设置为true 允许值被删除, 设置成false 不允许值被删除; 默认为false


symbol.for: 查询,查询不到就创建,对比的是里面的字符串

let red1 = symbol('red');
let red2 = symbol('red');
console.log(red1===red2);   //false;

symbol.keyfor: 用来检测 symbol.for. 该字符串作为的名称的symbol值是否被标记。

object.key():静态方法,循环,返回一个键名组成的数组。

object.values():静态方法,循环,返回一个键值组成的数组。

object.getOwnPropertyNames():静态方法,循环,返回一个键名组成的数组。

object.getOwnPropertySymbols():静态方法,循环symbol,返回一个键名组成的数组。

循坏方法:

  1. for
  2. for in
  3. map(循环数组)
  4. each
  5. forEach(循环数组)
  6. object.keys
  7. object.values
  8. wrile
  9. do wrile
  10. object.getOwnProperNames
  11. object.getOwnPropertySymbols

ES6 Map

Map 对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

	let mapObj = new Map();

Map 的特性

  • Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
  • Map 对象记得键的原始插入顺序。
  • Map 对象具有表示映射大小的属性

Map 对象的几个常用方法和属性

  1. new Map() 创建新的Map对象。
  2. set() 为 Map 对象中的键设置值。
  3. get() 获取 Map 对象中键的值。
  4. entries() 返回 Map 对象中键/值对的数组。
  5. keys() 返回 Map 对象中键的数组。
  6. values() 返回 Map 对象中值的数组。
  7. size 获取 Map 对象的长度。
  8. for of 循坏 Map 对象。

Map 对象的添加和获取

Map.set( );添加、设置
Map.get( ); 获取

var myMap = new Map();
var keyString = "a string"; 
 
myMap.set(keyString, "和键'a string'关联的值");
 
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

注:Map 对象的键可以是任何值!

Map 对象的循环

for of;

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
 
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象, 它按插入顺序包含了 Map 对象中每个元素的键。 */
 
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的值。 */

forEach;

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

Map 对象与 Array 的转换

var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

Map 对象的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 
console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

Map 对象的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three
var merged = new Map([...first, ...second]);

Map 和 Object 的区别

共同点:

二者都是以key-value的形式对数据进行存储;

不同点:

key的数据类型范围不同
obj可以作为key的仅有number、string、symbol。 map均可以。

key的顺序不同。
obj通过obj.keys()打印出来的属性顺序是 number–字符串。map的key顺序是声明顺序。

创建方式不同。
obj有三种创建方式 字面量{}、new Object() 、构造函数。 map仅支持new Map()。

key的调用不同。
map只能用原生的get方法调用。

设置属性的方式不同
map只能使用set(key,val)方法设置属性。

Size属性
map有size属性,对象没有。Map.size 返回 Map 中元素的数量,而 Object 的键值对个数只能手动计算。


ES6 Set

set 对象

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

	let mySet = new Set();

Set 的特性

  • Set是唯一值的集合类似于数组,常用于数组出重

Set 对象的几个常用方法和属性

  1. new Set() 创建新的Set对象。
  2. add() 向 Set 添加新元素。
  3. clear() 从 Set 中删除所有元素。
  4. delete() 删除由其值指定的元素。
  5. has() 如果值存在则返回 true。
  6. forEach() 为每个元素调用回调。
  7. keys() 返回 Set 对象中值的数组。
  8. size 返回元素个数。
let mySet = new Set();
 
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
mySet.add("some text"); 
// Set(3) {1, 5, "some text"} 这里体现了类型的多样性
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); 
// Set(5) {1, 5, "some text", {…}, {…}} 
// 这里体现了对象之间引用不同不恒等,即使值相同,Set 也能存储

类型转换

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符,将 Set 转 Array
var myArray = [...mySet];
String
// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注:Set 中 toString 方法是不能将 Set 转换成 String

数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

filter(function(item,index){}; 循环,(可以拿到下标)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
//----------------------------
//     ES5写法
var intersect = new Set([...a].filter(function(x){
	return b.has(x);
); // {2, 3}  

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
//----------------------------
//     ES5写法
var intersect = new Set([...a].filter(function(x){
	return !b.has(x);
); // {1}  

forEach 循环

 //Set 中用 forEach 获取不到下标,所以不用写index 这也是 forEach 和 for of 的区别
var a = new Set([11,22,33]);
	a.forEach(function(item){
		console.log(item);
	}
//----------------------------
//     ES6 箭头函数写法
	a.forEach(item => console.log(item));

Map 与 Set 的区别

  1. set是以[value, value]的形式储存元素,而Map是以[key, value]的形式储存; set 没有key值。
  2. Map可以通过get方法获取值,而set不能因为它只有值。
  3. Set的值是唯一的可以做数组去重,Map由于没有格式限制,可以做数据存储

你可能感兴趣的:(es6,javascript,前端)