1.什么是ES6?

简单的说 ES6 的第一个版本,在2015年6月发布了,正式名称就是《ECMAScript 2015标准》(简称 ES2015)在2016年6月,小幅修订的《ECMAScript 2016标准》(简称 ES2016)如期发布,2017年6月发布的新版本就是ES7。ES6 既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017等等。

2.箭头函数 =>

会解析为 function(){}

eg. input.map(item => item+1);  解析完:

input.map(function(item){

item = item + 1;

});

箭头函数的特征:

  • 代码简写
  • 箭头函数会捕获上下文的this对象,本身没有this对象
  • 箭头函数是匿名函数
function MyFun(){

this.a = 1;

setInterval(function growUp(){

//此处的this,growUp函数定义的内部的this, 不同于构造函数MyFun函数中的this

this.a ++; 

},1000);

}

var fun = new MyFun();

//要修改的话,我们往往会将构造函数的this指定到一个新增的变量中

//如果使用箭头函数,就会很方便:

function MyFun(){

this.a = 1;

setInterval(() => {

//此处的this正确的指向了构造函数MyFun

  this.a++;

},1000);

}
var fun = new MyFun();

3.let 和const命令

let定义的变量只在let命令所在的代码块内有效.

let不允许在相同作用域内重复声明,允许在块级作用域内声明函数, 声明类似于var,即会提升到全局作用域或函数作用域的头部。同时,函数声明还会提升到所在的块级作用域的头部。

{
let a = 10;
var b = 1;
}
console.log(a); // ReferenceError: a is not defined.
console.log(b); // for循环,就很适合使用let命令
for(let i = 0; i < 10; i++){}
console.log(i);// ReferenceError: i is not defined
//循环的语句定义和循环体可以作为两个不同的作用域
for(let i = 0; i < 10; i++){
let i = “abc”;
console.log(i);
}
//所以会打印3个”abc”

const用来定义不可变的常量,不可变的常量名一般全大写。一旦声明,常量的值就不能改变。

eg. const PI = 3.14;

对于const来说,只声明不赋值,就会报错。const的作用域与let命令相同:只在声明所在的块级作用域内有效。

4.ES6 的解构赋值

(1)数组的解构赋值——右边如果不是数组则报错,并且在严格模式中,变量不能重复定义,否则会报异常。

let [x, y, z] = [1, 2, 3];
let [a, …b] = [1, 2, 3, 4]; ==> a = 1; b = [2, 3, 4];
let [x1, [y1, [z1, r]]] = [1, [2, [3]]]; r = undefined; //对应不上的变量值为undefined //解构赋值可以添加默认值,如果右边赋值不严格(===)等于undefined, 则默认值将不会生效。
let [h=1] = [undefined]; //h = 1;
let [h1=1] = [null]; //h1 = null; //如果默认值是一个表达式,会懒赋值,就是在需要的时候才会去执行结果
function myFun(){
console.log(“come in”);
}
let [f = myFun()] = [1];

(2)对象的解构赋值

对象赋值可数组赋值的区别是:数组是按位置取值,值由位置来决定

而对象不一定顺序一致,只要变量名和属性名相同,便可以取值。

var {bar, liz} = {bar: ‘barValue’, liz1: ‘liz1Value’};
console.log(bar);//barValue
console.log(liz);//undefined 属性名不一致 var obj = {first:'hello',last:'world'};
var {first:fi,last:la} = obj;
console.log(fi);//hello
console.log(la);//world //默认赋值,必须严格等于(===)undefined,默认值才会生效.如果解构失败,变量的值就等于undefined
var {lib = 1} = {lib: undefined};
var {lib1 = 2} = {lib1: null};
console.log(lib); //
console.log(lib1); //null

(3)字符串的解构赋值 —其赋值规则类似于数组

const [a0, b0, c0, d0, e0] = “hello”;
console.log(a0);//h
console.log(b0);//e
console.log(c0);//l
console.log(d0);//l
console.log(e0);//o //字符串有个属性length
const {length: len} = “hello”;
console.log(len); //

(4)数值和布尔类型的解构赋值——等号右边不是对象,而是数值或者布尔值,则先转换为对象。

