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
- 1
- 2
- 3
- 4
- 5
- 6
上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，所以需要块级作用域。下面场景中，内层变量可能会覆盖外层变量。
var tmp = new Date();
function fn(){ console.log(tmp); if(false){ var tmp = 'hello world'; }
}
fn(); //undefined
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。
Let不存在变量提升
//var的情况
console.log(foo);
var foo = 2; //undefined
//let的情况
console.log(bar);
let bar = 2; //ReferenceError: Cannot access 'bar'
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上面代码中，变量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;
}
- 1
- 2
- 3
- 4
- 5
上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
const 命令
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415926;
PI = 3; //TypeError: Assignment to constant variable.
- 1
- 2
上面代码表明改变常量的值会报错。
字符串的扩展-模板字符串
传统的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
上面这种写法相当繁琐不方便，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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
运行结果：
注意：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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
上面代码的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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
完整代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
运行结果：
函数的扩展-箭头函数
ES6允许使用“箭头”（=>）定义函数：
//ES5定义函数
var f = function(v) { return v;
};
//ES6定义箭头函数
var f = v => v
- 1
- 2
- 3
- 4
- 5
- 6
- 7
箭头函数的语法
1.如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
let f = () => 5;
// 等同于
let f = function() { return 5 };
let sum = (num1, num2) => { return num1 + num2;
};
// 等同于
let sum = function(num1, num2) { return num1 + num2;
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2.如果只有一个参数，那么圆括号就可以省略了。
let f = str => { console.log(str);
}
f('hello');
- 1
- 2
- 3
- 4
3.如何函数体中的代码只有一句，那么大括号可以省略。
let f = str => console.log(str);
f('hello');
- 1
- 2
4.但如果函数体中的代码只有一个return语句，那么return关键词也必须省略。
//这是错误的
let sum = (num1, num2) => return num1 + num2;
//这是正确的
let sum = (num1, num2) => num1 + num2;
- 1
- 2
- 3
- 4
- 5
5.由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
let getTempItem = id => ({ id:id, name:'Temp' })
- 1
使用箭头函数的注意点
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
运行结果：
注意：
箭头函数的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
效果截图：
使用箭头函数简化回调函数
箭头函数的一个用处是简化回调函数
样例1：
let arr = [1,2,3];
// function函数写法
arr = arr.map(function(x) { return x * x;
});
// 箭头函数写法
arr = arr.map(x => x * x);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
样例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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
效果截图：
看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。
原文链接：keafmd.blog.csdn.net/article/details/110311107
- 点赞
- 收藏
- 关注作者
评论（0）