文档章节

学习ES6

邻里
 邻里
发布于 2016/11/30 17:34
字数 889
阅读 157
收藏 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
永川
程序员
从ES5语法到ES6语法你应该知道这些

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/63267297 从ES5语法到ES6语法你应该知道这些 最近在学RN,所以就要先来了解一下现在...

Aduroidpc
2017/03/18
0
0
ES6-7

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

掘金官方
01/05
0
0
React/React Native 的ES5 ES6写法对照表

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

freecsdn
2016/09/14
20
0
react-router入门

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

馒头
2016/03/08
153
0
gulp-babel 自动编译es5-es6(可无脑按步骤操作)

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

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

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
1
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
7
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
3
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部