ES6知识总结

ecmascript 6.0（以下简称 es6）是 javascript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 javascript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

let与const

1、let用来定义变量，const用来定义常量。
2、有块级作用域

for(let i=0;i<5;i++){
    settimeout(()=>{
          console.log(i);//0-4  
    }, 3000)
}

vs

for(var i=0;i<5;i++){
    settimeout(()=>{
          console.log(i);//55555
    }, 3000)//用闭包解决
}

写到这里之前有一次面试的时候，一个面试官说let的块级作用域是怎么实现的？
这个问题其实是在blue的es6课程上有讲过，就是let相当于实现了一个闭包来解决块级作用域

if(true){
    let test = 1;
}
console.log(test);//test is not defined
if(true){
    var test1 = 2;
}
console.log(test1);//2

3、没有变量提升

console.log(a);
var a = 1;//undefined
console.log(b);
let b = 2;//b is not defined

4、暂时性死区

var i = 2;
{
    var  i = 1;
}
console.log(i);//1

let z = 2;
{
    let z = 1;
}
console.log(z);//2

箭头函数

普通函数

• 属于谁，谁调用，指向谁，故指向obj
  区别：

var obj = {
    a: function(){
        console.log(this);
        console.log(1);
    }
}
obj.a();//执行obj中的a()函数
obj.a;//函数本身

)

箭头函数

• 没有独立的作用域，即没有自己的this，指向obj的作用域window

var obj = {
    b: function(){
        //属于谁，谁调用，指向谁，故指向obj
        console.log(this);
    },
    a: ()=>{
        //没有自己的this，指向obj的作用域window
        console.log(this);
    }
}
obj.b();
obj.a();

• 不能做构造函数

let animal = function(){};
let animal = new animal();

let animal = ()=>{};
let animal = new animal();

• 没有prototype

let commonfn = function(){};
let arrowfn = ()=>{};
console.log(commonfn.prototype);//{constructor: ƒ}
console.log(arrowfn.prototype);//undefined

模板字符串

基本用法

let name = 'jomsou'
let str = `
<div>
    <h1 class="title">${name}</h1>
</div>
`;
document.queryselector('body').innerhtml = str;

promise

promise的那些事儿

class

es6开始，javascript正式有了类的概念,用类来实现面向对象。

关键字：class、constructor、extends、super

class person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getname(){
        return this.name;
    }
    getage(){
        return this.age;
    }
}

class man extemds person {
    constructor(name, age, sex){
        super(name, age);
        this.sex = sex;
    }
    getsex(){
        return this.sex;
    }
}

object

object.keys()：返回对象的key值数组
object.assign(): 整合，浅拷贝

//以前
var name = 'jomsou';
var age = 23;
var obj1 = {
    name: name,
    age: age,
    getname: function() {
        return this.name;
    }
}
obj1.getname();
let name = 'jomsou';
let age = 23;
let obj = {
    name,
    age,
    getname(){
        return this.name;
    },
    ['get'+'age'](){
        return this.age;
    }
}
object.keys(obj)

symbol

一种基本的数据类型，创建后的值是唯一的

1、symbol的创建

var sy = symbol(value)

2、symbol有tostring方法

console.log(symbol('1').tostring())//'symbol(1)'

3、symbol可以转化成boolean

console.log(!symbol);//symbol可以转化成boolean

4、symbol不能转化成数字

console.log(symbol(1)+1);//error

5、相同的key值的symbol.for创建symbol相等

let zf2 = symbol.for('zhufeng');
let zf3 = symbol.for('zhufeng');
console.log(zf2==zf3)

6、symbol.keyfor只能找出有symbol.for创建的symbol

let zf2 = symbol.for('zhufeng');
let zf3 = symbol.for('zhufeng');
console.log(zf2==zf3)//相同的key值的symbol.for创建symbol相等
console.log(symbol.keyfor(zf2));
console.log(symbol.keyfor(sy1));//symbol.keyfor只能找出有symbol.for创建的symbol

eg:

var sy1 = symbol();//symbol的创建， var sy = symbol(value)
var sy2 = symbol();
console.log(typeof sy1);
console.log(sy1 == sy2);
let obj = {
    sy1: 'haha',
    [sy1]: 'zf'
};
obj[sy2] = 'zf';
console.log(obj);
//console.log(symbol(1)+1);
console.log(!symbol);//symbol可以转化成boolean
console.log(symbol('1').tostring())//symbol有tostring方法
let zf2 = symbol.for('zhufeng');
let zf3 = symbol.for('zhufeng');
console.log(zf2==zf3)//相同的key值的symbol.for创建symbol相等
console.log(symbol.keyfor(zf2));
console.log(symbol.keyfor(sy1));//symbol.keyfor只能找出有symbol.for创建的symbol

set

1、类似数组 只有value 没有键key

2、通过构造函数方式创建一个set实例

var s1 = new set([1, 2, 3, 4, 5]);
var s2 = new set("12345");

3、参数是一个数组（或者是类似数组只要是有iterable接口）

4、有iterable接口： 数组、arguments、元素集合、set、map、字符串

var arr1 = [1, 2, 3, 4, 5];
console.log(arr1);
var s1 = new set([1, 2, 3, 4, 5]);
var s2 = new set("12345");
console.log(s1);
console.log(s2);
function fn(){
    console.log(new set(arguments));
}
fn(1, 2, 3, 4, 5);

5、会默认去重

function unique(arr){
    var arrset = new set(arr);
    return array.from(arrset);
    //return [...new set(arr)];
}
console.log(unique([1, 1, 2, 5, 2, 5, 6, 5]));//[1, 2, 5, 6]

6、size->个数

add->如果之前没有，则加上，有就不加，返回增加后的set实例 （可以实现链式写法）,参数一次一个

clear->情况， 没有返回值，undefined，没有参数

delete->删除，返回值是布尔值 如果里面有这一项删除成功true， 没有这一项删除失败false

has->判断有没有此项，返回布尔值

s1.add('jomsou');
s1.add(1);
console.log(s1);
var b = s1.delete(1);
var c = s1.delete(10);
console.log(b+'   '+ c+'   '+s1);
console.log(s1.has(5));

foreach->遍历

set实例只有value没有key

item，index: 当前项value

entires： 当前set实例

s1.foreach((item, value, entries)=>{
    console.log(item, value, entries);
})

keys->遍历接口

key： 仍然是value

values

entries->[item, val]

for(var key of s1.keys()){
    console.log(key);
}
for(var val of s1.values()){
    console.log(val);
}
for(var entrie of s1.entries()){
    console.log(entrie);
}
console.log(s1.clear())

应用

//并集
function add(arr1, arr2){
    return [...new set([...arr1, ...arr2])];
}
console.log(add(arr1, arr2));
//交集
function same(arr1, arr2){
    return arr1.filter(item=>arr2.includes(item));
}
console.log(same(arr1, arr2));
//差集
function diff(arr1, arr2){
    return add(arr1, arr2).filter(item=>!same(arr1, arr2).includes(item))
}
console.log(diff(arr1, arr2));