let {toString: x0} = 123;
console.log(x0);//[function:toString]
x0 === Number.prototype.toString;
let {toString:y0} = true;
console.log(y0);//[function:toString]
y0 === Boolean.prototype.toString; //因为undefined和null不能转换为对象,所以会报异常
let {toString:z0} = undefined /null;
console.log(z0); //var z0 = undefined.toString;TypeError: Cannot read property 'toString' of undefined

(5)函数的参数解构赋值

function add([x, y]){
return x+y;
}
console.log(add([1,2])); //
console.log([[1,2],[3,4]].map(([a,b]) => a+b));//[3,7] //函数参数默认值结构赋值,也是===undefined时,默认值有效
function myFun([x=1,y=2]){
return x+y;
}
console.log(myFun([4,5]));//
console.log(myFun({}));//error
console.log(myFun([5]));//
console.log(myFun([null,null]));//

变量解构赋值用处:

(1)交换值

eg. let [myx,myy] = [myy,myx];

(2)函数可以返回多个值(good)

eg. function mytest(){

return [1,2,3];

}

let [m1,m2,m3] = mytest();

(3)函数可以返回多个对象

eg.  function mytest2(){

return ({

foo:1,

foo1:2,

})

}

let {foo, foo1} = mytest2();

console.log(foo); //1

console.log(foo1); //2

5.ES6的算术方法

ES6的二进制(0b/0B)和八进制(0o/0O)表示

Number(); //方法将其转换为10进制数值
console.log(Number(0b111));
console.log(Number(0o111));
NUmber.isFinite();//判断是否是非无穷
Number.isNaN();//检查是否是NaN
Number.parseInt();
Number.parseFloat();
Number.isInterger(); console.log(Number.isInterger(3));
console.log(Number.isInterger(3.0)); Number.EPSILON;//表示一个极小的变量 2.220446049250313e-16
//起作用来进行浮点数计算的误差判断,误差<Number.EPSILON 则计算结果正确
// js表示整数的范围是 -2^53 ~ 2^53
//ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。
Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
isSafeInterger()//方法就是判断某个整数值是否落在上面的安全范围之间
Number.isSafeInterger(); //获取整数部分,对于空值和无法截取整数的值,返回NaN。
Math.trunc(4.1);//
Math.trunc(4.9);//
Math.trunc(-4.1);//-4
Math.trunc('NaN');//NaN
//来返回一个函数是正数(1),负数(-1),还是0(0),-0(-0),其他返回NaN
Math.sign(5);//
Math.sign(-5);//-1
Math.sign(0);//
Math.sign(-0);//-0
Math.sign("NaN");//NaN
//用来计算一个数的立方根
Math.cbrt();
//将一个整数用32位二进制来表示
Math.clz32();
//Math.imul方法返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。
Math.imul(a,b);
//返回一个数的单精度浮点数形式
Math.fround();
//Math.hypot方法返回所有参数的平方和的平方根。
Math.hypot(); ES6新增了6个三角函数方法。
Math.sinh(x) //返回x的双曲正弦(hyperbolic sine)
Math.cosh(x) //返回x的双曲余弦(hyperbolic cosine)
Math.tanh(x) //返回x的双曲正切(hyperbolic tangent)
Math.asinh(x) //返回x的反双曲正弦(inverse hyperbolic sine)
Math.acosh(x) //返回x的反双曲余弦(inverse hyperbolic cosine)
Math.atanh(x) //返回x的反双曲正切(inverse hyperbolic tangent) ES7新增了一个指数运算符(**)
b **= 3;//等同于 b = b * b * b;

6.ES6数组方法

Array.from();   ——将类似于数组的对象和可遍历的对象(明显特征就是有length属性)转为数组

let obj = {
"0":"dtl",
"1":18,
"2":1234,
length:5
}
var arr = Array.from(obj);
console.log(arr); //["dtl",18,1234,undefined,undefined]

Array.of();  ——将一组数转为数组,如果没有参数,返回一个空数组

  console.log(Array.of(3));//[1]

  copyWith(); ——方法用于将目标元素拷贝到指定位置,将代替指定位置target的元素

Array.prototype.copyWithin(target,[start],[end]);  //target 必需元素,从start位置开始拷贝 :默认为0

//复制几个就从指定位置替换几个元素
console.log([1,2,3,4,5].copyWithin(0,3));//[4,5,3,4,5]
console.log([1,2,3,4,5].copyWithin(0,2));//[3,4,5,4,5]
console.log([1,2,3,4,5].copyWithin(0));//[1,2,3,4,5]

  find(); ——用于找回第一个符合条件的数组成员,回调函数的三个参数:1表示当前的值,2表示当前的位置,3表示当前的数组

  findIndex(); ——返回第一个符合条件的数组成员的位置

