ES6学习笔记

1.JavaScript包含3个部分,分别是ECMAScript、DOM和BOM。

ES5是ECMAScript的第5个版本,ES6是第6个版本。

ECMAScript是核心,它规定了语言的语法、类型、关键字、保留字、操作符、语句、对象;DOM文档对象模型;BOM是浏览器对象模型

2.ES5在以前的版本上增加了一些Array方法、Object方法、strict模式等;而ES6又在向下兼容的条件下新增了一些属性方法。因此ES6相对于ES5具有一些特性:

块级作用域,let关键字,const常量,赋值结构,字符串模板生成器等等

3.ES6教程:https://www.runoob.com/w3cnote/es6-tutorial.html

教程讲得非常详细,下面这张图做出来概述


图片来自菜鸟教程

ES6的详细学习(关于ES6进行具体的学习,笔记记录在下方)

1.let和const
let和const是在ES6中新增的两个关键字。let限定了变量只在代码块内使用,不会进行变量提升(而var会有变量提升);const定义静态变量,使用const定义变量必须进行赋值,且静态变量不允许对其进行改变。
let使用在计数器中效果会很好:这里面使用let的循环,每次输出的j都是不同的变量

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// 输出 0123456789

ReferenceError: 参数错误,没有定义该变量
undefined:没有给变量赋值就使用,但是该变量已经存在
SyntaxError: 语法错误,如使用const定义变量却不对它赋值
2.解构赋值
剩余运算符:

//数组模型的解构
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

//对象模型的解构
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

3.数据类型Symbol
在ES6中新增了数据类型Symbol,其用途有如下几点:
·作为对象的属性名,可以保证属性名不重复
·定义常量,保证常量是独特的
·Symbol.for()类似于单例模式
·Symbol.keyFor()返回一个已经登记的Symbol类型值得key
相同参数 Symbol() 返回的值不相等

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

4.关于set和Map
set对象存储的值总是唯一的
5.Proxy和Reflect
ES6中定义了Proxy和Reflect对API进行一些操作。基本方法和实例方法有点多,这里不做详细的记录,用到的时候去具体搞清楚。
6.ES6字符串
ES6中扩展了对字符串的处理方法,如判断是否包含子串,以前用indexOf(),ES6中有:

includes()
startsWith()
endWith()
//重复字符串
repeat()
//字符串补全
padStart()
padEnd()
//模板字符串,反引号'   可以用来定义多行字符串的
let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?

//字符串插入变量和表达式$(),变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
//...

7.字符串数值
ES6在Math对象上新增了17个数学静态方法,这些方法通过Math调用;
......
8.ES6对象
对象字面量:允许对象属性直接写变量;函数名简写等
对象拓展运算符:拷贝对象的所有可遍历的属性;合并两个对象。需要注意的是,当拓展对象中和现有的对象有相同属性时,后面的会覆盖前面的

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}

对象的新方法:

//复制源对象的所有可枚举对象
Object.assign(target, source_1, ···)
//比较两个值是否严格相等
Object.is(value1, value2)

9.ES6数组
包含一些数组的操作方法,如数组的创建、遍历、包含、数组缓冲区、定型数组等
10.ES6函数
在参数和箭头函数方面做了扩展。例如可以定义不定长度的参数,在回调函数中使用箭头函数可以解决使用this的问题(具体的问题,还有使用的注意点要看一下教程,教程中很清晰)
11.迭代器
迭代器是ES6中引入的遍历机制,可以通过Symbol.itertor创建迭代器进行遍历。
12.class类
13.ES6模块
基本的用法:

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom

export defualt命令:

var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error"; 
// error,default 已经是对应的导出变量,不能跟着变量声明语句
 
import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收

14.ES6 Promise对象
Promise是一个对象,用来进行异步编程。Promise有三个状态,分别是pending(正在进行),fulfilled(成功),rejected(失败);Promise的状态只能由pending转向fulfilled或者rejected。fulfilled和rejected都是属于resolved状态。
15.Generator函数
该函数可以通过关键字yeild将函数执行流挂起,以实现异步操作。
在函数名前面加上*表示该函数是Generator函数,在函数内部使用yeild关键字来定义函数内部的状态对象。
通过.next()方法遍历对象,当next()方法不传入参数的时候,yeild表达式的返回值是undefiend,当next()方法有传入参数时,该参数会作为上一步yeild的返回值。具体的例子如下:

function* sendParameter(){
    console.log("strat");
    var x = yield '2';
    console.log("one:" + x);
    var y = yield '3';
    console.log("two:" + y);
    console.log("total:" + (x + y));
}

var sendp1 = sendParameter();
sendp1.next();
// strat
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}
next传参
var sendp2 = sendParameter();
sendp2.next(10);
// strat
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}

16.async函数
async是ES7才有的,与Promise和Generator有很大关联。
async函数返回一个Promise对象,可以通过then添加回调函数;
async函数执行时可能会遇到await表达式,这时会将触发的异步操作执行完毕之后再继续执行async函数;
await关键字在async函数内部有效,外部会报语法错误

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

推荐阅读更多精彩内容

  • 什么是ES6? ECMAScript 6.0 是继ECMAScript 5.1 之后 JavaScript 语...
    多多酱_DuoDuo_阅读 1,074评论 0 4
  • babel转码 在项目安装babel-cli npm install --global babel-cli ba...
    tency小七阅读 396评论 0 0
  • ECMAScript 6.0( 以下简称ES6) 是JavaScript语言的下一代标准。 ECMAScript和...
    EarthChen阅读 437评论 0 0
  • VSCode调试ES6:配置方法 一、let & const 关键字 1.1 let & var 对比 let 声...
    GIT提交不上阅读 95评论 0 0
  • ES6 学习笔记,如有错误,欢迎指正。 笔记只记录了一些个人认为需要记住的知识点。 参考:ECMAScript 6...
    _1633_阅读 426评论 1 1