ES6的部分知识

最新推荐文章于 2024-07-23 11:32:13 发布

xj1216wt

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量39

点赞数

文章标签： es6 javascript java

本文链接：https://blog.csdn.net/xj1216wt/article/details/133847071

版权

var，Let，const 三个的区别

Let

1.let 声明的变量只在 let 命令所在的代码块内有效。
2.let 只能声明一次 var 可以声明多次:
3.不存在变量提升
4.不影响作用域
注：通常与循环一起使用

const

 1.const 声明一个只读的常量，一旦声明，常量的值就不能改变。
2.声明必须赋初始值
3.标识符一般为大写
4.只能声明一次
5.块级作用域
注：对象和数组修改不会触发const错误

（一）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，
     var不存在块级作用域。块级作用域解决了ES5中的两个问题.
     1.内层变量可能覆盖外层变量。
     2.用来计数的循环变量泄露为全局变量

（二）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（三）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。
     const和let不允许重复声明变量。
（四）暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，
     称为暂时性死区。使用var声明的变量不存在暂时性死区。
（五）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

结构赋值的含义：

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

…剩余运算符|扩展运算符
注：通常写在最后

静态方法给对象添加一个新属性

示例写法

Let a = {};
Object.defineProperty(a, ‘num’, {
Value:”1”,
Writable:true,
Configurable:false,
Enumerable:”true”
})

含义：
Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。
Object.defineProperty(操作的对象, 键名, {value:键值})
writable 设置为false不允许修改defineProperty对象添加的值，true允许修改
enumerable设置为true允许被循环（枚举）拿取值，false不予许
configurable false不可被删除，true可以删除

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，

还新增了 Symbol 。

基本用法

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，
为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

使用场景

作为属性名
用法
由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

示例：
let sy = Symbol("key1");
 
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined

注意点

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

Symbol.for()

含义：
Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中
是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值 ,
若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

示例：
let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

Symbol.keyFor()

含义：

示例：
let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

Map 对象

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

Map 中的 key

key 是字符串

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'

key 是对象

示例：
var myMap = new Map();
var keyObj = {}, 
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}

key 是函数

示例：
var myMap = new Map();
var keyFunc = function () {}, // 函数
myMap.set(keyFunc, "和键 keyFunc 关联的值");
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}

key 是 NaN

var myMap = new Map();
myMap.set(NaN, "not a number");
myMap.get(NaN); // "not a number"
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，NaN作为Map的键来说是没有区别的。

for…of

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] 数组。
这个 keys 方法返回一个新的 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 对象的操作

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]);

Set 对象

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

Set 中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：
+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
undefined 与 undefined 是恒等的，所以不重复；
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

Set 对象作用

1.数组去重
var mySet = new Set([1, 2, 3, 4, 4]);
[…mySet]; // [1, 2, 3, 4]
2.并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([…a, …b]); // {1, 2, 3, 4}
3.交集
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}
4.差集
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}

Map的特性

	// Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
	// Map 对象记得键的原始插入顺序。
	// Map 对象具有表示映射大小的属性。
	// Map 对象的几个常用方法和属性
	// new Map() 创建新的 Map 对象。
	// set() 为 Map 对象中的键设置值。
	// get() 获取 Map 对象中键的值。
	// entries() 返回 Map 对象中键/值对的数组。
	// keys() 返回 Map 对象中键的数组。
	// values() 返回 Map 对象中值的数组。

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 的键值对个数只能手动计算

set对象的特性和常用方法

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

new Set() 创建新的 Set 对象。
add() 向 Set 添加新元素。
clear() 从 Set 中删除所有元素。
delete() 删除由其值指定的元素。
has() 如果值存在则返回 true。
forEach() 为每个元素调用回调。
keys() 返回 Set 对象中值的数组。
size 返回元素个数。

.set对象与map对象的区别

Set对象可以接收一维数组和字符串类型添加值
Set对象只有value值
Set对象可以对数组去重

arguments

含义：arguments没有形参接收时，在函数体内部可接受所有传入的实参，以数组形式存储

let f = ()=>{
// console.log(arguments);
//会报错，Es6箭头函数没有arguments
// }

箭头函数里面没有 this 对象，此时的 this 是外层的 this 对象，即 Window

最后重点！！！

改变this指向的方法

1.取一个变量 var _this=this;
2.使用箭头函数
3.使用setTimeout延时器
4.call
5.apply
6.bind
7.function.prototype

箭头函数的特性

1.不绑定arguments，用rest参数…解决
2.本身没有this的概念，捕获其所在上下文的 this 值，作为自己的 this 值，this指向全局
3.箭头函数不能使用new（会报错）
4.箭头函数没有原型属性(prototype)
5.箭头函数不能当做Generator函数,不能使用yield关键字
6.箭头函数不能换行
7.箭头函数有constructor、length属性
8.箭头函数可以立即执行