let b = [1,2,5,8,9].find(function(value,index,arr){
return value > 7;
});
console.log(b);// let c = [1,2,5,8,9].findIndex(function(value,index,arr){
return value > 7;
});
console.log(c);//

  fill(value,start,end); ——使用给定值来填充一个数组 ,常用于数组的初始化。value表示填充的值,start填充的起始位置,end填充的结束位置(但不包括结束位置)

let myArr = new Array(3).fill(7, 0, 2);
console.log(myArr); //[7, 7, ]

  entries(),keys(),values(); ——来遍历数组

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
0
1 for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
'a'
'b' for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
0 "a"
1 "b"

  includes(); ——返回数组是否包含某个值,true/false。没有includes之前我们通过indexOf()来判断,它有两个弊端:使用===判断,对NaN判断不准确,还有表达语义不够直观

Es6明确将空位转为undefined。

copyWith()//会连空位一起拷贝

fill()//会将空位当正常数组对待

for...of //循环会遍历空位

entires(),keys(),values(),find(),findIndex()//都会将空处理成undefined

7.ES6 函数

函数参数赋默认值

//原来的方式给函数赋默认值
function add(x,y){
y=y||'world';
console.log(x+' '+y);
}
add('hello',);
add('hello','china');
add('hello','');//hello world 将“”变成了默认值,所以给y赋值时先要判断又是否有值,因此原来的方式很麻烦 //新的方式给函数参数赋默认值
function newAdd(x,y = 'world'){
console.log(x+' '+y);
}
newAdd('hello',);
newAdd('hello','');//hello

后续ES6 学习总结:

1.块级作用域和let ,const

let和const不会提升变量的声明

同名的变量或者常量在同一个作用域不能重复定义

在作用域内,在声明前操作let或const定义的变量或者常量,会抛出异常。 (临时死区 TDZ)

在循环中使用let和const每次迭代会创建新绑定(产生一个副本),所以可以获取到每次迭代的值

块级作用域绑定的最佳实践: 默认使用const 定义,除非需要修改变量值时,使用let, 这样在很大程度上就实现了代码的不可变,防止错误的产生。

2.String.codePointAt() 获取字符占用的编码单元数量

String.fromCodePoint() 根据指定的码位生成一个字符串

normalize() 字符串比较之前,现将其按照同一规则进行转换

includes(), startWith(), endsWith()  返回结果为true/false, 都可以传入两个参数,第一个表示要搜索的字符,第二个参数可选表示开始检索的其实位置

endsWith() 从字符串的末尾开始向前匹配

repeat() 传入number类型的参数,表示字符串重复的次数

正则表达式的flags属性会返回所有应用于但钱正则表达式的修饰字符串,source属性获取正则表达式的文本部分

ES5中一直缺乏许多特性,如多行字符串、字符串格式化、HTML转义等。ES6通过模板字面量的方式进行了填补。模板字面量:用反撇号(``)替代单双引号,如果要在字符串中使用反撇号,用反斜杠(\)将其转义即可。字符串占位符${} 符号组合,中间可以包含任意的JavaScript表达式,可以是变量,运算式,函数等,也可以在模板字       面量里面嵌套另外一个。创建标签模板,标签函数接受模板字面量每个部分组成的参数数组,通过这些数据来组装出一个适合的字符串值。String.raw`Multiline\nstring` 获取原生字串-> Multiline\\nstring

3.ECMAScript 6 的函数

默认参数值arguments,在ECMAScript 5里非严格模式和严格模式不同:

function(first, second){

console.log(first === arguments[0]);

console.log(second === arguments[1]);

first = ‘c’;

second = ‘d’;

console.log(first === arguments[0]);

console.log(second === arguments[1]);

}

返回的结果为:

true

true

true

true

非严格模式下,参数的改变会同步到arguments对象中

下面再看下严格模式:

function(first, second){

“use strict”;

console.log(first === arguments[0]);

console.log(second === arguments[1]);

first = ‘c’;

second = ‘d’;

console.log(first === arguments[0]);

console.log(second === arguments[1]);

}

返回的结果为:

true

true

false

false

