es6（var,let,const,set,map,Array.from()）

时间 2019-12-07

标签 es6 var let const set map array.from array 栏目 JavaScript 繁體版

原文原文链接

1.变量声明--var，const，letjson

1.1 var - （全局做用域，局部做用域）会有变量提高数组

//第一个小例子
<script>
    var num = 123;
    function fn(){
        console.log(num);  // undefined
        var num = 46;
        console.log(num) // 46
    }
    fn()
</script>   
//为何第一个输出值会是undefined，而不是123呢？由于这里存在着变量名的提高，其实上述语句至关于：
<script>
    var num = 123;
    function fn(){
        var num;
        console.log(num);  // undefined
        num = 46;
        console.log(num) // 46
    }
    fn()
</script>

//第二个小例子
<script>
    var num = 123;
    if(true){
        console.log(num) // 123
    　　 var num = 456;
        console.log(num)  // 456
    }
    console.log(num)  // 456
</script>
//这里为何第一个输出值不是undefined，第三个输出值不是123呢？缘由是这样的，由于var不存在块级做用域，且变量名会提高，因此上述代码其实至关于：
<script>
    var num;
    num = 123
    if(true){
    　　console.log(num) // 123
    　　num = 456;
    　　console.log(num)  // 456
    }
    console.log(num)  // 456
</script>

1.2 const - 经常使用来声明常量，且常量不可修改，必须初始化，存在着块级做用域浏览器

//1.无变量提高
<script>
    function fn(){
    console.log(num); 
    const num = 456;
    console.log(num)
    }
    fn()
</script>
//运行上述代码会发现会报错 Uncaught ReferenceError: num is not defined 。这里说明，使用const来定义的常量名并无提高。
//2.必须初始化
<script>
    const num;
    console.log(num)
</script>
//这里运行后发现会报错。 Uncaught SyntaxError: Missing initializer in const declaration 意思是：语法错误，在const声明中没有初始化。
//3.块级做用域
<script>
    const num = 456
    if(true){
        const num = 789;
        console.log(num); // 789
    }
    console.log(num) // 456
</script>

1.3 let - let定义的变量存在着块级做用域，在函数内定义的变量，对函数外部无影响数据结构

//1.块级做用域
<script>
    let num = 789;
    function fn(){
        let num = 46;
        console.log(num) // 46
    }
    fn()
    console.log(num) // 789
</script> 
//2.无变量提高
<script>
    function fn(){
        console.log(num); // Uncaught ReferenceError: num is not defined
        let num = 46;
        console.log(num)
    }
    fn()
</script>

2.set函数

　ES6 提供了新的数据结构 Set。它相似于数组，可是成员的值都是惟一的，没有重复的值。this

2.1 能够对数组进行去重spa

var str = new Set("Hello world!");
for(var str1 of str){
  console.log(str1+" ")  
}
//结果会是这样：H e l o w r d !

function fn(arr){
    return Array.from(new Set(arr))  // Array.from方法能够将 Set 结构转为数组
}
const items = [1,2,3,4,5,6,7,1,2,1,3,1,2,3]
console.log(fn(items))//[1,2,3,4,5,6,7]

let arr1 = [12,13,23,45,46,48,78,79,45,12,13,23];
let arr = new Set(arr1)
console.log([...arr])  // [ 12, 13, 23, 45, 46, 48, 78, 79 ]



let newarr = [1,2,3,4,5,6,7,1,2,1,3,1,2,3]；
newarr = [...new set(newarr)];//[1,2,3,4,5,6,7]
newarr = Array.form(new Set(newarr));//[1,2,3,4,5,6,7]

2.2 set 实例的属性和方法prototype

1.属性
    Set.prototype.constructor：构造函数，默认就是Set函数。
    Set.prototype.size：返回Set实例的成员总数。
2.Set 实例的方法分为两大类：操做方法（用于操做数据）和遍历方法（用于遍历成员）。
    下面先介绍四个操做方法：
        add(value)：添加某个值，返回 Set 结构自己。
        delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
        has(value)：返回一个布尔值，表示该值是否为Set的成员。
        clear()：清除全部成员，没有返回值。

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

Set 结构的实例有四个遍历方法，能够用于遍历成员。
        keys()：返回键名的遍历器
        values()：返回键值的遍历器
        entries()：返回键值对的遍历器
        forEach()：使用回调函数遍历每一个成员

keys方法、values方法、entries方法返回的都是遍历器对象。因为 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），因此keys方法和values方法的行为彻底一致。code

