前端复习04ES6

function bar(value) {
  var testValue = 'inner';

  var rusult = testValue + value;

  function innser() {
     return rusult;
  };

  return innser();
}

console.log(bar('fun'));

function test () {
  console.log(a)
  var a = 1
}

test() //undefined

function test () {
  var a
  console.log(a)
  a = 1
}

test() //undefined

window.a = 3
function test () {
  console.log(this.a)
}

test.bind({ a: 2 })() // 2
test() // 3

for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

array.forEach(function(i){
  console.log(i);
})

[1,2,3,4,5].every(function(i){
  if(i===2){
    return false;
  }else{
    console.log(i)
    return true
  }
})

[1,2,3,4,5].every(function(i){
  if(i===2){

  }else{
    console.log(i)
  }
return true
})

for (var index in array) {
  console.log(array[index]);
}

[1,2,3,4,5].map(item => {
    console.log(item)
})

for (variable of iterable) {

} 

for (let val of [1,2,3]) {
  console.log(val);
}
// 1,2,3

const Price = {
  A: [1.5, 2.3, 4.5],
  B: [3, 4, 5],
  C: [0.5, 0.8, 1.2]
}

将伪数组转换为数组：

let args = [].slice.call(arguments);
let imgs = [].slice.call(document.querySelectorAll('img'));

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

Array.from(arrayLike[, mapFn[, thisArg]])

Array.from({ length: 5 }, function () { return 1 })

let user = {
  0: '后盾人',
  '1': 18,
  length: 2
};
console.log(Array.from(user)); //["后盾人", 18]

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

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.of(element0[, element1[, …[, elementN]]])

arr.fill(value[, start[, end]])

let array = [1, 2, 3, 4]
array.fill(0, 1, 2)
// [1,0,3,4]

Array.from({ length: 5 }, function () { return 1 })

Array(5).fill(1)// [1,1,1,1,1]

查找数组内容：

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
  return element > 10;
});

console.log(found);
// 12

arr.find(callback[, thisArg])

let array = [5, 12, 8, 130, 44];

let found = array.findIndex(function(element) {
  return element > 10;
});

console.log(found);
// 1

arr.findIndex(callback[, thisArg])

3.类Class

let Animal = function (type) {
  this.type = type
  this.walk = function () {
    console.log(`I am walking`)
  }
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')

let Animal = function (type) {
  this.type = type
}

Animal.prototype.walk = function () {
  console.log(`I am walking`)
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')

class Animal {
  constructor (type) {
    this.type = type
  }
  walk () {
    console.log(`I am walking`)
  }
}
let dog = new Animal('dog')
let monkey = new Animal('monkey')

let #age = 1
class Animal {
  constructor(type) {
    this.type = type
  }
  get age() {
    return #age
  }
  set age(val) {
    if (val > 0 && val < 10) {
      #age = val
    }
  }
}

let Animal = function (type) {
  this.type = type
  this.walk = function () {
    console.log(`I am walking`)
  }
}

Animal.eat = function (food) {
  console.log(`I am eating`);
}

class Animal {
  constructor (type) {
    this.type = type
  }
  walk () {
    console.log(`I am walking`)
  }
  static eat () {
    console.log(`I am eating`)
  }
}

// 定义父类
let Animal = function (type) {
  this.type = type
}
// 定义方法
Animal.prototype.walk = function () {
  console.log(`I am walking`)
}
// 定义静态方法
Animal.eat = function (food) {
  console.log(`I am eating`)
}
// 定义子类
let Dog = function () {
  // 初始化父类
  Animal.call(this, 'dog')
  this.run = function () {
    console.log('I can run')
  }
}
// 继承
Dog.prototype = Animal.prototype

class Animal {
  constructor (type) {
    this.type = type
  }
  walk () {
    console.log(`I am walking`)
  }
  static eat () {
    console.log(`I am eating`)
  }
}

class Dog extends Animal {
  constructor () {
    super('dog')
  }
  run () {
    console.log('I can run')
  }
}

4.函数Function

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1) === 50;

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50

function f (x, y = 7, z = 42) {
  return x + y + z
}
console.log(f(1, undefined, 43))// 51

function f (x, y = 7, z = x + y) {
  return z * 0.5
}

console.log(f(1, 7))// 4

判断函数参数个数：

function test (a, b = 1, c) {
  console.log(arguments.length)
}
test('a', 'b')//2

function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}

console.log(sum(...[4]))// 9
console.log(sum(...[4, 5]))// 12
console.log(sum(...[4, 5, 6]))// 15

