当先锋百科网

首页 1 2 3 4 5 6 7

ECMAScript 2015

文章目录

ES 6 (ECMAScript 2015)

通常将 ECMAScript 看作是 JavaScript 的标准规范
实际上JavaScript 是 ECMAScript 的扩展语言
ECMAScript 只是提供了最基本的语法
JavaScript 在语言基础上进行了扩展

JavaScript : ECMAScript + BOM + DOM
Node: ECMAScript + fs + net + etc.

ECMAScript 2015是最新 ECMAScript 标准的代表版本
用 ES6来泛指所有的新标准（注意分辨用 ES6 是特指还是泛指）

let 与块级作用域

作用域 - 某个成员能够起作用的范围

全局作用域
函数作用域
块级作用（es6新增）

块级作用域
块，就是 {} 包裹起来的一个范围，比如if或者for中的{}
和 var 有另外一个区别，let 不会进行变量声明提升

 // 非常适合设置 在 for 循环中的循环变量
 // 通过 let 定义变量，只在自己的循环中生效
 for (let i = 0 ; i < 3 ; i++) {
   for (let i = 0; i < 3;i++) {
     console.log(i);
   }
 }

// 通过循环批量添加事件
// 通过 let 定义变量，只能在块级内部被调用
 // var eles = [{}, {}, {}];
 // for (let i = 0 ; i < eles.length ; i++) {
 //   eles[i].onclick = function () {
 //     console.log(i);
 //   }
 // }
 // eles[0].onclick();

 // 循环 实际上有两层作用域
 // for (let i = 0 ; i < 10 ; i++) {
 //   let i = "foo";
 //   console.log(i);
 // }
 
 // let i = 0;
 // if (i < 10) {
 //   let i = "foo";
 //   console.log(i);
 // }
 // i++;

const

特点：在 let 的基础上增加了一个【只读】效果
声明的时候必须同时赋初值

总结
最佳实践：不用 var，主用 const，配合 let

数组的解构

// const arr = [100, 200, 300]
 // const [foo, bar, baz] = arr
 // console.log(foo, bar, baz)

 // const arr = [100, 200, 300]
 // const [, , baz] = arr
 // console.log( baz)

 // const arr = [100, 200, 300]
 // const [foo, ...rest] = arr
 // console.log(rest)

 // const arr = [100, 200, 300]
 // const [foo] = arr
 // console.log(foo)

 // const arr = [100, 200, 300]
 // const [foo, bar, baz = 400, more = 123] = arr
 // console.log(more)
 // console.log(baz)

 const path = "foo/bar/baz"
 // const temp = path.split("/")
 // const a = temp[1]
 const [,,a] = path.split("/")

对象的解构

// 对象解构
const obj = { name: 'zs', age: 18 }
// const { name } = obj
// console.log(name)

// const name = "tom"
// const { name: newName = "jack" } = obj
// console.log(name)
// console.log(newName)

const { log } = console
log("haha")

模板字符串字面量

// 模板字符串
// const str = `this 
// is a \`string`
// console.log(str)

const name = "tom"
const str = `hey, ${name},${1 + 1},${Math.random()}`
console.log(str)

模板字符串串标签函数

// 模板字符串标签函数
// const str = console.log`hello JavaScript`

 const name = "zs"
 const gender = true
 function myTagFunc(strings, name, gender) {
   // console.log(strings,name,gender)
   // 处理一下 性别
   const sex = gender ? "man" : "woman"
   return strings[0] + name + strings[1] + sex + strings[2]
 }
 const str = myTagFunc`hi, ${name} is a ${gender}`
 console.log(str)

字符串的扩展方法

includes()
startsWith()
endsWith()

// 字符串扩展方法
const msg = 'Error: foo is not defined.'
console.log(msg.startsWith('Error'))
console.log(msg.endsWith('.'))
console.log(msg.includes('foo'))

参数默认值

// 函数参数的默认值
function foo(bar,enable = true) {
  // enable = enable || true
  // enable = enable === undefined ? true : enable
  console.log('foo invoked enable:')
  console.log(enable)
}
foo('bar')

