ES6-函数与数组命名
2024-08-30 14:44:19
1 箭头函数
1.1 以往js
- function 名字(){ 其他语句 }
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>最新文章
- Openstack入坑指南
- Java 集合 — HashMap
- 1055: [HAOI2008]玩具取名
- 四则运算APP（BUG发掘）
- Ⅰ.net通信指前提
- jQuery页面加载后执行的事件(3种方式)
- IBM Rational-完整的软件工程解决方案工具集
- Linux下ln链接命令详解
- leetcode Reverse Integer python
- Windows下QT4.8.4编译环境的搭建（转载http://blog.csdn.net/bestgonghuibin/article/details/38933141）
- 模态对话框 bootstrap-modal.js
- JS 多选文件或者选择文件夹
- .net core高性能通讯开源组件BeetleX
- Eclipse搭建服务器，实现与Android的简单通信
- STATS 326 Applied Time Series
- MyEclipse复制js文件乱码
- UE4 Run On Server与Run on owning client
- Sublime Text 3 插件的安装、升级和卸载
- 编译hadoop的libhdfs.a
- Mybatis在Maven项目中使用