ES6新增数据类型

1.Symbol

ES6 引入了一种新的基本数据类型 Symbol，表示独一无二的值。

它属于 JavaScript 语言的数据类型之一，

基本数据类型：undefined、null、Boolean、String、Number

引用数据类型：Object

// 语法：Symbol(参数)
// 返回：声明一个独一无二的值

let data1 = Symbol();
let data2= Symbol();
console.log(data1);  // Symbol()
console.log(data2);  // Symbol()
console.log(data1 == data2);  // false

let data3 = Symbol('123');
let data4 = Symbol('123');
console.log(data3);  // Symbol(123)
console.log(data4);  // Symbol(123)
console.log(data3 == data4);  // false


console.log(typeof data4); // symbol

2.数据结构 Set

Set 是 ES6 新增的两个数据类型 (Set 和 Map)
是属于内置构造函数
使用 new 的方式来实例化使用

ES6 提供了新的数据结构 Set。
它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构，数组作为参数。
set的数据类型为对象（object）

2.1 set的创建

利用构造函数创建

let set = new Set([1, 2, '你好', 'hello', true, 2, 3]);
console.log(set);
console.log(typeof(set));   //object

2.2 统计成员个数 size

let set = new Set([1, 2, '你好', 'hello', true, 2, 3]);
console.log(set.size);	// 7

2.3 set的方法

add()

在末尾添加，只能添加一个值

set.add('我很好')
console.log(set);      //1, 2, '你好', 'hello', true, 2,3,'我很好'

delete()

（）里的参数写需要删除的值

set.delete(true)
console.log(set);       //1, 2, '你好', 'hello', 2,3,'我很好'

has()

返回true或false

console.log(set.has('你好'));       //true
console.log(set.has('nihao'));      //false

clear()

清空set内容

set.clear()
console.log(set);

2.4 将Set转换成数组

Array.from()

let s = new Set([1, 2, 3, 4, 5, 6])
let b = Array.from(s)
console.log(b) // (6) [1, 2, 3, 4, 5, 6]

展开运算符...

let s = new Set([1, 2, 3, 4, 5, 6])
let a = [...s]
console.log(a) // (6) [1, 2, 3, 4, 5, 6]

2.5 可用作数组的去重

let arr=[1,2,3,1,2,3,4,4,5,8,8]
set=new Set(arr)
console.log([...set]);   //[1,2,3,4,5,8]

3.数据结构 map

3.1 概述

ES6 提供了新的数据结构 Map。用来表示一个键值对的映射关系，与对象类似

3.2 构造函数

语法：

new Map()
new Map([
    [key, valve],
    [key, valve],
    [key, valve],
    // ...
]);

参数：

可以不传参
可以接收一个每一项包含两个元素的二维数组，且key和value都可以是任意数据类型

创建一个map：

const map = new Map([
    [1, 'one'],
    [() => {}, true],
    [{ num: 123 }, [1, 2, 3]],
    [Symbol(456), new Set([4, 5, 6])],
    [false, 666],
    [[7, 8, 9], new Map([[1, 2]])],
])
console.log(map)
// 0: {1 => "one"}
// 1: {() => {} => true}
// 2: {Object => Array(3)}
// 3: {Symbol(456) => Set(3)}
// 4: {false => 666}
// 5: {Array(3) => Map(1)}

由此可见，map的key和value都可以是任意数据类型

3.3 属性

size

map实例的 size 属性返回此 map 中元素的数量。

const map = new Map([
    [1, 'one'],
    [() => {}, true],
    [{ num: 123 }, [1, 2, 3]],
    [Symbol(456), new Set([4, 5, 6])],
    [false, 666],
    [[7, 8, 9], new Map([[1, 2]])],
])
console.log(map.size)  // 6

3.3 原型方法

set()

作用：向 Map 对象添加或更新一个指定的键值对。

语法：

const map = new Map()
map.set(key, value)

参数：

key：新增map数据的键，可以是任意数据类型
value：新增map数据的值，可以是任意数据类型

使用：

const map = new Map()
map.set('num', 123)
console.log(map) // {'num' => 123}

map.set('num', 456)
console.log(map) // {'num' => 456}

get()

作用：获取该 map 中的指定元素，返回相应key的value

语法：

const map = new Map()
map.get(key)

参数：

key：从 Map 对象返回的元素的键。

使用：

const map = new Map([['num',123]])
map.get('num') // 123

has()

作用：返回一个布尔值，指示具有指定键的元素是否存在。

语法：

const map = new Map()
map.has(key)

参数：

key：用于测试 Map 对象中是否存在的元素的键。

使用：

const map = new Map()
map.set('num', 123)

console.log(map.has('num')) // true
console.log(map.has('aaa')) // false