严格模式下,无论参数如何变化,arguments 对象不再随之改变

在ECMAScript 6 的函数,如果使用了默认值,则无论是否显式的定义了严格模式,arguments都保持和ECMAScript 5严格模式下保持一致

function(first, second=‘5’){

console.log(arguments.length);

console.log(first === arguments[0]);

console.log(second === arguments[1]);

first = ‘c’;

second = ‘d’;

console.log(first === arguments[0]);

console.log(second === arguments[1]);

}

返回结果为:

1

true

false

false

false

arguments.length的值为1,arguments[1]的值为undefined

函数的不定参数:在函数的命名参数前添加三个点(…)就表明这是一个不定参数,该参数为一个数组,包含自它传入后的所有参数。arguments 是返回了所有的参数,不定参数可以放心直接遍历。如果函数声明了不定参数,arguements对象包含了所有传入函数的参数。

函数的length 属性统计的是函数命名参数的数量,不算不定参数,所以不定参数的引入不会影响函数的length值。还有不定参数必须放在函数参数的末尾,否则会语法错误。

展开运算符: 简化使用数组传参的过程。

let values = [10, 9, 0,5,6,20];

console.log(Math.max.apply(Math, values)); //ES5 通过apply实现

console.log(Math.max(…values));  //ES6中展开运算符很大程度可以代替apply

Es6引入了new.target原属性,如果通过new 函数调用则new.target !== undefined,比如通过call,或者apply调用。

ES6引入了块级函数,来解决在ES6之前版本函数声明在不同浏览器下的不兼容性。

“use strict”;

if(s){

console.log(typeof doSomething); // function

console.log(typeof doSomething1); // undefined

function doSomething(){

} //Es6的严格模式下,块级函数的声明会被提升到块级顶部

let doSomething1 = function(){} // let定义的函数声明不会被提升

}

console.log(typeof doSomething); // undefined   在非严格模式下会提升至全局作用域

增加了name 属性,来返回函数的名称。

箭头函数

1.没有this,super, arguments, new.target的绑定,这些值由外围最近一层的非箭头函数决定。

2.不能通过new关键字调用

3.没有原型

4.不可改变this的绑定

5.不支持arguments对象

6.不支持重复的命名参数

let reflect = value => value;

let sum = (sum1, sum2) => sum1 + sum2;

let sum2 = (num1, num2) => {

return num1 + num2;

}

let getName = () => 'dtl';

let myFun = () => {} ; // 创建一个空函数

let getObj = id => ({id: id, name:'dd'}); //在函数外返回一个对象字面量,用小括号将字面量包裹起来

let person = ((name) => {

return {

getName: function(){

return name;

}

};

})('dtl'); //创建立即执行函数,小括号将箭头函数包裹,不包裹传参部分。

尾调用优化可以帮助函数保持一个更小的调用栈,从而减少内存的使用,避免栈溢出错误。在函数尾部,直接return 函数调用结果。引擎进行的自动优化。

function factorial(n, p = 1){

if(n <= 1){

return 1*p;

}else{

let result = n*p;

return factorial(n -1, result);  // 优于 return n*factorial(n -1);

}

}

4.扩展对象的功能性

对象字面量:

function createPerson(id, name){

return {  //当属性名与值名字相同,可以不用写冒号

id,

name,

}

}

var person = {

id: '123',

sayName(){   //消除了冒号和function关键字

console.log(this.name);

}

}

let lastName = "last name";

let person = {

"first name" : 'taoli',

[lastName]: 'du', // 在对象字面量中使用[],表示该属性名是可以计算的,它的内容被求值并转换为一个字符串。

}

ES6 在全局Object上引入了新方法:

Object.is() 弥补全等运算符的不准确计算 +0 === -0 //true Object.is(+0, -0)//false   NaN === NaN //false Object.is(NaN, NaN) // true  除了这两个特例,剩下的基本和 === 返回结果一致

Object.assign() 接受一个接收对象和任意淑玲的源对象,最终返回接收对象。可以代替ES5中的maxin() 方法

ES6 清晰的定义了枚举类型的枚举顺序,先数字升序,再字母,按照插入的先后顺序排列。

Object.getPrototypeOf()

Object.setPrototypeOf(a, b) //改变a 的原型为 b 对象创建后,用此方法修改它的原型

