ECMAScript 6 简介
ECMAScript 6 简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMA：国际标准组织
1 变量声明const,let,var
（1）var关键字声明变量。
会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。
这就是函数变量提升
例如:
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代码实际上是：
function aa() {
var test // 变量提升
if(bool) {
test = 'hello man'
} else {
//此处访问test 值为undefined
console.log(test)
}
//此处访问test 值为undefined
}
所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
(2) let和const都是块级作用域
let表示变量、const表示常量。
在一个函数内部,在一个代码块内部,{}大括号内的代码块即为let 和 const的作用域。
function aa() {
if(bool) {
let test = 'hello man'
} else {
//test 在此处访问不到
console.log(test)
}
}
let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说const。
const name = 'lux'
name = 'joe' //再次赋值此时会报错
(3) 变量的解构赋值
数组解构赋值，就是把数组元素的值按照顺序依次赋值,解构变量就是赋值，用更少的代码来解决更多的事情
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 </head>
9 <body>
10 <script>
11 // ==============一般的操作================
12 // let arr = [11,22,55,444];
13 // let a = arr[0];
14 // let b = arr[1];
15 // let c = arr[2];
16 // let d= arr[3];
17 // console.log(a,b,c,d) //11 22 55 444
18
19 // ===============升级版的操作============
20 // let[a,b,c] = [88,55,77]; //解构赋值的目的就是缩减代码，吧上面几行显示的用一行来替代
21 // console.log(a,b,c) //88 55 77
22 //
23 // let[a,b,c,[d]] = [88,55,77,100]; //会报错
24 // let[a,b,c,[d]] = [88,55,77,[100]]; //左边和右边的格式定义成一样的
25 // console.log(a,b,c,d) ; //88 55 77 100
26 //
27 // let obj={
28 // al:"json",
29 // a2:23,
30 // a3:666
31 // };
32 // let {aa,bb}=obj;
33 // console.log(aa,bb); //undified
34
35
36 let obj2={
37 a5:"dddff",
38 "a4":"jggz",
39 a2:[11,22],
40 a3:666,
41 a1:'jaas'
42 };
43 let {a1,a2,a3,a4,a5}=obj2; //注意格式是一致的，并且和里面的键对应
44 console.log(a2,a1,a3,a4,a5); //undified
45 </script>
46 </body>
47 </html>
2.模板字符串
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
<span>hello world</span>
</div>`
对于字符串es6当然也提供了很多厉害的方法。说几个常用的。
// 1.includes：判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
//如果你带入小数, Math.floor(num) 来处理
字符串增强
indexOf类型增强
'my string'.startsWith('my'); //true
'my string'.endsWith('my'); //false
'my string'.includes('str'); //true
//es5写法
var str = 'my string';
str.indexOf('my') == 0; //true
str.lastIndexOf('my') == (str.length - 'my'.length); // false
str.indexOf('str') > -1; // true
重复字符串
'my '.repeat(3); // 'my my my '
模版字符串
let name = 'John';
let apples = 5;
let pears = 7;
let bananas = () => 3;
console.log(`This is ${name}.`);
console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);
// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');
//ES5
var data ='hid='+hid+'&name='+that.name+'&email='+that.email+'&contact='+that.contact+'&comment='+that.comment;
$.get('/_api/House/houseQuery?'+data,function(d){});
//ES6
let data = 'hid=$｛hid｝&name=${self.name}&email=${self.email}&contact=${self.contac}&comment=${self.comment}';
$.get('/_api/House/houseQuery?${data}',function(d){});
3.函数
(1)函数默认参数
ES函数定义参数默认值
function action(num) {
num = num || 200
//当传入num时，num为传入的值
//当没传入参数时，num即有了默认值200
return num
}
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
(2) 箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点
-
不需要function关键字来创建函数
-
省略return关键字
-
继承当前上下文的 this 关键字
//例如： [1,2,3].map( x => x + 1 ) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this)) let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}]; // ES5的写法: var titles = books.map(function(item) { return item.title; }); // ES6的写法: let titles = books.map( item => item.title )
箭头函数参数
//没有参数
books.map( () => 1 ); // [1, 1]
//多个参数
[1,2].map((n, index) => n * index); // [0, 2]
4.拓展的对象功能
(1) 对象初始化简写
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：
function people(name, age) {
return {
name: name,
age: age
};
}
键值对重名，ES6可以简写如下：
function people(name, age) {
return {
name,
age
};
}
ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：
const people = {
name: 'lux',
getName: function() {
console.log(this.name)
}
}
ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
5.更方便的数据访问--解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5我们提取对象中的信息形式如下：
const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
解构能让我们从对象或者数组里取出数据存为变量，例如
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
读书使人心眼明亮
