ES6笔记

1、let和const命令

  • let声明的变量只在let所在的代码块有效,即有块级作用域,不同于var;

  • let定义的变量不存在变量提升问题,必须先声明后使用;

  • 不能在同一作用域内重复声明变量,这与ES5的var不同,故不能在函数作用域下直接重新声明函数的参数;

  • 块级作用域可以任意嵌套,内存可以访问外层,外层不可以访问内层,内层可以重新定义外层的同名变量;

  • ES5严格模式规定函数必须在顶层作用域和函数内声明,其他情况(比如if代码块、循环代码块)的声明都会报错,但在ES6中可以;

  • const命令和let命令不同之处在于const用于定义常量,并在声明变量时必须同时赋值,如const PI=3.14,不能写成const PI;PI=3.14;

  • let和const命令声明的全局变量不属于全局对象的属性,var命令和function命令声明的全局变量,依旧是全局对象的属性。另外还有import和class命令,故在ES6中共有6种声明变量的方法。

  • for循环有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

//函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

2、变量的解构赋值

+、数组的解构赋值基本用法是[a,b,c]=[1,2,3],然后a=1,b=2,c=3;

+、解构分完全解构和不完全解构,不完全解构有两种情况:左边少于右边和右边少于

左边,右边少于左边时,没有对应值的变量赋值为undefined。解构要求等号右边是可

遍历的结构,如数组,非空对象等;

+、解构赋值可以指定默认值,如[a=1,b=2]=[],默认值生效的条件是右边对应位置上

的值是不是严格等于undefined,如[a=1,b=2]=[undefined,null],此时a=1,b=null;

+、以上是数组的解构赋值,对象也有解构赋值,基本用法为{foo,bar}={foo:’a’,bar:’b’};

+、数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,

变量必须与属性同名,才能取到正确的值,如果变量名与属性名不一致,必须写成下面

这样{foo:fo}={foo:’a’},此时就有fo=’a’ 也就是说,对象的解构赋值的内部机制,是先找

到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者;

f+、要将一个已经声明的变量用于解构赋值,必须非常小心。如var x;{x}={x=1};这种写法

会报错,因为JS引擎会将{x}理解成一个代码块从而引发语法错误,只有不将大括号写

在行首才可避免,正确的写法是({x}={x=1});

+、对象的解构赋值可以很方便的将现有对象的方法赋值到某个变量,如:

let {log,sin,cost}=Math;

+、字符串的解构赋值,const [a,b]=’he’,此时a=’h’,b=’e’,字符串被转换成了一个类似

数组的对象,类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值;

+、数值和布尔值的解构赋值,当等号右边是数值和布尔值则会先转化为对象,如:let

{toString:s}=123;s===Number.prototype.toString为true,解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefined和null无法转为对象,所以对它
们进行解构赋值,都会报错;

+、函数参数也可解构赋值并可指定默认值function move({x, y} = { x: 0, y: 0 }) {

return [x, y];

}

move({x: 3, y: 8}); // [3, 8]

move({x: 3}); // [3, undefined]

move({}); // [undefined, undefined]

move(); // [0, 0]

当调用move函数时,传入的对象会覆盖函数定义时指定的默认值,该默认值只在调用

函数时不传参数起作用;

+、圆括号问题。不能使用圆括号的情况:1 变量声明语句中不能带有圆括号,2 函数

参数中,模式不能带有圆括号,3 赋值语句中,不能将整个模式,或嵌套模式中的一层,

放在圆括号之中。可以使用圆括号的情况:赋值语句的非模式部分,[(b)] = [3]; // 正确

({ p: (d) } = {}); // 正确 [(parseInt.prop)] = [3]; // 正确

3、字符串的扩展

+、 JS允许用\uxxxx形式表示一个字符,这种表示只限于\u0000-\uFFFF之间的字符,超过该范围的字符必须用两个双字节形式表达,ES6对这一点做了改进,当超过该范围时,只要将码点放入大括号即可,如”\u{20BB7}”可输出”吉”;

+、 JS内部,字符以UTF-16格式储存,每个字符固定为2字节,对于大于0xFFFF的字符,JS会认为是两个字符,普通的charCodeAt方法和charAt方法无法正常工作,ES6提供了codePointAt方法和fromCodePoint方法以及at方法可解决这个问题,codePointAt函数返回码点的十进制形式;

+、 ES6给字符串添加了Iterator遍历器接口,使得字符串可以被for…of循环遍历,这个遍历器最大的优点是可以识别大于0xFFFF的码点;