super 便捷地访问原型对象原型  super 就是 Object.getPrototypeof(this)的值,使用super时,此时的this会被自动设置为当前作用域的this值。

5.解构:使数据访问更便捷

对象解构:根据对象字面量,读取相应的属性名称。注意,使用 var,let或const 解构声明变量时,必须提供初始化值。如果不适用解构赋值,只有const定义必须初始化。

数组解构:按顺序对应赋值,eg, let a =1;b=2; [a, b] = [b, a];实现两个数的交换。嵌套数组解构,不定元素解构,不定元素必须是数组的最后一个条目。

解构的混合应用: 对象解构和数组解构嵌套混合使用赋值。

在对象和解构赋值中,都可以为值为null/undefined的对象数组或数组元素指定默认值。

let node = {

type : 'identifier',

name: 'foo',

loc: {

start: {

line: 1,

column: 1

},

end:{

line: 1,

column: 4

}

},

range: [0, 3]

}

let {

loc: { start },

range: [ startIndex ]

} = node;

console.log(start.line); //1

console.log(start.column); //1

console.log(startIndex);//0

6.Symbol和Symbol属性

ES6 为 JavaScript 引入了一种新的基本类型:Symbol,它由全局 Symbol() 函数创建,每次调用 Symbol()函数,都会返回一个唯一的 Symbol。

所有可以计算属性名的地方都可以用Symbol。

Symbol 是 JavaScript 中的新原始类型。console.log(typeof symbol) //Symbol

let uid = Symbol.for(‘uid’);//Symbol.for() 创建之前会去全局Symbol注册表中搜索,如果有,就是用已建的,没有就创建新的Symbol

Symbol.keyFor(‘uid’) //‘uid’ /undefined Symbol.keyFor() 在Symbol全局注册表中检索与Symbol有关的键

Symbol不能和其他类型进行转换/强制转换,会报错

Object.getOwnProperty-Symbol() 来检索Symbol属性

Object.getOwnPropertySymbol() 返回Symbol自有属性数组

well-known Symbol定义了一些语言内部可用的功能,eg. Symbol.hasInstance 属性,需要再去查阅。

7.Set集合和Map集合

一般来说,Set集合常被用于检查对象中是否存在某个键名,而Map集合常被用于获取已存信息。

ES6中的Set集合: 是一种有序列表,其中含有一些相互独立的非重复值

let set = new Set();

set.add(5);

set.add(‘5’);

console.log(set.size); //2

set.add(5); //重复add的值,实际调用会被忽略

let set = new Set([1,2,3,4,5,5,5,5]); console.log(set.size);// 5  重复add的值,实际调用会被忽略

不会对所存值进行强制类型转换

let set = new Set(),

key1 = {},

key2 = {};

set.add(key1);

set.add(key2);

cosole.log(set.size); //2  ES6 中不会key1,key2强转为字符串,因此在set集合中是两个独立的元素,而在ES5中会被转换,则两者的值“[object object]”,实际是同一个属性值

set.has(5); // true  has()方法检测set集合中是否存在某个值

set.delete(5); //delete()方法移除Set集合中的某个元素

set.clear(); //clear()方法清除Set集合中的元素

Set集合和数组之间的转换:

let set = new Set([1,2,3,3,4,4,5]), //去掉了重复了值

array = […set]; //用展开运算符,很容易将set转换为array

console.log(array); //[1,2,3,4,5]

Weak set: 解决清除了对初始对象的引用,但Set集合缺保留着引用,而引起的一些内存泄漏问题。

创建Weak Set 集合:

let set = new WeakSet(),

key = {};

set.add(key);

key = null;

//console.log(set.has(key));// false

WeakSet 和Set的一些区别:

. 在weakSet的实例中,如果向 add(), has()和delete()这三个方法传入非对象参数都会导致程序出错。

.Weak Set 集合不可迭代,所以不能被用于for-of循环

.没有keys(),values()等任何迭代器,所以无法通过程序本身来检测其中的内容。

.不支持forEach()方法

.不支持size()属性

Map集合的初始化方法

let map = new Map([[‘name’, ‘dtl’], [‘age’, 18]]);

同样:map.set(key,value);

map.delete(key);

map.clear(); //清除所有键值对

也可以用对象作为Map的key, 在对象中,是不能用对象作为对象的属性名。

let set = new Set([1, 2]);

forEach 方法都支持传入三个参数:

set.forEach(function(value, key, ownerset){  //set中的 value === key

console.log(key + ' ' + value);

console.log(ownerSet === set);

});

let map = new Map([['name', 'dtl'], ['age', 18]]);

map.forEach(function(value, key, ownerMap){

console.log(key + ' ' + value);

console.log(ownerMap === map);

});

WeakMap集合  支持 has(key), 和delete(key)方法判断和移除key,value.

如果只用对象作为key, WeakMap集合将是最好的选择,当数组再也不可访问后集合中存储的相关引用和数据会被自动回收。但是WeakMap不支持forEach(),size,clear()来管理元素,对用户的能见度较低。

如果使用费对象的kay,那就选择Map集合。

Set 集合的值和Map集合的key 的等价性都是通过Object.is()来判断。如果相同,会高滤掉重复的值。

8.  ES6中的迭代器(Iterator)和生成器(Generator)

迭代器(Iterator): 迭代器是一种特殊对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对象。结果对象有两个属性:一个是value,表示下一个将要返回的值;另一个是done,它是一个布尔类型的值,当没有更多可返回数据时返回true,如果没有相关数据则返回undefined 。迭代器还会保存一个内部指针,用来指向当前集合中值的位置,每调用一次next()方法,都会返回下一个可用的值。

生成器(Generator): 是来返回迭代器的函数。

function关键字后的星号(*)来表示,函数中会用到新的关键字yield。星号可以紧挨着function关键字,也可以在中间添加一个空格。

function *createGenerator(){

yield 1;

yield 2;

yield 3;

}

// 生成器能像正规函数那样被调用,但会返回一个迭代器

let iterator = createIterator();

console.log(iterator.next().value); // 1

console.log(iterator.next().value); // 2

console.log(iterator.next().value); // 3

只会在调用迭代器的next()方法时,返回yield的值。并且yield只能在迭代器的主函数中有效,不能嵌套在语句里,会报错。(yield关键字只可在生成器内部使用,在其他地方使用会导致程序抛出错误)

生成器函数表达式,function与次奥括号之间添加一个* 号。

let createIterator = function *(items) {

for (let i = 0; i < items.length; i++) {

yield items[i];

}

};

生成器对象方法:

var o = {

*createIterator(items) {

for (let i = 0; i < items.length; i++) {

yield items[i];

}

}

};

let iterator = o.createIterator([1, 2, 3]);

可迭代对象具有Symbol.iterator属性,是一种与迭代器密切相关的对象。在ES6中,所有的集合对象(数组、Set集合及Map集合)和字符串都是可迭代对象,这些对象中都有默认的迭代器。

let values = [1, 2, 3];

let iterator = values[Symbol.iterator]();

console.log(iterator.next()); // "{ value: 1, done: false }"

console.log(iterator.next()); // "{ value: 2, done: false }"

console.log(iterator.next()); // "{ value: 3, done: false }"

console.log(iterator.next()); // "{ value: undefined, done: true }"

创建可迭代对象:

默认情况下,开发者定义的对象都是不可迭代对象,但如果给Symbol.iterator属性添加一个生成器,则可以将其变为可迭代对象。

let collection = {

items: [],

*[Symbol.iterator]() {

for (let item of this.items) {

yield item;

}

}

};

collection.items.push(1);

collection.items.push(2);

collection.items.push(3);

for (let x of collection) {

//1

//2

//3

console.log(x);

}

在数组字面量对此使用展开运算符,将可迭代对象的多个元素依次插入新数组中,替换原先展开运算符所在的位置。

let smallNumbers = [1, 2, 3],

bigNumbers = [100, 101, 102],

allNumbers = [0, ...smallNumbers, ...bigNumbers];

console.log(allNumbers.length); // 7

console.log(allNumbers); // [0, 1, 2, 3, 100, 101, 102]

内建迭代器:

1.集合对象迭代器: 数组,Map集合,Set集合

内建了三种迭代器:

entries() 返回一个迭代器,其值为对个键值对

values() 返回一个迭代器,其值为集合的值

keys() 返回一个迭代器,其值为集合中的所有键名

let colors = [ "red", "green", "blue" ];

let tracking = new Set([1234, 5678, 9012]);

let data = new Map();

data.set("title", "Understanding ES6");

data.set("format", "ebook");

for (let entry of colors.entries()) {

console.log(entry);  //[0, red][1, green],[2,blue]

}