let set = new Set([
		{
	        ID:'1',
	        Robort_name:'桑桑',
	        Wechat_Name:'Only',
	        is_read:'1'
	    },{
	        ID:'2',
	        Robort_name:'33',
	        Wechat_Name:'O',
	        is_read:'0'
	    },{
	        ID:'3',
	        Robort_name:'55',
	        Wechat_Name:'1',
	        is_read:'1'
	    }
    ])
    for (let item of set.keys()) {
    	//keys() 返回键名的遍历器
	  console.log(item);
	}
	for (let i of set.values()) {
		//values() 返回键值的遍历器
		console.log(i);
	}
	for(let i of set.entries()){
		//entries()：返回键值对的遍历器
		console.log(i)
	}

//扩展运算符（...）内部使用for...of循环，因此也能够用于 Set 结构。
	let set = new Set(['red', 'green', 'blue']);
	let arr = [...set];
	console.log(arr)
	//['red', 'green', 'blue']

	//扩展运算符和 Set 结构相结合，就能够去除数组的重复成员。
	let arr1 = [3, 5, 2, 2, 5, 5];
	let unique = [...new Set(arr1)];
	console.log(unique)
	// [3, 5, 2]

	//并且，数组的map和filter方法也能够间接用于 Set 了。
	let set = new Set([1, 2, 3]);
	set = new Set([...set].map(x => x * 2));
	console.log(set)
	// 返回Set结构：{2, 4, 6}
	let set1 = new Set([1, 2, 3, 4, 5]);
	set1 = new Set([...set1].filter(x => (x % 2) == 0));
	// 返回Set结构：{2, 4}

	//所以使用 Set 能够很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。
	let a = new Set([1, 2, 3]);
	let b = new Set([4, 3, 2]);
	// 并集
	let union = new Set([...a, ...b]);
	console.log(union)
	// Set {1, 2, 3, 4}
	// 交集
	let intersect = new Set([...a].filter(x => b.has(x)));
	console.log(intersect)
	// set {2, 3}
	// 差集
	let difference = new Set([...a].filter(x => !b.has(x)));
	console.log(difference)
	// Set {1}

	//若是想在遍历操做中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，而后赋值给原来的 Set 结构；另外一种是利用Array.from方法。
	// 方法一
	let set3 = new Set([1, 2, 3]);
	set3 = new Set([...set3].map(val => val * 2));
	console.log(set3)
	// set的值是2, 4, 6
	// 方法二
	let set4 = new Set([1, 2, 3]);
	set4 = new Set(Array.from(set4, val => val * 2));
	console.log(set4)
	// set的值是2, 4, 6
	//上面代码提供了两种方法，直接在遍历操做中改变原来的 Set 结构。

3.map orm

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），可是传统上只能用字符串看成键。
ES6 提供了 Map 数据结构。它相似于对象，也是键值对的集合，可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以看成键。
Map 的键其实是跟内存地址绑定的，只要内存地址不同，就视为两个键。

const m = new Map();
	const o = {p: 'Hello World'};
	m.set(o, 'content')
	m.get(o) // "content"
	m.has(o) // true
	m.delete(o) // true
	m.has(o) // false
	console.log([...m])

	const map = new Map([
	  ['name', '张三'],
	  ['title', 'Author']
	]);
	map.size // 2
	map.has('name') // true
	map.get('name') // "张三"
	map.has('title') // true
	map.get('title') // "Author"
	console.log([...map]) //[{'name':'张三'},{'title':'Author'}]
	// 其实是这样
	const items = [
	  ['name', '张三'],
	  ['title', 'Author']
	];
	const map = new Map();
	items.forEach(
	  ([key, value]) => map.set(key, value)
	);
	console.log([...map]) //[{'name':'张三'},{'title':'Author'}]

	const set = new Set([
	  ['foo', 1],
	  ['bar', 2]
	]);
	const m1 = new Map(set);
	m1.get('foo') // 

	const m2 = new Map([['baz', 3]]);
	const m3 = new Map(m2);
	m3.get('baz') // 3
	console.log([...m1]) //map转为数组 ['foo',1] ['bar',2]
	console.log([...m2]) //['baz',3]
	console.log([...m3])	//['baz',3]

	const map = new Map();
	map
	.set(1, 'aaa')
	.set(1, 'bbb');
	map.get(1) // "bbb"
	console.log([...map]) //[1,'bbb']

	const map = new Map();
	const k1 = ['a'];
	const k2 = ['a'];
	map
	.set(k1, 111)
	.set(k2, 222);
	map.get(k1) // 111
	map.get(k2) // 222
	console.log([...map]) //[[['a'],111],[['b'],222]]

	let map = new Map();
	map.set(-0, 123);
	map.get(+0) // 123
	map.set(true, 1);
	map.set('true', 2);
	map.get(true) // 1
	map.set(undefined, 3);
	map.set(null, 4);
	map.get(undefined) // 3
	map.set(NaN, 123);
	map.get(NaN) // 123
	console.log([...map]) //[[0,123],['true',1],['true',2],[undefined,2],[null,4],[NaN,123]]

