前端知识点总结ES6入门

51次阅读

共计 5589 个字符，预计需要花费 14 分钟才能阅读完成。

1.var、let、const

ES6 推荐在函数中使用 let 定义变量
const 用来声明一个常量 (值类似值不能改变，引用类型地址不能改变)
let 和 const 只在最近的一个块中（花括号中）有效

//1.let 不能重复申明   
var n = 10;
var n = 100;
console.log(n)  //100

let a=10
let a=100
console.log(a) // SyntaxError 'a' has already been declared

//2.var 能改变全局作用域（变量提升）let 则不能
var b =1
{var b=10}
console.log(b) //10
let c=1
{let c=10}
console.log(c) //1

//3. 同作用域内不能重申明
var d=1
let d=2
console.log(d) // SyntaxError'd' has already been declared
let  d=1
var  d=2
console.log(d)  //SyntaxError 'd' has already been declared

//4.var 不管作用域对于同个变量赋值则更改
var e=1
{let e=2}
console.log(e) //1

let  f=1
{var f=2}
console.log(f) //SyntaxError 'f' has already been declared

//5. 常量不能重新赋值
const A = [1,2];
A.push = 3;
console.log(A); //[1,2,3]
A = 10; //Error 这里地址改变了

2. 箭头函数、this

ES6 箭头函数内的 this 指向的是函数定义时所在的对象，而不是函数执行时所在的对象。箭头函数背部没有自己的 this，this 总是指向上一层的 this，层层递上，直到找到有自己的 this 函数为止。
ES5 函数里的 this 总是指向函数执行时所在的对象，尤其在非严格模式下，this 有时候会指向全局对象。

b. 箭头函数不能用构造函数，因为它没有自己的 this，无法实例化。

c. 箭头函数没有自己的 this，所以函数内也不存在 arguments 对象。这里就可以 ES6 的扩展运算符来代替。

d. 函数的默认赋值
ES5，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。
ES6，函数可以默认赋值。

var foo = function(){return 1;};
// 等价于
let foo = () => 1;

箭头函数中的 this 指的不是 window，是对象本身。function aa(){
  this.bb = 1;
  setTimeout(() => {
    this.bb++; //this 指向 aa
    console.log(this.bb);
  },500);
}

aa(); //2

3. 字符串模板语法

不使用模板字符串
var name = 'Your name is' + first + ''+ last +'.'
使用模板字符串
var name = Your name is ${first} ${last}.

4.class

提供了关键字 class 定义类
提供了关键字 extends 继承一个类
super() 执行父类的初始化函数
提供了对象字面量, 定义一个函数

class Animal {constructor(){console.log('我是一个动物');
  }
}

class Person extends Animal {constructor(){super();
    console.log('我是一个程序员');
  }
}

let aa = new Person();
// 我是一个动物
// 我是一个程序员

5. 解构

解构赋值是 ES6 中推出的一种高效、简洁的赋值方法

// 通常情况下
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

// 解构赋值
let [first, second, third] = someArray; // 比上面简洁多了吧

// 还有下面例子
let [,,third] = [1,2,3];
console.log(third); //3

let [first,...last] = [1,2,3];
console.log(last); //[2,3]

// 对象解构
let {name,age} = {name: "lisi", age: "20"};
console.log(name); //lisi
console.log(age); //20

// 注意
let {ept1} = {};
console.log(ept1); //undefined
let {ept2} = {undefined};
console.log(ept2); //undefined
let {ept3} = {null};
console.log(ept3); //null

6. 新增方法

is()方法，比较两个目标对象，用来完善“===”方法。

NaN === NaN      //false
Object.is(NaN,NaN);     //true

assign()方法，用于对象新增属性或者多个对象合并。

const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target);          //{a:1,b:2,c:3}

ES6 在原型上新增了 Includes()方法，取代传统 indexOf()查找字符串的方法。
includes(): 找得到返回 true，找不到返回 false。
indexOf(): 找得到返回 0，找不到返回 1。
此外，还新增了 startsWith()，endsWith()，padStart()，padEnd()，repeat()等方法，可用于查找，补全字符串。

let str = `xiao ming`;
console.log(str.includes(`xiao`));     //true

7.Symbol 类型