for (let entry of tracking.entries()) {

console.log(entry); //[1234,1234] [5678, 5678] [9012, 9012]

}

for (let entry of data.entries()) {

console.log(entry); //[“title”, “Understanding ES6”] [“format”,”ebook”]

}

for (let entry of colors.values()) {

console.log(entry);  //“red” “green” “blue”

}

for (let entry of tracking.values()) {

console.log(entry); //“1234” “5678” “9012”

}

for (let entry of data.values()) {

console.log(entry); //“Understanding ES6” ”ebook”

}

for (let entry of colors.keys()) {

console.log(entry);  //0 1 2

}

for (let entry of tracking.keys()) {

console.log(entry); //1234 5678 9012

}

for (let entry of data.keys()) {

console.log(entry); //“title” “format”

}

2.字符串迭代器 for of 循环输出正确的内容

3.NodeList迭代器 for of 循环输出正确的内容

9.类的访问器属性

let propertyName = “html”;

class CustomHtmlElement {

constructor(element) {

this.element = element;

}

get [propertyName] () { //用[] 包裹起来,就是可计算名称

return this.element.innerHTML;

}

set [propertyName] () {

return this.element.innerHTML = value;

}

}

类中的所有方法和访问器属性都可以添加static,除了构造函数之外。

不可在实例中访问静态成员,必须要在类中访问静态成员。

继承和派生类:

class Rectangle

class Square extends  Rectangle

使用super()可访问基类的构造函数,需注意以下几点:

1.只可在派生类(extends 声明的类)的构造函数中使用super()

2.在构造函数访问this之前一定要调用super()

3.如果不想调用super(),则唯一的方法就是让类的构造函数返回一个对象

10.改进的数组功能

ES6 增加了Array.of() 和Array.from() 方法

查找数组中匹配的元素:

find() 返回查到的值

findIndex() 返回查到值的索引

查找与某个值匹配的元素:

indexOf()和lastIndexOf()

fill()用指定的值填充数组中一到多个元素

eg.  let number = [1,2,3,4];

number.fill(1);

Console.log(numbers.toString()); //1,1,1,1

let number = [1,2,3,4];

number.fill(1,2);

Console.log(number.toString());//1,2,1,1  从索引2开始填充元素,到number.length结束

number.fill(0,1,3);

console.log(numbers.toString()); //1,0,0,1  索引1和2的元素填充0

copyWithin(a, b, [c]) 方法 a:开始填充值的索引位置 b:开始复制值的索引位置 [c]:到该索引停止赋值

eg. Let numbers = [1, 2, 3, 4]; numbers.copyWithin(2, 0); console.log(numbers.toString());// 1,2,1,2

numbers.copyWithin(2, 0, 1); //1,2,1,4

了解定型数组

11.Promise 与异步编程

promise的生命周期: pending(进行中), fulfilled(已完成),rejected(已拒绝)

Promise.resolve()

Promise.reject()

Promise 链操作,并且传递返回值给下一个promise, 看下面的例子:

let p1 = new Promise(function(resolve, reject){

resolve(42);

});

p1.then(function(value){

console.log(value);// 42

return value+1;

}).then(function(value){

console.log(value); //43

});

也可以返回promise对象,在一个promise执行成功后,创建另一个promise,然后调用

let p1 = new Promise(function(resolve,reject){

resolve(42);

});

P1.then(function(value){

console.log(value); //42

let p2 = new Promise(function(resolve, reject){

resolve(43);

})

return p2;

}).then(function(value){

console.log(value);//43

})

直到p2处理完成后,才处理第二个处理程序

响应多个Promise

Promise.all() 方法 只接受一个参数,并且返回一个Promise,该参数是一个含有多个受监视的promise可迭代对象,只有可迭代对象中的promise全部处理完成,最后的promise才会执行

let p1 = new promise(function(resolve,reject){

resolve(42);

});

Let p2 = new Promise(function(resolve,reject){

resolve(43);

});

Let p3 = new Promise(function(resolve.reject){

resolve(44);

});

Let p4 = Promise.all([p1,p2,p3]);

P4.then(function(value){

console.log(Array.isArray(value)); //true

console.log(value[0]);//42

console.log(value[1]);//43

console.log(value[2]);//44

});

Promise迭代对象中只要有一个被拒绝,不等其他执行完成,都全部拒绝。