+、 ES6提供了除indexOf()方法之外的三个方法:includes(),startsWith(),endsWith();

+、 ES6提供了repeat()方法,返回一个新字符串,表示将原字符串重复n次,参数是小数时会向下取整,不能为负或Infinity,是字符串时会先转为数字;

+、 ES7提供了padStart(),padEnd()方法,用于补全字符串长度,共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串;

+、 模板字符串,模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,模板字符串中嵌入变量,需要将变量名写在${}之中,大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性

4、正则表示式的扩展

+、 字符串对象共有四个方法可使用正则表达式:match(),replace(),search(),split(),ES6将这4个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上;

+、 添加了u修饰符和y修饰符,ES5只有i,g,m;

+、 添加了sticky属性表示是否设置了y修饰符,增加flags属性返回修饰符,ES5的source属性是返回正则表达式的正文;

+、 ES5不支持后行断言和后行否定断言,ES7中加入了;

5、数值的扩展

+、 ES6提供了二进制和八进制数值的新写法,分别用前缀0b(0B)和0o(0O)表示,ES5的严格模式中八进制不再允许使用0表示,将0b和0o前缀的字符串数值转为十进制,要使用Number方法;

+、 提供了Number.isFinite()和Number.isNaN()两个方法,用来检查Infinite和NaN这两个特殊值,与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,非数值一律返回false;

+、 ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变,Number.isInteger()用来判断一个值是否为整数。需要注意的是,在JavaScript内部,整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值,ES6在Number对象上面,新增一个极小的常量Number.EPSILON,引入一个这么小的量的目的,在于为浮点数计算,设置一个误差范围;

+、 JavaScript能够准确表示的整数范围在-253到253之间(不含两个端点),超过这个范围,无法精确表示这个值,Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内;

+、 ES6在Math对象上新增了17个与数学相关的方法。所有这些方法都是静态方法,只能在Math对象上调用。

6、数组的扩展

+、 Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组,扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组;

+、 Array.of方法用于将一组值,转换为数组,Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3],Array.of(3).length // 1;

+、 数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置