剩余参数

// 剩余参数
 function fun(n,...args) {
   console.log(args)
 }
 fun(1,2,3,4)

展开数组

// 展开数组操作
const arr = ['foo', 'bar', 'baz']
// console.log(arr[0],arr[1],arr[2])
// console.log.apply(console,arr)

console.log(...arr)

箭头函数

// 箭头函数
// function plus(a) {
 //   return a + 1
 // }
 // console.log(plus(10))

 // const plus = (a, b) => {
 //   console.log('plus invoked')
 //   return a + b
 // }
 // console.log(plus(1,2))
 
 const arr = [1,2,3,4,5,6,7]
 // const arr1 = arr.filter(function (item) {
 //   return item % 2
 // })
 const arr1 = arr.filter(i => i % 2)
 console.log(arr1)

箭头函数与this

// 箭头函数与 this
 const person = {
   name: "tom",
   // sayHi: function () {
   //   console.log(`hi,my name is ${this.name}`)
   // }
   // sayHi: () => {
   //   console.log(`hi,my name is ${this.name}`)
   // }
   sayHi: function () {
     // const _this = this;
     setTimeout(() => {
       console.log(`hi,my name is ${this.name}`)
     },1000);
   }
 }
 person.sayHi()

对象字面量增强

// 对象字面量增强
const bar = "bar"
const age = "age"
const obj = {
  name: "tom",
  // bar: bar
  bar,
  sayHi () {
    console.log('hi')
    console.log(this)
  },
  // 计算属性名
  [1+2]: 18
}
// obj[age] = 18
console.log(obj)
// obj.sayHi()

对象扩展方法

Object.assign
将多个源对象中的属性复制到一个目标对象中

// 对象扩展方法
// Object.assign 方法

// const source1 = {
//   a: 123,
//   b: 123
// }
// const source2 = {
//   b: 678,
//   d: 789
// }
// const target = {
//   a:456,
//   c:789
// }
// const result = Object.assign(target,source1,source2)
// console.log(target)
// console.log(target === result)

// 复制对象
// function fun(obj) {
//   // 希望内部更改时，不要改外部的对象
//   const newObj = Object.assign({},obj)
//   newObj.name = 'tom'      
//   console.log(newObj)
// }
// const obj = {
//   name: 'jack',
//   age: 18
// }
// fun(obj)
// console.log(obj)

// 应用，在 options 对象参数接收时，简化
function Block(options) {
  // this.width = options.width;
  Object.assign(this,options)
}
const block1 = new Block({width: 100, height: 100, x: 50, y: 50})
console.log(block1)

Object.is

 // 对象扩展方法
// Object.is 方法
 console.log(
   // 0 == false
   // 0 === false
   // +0 === -0
   // NaN === NaN
   // Object.is(+0,-0)
   Object.is(NaN,NaN)
 )

class类

// class 类
// function Person(name, age) {
 //   this.name = name;
 //   this.age = age;
 // }
 // Person.prototype.sayHi = function () {
 //   console.log(`hi,my name is ${this.name}`)
 // }

 class Person {
   constructor (name, age) {
     this.name = name;
     this.age = age;
   }
   sayHi () {
     console.log(`hi,my name is ${this.name}`)
   }
 }
 const p1 = new Person("tom",18)
 console.log(p1)
 p1.sayHi()

静态成员

静态方法 vs 实例方法
ES2015 中新增添加静态方法的关键词 stati

// 静态方法
class Person {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi () {
    console.log(`hi,my name is ${this.name}`)
  } 
  static create (name,age) {
    console.log(this)
    return new Person(name,age)
  }     
}
const p1 = Person.create("zs",19)
console.log(p1)

类的继承

// 静态方法
 class Person {
   constructor (name, age) {
     this.name = name;
     this.age = age;
   }
   sayHi () {
     console.log(`hi,my name is ${this.name}`)
   }   
 }
 class Student extends Person {
   constructor (name,age,number) {
     super(name,age)
     this.number = number
   }
   hello () {
     super.sayHi()
     console.log(`学号是 ${this.number}`)
   }
 }
 const s1 = new Student("tom",18,101)
 s1.hello();

