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>

ES6-函数与数组命名的更多相关文章

  1. ES6函数扩展

    前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES ...

  2. ES6新特性-------数组、Math和扩展操作符(续)

    三.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的argumen ...

  3. C语言中的函数、数组与指针

    1.函数:当程序很小的时候,我们可以使用一个main函数就能搞定,但当程序变大的时候,就超出了人的大脑承受范围,逻辑不清了,这时候就需要把一个大程序分成许多小的模块来组织,于是就出现了函数概念:  函 ...

  4. ES6 函数的扩展2

    8.2 rest参数 ES6引入rest参数(形式为"-变量名"),用于获取函数的多余参数,这样就不需要使用arguments对象了. arguments对象并没有数组的方法,re ...

  5. Scala学习教程笔记一之基础语法,条件控制,循环控制,函数,数组,集合

    前言:Scala的安装教程:http://www.cnblogs.com/biehongli/p/8065679.html 1:Scala之基础语法学习笔记: :声明val变量:可以使用val来声明变 ...

  6. java基础基础总结----- 关键字、标识符、注释、常量和变量、运算符、语句、函数、数组(三)

    Java语言基础组成:关键字.标识符.注释.常量和变量.运算符.语句.函数.数组 一.标识符 标识符是在程序中自定义的一些名称,由大小写字母[a-zA-Z],数字[0-9],下划线[ _ ],特殊字符 ...

  7. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  8. es6函数的扩展

    扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 扩展运算符的应用 (1)合并数组 // ES5 [1, 2].co ...

  9. C语言中变量名及函数名的命名规则与驼峰命名法

    一.C语言变量名的命名规则:(可以字母,数字,下划线混合使用) 1. 只能以字母或下划线开始:2. 不能以数字开始:3. 一般小写:4. 关键字不允许用(eg:int float=2//error  ...

  10. 包括ES6在内的数组操作(待更)

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

随机推荐

  1. 自己封装函数,实现数组的内置方法indexOf的功能

    在学习或开发过程中,经常会有朋友需要使用到一个数组方法-indexOf,这里我们先来谈谈它的功能:返回指定数据所在的索引,如果没有则返回-1. 那么我们在使用时通常是直接使用它这个数组内置方法 今天这 ...

  2. Re模块练习题

    import re s = "1 -2*(60+(-40.35/5)-(-4*3))" # 获取所有数字 ret = re.findall(r"\d+", s) ...

  3. 【Hadoop离线基础总结】Hue与Impala集成

    Hue与Impala集成 1.修改hue.ini配置文件 [impala] server_host=node03 server_port=21050 impala_conf_dir=/etc/impa ...

  4. [hdu4768]二分

    http://acm.hdu.edu.cn/showproblem.php?pid=4768 题意:n个传单分别发给编号为ai, ai + ci, ai + 2 * ci, .. , ai + k * ...

  5. springDataJPQL实现增删改查及分页,原生sql查询,根据方法命名规则实现查询以及Specification查询

    一.使用方法 1.在dao中定义开一个方法,使用方法的参数设置jpql,并且使用方法的返回值接受查询结果,在方法上添加@query注解,在注解中写jpql语句进行增删改查,测试 2.使用原生的sql语 ...

  6. 基于Nettty打造自己的MVC服务器

    最近开始折腾Netty,体验下NIO编程.既然学习了,就要做点东西出来,要不然不容易掌握学到的东西.在Netty的官方demo上都有各种case的sample,打造Http服务器的核心代码就是从Sam ...

  7. 基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查

    上一篇文章(https://www.cnblogs.com/meowv/p/12913676.html)我们用Code-First的方式创建了博客所需的实体类,生成了数据库表,完成了对EF Core的 ...

  8. 「雕爷学编程」Arduino动手做(25)——MQ2气敏检测模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  9. React:Refs and DOM

    React的哲学是在JS层面构建UI,并把UI组件以功能单位拆分成更小的组件单元,以利于复用和整合,父组件通过props作为操作子组件的唯一通道,甚至子组件想和父组件交互时,也只能依靠父组件通过pro ...

  10. DRF节流组件

    1.DRF节流组件自定义(限制访问频率)  方式一 自定义类和方法: 和上述的认证组件使用方式一样,定义一个频率组件类,推荐继承BaseThrottle类, 需定义defallow_request(s ...