ES6基础入门

ES6简介


1、ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。
2、它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
3、ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。
4、ES6 从开始制定到最后发布,整整用了15年 2009年12月,ECMAScript 5.0版正式发布 2011年6月,ECMAscript5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。 2013年3月,ECMAScript6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。 2013年12月,ECMAScript6草案发布。然后是12个月的讨论期,听取各方反馈。 2015年6月,ECMAScript6正式通过,成为国际标准。从2000年算起,这时已经过去了15年。


ES6基础编程

let命令


ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。


let命令存在块级作用域

if (true) {
var a = 10;
let b = 20;
}
console.log(a); //10
console.log(b); //Uncaught ReferenceError: b is not defined


上面代码在代码块之中,分别用var和let声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。


因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景,所以需要块级作用域。下面场景中,内层变量可能会覆盖外层变量。

var tmp = new Date();
function fn(){
console.log(tmp);
if(false){
var tmp = 'hello world';
}
}
fn(); //undefined


上面代码中,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。


Let不存在变量提升

//var的情况
console.log(foo);
var foo = 2; //undefined

//let的情况
console.log(bar);
let bar = 2; //ReferenceError: Cannot access 'bar'


上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。 变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。 因此,使用let声明变量,极大的消除了代码的潜在bug的隐患。


Let暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var temp = 123;
if(true){
temp = 'abc'; //ReferenceError: Cannot access 'temp'
let temp;
}


上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。


const 命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const PI = 3.1415926;
PI = 3; //TypeError: Assignment to constant variable.


上面代码表明改变常量的值会报错。


字符串的扩展-模板字符串

传统的JavaScript语言,输出模板通常是这样写的:

<p id="result"></p>
<script>
let basket = {
count: 100,
onSale: 80
}
document.getElementById('result').innerHTML =
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!';
</script>

上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

<p id="result"></p>
<script>
let basket = {
count:100,
onSale:80
}
document.getElementById('result').innerHTML =
`There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!`;
</script>

运行结果:

ES6基础入门_块级作用域


注意:ES6模板字符串中必须要使用反引号。


函数的扩展rest参数

ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
let sum = 0;
for(var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10


上面代码的add函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。


rest 参数中的变量代表一个数组,所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子。

function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>

function add(...values) {
let sum = 0;
for(var val of values) {
sum += val;
}
return sum;
}
var result= add(2, 5, 3)
console.log("结果:"+result); // 10

function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
//遍历输出
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
console.log(a);
</script>
</body>
</html>

运行结果:

ES6基础入门_块级作用域_02

函数的扩展-箭头函数

ES6允许使用“箭头”(=>)定义函数:

//ES5定义函数
var f = function(v) {
return v;
};

//ES6定义箭头函数
var f = v => v

箭头函数的语法

1.如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

let f = () => 5;
// 等同于
let f = function() { return 5 };

let sum = (num1, num2) => {
return num1 + num2;
};
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};

2.如果只有一个参数,那么圆括号就可以省略了。

let f = str => {
console.log(str);
}
f('hello');

3.如何函数体中的代码只有一句,那么大括号可以省略。

let f = str => console.log(str);
f('hello');

4.但如果函数体中的代码只有一个return语句,那么return关键词也必须省略。

//这是错误的
let sum = (num1, num2) => return num1 + num2;

//这是正确的
let sum = (num1, num2) => num1 + num2;

5.由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

let getTempItem = id => ({ id:id, name:'Temp' })

使用箭头函数的注意点

1.函数体内的this对象。


函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
或者说:箭头函数当方法使用时没有定义this绑定,而是捕获所在上下文的 this ,作为自己的 this 。


样例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="one">one点击(使用function)</button>
<button id="two">two点击(使用箭头函数)</button>
<script>
var one = document.getElementById('one');
var two = document.getElementById('two');

one.onclick = function (){
console.log(this); //<button id="one">one点击(使用function)</button>
}
two.onclick = ()=>{
console.log(this); //window
}
</script>
</body>
</html>

运行结果:

ES6基础入门_html_03


注意:
箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind()等。
普通函数的this指向调用它的那个对象。


2.不可以当作构造函数。


也就是说,不可以使用new命令,否则会抛出一个错误。


3.不可以使用arguments对象。


该对象在函数体内不存在。如果要用,可以用Rest参数代替。


this指向问题

样例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>点击</button>
<script>
//指向Window,因为处于Window作用域中(或者说console本身就是window对象的函数)
window.console.log('script块:'+this);

//指向Window,因为处于Window作用域中(或者说if是声明在window对象中的)
if(true){
console.log('if块:'+this);
}

//指向Window,因为处于Window作用域中(或者说此函数是在window对象中的)
//注意:可以这样写:var fn = function(){}
// 但不能这样写:let fn = function(){}
var fn = function(){
console.log('函数中:'+this);
}
window.fn();

//指向Window,因为处于Window作用域中(或者说setTimeout本身就是window对象的函数)
window.setTimeout(function(){
console.log('setTimeout函数中:'+this);
},1);

//指向Button对象
document.getElementsByTagName('button')[0].onclick=function(){
console.log('button事件处理函数中:'+this);
}

/**
* 测试:点击按钮后,结果为:
* script块:[object Window]
* if块:[object Window]
* 函数中:[object Window]
* setTimeout函数中:[object Window]
* button事件处理函数中:[object HTMLButtonElement]
*/
</script>
</body>
</html>

效果截图:

ES6基础入门_块级作用域_04

使用箭头函数简化回调函数

箭头函数的一个用处是简化回调函数

样例1:

let arr = [1,2,3];

// function函数写法
arr = arr.map(function(x) {
return x * x;
});

// 箭头函数写法
arr = arr.map(x => x * x);

样例2:

let values = [5,2,8];

// function函数写法
let result = values.sort(function(a, b) {
return a - b;
});

// 箭头函数写法
let result = values.sort((a, b) => a - b);

rest参数与箭头函数结合

样例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let numbers = (...nums) => nums;
let arr1 = numbers(1, 2, 3, 4, 5)
console.log(arr1); // [1,2,3,4,5]


let headAndTail = (head, ...tail) => [head, tail];
let arr2 = headAndTail(1, 2, 3, 4, 5)
console.log(arr2); // [1,[2,3,4,5]]

</script>
</body>
</html>

效果截图:

ES6基础入门_html_05

看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看到右下角的 “一键三连” 了吗,没错点它[哈哈]

ES6基础入门_ecmascript_06

加油!

共同努力!

Keafmd



更多内容详见微信公众号:Python研究所

ES6基础入门_块级作用域_07