冬休み研究-ES6(1)

冬休み研究-ES6(1)

constをしましょう

letに関するいくつかの考慮事項
  • 1.変数を繰り返し宣言することはできません
  • 2. Varにはブロックレベルのスコープはありませんが、letにはあります(ブロックレベルのスコープには{}条件付きループなどが含まれます)
  • 3. letの変数昇格はありません(var has、つまり、使用する前に、位置に関係なく、コード内の変数の宣言を検出します)
  • 4.スコープチェーンには影響しません
 <script>
       {
           let name="paopao";
           function say(){
               console.log(name);
           }
           say();
       }
    </script>
  • 5.例:色の切り替え
<script>
        let items = document.getElementsByClassName('item');
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                this.style.background = 'pink';
            }//用this不要紧,但是发现用items[i]会报错,因为var是全局的,但是用let就可以
            for (let  i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                items[i].style.background = 'pink';
            }
        }
    </script>
const
  • 1.いくつかの注意:
    • 定数を定義するときは、必ず初期値を割り当ててください
    • ブロックスコープ
    • 配列要素とオブジェクト要素は変更されず、一定の変更は報告されません(即数组本身和数组内容的改变,内容可以变,常量指向地址不能变

可変破壊割り当て

  • 配列とオブジェクトの脱構築
//数组解构
 <script>
        const Fruit=['banana','apple','peach','watermelen'];
        let [a,b,c,d]=Fruit;//定义四个变量和数组每个元素对应
        console.log(a+" "+ b+" "+c+" "+d);

    </script>



//对象解构
<script>
       const paopao={
           name:"红",
           age:19,
           eat:function () {
               console.log("吹泡泡");
           }
       }
       let{name,age,eat}=paopao;//对象用{}数组用[]
       console.log(name+age+eat)

    </script>

テンプレート文字列

  • 文字列を宣言する新しい方法、
 <script>
        let str = `泡泡
       果果
       `;
        console.log(str);//可以换行,''和""就不行
    </script>
  • $ {変数名}
 <script>
      let love="果果";
      let obj=`${love}和泡泡`;
      console.log(obj);
    </script>

オブジェクトを簡素化する

  • メンバー変数とメンバー関数は直接記述でき、メソッドはfunctionキーワードを省略できます
 <script>
        let name="红";
        let play=function(){
            console.log("吹泡泡");
        }
        const Guo={
            name,
            play,//直接放变量名
            eat(){
                console.log("吃绿绿");
            }//省略function
        }
    </script>

矢印機能

  • 予防:
    • 1.オブジェクトをインスタンス化するコンストラクターとして使用することはできません。コンストラクターのみを使用できます。
    • 2.引数変数は使用できません
    • 3.仮パラメーターが1つしかない場合は、真ん中()を省略できます。
    • 4.コード本体にステートメントが1つしかない場合は、{}を省略します(この時点ではreturnステートメントも省略され、実行結果は戻り値になります)
let fn=(a,b)=>{
           return a+b;
       }
   //this是静态的始终指向函数声明时的作用域下的this的值


    <script>
        function getName1() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        window.name = "泡泡";
        const school = {
            name: "果果"
        }
        getName1.call(school); //call方法可以改变this的值,指向school
        getName2.call(school); //输出果果、泡泡,箭头函数依然指向的是全局对象,只能指向函数在声明时所在作用域
        let fun = () => {
            console.log(arguments);
        }
        fun(1, 2, 3, 4);//报错argumrnts未定义
    </script>


//省略()
let add=n=>{
            return n+n;
        }
        console.log(add(8));

//省略{}
let pow=n=>n*n;
        console.log(pow(8));

矢印関数の2つの小さなアプリケーション

  • 3秒後に色を切り替えます
 <style>
        div{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="ad">

    </div>
    <script>
        let ad=document.getElementById('ad');
        ad.addEventListener("click",function(){
            let _this=this;//在外界保留下this的值使其向上找的时候找到这个值,否则是window
            setTimeout(function(){
                _this.style.background='pink';
            },3000);

        });
//用箭头函数
  setTimeout(()=>{
                this.style.background='pink';
            },3000);//箭头函数的this就是声明时候的作用域此时指向事件源ad
    </script>
  • 配列内の偶数の要素を返します
 <script>
      const arr=[1,2,3,4,5,6,7];
      const result=arr.filter(item=>item%2===0);
      console.log(result);
    </script>

おすすめ

転載: blog.csdn.net/Phoebe4/article/details/113033412
おすすめ