Es6

1.变量的定义:let  (let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。)变量提升的问题。

常量的定义:const

2.模板字符串:  ${} (类似于 “+”字符串拼接)

// 1.includes:判断是否包含然后直接返回布尔值

let str = 'hahay'

    console.log(str.includes('y')) // true

// 2.repeat: 获取字符串重复n次

    let s = 'he'

    console.log(s.repeat(3)) // 'hehehe'

//如果你带入小数, Math.floor(num) 来处理

3.函数

函数默认值 

ES5我们给函数定义参数默认值:(num传入为0的时候就是false, 此时num = 200 与我们的实际要的效果明显不一样)

function action(num) {

        num = num || 200

        //当传入num时,num为传入的值

        //当没传入参数时,num即有了默认值200

        return num

    }

ES6为参数提供了默认值:

function action(num = 200) {

        console.log(num)

    }

    action() //200

    action(300) //300

4.箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

不需要function关键字来创建函数

省略return关键字

继承当前上下文的 this 关键字

//例如:

    [1,2,3].map( x => x + 1 )

//等同于:

    [1,2,3].map((function(x){

        return x + 1

    }).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{};例如:

    var people = name => 'hello' + name

    //参数name就没有括号

5.拓展的对象功能

ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的

function people(name, age) {

        return {

            name: name,

            age: age

        };

    }

键值对重名,ES6可以简写如下:

function people(name, age) {

        return {

            name,

            age

        };

    }

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法:

    const people = {

        name: 'lux',

        getName: function() {

            console.log(this.name)

        }

    }

ES6通过省略冒号与 function 关键字,将这个语法变得更简洁

    const people = {

        name: 'lux',

        getName () {

            console.log(this.name)

        }

    }

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一参数即为目标对象。在实际项目中,我们为了不改变源对象。一般会把目标对象传为{}

    const obj = Object.assign({}, objA, objB)

6.解构赋值

7.import 和 export

import导入模块、export导出模块

//全部导入

import people from './example'

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入

//该模块的所有导出都会作为对象的属性存在

import * as example from "./example.js"

console.log(example.name)

console.log(example.age)

console.log(example.getName())

//导入部分

import {name, age} from './example'

// 导出默认, 有且只有一个默认

export default App

// 部分导出

export class App extend Component {};

8. Promise

在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求

fetch('/api/todos')      .then(res=>res.json())      .then(data=>({ data }))      .catch(err=>({ err }));

今天看到一篇关于面试题的很有意思。

setTimeout(function(){console.log(1)    },0);newPromise(functionexecutor(resolve){console.log(2);for(vari=0; i<10000; i++ ) {        i ==9999&& resolve();      }console.log(3);    }).then(function(){console.log(4);    });console.log(5);

当然以上promise的知识点,这个只是冰山一角。需要更多地去学习应用。

9.Generators

生成器( generator)是能返回一个迭代器的函数。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号,机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了,直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时,它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值,它返回的对象具有两个属性:done和value。value是你获得的值,done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子,每张排队号就是这里的value,打印票的纸是否用完就这是这里的done。

// 生成器function*createIterator(){yield1;yield2;yield3;    }// 生成器能像正规函数那样被调用,但会返回一个迭代器letiterator = createIterator();console.log(iterator.next().value);// 1console.log(iterator.next().value);// 2console.log(iterator.next().value);// 3

那生成器和迭代器又有什么用处呢?

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事,我们的函数并不会等待异步调用完再执行,你可能会想到用回调函数,(当然还有其他方案比如Promise比如Async/await)。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了,咱们也不能手动一直调用next()方法,你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

functionrun(taskDef){//taskDef即一个生成器函数// 创建迭代器,让它在别处可用lettask = taskDef();// 启动任务letresult = task.next();// 递归使用函数来保持对 next() 的调用functionstep(){// 如果还有更多要做的if(!result.done) {                result = task.next();                step();            }        }// 开始处理过程step();        }

生成器与迭代器最有趣、最令人激动的方面,或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用 yield 来等待异步操作结束。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354