function hello () {
  console.log('say hello')
}
// 或

let hello = function () {
  console.log('say hello')
}

let hello = () => {
  console.log('say hello')
}

let hello = (name) => {
  console.log('say hello', name)
}
// 或者

let hello = name => {
  console.log('say hello', name)
}

5.Object

Enhanced Object Properties

var x = 0, y = 0;
obj = { x: x, y: y };

var x = 0, y = 0
obj = { x, y }

let obj = {
  foo: 'bar',
  ['baz'+ quux()]: 42
}

let obj = {
  foo (a, b) {

  },
  bar (x, y) {

  },
  * quux (x, y) {

  }
}

var obj = {
  foo: function (a, b) {

  },
  bar: function (x, y) {

  }
  //  quux: no equivalent in ES5
}

Set

let s = new Set()
let s = new Set([1, 2, 3, 4])

s.add('hello')
s.add('goodbye')

// 删除指定数据
s.delete('hello') // true
// 删除全部数据
s.clear()

// 判断是否包含数据项，返回 true 或 false
s.has('hello') // true
// 计算数据项总数
s.size // 2

let map = new Map([iterable])

let keyObj = {}
let keyFunc = function () {}
let keyString = 'a string'

// 添加键
map.set(keyString, "和键'a string'关联的值")
map.set(keyObj, '和键keyObj关联的值')
map.set(keyFunc, '和键keyFunc关联的值')

// 删除指定的数据
map.delete(keyObj)
// 删除所有数据
map.clear()

// 统计所有 key-value 的总数
console.log(map.size) //2
// 判断是否有 key-value
console.log(map.has(keyObj)) // true

map.forEach((value, key, map) => {
  console.log(value, key, map)
}, thisArg)
for ([key, value] of map) {
  console.log(key, value)

Map 和 Object 的区别

Object.assign()

Object.assign(target, …sources)

let t = Object.assign(2)
// Number {2}
let s = Object.assign(2, { a: 2 })
// Number {2, a: 2}

const s = 'aaa_aa_a'
const r1 = /a+/g
const r2 = /a+/y

r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]
r2.exec(s) // null

Unicode

/^\uD83D/u.test('\uD83D\uDC2A')
// false
/^\uD83D/.test('\uD83D\uDC2A')
// true

7.Template

 String Literals

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

Tag Literals

function Price (strings, type) {
  let s1 = strings[0]//这里传入的strings是一个数组 包含了模板中要用到的各个字符串
  const retailPrice = 20
  const wholesalePrice = 16
  let txt = ''
  if (type === 'retail') {
    txt = `购买单价是：${retailPrice}`
  } else {
    txt = `批发价是：${wholesalePrice}`
  }
  return `${s1}${txt}`//最后的返回值
}

let showTxt = Price`您此次的${'retail'}`//这里就相当于传参

console.log(showTxt) //您此次的购买单价是：20

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) //多个表达式参数 
{
    var str0 = strings[0]; // "that "
    var str1 = strings[1]; // " is a "   
    var ageStr;
    if (ageExp > 99) {
        ageStr = 'centenarian';
    } else {
        ageStr = 'youngster';
    }
    return str0 + personExp + str1 + ageStr; //通过传统的字符串拼接返回了结果
    //也可以写作 return `${str0}${personExp}${str1}${ageStr} `;  
}
var output = myTag `that ${ person } is a ${ age }`;
console.log(output); // that Mike is a youngster

8.Desctructuring

let [firstName, surname] = ['Ilya', 'Kantor']
console.log(firstName) // Ilya
console.log(surname) // Kantor

