ES6笔记 about blog

[LiuL0703]

Arrow Funtion

箭头函数使用注意点

• 函数体内的this对象 绑定定义时所在的对象 而不是使用时所在的对象 也就是说箭头函数中使用this会发生this丢失 箭头函数中this是固定的 他没有自己的this 所以不能调用call() apply() bind()这些方法改变this指向
• 不可以当做构造函数 即不可以使用new 命令 否则会抛出错误
• 不可以使用arguments对象 该对象在函数体内不存在 如果要用可以用Rest参数代替
• 不可以用yield命令 因此箭头函数不能做Generator函数
  this对象的指向是可变的 但在箭头函数中 它是固定的

function Timer(){
    this.seconds = 0;
    setInterval(()=>this.seconds++,1000)
}
var timer = new Timer();
setTimeout(()=>console.log(timer.seconds),3000)
//  3

上面代码中，Timer函数内部的setInterval调用了this.seconds属性，通过箭头函数将_this绑定在Timer的实例对象。否则，输出结果是0，而不是3。

function Timer () {
  this.seconds = 0
  setInterval(function(){ this.seconds++}, 1000)
}
var timer = new Timer()
setTimeout(function(){ console.log(timer.seconds)}, 3000)
// 0

[LiuL0703]

字符

includes(), startsWith(), endsWith()

includes()：返回布尔值 表示是否找到参数字符串
startsWith()：返回布尔值 表示参数字符串是否在源字符串的头部
endsWith()：返回布尔值 表示参数字符串是否在源字符串的尾部

var s = "Hello World!";

s.includes("l");        // true
s.startsWith("Hello")    //true
s.endsWith("!")      // true

同时这三个方法都支持第二个参数 表示搜索位置

var s = 'Hello world!';
 
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

repeat()

返回一个新的字符串表示原字符串重复n次

x.repeat(3)    // "xxx"
"Hello".repeat(2)  //"HellloHello"
"na".repeat(0)    // ""

参数为小数则会被向下取整
如果repeat的参数是负数或者Infinity，会报错。
但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。
如果repeat的参数是字符串，则会先转换成数字。

"n".repeat(2.9)  // "nn"

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

[LiuL0703]

Math

Math.trunc()::去除一个数的小数部分 返回正数部分 （对空值和无法截取的值 返回NaN）

Math.tranc(1.1)    // 1
Math.tranc(-1.1)   // 1

Math.sign: 判断一个数到底是正数 复数 还是0 正数返回1 负数返回-1 为0 返回0 为-0 返回-0 其他值返回 NaN

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign('hubwiz'); // NaN

Math.cbrt：计算一个数的立方根。

Math.cbrt(-1); // -1
Math.cbrt(0);  // 0
Math.cbrt(2);  // 1.2599210498948732

Math.fround：返回一个数的单精度浮点数形式。

Math.fround(0);     // 0
Math.fround(1.337); // 1.3370000123977661
Math.fround(NaN);   // NaN

Math.hypot：返回所有参数的平方和的平方根。

Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3

如果参数不是数值，Math.hypot方法会将其转为数值。只要有一个参数无法转为数值，就会返回NaN。

[LiuL0703]

Symbol

ES6引入的一种新的原始数据类型 表示独一无二的值 是JavaScript的第七种数据结构
（undefined, null,Boolean,String,Number,Object,Symbol）
Symbol通过Symbol函数生成 凡是属性名属于Symbol类型 就是独一无二的 可以保证不与其他属性名冲突

let s = Symbol();
typeof s
// "symbol"

var s1 = Symbol("foo");
var s2 = Symbol("foo");
console.log(s1===s2);  // false;

做属性名的Symbol三种写法

var mySymbol = Symbol();
//First
var a = {};
a[mySymbol] = "Hello";
// Second
var a = {
    [mySymbol]:"Hello"
};
// Third
var a = {};
Object.defineProperty(a,mySymbol,{value:"Hello"})

// 上面所以写法都会得到相同的结果
console.log(a[mySymbol]);    // "Hello"

注意：

• Symbol值作为对象属性名时，不能用点运算符。
• 在对象的内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中。
• Symbol值作为属性名时，该属性还是公开属性，不是私有属性。
• Symbol类型还可以用于定义一组常量，保证这组常量的值都是不相等的。

属性名遍历

Symbol作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名。
Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的Symbol值。

var obj = {};
var a = Symbol("a");
var b = Symbol("b");
obj[a] = "Hello";
obj[b] = "World";
obj["c"] = "Wow";
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols);    //  [Symbol(a),Symbol(b)]

Symbol.for()

使用给定的key搜索现有符号 如果有找到则返回 否则新创建一个
有时，我们希望重新使用同一个Symbol值，Symbol.for方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。
Symbol.for()与Symbol()这两种写法，都会生成新的Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.for()不会每次调用就返回一个新的Symbol类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值。比如，如果你调用Symbol.for("cat") 30次，每次都会返回同一个Symbol值，但是调用Symbol("cat") 30次，会返回30个不同的Symbol值。

Symbol.for("bar")===Symbol.for("bar"); 
// true;
Symbol("bar")===Symbol("bar")   
// false;

Symbol.keyFor()

为给定的符号从全局符号注册表中索检一个共享符号键
Symbol.keyFor方法返回一个已经登记的Symbol类型的值key

var s1 = Symbol.for("foo");
Symbol.For(s1);   // "foo"

var s2 = Symbol("bar");
Symbol.For(s2);   // undefined 

[LiuL0703]

Promise

Promise 对象用于异步计算。一个 Promise 表示一个现在或将来可用，亦或永远不可用的值。
Promise 对象 两个特点

