学习ES6

时间 2019-11-17

标签学习 es6 栏目 JavaScript 繁體版

原文原文链接

从去年开始咱们老大就要求咱们看下ES6，耐何一直没看！好吧，如今学习也不晚！html

<!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>

1. 学习es6
2. es6学习
3. ES6学习（四）
4. Javascript ES6学习
5. 学习ES6(上)
6. ES6学习
7. ES6学习(下)
8. es6的学习
9. ES6学习（二）
10. ES6学习（1）
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议