Symbol 是 ES6 引入的第七种原始数据类型，所有 Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。
Symbol 值通过 Symbol 函数生成。
对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种是新增的 symbol 类型，凡是属性名属于 symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
Symbol 值可以显式转为字符串。另外，Symbol 值也可以转为布尔值，但是不能转为数值。

let s1 = Symbol('foo');
let s2 = Symbol('foo');
console.log(s1===s2) //false

let s1 = Symbol('foo');
let s2 = Symbol('bar');
console.log(s1,typeof(s1));
console.log(s2);

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

console.log(s1,typeof(s1.toString()))
console.log(s2)

8.Set

类似 Array 的新的数据结构
Set 实例的成员都是唯一的，不重复的。这个特性可以轻松实现数组去重。

let array = [1,2,3,2,3]；let set = new Set(array);
console.log(set);           //[1,2,3]

let o1 = {age:11}
let o2 = {age:12}
let set = new Set([o1,o2]);
console.log(set);           // 结果里面有两个对象吧，因为对象的内存地址不一样
let o2 = o1;
let set = new Set([o1,o2]);
console.log(set);           // 结果里面有一个对象, 对象的内存地址一样

属性
    .size 返回 set 集合的大小
方法
    .add()< 相当于数组的 push()> .delete(value) .has(value) .clear()清除数组

9.Map

Map 是 ES6 引入的一种类似 Object 的新的数据结构，Map 可以理解为是 Object 的超集，打破了以传统键值对形式定义对象，对象的 key 不再局限于字符串，也可以是 Object。

let map1 = new Map()
let obj = {name:'tiger'}
map1.set(obj,'hello')     // 设置键值对
console.log(map1) // {{name:tiger}:hello}
map1.set(1,'hello1')
map1.set(2,'hello2')
console.log(map1) // {{name:tiger}:hello,1 => "hello1", 2 => "hello2"}
// 遍历键值对
for(let item of map1){console.log(item);
}
// 遍历键
for(let item of map1.keys()){console.log(item);
}
// 遍历值
for(let item of map1.value()){console.log(item);
}

10.Promise 对象

function ajaxPromise() {return new Promise(function(reslove,reject) {console.log("正在执行...");
        if(true) {reslove("success")
        }else{reject("fail")
        }
     })
 }

ajaxPromise().then(value => {console.log(value);
}).catch(err => {console.log(err);
})

11.Generator 函数

执行 Generator 函数会返回一个遍历器对象，每一次 Generator 函数里面的 yield 都相当一次遍历器对象的 next()方法，并且可以通过 next(value)方法传入自定义的 value，来改变 Generator 函数的行为。
定义函数的时候需要加上星号 , 例：function test(){}
函数体里面包含 yield(暂停执行的标志), 代码运行到 yield 的时候便会暂停执行，然后通过.next()，让代码继续执行，直到下一个 yield 或者函数体结束符。

function* demo() {console.log(1)
  yield 111
  console.log(2)
  yield 222
  console.log(3)
  return 333
}
let g = demo()
let val1 = g.next()
console.log('val1',val1)
// 打印 1，val1 = {value: 111, done: false}

let val2 = g.next()
// 打印 2，val2 = {value: 222, done: false}
console.log('val2',val2)
let val3 = g.next()
console.log('val3',val3)

12.async 函数

async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await，仅此而已。

const gen = function* () {const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
const asyncReadFile = async function () {const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async function t(){
    var a = new Promise(function (resolve, reject) {console.log(1);
            resolve(9);
            console.log(2);
        })
    var b = new Promise(function (resolve, reject) {console.log(3);
            resolve(8);
            console.log(4);
        })
    console.log(5);
    b=await b;
    a=await a;
    console.log(b);
    console.log(a);
    console.log(6);
}

t();
console.log(7);
// 123457896

13. 模块

使用 import 取代 require。

// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// good
import {func1, func2} from 'moduleA';
// commonJS 的写法
var React = require('react');

var Breadcrumbs = React.createClass({render() {return <nav />;}
});

module.exports = Breadcrumbs;

// ES6 的写法
import React from 'react';

class Breadcrumbs extends React.Component {render() {return <nav />;}
};

export default Breadcrumbs;

正文完
node.js 前端工程师
发表至： javascript
2019-11-13
 0
javascript进阶必备的二叉树知识
解决微信返回上一页之后，页面不刷新
关于javascript:JavaScriptES6数组去重的四种方法
关于javascript:jsfor循环时间复杂度