文档章节

学习ES6

邻里
 邻里
发布于 2016/11/30 17:34
字数 889
阅读 356
收藏 5

行业解决方案、产品招募中!想赚钱就来传!>>>

从去年开始我们老大就要求我们看下ES6,耐何一直没看!好吧,现在学习也不晚!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 的小特点</title>
</head>
<body>


</body>
<script>
    //1.设置对象键值语法
    //ES5写法
    var myKey = 'key3';
    var obj = {
        key1: 'one',
        key2: 'two',
    }
    //如果要你初始化后要增加第三个只能
    obj[myKey] = 'three';
    console.log(obj);
    //但是es6我可以这样写
    let newKey = 'key3';
    let newObj = {
        key1: 'one',
        key2: 'two',
        [newKey]: 'three' //这样加入呆棒
    }
    console.log(newObj);
    /*******************************************************************************************************************/
    //2.箭头函数
    let totalAmount = total => total * 1.1; //totalAmount 就是定义的一函数 total 是本函数的参数 => 里的运算是即将返回的值
    let total_result = totalAmount(10);
    console.log(total_result);
    let moreAmount = (money, rate, stages) => (money * rate * stages) + money; //简单的利率函数 方便吧 定义一个moreAmount 函数 传了三个参数 金额 利率 期数 返回 期数 * 利率 * 本金 再加上本金
    let totalMoney = moreAmount(100,0.033, 12);
    console.log(totalMoney);
    //在箭头函数里不用写function 不用写return 这两个关键词也不用写();

    /*******************************************************************************************************************/
    //3.find/findIndex/fill
    let ages = [12, 14, 15, 16, 21, 23];
    var index=ages.indexOf(15); //index==2
    console.log(index);
    //上面是es5获得数组索引方法 但没有提供一个方法来计算查询条件。
    //下面es6语法写法
    let firstA = ages.find(age => age >= 18); //通过find方法查找 传入参数 age 返回查找到age 大于等于 18的值,只会返回条件最近的那一个
    console.info(firstA);
    let firstB = ages.findIndex(age => age >= 18); //取出大于等于18的索引下标,只会取出一个最近值
    console.trace(firstB);
    //填充
    let fill_value = [0, 8, 9].fill(7, 1);//填充覆盖原有值 第一个参数填充值,第二个从哪个索引开始填充
    console.log(fill_value);

    /*******************************************************************************************************************/
    //4.迭代器执行原理 扩展运算符表示一个数组或者一个可迭代对象可以在一次调用中将它们的内容分割为独立的参数。通俗讲就是运算符将一个数组,变为参数序列。
    let arr_keys = ["a", "b", "c"].keys();
    console.log(arr_keys.next());
    console.log(Object.keys(["a", "b", "c"]));
    let b = ["a", ,"b"];
    var bb = Object.keys(b);//并不会把索引1 打印出来
    console.log(bb);
    var cc = [...b.keys()]; //它会把索引1给打印出来 扩展运算符:...
    console.log(cc);
    //扩展运算符取代apply方法
    var r1 = Math.max.apply(null, [1,2,3,5]); //ES5写法
    console.log(r1);
    var r2 = Math.max(...[2,4,5,7]); //ES6写法
    console.log(r2);
    //字符串转数组
    var Jstr = 'hello world'; //将把每个字符都转成数组的V值
    var Jarr = [...Jstr];
    console.warn(Jarr);
    //将数组插入另一个数组
    var arrA1 = [1,2,3,4];
    var arrA2 = [5,6,7];
    var arrA3 = [...arrA1, ...arrA2];//打印出来可不是0=>,1=>而是 1,2,3,4,5,6,7
    console.log(arrA3);
    //参数展开 函数传参 在ES5中数组传参必须是 arr[key]的方式传入,这种方式是不是很蛋疼
    let Afun = function (a, b, c) {
        console.log(a);
        console.info(b);
        console.warn(c);
    }
    //ES5传参
    Afun(arrA2[0], arrA2[1], arrA2[2]);
    //ES6中
    Afun(...arrA2); //超棒,超快

    /*******************************************************************************************************************/
    //5.默认参数+不定参数+参数展开 在es5中我们写的函数没有办法传默认值的,无奈的都是在函数体内做三元表达式
    function protin(x, y= 10) {
        return x + y;//如果y没有传值将会使用默认的10
    }
    console.log(protin(2)); //12
    //不定个的参数 用扩展运算符来
    function protinA(x, ...y) {
        return x + y.length;
    }
    console.log(protinA(1, "hello", "world"));//3
    //如果是回调函数的时候 不需要再用 callback啦
    function protinB (name = 'Anon', callback = function(){}) {
        console.log(console.log(`whats you name${name}`));
        //不再需要“callback && callback()”啦 (不需要条件判断)
        callback();
    }
    /*******************************************************************************************************************/
    //for of 循环
    var args = [1, 2, 3, 4];
    for (let el of args) {
        console.warn(el);
    }

    /*******************************************************************************************************************/
    //6.解构赋值
    //数组解构
    var arrB1 = [1,2,3];
    var [a1,b1,c1] = arrB1;
    console.log(`${a1} - ${b1} -${c1}`); //1 - 2 -3