• 对象状态不受外界影响 Promise对象代表一个异步操作 有三种状态
  Pending( 初始状态，未履行或拒绝。) Resolve（已完成又称Fullfilled 意味着操作成功完成。）和Rejected（意味着操作失败）
• 一旦状态改变 就不会再次发生变化

基本用法

var promise = new Promise(function(resolve,reject){
    // some code 
    if(/* 异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数 该函数 提供两个参数分别是resolve和reject 这两个函数又JavaScript引擎提供 不用自己实现
其中resolve函数的作用是将Promise对象的状态从"未完成"=>"成功"（即从Pending=>Resolved）在异步操作成功时调用 并将异步操作结果 作为参数传递出去；
reject函数则用来将Promise对象的状态从Pending=>"Rejected"在异步操作失败时调用 将一步操作报出的错误作为参数 传递出去 Promise实例生成后可以用then 方法分别指定Resolved状态和Reject状态的回调函数

promise.then(function(value){
    // success
},function(value){
    // failure
});

then 方法可以接受两个回调函数作为参数第一个回调函数是Promise对象的状态变为Resolved时调用 第二个回调函数是Promise对象状态变为Reject时调用 其中第二个参数可选 这两个函数都接受Promise对象传出的值作为参数

Promise.prototype.then()与catch()

then() 方法返回一个Promise 有两个参数 分别为Promise在 success和failure情况下的回调函数

p.then(onFulfilled,onRejected);
p.then(function(value){
    // success
},function(reason){
    // failure
})

var p2 = new Promise(function(resolve,reject){
    resolve(1);
});
p2.then(function(value){
    console.log(value);   // 1
    return value+1; 
}).then(function(value){
    console.log(value);   // 2
});

catch() 方法只处理Promise被拒绝的情况 并返回一个Promise 该方法的行为和调用Promise.prototype.then(undefined,onRejected)相同

p.catch(onRejected);
p.catch(function(reason){
    // rejected
})

示例：

var p1 = new Promise(function(value){
    resolve("Success");
});
p1.then(function(value){
    console.log(value);   // "Success"
    throw "Wrong";
}).catch(function(e){
    console.log(e);    // "Wrong"
});

.catch()方法主要用于处理promise组合

Promise.all()

Promise.all()方法用于将多个Promise实例 包装成一个新的Promise实例

var p = new Promise([p1,p2,p3]);

Promise.all()接受一个数组作为参数 p1,p2,p3都是Promise 对象的实例 如果不是就会调用Promise。resolve方法 将参数转化为Promise实例在处理 p的状态由p1 p2 p3 决定 只有p1,p2,p3状态都为fullfilled p的状态才会是fullfilled 只要其中之一是rejected p 的状态就变为rejected 同时返回第一个被rejected的实例

var p = Promise.resolve(3);
Promise.all([true,p,]).then(value=>{
    console.log(value)  // [true,3]
})

Promise.race()

race函数返回一个Promise 这个Promise根据传入的Promis中的第一个状态确定

var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,500,"one");
})
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,100,"two");
})

Promise.race([p1,p2]).then(value=>{
    console.log(value);    // "two"
})

Promise.reject()

Promise.reject()方法会返回一个新的实例 该实例状态为rejected

Promise.reject("Testing Static reject").then(function(reason){
    // 未被调用
}，function(reason){
    console.log(reason);   // "Testing Static reject"
});

Promise.reject(new Error("faill")).then(function(error){
    // 未被调用
},function(err){
    console.log(err);  // [Error:fail]
})

Promise.resolve(value)

该方法返回一以给定值resolve掉的Promise对象 如果这个值是thenable 返回的Promise会继续这个thenable的对象接收到它的最终状态 否则这个被返回的promise对象会以这个值被fullfilled

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

value用来resolve待返回的promise对象的参数。既可以是一个Promise对象也可以是一个thenable。
使用静态方法Promise.resolve

Promise.resolve("Success").then(function(val){
    console.log(value);    // "Success"
},function(val){
   // not found
});

以数组resolve

varv p = new Promise.resolve([1,2,3]);
p.then(function(v){
    console.log(v[0]);   // 1
});

resolve另一个Promise对象

var o = Promise.resolve(true);
varv cast = Promise.resolve(o);
cast.then(v=>{
    console.log(v)  //true
})

[LiuL0703]

Generator

生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。从语法上可以理解为Generator函数是一个状态机 封装多个内部状态 执行Generator函数返回一个遍历对象 可以依次遍历Generator函数内部的每一个状态 Generator函数有两个特征

• function命令与函数名之间有一个*号
• 函数内部使用yield语句 定义不同的内部状态

function* helloWorldGenerator(){
    yield"hello";
    yield"world";
    return "ending";
}

var hw = helloWorldGenerator();

next方法

调用next方法 使指针移向下一个状态 也就是说 每次调用next方法 内部指针就从函数头部或上一次停下来的地方开始执行 直到遇到下一个yield语句 为止 换言之 Generator函数是分段执行的 yield语句是暂停执行的标记 而next方法可以恢复执行

hw.next();
//   { value: 'hello', done: false }
hw.next();
//  { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

yield* 语句

用来在一个Generator函数里面执行另一个Generator函数
如果yield命令后面跟的是一个遍历器对象 需要在以yield命令后加* 号 表明返回的是一个遍历器对象

function* anotherGeneator(i){
    yield i+1;
    yield i+2;
    yield i+3;
}

function *generator(i){
    yield i;
    yield* anotherGenerator();
    yield i+10;
}

var gen = generator(10);
console.log(gen.next().value);  // 10
console.log(gen.next().value);  // 11
console.log(gen.next().value);  // 12
console.log(gen.next().value);  // 13
console.log(gen.next().value);  // 20