Set 数据结构

// Set 数据结构
const s = new Set()
 s.add(1).add(2).add(3).add(4).add(2)
 console.log(s)

 // s.forEach(i => console.log(i))

 // for (let i of s) {
 //   console.log(i)
 // }

 // console.log(s.size)

 // console.log(s.has(4))

 // console.log(s.delete(100))
 // console.log(s)

 // s.clear()
 // console.log(s)

 // 数组去重
 const arr = [1.3,4,6,2,4,7,5,8]
 // const b = Array.from(new Set(arr))
 const b = [...new Set(arr)]
 console.log(b)

Map 数据结构

 // Map 数据结构
// const obj = {}
 // obj[true] = "boolean"
 // obj[123] = "number"
 // obj[{a: 1}] = "object"

 // console.log(Object.keys(obj))
 // console.log(obj[{}])
 // console.log(obj['[object Object]'])

 const map = new Map()
 const a = { a: 1}
 map.set(a,100)
 console.log(map)
 console.log(map.get(a))
 
 // map.has()
 // map.delete()
 // map.clear()

 map.forEach((value,key) => {
   console.log(key,value)
 })

Symbol

最主要的作用就是为对象添加独一无二的属性标识符

// Symbol 数据类型

// shared.js =============================
 // const cache = {}
 // // a.js ==================================
 // cache['a_foo'] = Math.random()
 // // b.js ==================================
 // cache['b_foo'] = 123
 
 // console.log(cache)

 // Symbol 符号，作用就是表示一个独一无二的值
 // const s = Symbol()
 // console.log(s)
 // console.log(typeof s)
 // console.log(Symbol() === Symbol())
 // console.log(Symbol('foo'))
 // console.log(Symbol('bar'))
 // console.log(Symbol('baz'))
 
 const obj = {
   [Symbol()] : 789,
   name: "zs"
 }
 obj[Symbol()] = 123
 obj[Symbol()] = 456
 console.log(obj[Symbol()])
 console.log(obj.name)

补充

// Symbol 补充
    
// console.log(Symbol("foo") === Symbol("foo"))

// const a = Symbol.for(true)
// const b = Symbol.for('true')
// console.log(a === b)

// const obj = {
//   [Symbol.toStringTag]: "XObject"
// }
// console.log(obj.toString())

const obj = {
  [Symbol()]: "Symbol value",
  foo: "foo value"
}
// for (var k in obj) {
//   console.log(k)
// }
console.log(Object.getOwnPropertySymbols(obj))
// console.log(Object.keys(obj))
// console.log(JSON.stringify(obj))

for…of 循环

for
for…in
for…of

// for……of 循环
const arr = [100, 200, 300, 400]

 // for (const item of arr) {
 //   console.log(item)
 // }

 // arr.forEach(item => {   没有办法打断遍历
 //   console.log(item)
 // })

 // for (const item of arr) {
 //   console.log(item)
 //   if (item >= 200) {
 //     break
 //   }
 // }

 // const s = new Set(["foo", "bar", "baz"])
 // for (const item of s) {
 //   console.log(item)
 // }

 // const m = new Map()
 // m.set("foo",1)
 // m.set("bar",2)
 // for (const [key,value] of m) {
 //   console.log(key,value)
 // }

 // const obj = {
 //   name: "zs",
 //   age: 18
 // }
 // for (const item of obj) {
 //   console.log(item)
 // }

ES 2015 其他内容

•可迭代接口
• 迭代器模式
• 生成器
• Proxy 代理对象
• Reflect 统一的对象操作 API
• Promise 异步解决方案
• ES Modules 语言层面的模块化标准

// ES2016 新增内容

const arr = [1,true,NaN,23,'hello']
// console.log(arr.indexOf(true))
// console.log(arr.indexOf(null))
// console.log(arr.indexOf(NaN))

// includes 包含
// console.log(arr.includes(NaN))

// 指数运算符 **
// console.log(Math.pow(2,3))

console.log(2 ** 10)