delete()

作用：从该 map 中删除指定键的元素，返回布尔值

语法：

const map = new Map()
map.delete(key)

参数：

key：要从 Map 对象中删除的元素的键。

使用：

const map = new Map();
map.set('bar', 'foo');

console.log(map.delete('bar'));		// true

console.log(map.has('bar'));		// false

clear()

作用：移除该 map 中的所有元素。

语法：

const map = new Map()
map.clear()

使用：

const map = new Map()

map.set('bar', 'baz')
map.set(1, 'foo')
console.log(map.size)  // 2

map.clear()
console.log(map.size)  // 0

keys()

作用：返回一个新的 map 迭代器对象，该对象包含了此 map 中每个元素的键，按插入顺序排列。

语法：

const map = new Map()
const keys = map.keys()

使用：

const map = new Map()

map.set('0', 'foo')
map.set(1, 'bar')

const iterator1 = map.keys()
console.log(iterator1.next().value)		// '0'
console.log(iterator1.next().value)		// 1

// 遍历
iterator1.forEach(item => {
    console.log(item)
})

values()

作用：返回一个新的 map 迭代器对象，该对象包含此 map 中每个元素的值，按插入顺序排列。

语法：

const map = new Map()
const values = map.values()

使用：

const map = new Map()

map.set('0', 'foo')
map.set(1, 'bar')

const iterator1 = map.values()
console.log(iterator1.next().value)		// 'foo'
console.log(iterator1.next().value)		// 'bar'

// 遍历
iterator1.forEach(item => {
    console.log(item)
})

entries()

作用：返回一个新的 map 迭代器对象，该对象包含了此 map 中的每个元素的 [key, value] 对，按插入顺序排列。

语法：

const map = new Map()
map.set(key, value)

使用：

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1.entries();

console.log(iterator1.next().value);
// Expected output: Array ["0", "foo"]

console.log(iterator1.next().value);
// Expected output: Array [1, "bar"]

4.数组的扩展

1. Array.from() 方法

用于将对象(类似数据的对象，包括Set和Map)转为真正的数组

// 类似数组的对象
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr1 = Array.from(arrayLike);
consle.log(arr1);  // ['a', 'b', 'c']

// NodeList 对象
let ps = document.querySelectorAll('p');
let arr2 = Array.from(ps);

// arguments 对象
foo(1,5,5,6,'hello')
function foo() {
  var args = Array.from(arguments);
  console.log(args)
}

2. Array.of() 方法

Array.of() 方法用于将一组值，转换为数组。

Array.of(3, 11, 8)      // [3,11,8]
Array.of(3)             // [3]
Array.of(3).length      // 1

3. for..of 循环

ES6 引入了 for...of 循环，作为遍历所有数据结构的统一的方法，除了对象不能遍历。
用于实现 iterator接口的遍历，例如 Array,Set,Map,...
不能遍历对象
- 起初遍历数组：for、while、do...while
- 在ES5中遍历数组：for...in、forEach、map、filter

for...in  （既可以遍历数组 又可以遍历对象   推荐对象
forEach（只能数组 也推荐数组

在ES6中遍历数组：for...of

for...of （既可以遍历字符串、数组等还可以遍历新的数据结构 主要用来就是遍历新的数据结构

循环变量为数组的值

let set = new Set([11,22,33])
for (let val of set) {
    console.log(val)
}

ES6新增数据类型 ​

1.Symbol ​

2.数据结构 Set ​

2.1 set的创建 ​

2.2 统计成员个数 size ​

2.3 set的方法 ​

add() ​

delete() ​

has() ​

clear() ​

2.4 将Set转换成数组 ​

Array.from() ​

展开运算符... ​

2.5 可用作数组的去重 ​

3.数据结构 map ​

3.1 概述 ​

3.2 构造函数 ​

3.3 属性 ​

size ​

3.3 原型方法 ​

set() ​

get() ​

has() ​

delete() ​

clear() ​

keys() ​

values() ​

entries() ​

4.数组的扩展 ​

1. Array.from() 方法 ​

2. Array.of() 方法 ​

3. for..of 循环 ​

ES6新增数据类型

1.Symbol

2.数据结构 Set

2.1 set的创建

2.2 统计成员个数 size

2.3 set的方法

add()

delete()

has()

clear()

2.4 将Set转换成数组

Array.from()

展开运算符...

2.5 可用作数组的去重

3.数据结构 map

3.1 概述

3.2 构造函数

3.3 属性

size

3.3 原型方法

set()

get()

has()

delete()

clear()

keys()

values()

entries()

4.数组的扩展

1. Array.from() 方法

2. Array.of() 方法

3. for..of 循环