(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组;

+、 数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调

函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined,findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1,fill方法使用给定值,填充一个数组;

+、 ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返

回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的

区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历;

+、 Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与

字符串的includes方法类似。该方法属于ES7,但Babel转码器已经支持,没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值,indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相当运算符(===)进行判断,这会导致对NaN的误判;

+、 关于数组空位:ES6则是明确将空位转为undefined;

7、函数的扩展

+、 ES6允许为函数的参数设置默认值,即直接写在参数定义的后面,参数变量是默认声明的,所以不能用let或const再次声明;

+、 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真,如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。(function (a = 0, b, c) {}).length // 0 (function (a, b = 1, c) {}).length // 1

+、 ES6引入rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错,函数的length属性,不包括rest参数;

+、 扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列,由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了;

+、 箭头函数,ES6允许使用“箭头”(=>)定义函数,如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分,如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回,由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。箭头函数有几个使用注意点。(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。(4)不可以使用yield命令,因此箭头函数不能用作Generator函数;

+、 尾调用优化

8、对象的扩展

+、 ES6允许直接写入变量和函数,作为对象的属性和方法var foo = 'bar';var baz =

{foo};baz // {foo: "bar"}// 等同于var baz = {foo: foo};

var o = {

method() {

return "Hello!";

}

};

// 等同于

var o = {

method: function() {

return "Hello!";

}

};

+、 ES6允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内let propKey = 'foo';let obj = { [propKey]: true, ['a' + 'bc']: 123};

+、 Object.is()用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN等于自身

+、 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用,Object.assign可以用来处理数组,但是会把数组视为对象。用途:1为对象添加属性和方法2克隆对象3合并多个对象4为属性指定默认值

+、 可枚举性。ES5有三个操作会忽略enumerable为false的属性,for...in 循环:只遍历对象自身的和继承的可枚举的属性,Object.keys():返回对象自身的所有可枚举的属性的键名,JSON.stringify():只串行化对象自身的可枚举的属性,ES6新增了两个操作,Object.assign():只拷贝对象自身的可枚举的属性Reflect.enumerate():返回所有for...in循环会遍历的属性。操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in循环,而用Object.keys()代替

+、 ES6新增结构Set和Map,Set类似于数组,但是成员的值都是唯一的,没有重复的值.Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. Set结构的实例有以下属性。Set.prototype.constructor:构造函数,默认就是Set函数。Set.prototype.size:返回Set实例的成员总数。add(value):添加某个值,返回Set结构本身。delete(value):删除某个值,返回一个布尔值,表示删除是否成功。has(value):返回一个布尔值,表示该值是否为Set的成员。clear():清除所有成员,没有返回值。keys():返回一个键名的遍历器values():返回一个键值的遍历器entries():返回一个键值对的遍历器forEach():使用回调函数遍历每个成员。。Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键,可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

9、模块化

+、 ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。自动采用严格模式,不管你有没有在模块头部加上"use strict";

+、 模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能;

+、 export用法总结:1输出变量:export var m=1;或者var m=1;export {m} 2输出函数:export function f(){}或者function(){} export {f} 可以使用as来指定输出别名

+、 import用法总结:1、import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块对外接口的名称相同。如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。注意,import命令具有提升效果,会提升到整个模块的头部,首先执行,2、如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起export { es6 as default } from './someModule';// 等同import { es6 } from './someModule';export default es6;上面代码中,export和import语句可以结合在一起,写成一行。但是从可读性考虑,不建议采用这种写法,而应该采用标准写法,3、除了指定加载某个输出值,还可以使用整体加载,即用星号()指定一个对象,所有输出值都加载在这个对象上面。这时一般会使用as将()重命名;

+、 export default命令:使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载,该命令可以让用户自由命名要加载的变量和函数。用法和export相似,只是第二种用法不能加大括号,且使用import导入默认值时也不能加大括号;

+、 模块的继承:先导入要继承的模块,再将其输出就OK,其中可以加一下自己的模块,export * from 'circle';

10、Class

+、 基本语法:class Point{ constructor(x,y){this.x=x;this.y=y} toString(){}} 必须有contructor函数,定义的方法是直接定义在原型上的。类的数据类型就是函数,类本身就指向构造函数。类的内部所有定义的方法,都是不可枚举的,这一点与ES5的行为不一致

+、 与函数一样,Class也可以使用表达式的形式定义。

const MyClass = class Me {

getClassName() {

return Me.name;

}

};

上面代码使用表达式定义了一个类。需要注意的是,这个类的名字是MyClass而不是Me,Me只在Class的内部代码可用,指代当前类

+、 继承:extends。子类必须在contructor函数中调用super函数来创建this,super这个关键字,有两种用法,含义不同。

(1)作为函数调用时(即super(...args)),super代表父类的构造函数。

(2)作为对象调用时(即super.prop或super.method()),super代表父类。注意,此时super即可以引用父类实例的属性和方法,也可以引用父类的静态方法。

  • 、 Class的静态方法,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

  • 、 Class的静态属性和实例属性:类的实例属性可以用等式,写入类的定义之中,不用写在类的constructor方法里面,类的静态属性只要在上面的实例属性写法前面,加上static关键字就可以了

+、 new.target属性 new是从构造函数生成实例的命令。ES6为new命令引入了一个new.target属性,(在构造函数中)返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

11、编程规范

+、 使用let代替var;

+、 静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号;

+、 使用数组成员对变量赋值时,优先使用解构赋值,函数的参数如果是对象的成员,优先使用解构赋值,如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。这样便于以后添加返回值,以及更改返回值的顺序。

+、 单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法,如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。

+、 使用扩展运算符(...)拷贝数组,使用Array.from方法,将类似数组的对象转为数组

+、 那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了this。简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。所有配置项都应该集中在一个对象,放在最后一个参数,布尔值不可以直接作为参数

+、 不要在函数体内使用arguments变量,使用rest运算符(...)代替。因为rest运算符显式表明你想要获取参数,而且arguments是一个类似数组的对象,而rest运算符可以提供一个真正的数组,使用默认值语法设置函数参数的默认值

+、 总是用Class,取代需要prototype的操作,使用extends实现继承,因为这样更简单,不会有破坏instanceof运算的危险,使用import取代require,使用export取代module.exports,如果模块只有一个输出值,就使用export default,如果模块有多个输出值,就不使用export default,不要export default与普通的export同时使用

12、一些补充

  • ECMAScript 和 JavaScript 的关系
    简单说就是规范和实现的关系,前者负责指定规范,后者负责实现。此外 ES2015=ES6

13、一些面试题回答

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

推荐阅读更多精彩内容

  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,510评论 0 8
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,771评论 0 1
  • 一. let 和 const 1 let 基本用法 ES6新增let命令,与var用法类似,但所声明的变量只在声明...
    dodomix阅读 2,297评论 0 2
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 早餐从小就是最不喜欢吃的一餐饭,因为为了吃个早餐付出的代价太大了,需要早睡、需要早起。。。每次上学前为了吃个早餐都...
    王靖_533f阅读 278评论 0 1