【无标题】

、 ECMAScript 6语法

1 ECMAScript和JavaScript的关系

在1996年以前，浏览器是不⽀持脚本语⾔的，只⽀持html和css。

NetScape⽹景公司提出了前端编程语⾔，为了蹭java的热度，起名为JavaScript。并且经过与Sun公司的授权，⽹景公司将JavaScript注册为商标。

1996年，⽹景公司将该脚本提交给标准委员会ECMA。1997年，ECMA将其命名为ECMAScript。因此ECMAScript是国际标

准，JavaScript是标准的实现。

2 ES6与ES5

2011年，ECMAScript5.1发布。⾃此以后，新的标准更新特别频繁，以后统称为ES6。

⽬前的主流浏览器都⽀持ES5，但是对ES6的⽀持不全⾯。

Bable是⼀个ES6转码器，可以将ES6代码转为ES5代码，从⽽在⽼的浏览器执⾏。

Bable的配置⽂件时.babelrc，存放在项⽬的根⽬录下。配置⽂件的基本规则是

{

"presets": [],

"plugins": []

}

3 let和const

js中定义变量⽤var，var存在变量提升现象，即var变量可以在声明之前使⽤。

let不存在变量提升。建议⽤let和const。const表⽰常量，let表⽰变量。

var1

var var1 = 100; //关键词var定义的变量是全局的

// var2 // 因为var2没有定义，所以报错

let var2 = 200; //该处使⽤let定义变量var2

const name = '张三'

// name = '⾥斯' //使⽤const定义的常量不能被重写赋值

4 块级作⽤域

es5只⽀持全局作⽤域和函数作⽤域，es6增加了块级作⽤域。

var a = 19;

{

var a = 20;

}

console.log('输出a=', a) //输出a=20

let b=10;

{

let b=30;

}

console.log('输出b=', b) //输出b=10 //块级作⽤域的范围仅限于{...}之内

类似于多重赋值，使⽤符号[]或者{}。

let a,b = [1,2] //定义了⼀个变量a，没有赋值；定义了⼀个变量b，赋值了

console.log('a=', a, 'b=',b) //a= undefined b= [ 1, 2 ]

let [c,d] = [1,2] //解构，使⽤[]

console.log('c=', c, 'd=',d) //c= 1 d= 2

// 对象的结构，使⽤{}

let {name, age} = {'name':'wuchao', 'age':23}

console.log('name=', name, 'age=',age)

let {id, ...other} = {'id':10, 'name':'wuchao', 'age':23, 'address':'北京市', 'school':'ucas'}

console.log('id=', id, 'other=',other) //id= 10 other= { name: 'wuchao', age: 23, address: '北京市', school: 'ucas' }

// 提取json数据

let jsonData = {id:42, name:'吴超'}

let {id, name} = jsonData

对象的解构赋值，可以很⽅便的将现有对象的⽅法，赋值到某个变量。在node中很常⽤。

// 把Math类中的三个⽅法解构赋值

let {log, sin, cos} = Math;

// 把console类中的log⽅法解构赋值；

const {log} = console;

log('hello')

// 下⾯是输⼊模块的指定⽅法

const {SourceMapConsumer, SourceNode} = require('source-map')

6 字符串的扩展

6.1 es6⽀持unicode

⽐如“\u0061”表⽰”a“。

6.2 遍历字符串

// 遍历字符串

for(let i of 'foo'){

console.log(i)

}

6.2 模板字符串

let name ='张三' , age =23

let s1 = '我的名字叫'+name+'，年龄是'+age // 字符串拼接

console.log('s1=', s1)

let s2 = '我的名字叫${name}，年龄是${age}' // 这⾥使⽤单引号，不会解析变量

console.log('s2=', s2)

let s3 = `我的名字叫${name}，年龄是${age}` // 使⽤飘号，可以解析⾥⾯的变量

console.log('s3=', s3)

6.3 标签模板

标签模板相当于函数调⽤。飘号相当于函数的参数。

alert`hello` 等同于 alert(['hello'])

let s = 'Hello world!'

s.includes('o') //true

s.startsWith('Hello') //true

s.endsWith('!') //true

'x'.repeat(3) //'xxx'

'x'.padStart(5, 'ab') //'ababx'

'x'.padEnd(5, 'ab') //'xabab'

' abc '.trim() //'abc'

7 函数的扩展

7.1 参数的默认值

es6之前的函数参数，不能使⽤默认值。

function log(x, y='world'){...}

7.2 与解构赋值默认值结合使⽤

// 定义

function foo({x, y=5}){...}

// 调⽤

foo({}) //undefined 5

foo({x:1}) //1 5

foo({x:1, y:2}) // 1 2

foo() // TypeError

// 定义

function fetch(url, {body='', method='GET', headers={}}){...}

// 调⽤

fetch('http://www.baidu.com', {}) //GET

fetch('http://www.baidu.com') //报错

7.3 rest参数

es6引⼊rest参数（形式为 …变量名），⽤于获取函数的多余参数。rest参数搭配的变量是⼀个数组。

function add(...values)

add(1,2,3)

7.4 箭头函数

function f1(a, b){return a+b;}

// 箭头函数

(a, b)=>{

console.log('进⼊了箭头函数', )

return a+b

}

// 简洁写法

(a, b)=>a+b

// 常⽤作匿名函数

[1,2,3].map(x=>x*x)

// 箭头函数体内的this对象，就是定义时所在的对象，⽽不是使⽤时所在的对象

function foo(){

setTimeout(()=>{

console.log(this.id)

}, 100)

}

var id=21

foo.call({id:42}) // 42

8 数组扩展

9 对象的扩展

ES6允许在⼤括号⾥⾯，直接写⼊变量和函数，作为对象的属性和⽅法。

9.1 属性简写

const name = "吴超"

const baz = {name} // {name:"吴超"}

上⾯的代码中，变量foo直接写在⼤括号中。这时，属性名就是变量名，属性值就是变量值。

function f1(name, age){

return {name, age}

}

f1("张三", 23) // Object {name:'张三', age:23}

9.2 ⽅法简写

以前的写法是

{

f1:function(){return "f1"}

}

新的写法是

{

f1(){return "f1"}

}

9.3 对象的定义

现在，使⽤属性、⽅法的简写，就可以⾮常⽅便的定义⼀个对象

const person = {

id,

name:'张三',

say(msg){

return 'hello '+msg

}

}