1 箭头函数
1.1 以往js
1.2 现在ES6
- 修正了一些this，以前this可以变 ()=>{ 其他语句 }
- 如果只有一个参数,()可以省 。如果只有一个return，{}可以省
1.3 对比代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数</title>
<script>
// 原先js中的函数使用
// window.onload = function() {
// alert('abc');
// };
//现在ES6的转变箭头函数使用方法
// window.onload = () => {
// alert('abc');
// };
// js带有函数命名的使用方法
// let show = function() {
// alert('abc')
// };
// show();
// ES6带有箭头函数命名的使用方法
// let show = () => {
// alert('abc')
// };
// show();
// js带有函数参数的使用方法
// let show = function(a, b) {
// alert(a + b)
// };
// show(12, 6);
// ES6带有箭头函数参数的使用方法
// let show = (a, b) => {
// alert(a + b)
// };
// show(12, 6);
// js数组在函数的使用
// let arr = [12, 5, 8, 99, 33, 14, 26];
// arr.sort();
// alert(arr);
// 进行一个排序操作
// arr.sort(function(a, b) {
// return a - b;
// });
// alert(arr);
// ES6中数组对函数的使用
// let arr = [12, 5, 8, 99, 33, 14, 26];
// arr.sort();
// alert(arr);
//进行一个排序操作
// arr.sort((a, b) => {
// return a - b;
// });
// alert(arr);
/圆括号可以省略，中括号可以省略
// let show = a => a * 2;
// alert(show(12));
</script>
</head>
<body>
</body>
</html>
2 参数扩展/数组展开
2.1 收集剩余的参数
- function show(a,b,...args){} *Rest Parameter必须是最后一个
2.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数扩展</title>
<script>
// args是剩余的参数存储，必须是最后一个
function show(a, b, ...args) {
alert(a);
alert(b);
alert(args);
};
show(12, 3, 42, 21, 21);
</script>
</head>
<body>
</body>
</html>
3 展开一个数组
- 展开后的效果，跟直接把数组的内容写在这儿一样 args=[1,2,3]则...args等同于1,2,3
3.1 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数展开</title>
<script>
let arr = [12, 3, 42];
// 用法1
// 结果为依次输出12,3,42
show(...arr);
function show(a, b, c) {
alert(a);
alert(b);
alert(c);
};
let arr1 = [1, 23, 4];
// 用法2
let arr2 = [arr, arr1];
// 结果为依次输出12,3,42,1, 23, 4
alert(arr2);
// 用法3
function show2(...args) {
fn(...args);
};
function fn(a, b, c) {
alert(a + b + c);
}
show2(1, 2, 3);
</script>
</head>
<body>
</body>
</html>
4 默认参数
4.1 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默认参数</title>
<script>
function show(a, b = 2, c = 4) {
alert(a + b + c);
}
show(1);
</script>
</head>
<body>
</body>
</html>