实例的属性和操做方法
（1）size 属性
size属性返回 Map 结构的成员总数。

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

map.size // 2

（2）set(key, value)
set方法设置键名key对应的键值为value，而后返回整个 Map 结构。若是key已经有值，则键值会被更新，不然就新生成该键。

const m = new Map();

m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

Set方法返回的是当前的Map对象，所以能够采用链式写法。

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

（3）get(key)
get方法读取key对应的键值，若是找不到key，返回undefined。

const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数

m.get(hello)  // Hello ES6!

（4）has(key)
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

（5）delete(key)
delete方法删除某个键，返回true。若是删除失败，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

（6）clear()
clear方法清除全部成员，没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回全部成员的遍历器。
forEach()：遍历 Map 的全部成员。

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.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

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方法、filter方法，能够实现 Map 的遍历和过滤（Map 自己没有map和filter方法）。

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

此外，Map 还有一个forEach方法，与数组的forEach方法相似，也能够实现遍历。

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

forEach方法还能够接受第二个参数，用来绑定this。

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

与其余数据结构的互相转换
（1）Map 转为数组
前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）数组转为 Map
将数组传入 Map 构造函数，就能够转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

（3）Map 转为对象
若是全部 Map 的键都是字符串，它能够无损地转为对象。若是有非字符串的键名，那么这个键名会被转成字符串，再做为对象的键名。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

　（4）对象转为 Map

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

　（5）Map 转为 JSON
Map 转为 JSON 要区分两种状况。一种状况是，Map 的键名都是字符串，这时能够选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

　　另外一种状况是，Map 的键名有非字符串，这时能够选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

　　（6）JSON 转为 Map
JSON 转为 Map，正常状况下，全部键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

4.Array.from()方法

Array.from方法用于将两类对象转为真正的数组：(类数组)相似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
//那么，若是将上面代码中length属性去掉呢？实践证实，答案会是一个长度为0的空数组。
//这里将代码再改一下，就是具备length属性，可是对象的属性名再也不是数字类型的，而是其余字符串型的，代码以下：
let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

　会发现结果是长度为4，元素均为undefined的数组
　　因而可知，要将一个类数组对象转换为一个真正的数组，必须具有如下条件：
　　一、该类数组对象必须具备length属性，用于指定数组的长度。若是没有length属性，那么转换后的数组是一个空数组。
　　二、该类数组对象的属性名必须为数值型或字符串型的数字
　　ps: 该类数组对象的属性名能够加引号，也能够不加引号

//实际应用中，常见的相似数组的对象是 DOM 操做返回的 NodeList 集合，以及函数内部的arguments对象。Array.from均可以将它们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});
// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}
//上面代码中，querySelectorAll方法返回的是一个相似数组的对象，能够将这个对象转为真正的数组，再使用filter方法。

//只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
//上面代码中，字符串和 Set 结构都具备 Iterator 接口，所以能够被Array.from转为真正的数组。

//若是参数是一个真正的数组，Array.from会返回一个如出一辙的新数组。
Array.from([1, 2, 3])
// [1, 2, 3]

//值得提醒的是，扩展运算符（...）也能够将某些数据结构转为数组。
// arguments对象
function foo() {
  const args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]
//扩展运算符背后调用的是遍历器接口（Symbol.iterator），若是一个对象没有部署这个接口，就没法转换。Array.from方法还支持相似数组的对象。所谓相似数组的对象，本质特征只有一点，即必须有length属性。所以，任何有length属性的对象，均可以经过Array.from方法转为数组，而此时扩展运算符就没法转换。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
//上面代码中，Array.from返回了一个具备三个成员的数组，每一个位置的值都是undefined。扩展运算符转换不了这个对象。

//对于尚未部署该方法的浏览器，能够用Array.prototype.slice方法替代。

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

//Array.from还能够接受第二个参数，做用相似于数组的map方法，用来对每一个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
下面的例子是取出一组 DOM 节点的文本内容。

let spans = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

//下面的例子将数组中布尔值为false的成员转为0。
Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

//另外一个例子是返回各类数据的类型。
function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']
//若是map函数里面用到了this关键字，还能够传入Array.from的第三个参数，用来绑定this。

//Array.from()能够将各类值转为真正的数组，而且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就能够先对它的值进行处理，而后转成规范的数组结构，进而就可使用数量众多的数组方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
//上面代码中，Array.from的第一个参数指定了第二个参数运行的次数。这种特性可让该方法的用法变得很是灵活。

//Array.from()的另外一个应用是，将字符串转为数组，而后返回字符串的长度。由于它能正确处理各类 Unicode 字符，能够避免 JavaScript 将大于\uFFFF的 Unicode 字符，算做两个字符的 bug。

function countSymbols(string) {
  return Array.from(string).length;
}