一些简单的ES6语法

简介

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({} === {});