1、ES6是什么?用来做什么?
-
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版
-
它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
-
ES6提供了大量的语法糖
-
ES6 的出现主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念
-
目前存在少数低版本浏览器的 JavaScript 是 ES5 版本,大多数的浏览器已经支持 ES6
2、Let和Const
(1)let声明变量,可变
const定义常量(实际指的是变量和的内存地址),不可变,只能在其声明或定义的代码块内有效
- let:ES6新增,用于声明变量,有块级作用域
- var:ES5中用于声明变量的关键字,存在各种问题
- 如果你的代码里还存在 var,那就不太好了!
注:若区块中存在let或者const命令,则这个区块对这些变量和常量在一开始就行成封闭作用域,只要在声明之前使用就会报错(可能会出现暂时性死区)不能重复声明,否则报错。
(2)let命令存在块级作用域
if (true) {
var a = 10;
let b = 20;
}
console.log(a); //10
console.log(b); //Uncaught ReferenceError: b is not defined
上面代码在代码块之中,分别用var和let声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。
(3)Let不存在变量提升
//var的情况 console.log(foo); var foo = 2; //undefined //let的情况 console.log(bar); let bar = 2; //ReferenceError: Cannot access 'bar' 上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。 变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。 因此,使用let声明变量,极大的消除了代码的潜在bug的隐患 (4)Let暂时性死区 只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。 var temp = 123; if(true){ temp = 'abc'; //ReferenceError: Cannot access 'temp' let temp; }
3、ES6提供的模板字符串
注意:ES6模板字符串中必须要使用反引号。
const name = "why";
const age = 12;
const height = 1.33;
// ES6提供的模板字符串
const message = my name is ${name},age is ${age},height is ${height}
;
console.log(message); //my name is why,age is 12,height is 1.33
const info = age double is ${age * 2}
;
console.log(info); //age double is 24
function doubleAge() {
return age * 2;
}
const info2 = double age is ${doubleAge()}
;
console.log(info2); //double age is 24
4、标签模块字符串的使用
// 第一个参数依然是模块字符串中的整个字符串,只是被切成多块,放到一个数组中
// 第二个参数是某开字符串中第一个${}
function foo(m, n) {
console.log(m, n, "----");
}
const name = "why";
const age = 12;
foohello${name}wor${age}ld
; //[ 'hello', 'wor', 'ld' ] why ----
5、ES6中函数的默认参数
//有默认值的形参最好放到最后
function bar(x, y, z = 20) {
console.log(x, y, z); //undefined 10 30
}
bar(undefined, 10, 30);
// 有默认值的函数的Length属性
function baz(x = 2, y, z, m) {
console.log(x, y, z, m);
}
console.log(baz.length); //0
6、ES6中函数的剩余参数
function foo(m, n, ...args) {
console.log(m, n); //20 30
console.log(args); //[ 40, 50, 50 ]
}
foo(20, 30, 40, 50, 50);
7、箭头函数的语法
(1)如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
let f = () => 5;
// 等同于
let f = function() { return 5 };
let sum = (num1, num2) => {
return num1 + num2;
};
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};
(2)由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
let getTempItem = id => ({ id:id, name:'Temp' })
使用箭头函数的注意点
1.函数体内的this对象。
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
或者说:箭头函数当方法使用时没有定义this绑定,而是捕获所在上下文的 this ,作为自己的 this 。
8、Set和Map
(一)Set
类似于数组,其成员唯一,不重复
Set本身是一个构造函数,用于生产Set数据结构
let s=new Set();
(1)Set函数可以接受一个数组,作为参数,用于初始化
(2)向Set加入值时不会发生数据转换,即1和’1’为不同的值
(3)在Set内部,两个NaN相等
(4)Set实例的属性
Set.prototype.Constructor():构造函数,就是Set()
Set.prototype.size():返回Set实例成员总数,长度
add(value):添加值,返回Set本身
delete(value):删除值,返回一个布尔值,表删除是否成功
has(value):返回布尔值,表参数是否为Set成员
clear():清除所有成员,无返回值
(5)遍历
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach(function(){}):使用回调函数遍历每个成员,无返回值(可加参2,表示绑定的this对象)
(二)WeaKSet
与Set类似,表不重复的集合
与Set的区别
(1)WeakSet的成员只能是对象,不能是其他值
(2)WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用
(3)WeakSet的成员不能引用,因为其随时可能消失
(4)WeakSet本生是一个构造函数,使用生成WeakSet数据结构
let w = new WeakSet();
可接受一个数组或者类似于数组的对象作为参数来初始化
(5)WeakSet的方法
WeakSet.prototype.add(value ):添加新成员
WeakSet.prototype.delete(value):删除指定成员
WeakSet.prototype.has(value):返回布尔值,表指定值是否在WeakSet实例中
WeakSet无size属性,无法遍历其成员
(三)Map
类似于对象,也是键值组合
其键的范围不限于字符串,可为各种数据类型的值(包括对象)均可当做键
使用Map()构造函数生成
let m = new Map();
(1)Map可接受一个数组作为参数,其数组成员为一个个表示键值对的数组
(2)若一个键多次赋值,则后面的覆盖前面的值
(3)若读取一个未知的键,则返回undefined
(4)Map的键实际上绑定的是地址值,只要地址不同,即视为两个键(解决了同名属性碰撞的问题)
(5)Map实例的属性方法
1、size():返回Map结构的成员总数
2、set(key,value):设置key值所对应的键,然后返回Map结构。若key已经有值,则赋值更新,否则新生成该键值
3、get(key):获取key对应的值,若找不到key则返回undefined
4、has(key):返回一个布尔值,表示ley是否在Map结构中
5、delete(key):删除某个键,删除成功则返回true,反之返回false
6、clear():清除所有成员,无返回值
(6)遍历
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach(function(){}):遍历Map所有成员
Map的遍历顺序就是插入顺序
(四)Map与其他数据类型的转化
(1)Map转数组
Map转化为数组最快的方法时结合使用扩展运算符( . . . )
(2)数组转Map
将数组传入构造函数即可
(3)Map转对象
若Map所有键都是字符串,则可以转为对象
function strMapToObj(strMap){
let obj = Object.create(null);
for (let [k,v] of strMap){
obj[k]=v;
}
return obj;
}
(4)对象转Map
function objToStrMap(obj){
let strMap=new Map();
for(let k of Object.keys(obj)){
strMap.set(k.obj[k]);
}
return strMap;
}
(5)Map转JSON
情况一:Map键名都是字符串,可以转为对象JSON
function StrMapToJson(StrMap){
reutrn JSON.stringify(strMapToObj(strMap));
}
情况二:Map键名中含有非字符串,转为数组JSON
function mapToArrayJson(map){
return JSON.stringify(...map);
}
(6)JSON转Map
正常情况所有键名都是字符串
function jsonToStrMap(jsonStr){
return objToStrMap(JSON.parse(jsonStr));
}
特殊情况:在整个JSON就是一个数组,且数组成员本身又是由一两个成员的数组,此时应该一一对应的转为Map(数组转为JSON的逆操作)
function jsonToMap(jsonStr){
return new Map(JSON.parse(jsonStr));
}
(五)WeakMap
与Map结构类似,也用于生成键值对的集合
通过WeakMap函数生成
let wMap = new weakMap();
(1)可使用set方法添加成员
(2)可接受一个数组,作为构造函数的参数
(3)WeakMap与Map的区别
WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名(即数组和Symbol值作为WeakMap的键名时会报错)
WeakMap的键名所指向的对象不计入垃圾回收机制(会自动被移除,有助于防止内存泄漏)
WeakMap没有遍历操作,也,没有size属性
无法清空,即没有clear()方法
(4)WeakMap的语法
get()
set()
has()
delete()