</script>
</html>

 

邻里

邻里

粉丝 4
博文 9
码字总数 4456
作品 0
永川
程序员
私信 提问
加载中
请先登录后再评论。
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
基于JavaScript的ES6虚拟机--Continuum

ECMAScript6(ES6)规范计划在今年正式发布,作为JavaScript的核心,新版本的一些特性可能会让目前的开发方式发生巨大的变化。目前一些现代浏览器(如Chrome、Firefox等)中已经逐步实现了E...

匿名
2013/01/06
1.9K
0
TBB学习:并行循环

http://www.cppprog.com/2009/0325/92.html

Waiting4you
2009/05/12
674
0
SmartGWT学习整理 2、理解核心中的核心DataSource

SmartGWT学习整理 2、理解核心中的核心DataSource DataSource之所以重要,是因为它负责所有的与服务器的数据交互,几乎所有的控件都离不开它。 可以这样说,理解了DataSource就掌握了SmartGW...

st97
2010/11/16
2K
2
NGUI学习基于NGUI的序列帧动画制作

首先导入NGUI包,由于我是在NGUI的基础上进行了简单的扩展。所以还要额外加上几个需要用到的类。我就从新把自己新加的方法放在NGUI中打包。 导入NGUI包以后可以看到有这一个菜单。 创建一个序...

orientalfashion
2013/05/28
5.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

开源FPGA单板iCESugar

随着产业的发展,近年来FPGA越来越得到市场的重视,5G、矿机、人工智能、图像识别、risc-v、通信等众多领域均可见到FPGA的身影,目前比较知名的FPGA厂商有xilinx、altera、lattice等,其中x...

whoisliang
49分钟前
6
0
合并记录帮助文档

合并记录步骤用于将两个不同来源的数据合并,这两个来源的数据分别为旧数据和新数据;该步骤将旧数据和新数据按照指定的关键字匹配、比较、合并,并显示差异信息。接下来就详细介绍一下该步骤...

osc_slnrw1du
50分钟前
19
0
Spark之RDD转换算子(transformation)大全

前面已经给大家讲过RDD原理,今天就给大家说说RDD的转换算子有哪些,以便大家理解。 对于转换操作,RDD的所有转换都不会直接计算结果,仅记录作用于RDD上的操作,当遇到动作算子(Action)时...

osc_3nr2bq5w
51分钟前
11
0
自定义常量数据帮助文档

自定义常量数据步骤主要用于增加自定义字段和行集数据到流中,可增加多个字段并为每个字段赋予行集的值。步骤配置信息如图1所示。 图1 自定义常量数据步骤配置信息 下文详细解释各控件的含义...

osc_r9wwwi0j
51分钟前
10
0
Linux安装配置ftp(Ceonts 7)

1、安装vsftpd yum -y install vsftpd (我这里已经安装好了,只要不报错即安装成功) 安装完成后可以在/etc/vsftpd目录下看到vsftpd.conf 文件,这是vsftp的配置文件。 2、 添加一个ftp用户...

osc_tko37abm
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部