ES 6文法の新特性

6225 ワード

1 smbolデータタイプ
//     。           
    var str = Symbol();
    var str2 = Symbol();
    console.log(str == str2); //false
    var str3 = Symbol(2);
    var str4 = Symbol(2);
    console.log(str3 == str4); //false
2セットデータタイプ
//   set      1 2 3 ->  ->   4->  ->  ->  
    var set = new Set([1, 2, 3]);
    console.log(set.size); //3
    set.add(4);
    console.log(set.size); //4
    set.clear();
    console.log(set.size); //0

    console.log("---------------------");
    //  set     1 2 3 4 3  4 5   
    //  :new Set([1, 2, 3, 4, 3, 4, 5])   set  
    //  : [...Set  ]                 
    var arr = [...new Set([1, 2, 3, 4, 3, 4, 5])];
    console.log(arr) //[1, 2, 3, 4, 5]
3 Mapデータ
//  a :111 ->   ->  ['b'] :222 ->              
    var map = new Map();
    map.set('a', 111);
    console.log(map.get("a"));
    //        ,          ,              
    map.set(['b'], 222);
    console.log(map.get(['b'])); //undefined
    //      
    var temp = ['b'];
    map.set(temp, 222);
    console.log(map.get(temp)); //222
    console.log("=================");
    //     
    console.log(map.keys());
    //     
    console.log(map.values());
4サイクル
var arr = ['a', 'b', 'c'];

    //for  
    for (var i = 0; i < arr.length; i++) {
        console.log(" :", i, ' :', arr[i]);
    }
    //  .forEach          
    arr.forEach((item, index) => {
        console.log(" :", index, ' :', item);
    })
    //for in    (      ,       ,        ,       )
    for (var index in arr) {
        console.log(" :", index, ' :', arr[index]);
    }
    //for of          ,     
    for (const val of arr) {
        console.log(' :', val);
    }
    var set = new Set([1, 2, 3, 4, 5]);
    for (const iterator of set) {
        console.log(' :', iterator);
    }
5関数の拡張
  //es6  
        function fn(name) {
            var name = name ? name : "";
        }
        //es6  
        function fn(name = "   ", sex = " ") {
            console.log(name, sex);
        }

        fn(); //     
        fn("   ");//     
        fn("   "," ");//     
6矢印関数
 //  es6       ,3   ,1   ,    
        //function fn(name , age, sex){
        //console.log(name,age,sex)
        // }

        //   :function fn (  1,..  n){}
        //   :(  1,..  n)=>{}
        //  :             ,                 

        var fn = () => console.log("    ");
        var fn1 = name => console.log("    ");
        var fn2 = (name, age, sex) => console.log("    ");

        fn(); //    
        fn1("test"); //    
        fn2("test", 12, " "); //    
7レスパラメータ
 // function fn() {
        //     console.log(arguments);
        //     for (let index = 0; index < arguments.length; index++) {
        //         const element = arguments[index];
        //         console.log(element);
        //     }
        // }

        // fn(1,2,3,4,5,6,7,);


        //  :  ...          vals
        // ...         vals
        function fn(...vals) {
            console.log(vals);
        }

        fn(1, 2, 3, 4, 5, 6);

        // rest   arguments  
        // : rest      
        function fn2(val, ...vals) {
            console.log(val); //2
            console.log(vals); // 3 4 5 6 
        }

        fn2(2, 3, 4, 5, 6);
8文字列の拡張
var str = "test";
        console.log(str.repeat(3)); //testtesttest

        //     
        var name = "  ";
        //   
        var html = "";
        html += '
    '; html += '
  • ' + name + "
  • "; html += '
  • ' + name + "
  • "; html += '
'; console.log(html); //
// `` var html2 = `
  • ${name}
  • ${name}
`; console.log(html2); //
    //
  • //
  • //
9クラス
 //    stu (     )
        //es5
        //this     var    
        function Stu(name, age) {
            this.name = name;
            this.age = age;
            this.sayHay = function () {
                console.log(this.name, this.age);
            }
        }
        var stuObj = new Stu("   ", 800);
        console.log(stuObj); //Stu {age: 800,name: "   ",sayHay: ƒ ()__proto__: Object}
        console.log(stuObj.name); //   
        console.log(stuObj.age); //800
        stuObj.sayHay(); //    800

        //es6
        class Stu2 {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sayHay() {
                console.log(this.name, this.age);
            }
        }

        var stuObj2 = new Stu2('   ', 900);
        console.log(stuObj2); //Stu2 {name: "   ", age: 900}
        console.log(stuObj2.name); //   
        console.log(stuObj2.age); //900
        stuObj2.sayHay(); //    900
        
10配列の拡張
  //      。            ,           
        // Array.prototype.find = Array.prototype.find || function (callback) {
        //     for (var i = 0, length = this.length; i < length; i++) {
        //         var item = this[i];
        //         if (callback(item)) {
        //             return item;
        //         }
        //     }
        //     return null;
        // };
        var array1 = [5, 12, 8, 130, 44];
        // find()                         。     undefined。
        var found = array1.find(element => {
            return element == 12;
        });
        //findIndex()                         。    -1
        var index = array1.findIndex(item => {
            return item == 12;
        })
        console.log(found); // 12
        console.log(index); //  1