文档章节

学习ES6

邻里
 邻里
发布于 2016/11/30 17:34
字数 889
阅读 164
收藏 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...

掘金官方
2018/01/05
0
0
学习 React 前你需要知道些什么

如果你正在看这篇文章,你很可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的,很多人在开始学习 React 时都一头雾水,笔者自然也不例外。究其原因,是因为我们在学习 React 的...

Hopsken
01/16
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

没有更多内容

加载失败,请刷新页面

加载更多

多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
2
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
6
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
昨天
8
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
昨天
3
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部