let user = {
  name: "John",
  age: 30
};

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`); // name:John, then age:30
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user.entries()) {
  console.log(`${key}:${value}`); // name:John, then age:30
}

let [name1, name2, ...rest] = 
["Julius", "Caesar", "Consul", "of the Roman Republic"];

Object Destructuring

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

let {title: title, width: width, height: height} = options;

let {width: w, height: h, title} = options;

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true    // something extra that we will not destruct
};

// destructuring assignment on multiple lines for clarity
let {
  size: { // put size here
    width,
    height
  },
  items: [item1, item2], // assign items here
  title = "Menu" // not present in the object (default value is used)
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

9.Promise

let kfc = new Promise((resolve, reject) => {
  console.log("肯德基厨房开始做饭");
  resolve("我是肯德基，你的餐已经做好了");
});
let dad = kfc.then(msg => {
  console.log(`收到肯德基消息: ${msg}`);
  return {
    then(resolve) {
      setTimeout(() => {
        resolve("孩子，我吃了两秒了，不辣，你可以吃了");
      }, 2000);
    }
  };
});
let son = dad.then(msg => {
  return new Promise((resolve, reject) => {
    console.log(`收到爸爸消息: ${msg}`);
    setTimeout(() => {
      resolve("妈妈，我和向军爸爸吃完饭了");
    }, 2000);
  });
});
let ma = son.then(msg => {
  console.log(`收到孩子消息: ${msg},事情结束`);
});

new Promise( function(resolve, reject) {…} );

1. new Promise(fn) 返回一个Promise 对象
2. 在fn 中指定异步等处理
3. 处理结果正常的话，调用resolve(处理结果值)
4. 处理结果错误的话，调用reject(Error对象)

状态说明

• pending 指初始等待状态，初始化 promise 时的状态 
• resolve 指已经解决，将 promise 状态设置为fulfilled
• reject 指拒绝处理，将 promise 状态设置为rejected
• 状态转化是单行的，不可逆转。一个 promise 必须有一个 then 方法用于处理状态改变

then

promise.then(onFulfilled, onRejected);

var promise = new Promise(function (resolve, reject) {
  resolve('传递给then的值')
})
promise.then(function (value) {
  console.log(value)
}, function (error) {
  console.error(error)
})

function loadScript (src) {
  // pending,undefined
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    script.src = src
    script.onload = () => resolve(src)// fulfilled,result
    script.onerror = (err) => reject(err)// rejected,error
    document.head.append(script)
  })
}

loadScript('./1.js')
  .then(() => {
    return loadScript('./2.js')//如果js1加载成功 则继续加载js2
  }, (err) => {
    console.log(err)
  })
  .then(() => {
    return loadScript('./3.js')//上一步不许返回的是一个promise对象 才能继续调用then方法
  }, (err) => {
    console.log(err)
  })

 Promise.resolve(42) 

new Promise(function (resolve) {
  resolve(42)
})

Promise.resolve(42).then(function (value) {
  console.log(value)
})

Promise.reject(new Error(“出错了”)) 

new Promise(function (resolve, reject) {
  reject(new Error('出错了'))
})

p.catch(onRejected);

p.catch(function(reason) {
// rejection
});

function test () {
  return new Promise((resolve, reject) => {
    reject(new Error('es'))
  })
}

test().catch((e) => {
  console.log(e.message) // es
})

Promise.all(promiseArray);

var p1 = Promise.resolve(1)
var p2 = Promise.resolve(2)
var p3 = Promise.resolve(3)
Promise.all([p1, p2, p3]).then(function (results) {
  console.log(results) // [1, 2, 3]
})

Promise.race(promiseArray);

var p1 = Promise.resolve(1)
var p2 = Promise.resolve(2)
var p3 = Promise.resolve(3)
Promise.race([p1, p2, p3]).then(function (value) {
  console.log(value) // 1
})

Reflect.apply(target, thisArgument, argumentsList)

Reflect.apply(Math.floor, undefined, [1.75])
// 1;

Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111])
// "hello"

Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index
// 4

Reflect.apply(''.charAt, 'ponies', [3])
// "i"

Reflect.construct(target,argumentsList[,newTarget])

function OneClass(num) {
    this.name = 'one';
    this.id=num;
}

function OtherClass(num) {
    this.name = 'other';
    this.oid=num;
}

var d1 = Reflect.construct(OneClass, [1],OtherClass);
var d2 = Reflect.construct(OtherClass, [1],OneClass);
console.log(d1);//结果为 OtherClass {name: "one", id: 1}
console.log(d2);//结果为 OneClass {name: "other", oid: 1}
console.log(d1 instanceof OtherClass);//true
console.log(d2 instanceof OneClass);//true

function OneClass(num) {
    this.name = 'one';
    this.id=num;
}

function OtherClass(num) {
    this.name = 'other';
    this.oid=num;
}

// 创建一个对象:
var d1 = Reflect.construct(OneClass, [1],OtherClass);
var d2 = Object.create(OneClass.prototype);
OtherClass.apply(d2,[1])
console.log(d1);//OtherClass {name: "one", id: 1}
console.log(d2);//OneClass {name: "other", oid: 1}

func.apply(thisArg, [argsArray])

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);//相当于 array.push(0,1,2)
console.info(array); // ["a", "b", 0, 1, 2]

var d2 = Object.create(OneClass.prototype);//指定原型
OtherClass.apply(d2,[1])//使用构造函数 并 传入参数

Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};

Reflect.defineProperty(target,propertyKey,attributes)

Reflect.deleteProperty(target, propertyKey)

Reflect.get(target, propertyKey[, receiver])

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.getPrototypeOf(target)

Reflect.has(target, propertyKey)

Reflect.isExtensible(target)

Reflect.ownKeys(target)

Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
Reflect.ownKeys([]); // ["length"]

Reflect.preventExtensions(target)

Reflect.set(target, propertyKey, value[, receiver])

Reflect.setPrototypeOf(target, prototype)

let p = new Proxy(target, handler)

let o = {
  name: 'xiaoming',
  age: 20
}

let handler = {
  get(obj, key) {
    return Reflect.has(obj, key) ? obj[key] : ''
  }
}

let p = new Proxy(o, handler)

console.log(p.from)//输出为 ' '

let validator = {
  set(target, key, value) {
    if (key === 'age') {
      if (typeof value !== 'number' || Number.isNaN(value)) {
        throw new TypeError('Age must be a number')
      }
      if (value <= 0) {
        throw new TypeError('Age must be a positive number')
      }
    }
    return true
  }
}
const person = { age: 27 }
const proxy = new Proxy(person, validator)
proxy.age = 'foo'
// <- TypeError: Age must be a number
proxy.age = NaN
// <- TypeError: Age must be a number
proxy.age = 0
// <- TypeError: Age must be a positive number
proxy.age = 28//正确

Revocable Proxies

let o = {
  name: 'xiaoming',
  price: 190
}

let d = Proxy.revocable(o, {
  get (target, key) {
    if (key === 'price') {
      return target[key] + 20
    } else {
      return target[key]
    }
  }
})

console.log(d.proxy.price, d)
setTimeout(function () {
  d.revoke()
  setTimeout(function () {
    console.log(d.proxy.price)
  }, 100)
}, 1000)

12.Generator

Basic Syntax

function * gen () {
  yield 1
  yield 2
  yield 3
}

let g = gen()
// "Generator { }"

1. 比普通函数多一个 *
2. 函数内部用 yield 来控制程序的执行的“暂停”
3. 函数的返回值通过调用 next 来“恢复”程序执行

yield 表达式

方法：

function * gen () {
  while (true) {
    try {
      yield 42
    } catch (e) {
      console.log(e.message)
    }
  }
}

let g = gen()
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
console.log(g.next()) // { value: 42, done: false }
// 中断操作
g.throw(new Error('break'))

console.log(g.next()) // {value: undefined, done: true}

Scene Practice

function * draw (first = 1, second = 3, third = 5) {
    let firstPrize = ['1A', '1B', '1C', '1D', '1E', '1F', '1G', '1H', '1I', '1J', '1K', '1L', '1M', '1N']// 满足1000积分的名单
    let secondPrize = ['2O', '2P', '2Q', '2R', '2S', '2T', '2U', '2V', '2W', '2X', '2Y', '2Z'] // 满足500积分的名单
    let thirdPrize = ['31', '32', '33', '34', '35', '36', '37', '38', '39'] // 满足50积分的名单
    let count = 0
    let random
    while (1) {
      if (count < first) {
        random = Math.floor(Math.random() * firstPrize.length)
        yield firstPrize[random]
        count++
        firstPrize.splice(random, 1)
      } else if (count < first + second) {
        random = Math.floor(Math.random() * secondPrize.length)
        yield secondPrize[random]
        count++
        secondPrize.splice(random, 1)
      } else if (count < first + second + third) {
        random = Math.floor(Math.random() * thirdPrize.length)
        yield thirdPrize[random]
        count++
        thirdPrize.splice(random, 1)
      } else {
        return false
      }
    }
  }
  let t = draw()
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)
console.log(t.next().value)

13.Iterator

可迭代协议 [Symbol.iterator]

authors[Symbol.iterator] = function * () {
  let allAuthors = this.allAuthors
  let keys = Reflect.ownKeys(allAuthors)
  let values = []
  while (1) {
    if (!values.length) {
      if (keys.length) {
        values = allAuthors[keys[0]]
        keys.shift()
        yield values.shift()
      } else {
        return false
      }
    } else {
      yield values.shift()
    }
  }
}

14.module

export：

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2 , 3]
export {
  name as cname,
  addr as caddr,
  list
}

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2 , 3]
export {
  name as cname,
  addr as caddr
}
export default list

import list, {cname, caddr} from A

import list, {cname as name, caddr} from A

import list, * as mod from A
console.log(list);
console.log(mod.cname);
console.log(mod.caddr);