let p1 = new promise(function(resolve,reject){

resolve(42);

});

Let p2 = new Promise(function(resolve,reject){

reject(43);

});

Let p3 = new Promise(function(resolve.reject){

resolve(44);

});

Let p4 = Promise.all([p1,p2,p3]);

P4.then(function(value){

console.log(Array.isArray(value)); //false

console.log(value);//42

});

Promise.race() 方法和promise.all()的区别就是,只要promise迭代对象中有一个解决,那么无需等待其他promise解决,就返回,会竞选,如果p2先完成,则返回拒绝的promise,如果跑先完成,返回已完成的promise.

let p1 = new promise(function(resolve,reject){

resolve(42);

});

Let p2 = new Promise(function(resolve,reject){

reject(43);

});

Let p3 = new Promise(function(resolve.reject){

resolve(44);

});

Let p4 = Promise.race([p1,p2,p3]);

P4.then(function(value){

console.log(value);//42

});

ECMAScript 6 学习总结的更多相关文章

  1. ECMAScript 6 学习笔记(一)

    ECMAScript 6简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写 ...

  2. ECMAScript 6学习总结

    学习ECMAScript 6 一.什么是ES6 ECMAScript6是ECMAScript的升级,实现用来编写复杂程序项目. 二.ECMAScript和JavaScript的关系 JavaScrip ...

  3. ECMAScript 6学习笔记(一):展开运算符

    同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了 ...

  4. ECMAScript 6 学习资料

    ECMAScript 6入门 http://es6.ruanyifeng.com/ 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下)

  5. ECMAScript 6 学习笔记(二)

    ECMAScript 6 let和const命令 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a ...

  6. ECMAScript 6学习笔记(二):let和块级作用域

    同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). ES6中加入了let,也让JavaScript拥有了块级作用域. 没有块级作用域的JavaScript ...

  7. ECMAScript 6 学习(二)async函数

     1.什么是async函数 2.用法 2.1基本用法 3.语法 3.1返回promise对象 3.2promise状态的变化 3.3await命令 1.什么是async函数 async函数也是异步编程 ...

  8. ECMAScript 6 学习(一)generator函数

    1.ES2017标准引入async函数,那么async函数到底是个什么函数呢? async 是一个generator函数的语法糖. 2.那么generator函数到底是什么函数ne? generato ...

  9. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

随机推荐

  1. MVC模式和MVP模式的区别

    MVC模式: 1. MVC的所有通信都是单向的. 2. view传送指令到controller(用户也可以直接将指令传到controller). 3. controller完成业务逻辑后要求model ...

  2. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  3. node设置跨域

    开发过程中在build/dev-server.js配置相关代码以跨域 app.use('/api',proxyMiddleware({ target:'http://m.maizuo.com/v4', ...

  4. unity中Event Trigger组件应用代码

    using UnityEngine; using System.Collections; using UnityEngine.Events; using UnityEngine.EventSystem ...

  5. 绑定的jndi获得connection时,出的错,java.io.NotSerializableException

    求助:java.io.NotSerializableException 最近系统频繁出现Lookup error: java.io.WriteAbortedException: Writing abo ...

  6. Nginx源代码安装

    1.确认系统平台及版本 [root@Trial html]# uname -r 2.6.32-696.6.3.el6.x86_64 [root@Trial html]# cat /etc/redhat ...

  7. Jmeter处理返回结果的值

    接口测试中,获取返回结果的值可以用插件JSON Path Extractor 此插件可以直接处理json,通过key来取值. 该插件下载地址为:http://jmeter-plugins.org/wi ...

  8. Linux平台网络配置-----C语言

    上一期我们已经介绍了VM虚拟机安装CentOS 7系统的步骤过程,这次就来看看使用Linux对初学者有什么障碍? 零基础学习C语言---Linux平台配置网络 用VM虚拟机启动Linux系统时出现的问 ...

  9. L328 What Is Millennial Burnout?

    What Is Millennial Burnout?Do you often feel stressed? Does the pace of life make you feel like you' ...

  10. Django App(六) Customing Admin Form

    这一篇主要是呼应第二篇时留下来的一个问题,就是如何自定义默认app admin下的Form  1.绑定数据实体 通过第二篇的努力,已经完成了数据实体到数据库的映射,可以将界面的更改保存到数据库,我们建 ...