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 这里地址改变了
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
不使用模板字符串 var name = 'Your name is' + first + '' + last + '.' 使用模板字符串 var name = Your name is ${first} ${last}.
提供了关键字 class 定义类
提供了关键字 extends 继承一个类
super()执行父类的初始化函数
提供了对象字面量, 定义一个函数
class Animal { constructor(){ console.log('我是一个动物'); } } class Person extends Animal { constructor(){ super(); console.log('我是一个程序员'); } } let aa = new Person(); //我是一个动物 //我是一个程序员
解构赋值是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
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
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)
类似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()清除数组
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); }
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); })
执行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)
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
使用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;
我来评几句
登录后评论已发表评论数()