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)
}

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

posted @ 2019-01-31 11:17 Zenquan 阅读(410) 评论(0) 编辑收藏举报

刷新页面返回顶部

Zenquan的技术博客

主页链接：https://fe.u-tools.fun/

ES6知识总结

let与const

箭头函数

模板字符串

Promise

class

Object

Symbol

Set

公告