文档章节

学习ES6

邻里
 邻里
发布于 2016/11/30 17:34
字数 889
阅读 152
收藏 5
点赞 0
评论 0

从去年开始我们老大就要求我们看下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
永川
程序员
ES6-7

JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScr...

掘金官方 ⋅ 01/05 ⋅ 0

React/React Native 的ES5 ES6写法对照表

很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做...

freecsdn ⋅ 2016/09/14 ⋅ 0

react-router入门

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,...

馒头 ⋅ 2016/03/08 ⋅ 0

gulp-babel 自动编译es5-es6(可无脑按步骤操作)

现在es6比较火,很多同学都想实战一下,但是发现网上的要不就是webpack配合、vue、react使用es6,要不就是教程安装不够详细。webstorm可以直接使用es6,但是没有编译后的es5文件,不适合很多...

再这么说就哭了呦! ⋅ 2017/11/01 ⋅ 0

WEB前端学习:ES6的数组改动

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/05 ⋅ 0

VUE和ES6资源收集

最近在学习vue.js,整合了一些优秀的开源项目可供学习 MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Glo......

Jimmy ⋅ 2017/07/13 ⋅ 0

《ECMAScript 6入门》上线了

过去的一个月,我写了一本书《ECMAScript 6入门》,今天上线了。 网址:es6.ruanyifeng.com ES6是JavaScript语言的下一个版本,预计将在2014年底正式发布。它对JavaScript做了大量改造,提高...

阮一峰 ⋅ 2014/04/30 ⋅ 0

WEB前端学习:了解ES6新特性

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/01 ⋅ 0

ECMAScript 6教程 (一)

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出 原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ 。该系列课程是汇智网 整理编...

笔阁 ⋅ 2015/07/20 ⋅ 0

WebStorm ES6 语法支持设置

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。 ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的...

hhj187 ⋅ 2016/10/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 27分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 45分钟前 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 56分钟前 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部