简介
ECMAScript 6.0,简称ES6,第一个版本是在2015年6月进行发布,所以也称之为《ECMAScript 2015 标准》(简称 ES2015)。
JavaScript是ECMAScript的一种实现(分支),遵循ECMAScript标准的。目前主流浏览器已经可以完美兼容和使用ES6。ES7/8部分新特性也已经被用于我们的实际开发中。
let和const
ES6新增了let和const来声明变量,主要是解决var声明变量所造成的困扰和问题
- var可以重复声明变量
- var存在变量提升
- var不能用于定义常量
- var不支持块级作用域
1) 不可以重复声明变量
let num = 6;
let num = 6;
console.log(num);
SyntaxError: Identifier 'num' has already been declared
2) 不存在变量提升
num = 6;
console.log(num);
let num;
ReferenceError: num is not defined
在JS中,var定义的函数及变量的变量提升:
-
函数及变量的声明都将被提升到函数的最顶部。
-
函数整体提升,变量声明提升
-
变量可以在使用后声明,也就是变量可以先使用再声明。
-
只有声明的变量会提升,初始化的不会。
ps:这是JS的特点即时编译,它仍是解释型语言。
3) 可以定义常量
不能给常量重新赋值,但如果是引用类型的话可以进行修改。
js中分基本类型和引用类型,分别存放在栈和堆中
const pi = 3.1415926;
pi = 3.14;
console.log(pi);
TypeError: Assignment to constant variable.
//引用类型可以修改内容
const user = {
name: 'abc',
pwd: '123'
};
user.name = 'cba';
console.log(user);
4) 块级作用域
如果用var定义变量,变量是通过函数或者闭包拥有作用域;但使用let定义变量,不仅仅可以通过函数/闭包隔离,还可以通过块级作用域隔离。
块级作用域用一组大括号定义一个块,使用 let 定义的变量在大括号的外部是访问不到的,此外,let声明的变量不会污染全局作用域。
{
let a = 1;
var b = 2;
}
console.log(b);
console.log(a);
ReferenceError: a is not defined
字符串操作
1) 新增的字符串操作
startsWith(); //判断字符串是否以 XX 开头
endsWith(); //判断字符串是否以 XX 结尾
includes(); //判断字符串中是否包含 XX
repeat(); //拷贝n份
padStart(); //用于头部补全,
padEnd(); //用于尾部补全;
//第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
2) 模板字符串
模板字符串用反引号(`)包含,变量用${}括起来
let name = '小明';
let age = 5;
let template = `我的名字是${name},我今年${age}岁了`
console.log(template);
//我的名字是小明,我今年5岁了
所有模板字符串的空格和换行,都是被保留的,如果你不想要这个换行,可以使用trim
方法消除它
延展操作符
当一个函数的参数有很多个的时候,这时候就可以传递一个数组作为参数,一般使用function.prototype.apply
,
在es6中 ...args
就可直接将数组args作为参数传入函数。
function doStuff(x, y, z) {
console.log(x, y, z);
}
let args = [0, 1, 2];
// 调用函数,传递args参数
doStuff.apply(null, args); //apply在构造函数中用于改变this值
doStuff(...args);
//合并数组
let arr1 = ['two', 'three'];
let arr2 = ['one', ...arr1, 'four', 'five'];
console.log(arr2);
//拷贝数组
let arr1 = ['one', 'two', 'three'];
let arr2 = [...arr1];
对象也可以使用延展操作符,但是注意: 如果对象中的属性一致, 会被覆盖
函数操作
1) 设置默认参数
function logPerson(name, sex = '男', age = 20) {
console.log(name);
console.log(sex);
console.log(age);
}
logPerson();// undefined 男 2
箭头函数
箭头函数简化了函数的的定义方式;
一般以 “=>” 操作符左边为输入的参数;而右边则是进行的操作以及返回的值 inputs => output
let func = (name, age) => {
let str = `我的名字是${name},我${age}岁了`;
console.log(str);
}
func('小明',5);
注意:
-
多个参数要用()包起来,函数体有多条语句需要用{}包起来;
-
箭头函数根本没有自己的this,所以内部的this就是外层代码块的this。 正是因为它没有this,从而避免了this指向的问题;
对于普通函数,this始终指向全局对象window;对于构造函数,this则指向新创建的 对象;对于方法,this指向调用该方法的对象
-
箭头函数中没有arguments对象。
let obj = {
birth: 1990,
getAge: function () {
let b = this.birth; // 1990
let fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
let fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
类操作
在之前定义类是通过构造函数来操作的,es6新增了class关键字,此时,我们也可以像其它语言一样来创建各种类了。方法不用写在prototype
上了。
class Person {`在这里插入代码片`
constructor(name, age) {
this.name = name;
this.age = age;
}
print() {
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
}
集合操作
Set
一个Set是一堆东西的集合,Set有点像数组,不过跟数组不一样的是,
Set里面不能有重复的内容;
// 创建一个集合
let set = new Set(['张三', '李四', '王五', '张三', '李四']);
console.log(set);
// 一个属性
console.log(set.size);
// 四个方法
// add
console.log(set.add('刘德华').add('旋之华'));
console.log(set);
// delete
console.log(set.delete('张三'));
console.log(set.delete('李四'));
console.log(set);
// has
console.log(set.has('张三'));
console.log(set.has('张三1'));
// clear
console.log(set.clear()); // undefined
console.log(set);
Map
Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
如果你需要“键值对”的数据结构,Map比Object更合适。
它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
// 创建一个Map
let obj1 = {a: 1}, obj2 = {b: 2};
const map = new Map([
['name', '张三'],
['age', 18],
['sex', '男'],
[obj1, '今天天气很好'],
[obj2, '适合敲代码'],
[[1,2], 'hhh']
]);
console.log(map);
console.log(map.size);
// set和get
map.set('friends', ['赵六', '力气']).set(['dog'], '小花');
console.log(map);
console.log(map.get('name'));
console.log(map.get(obj1));
// delete
map.delete(obj1);
console.log(map.delete('xxxx'));
console.log(map);
// has
console.log(map.has(obj1));
console.log(map.has(obj2));
// clear
map.clear();
console.log(map);
// 遍历
map.forEach((value, index) => {
console.log(index + ':' + value);
});
// 注意事项
map.set({}, '呵呵呵呵呵');
map.set({}, '哈哈哈哈');
console.log(map);
console.log({} === {});