겨울 방학 연구 -ES6 (1)

const하자

let에 대한 몇 가지 고려 사항

1. 변수는 반복적으로 선언 할 수 없습니다.
2. Var에는 블록 수준 범위가 없지만 let에는 있습니다 (블록 수준 범위에는 {} 조건부 루프 등이 포함됩니다.)
3. let에 대한 변수 승격이 없습니다. 즉, 사용하기 전에 위치에 관계없이 코드에서 변수 선언을 찾습니다.
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>

개체 단순화

멤버 변수 및 멤버 함수를 직접 작성할 수 있으며 메서드는 함수 키워드를 생략 할 수 있습니다.

 <script>
        let name="红";
        let play=function(){
            console.log("吹泡泡");
        }
        const Guo={
            name,
            play,//直接放变量名
            eat(){
                console.log("吃绿绿");
            }//省略function
        }
    </script>

화살표 기능

지침:
- 1. 객체를 인스턴스화하는 생성자로 사용할 수 없으며 생성자 만
- 2. 인수 변수는 사용할 수 없습니다.
- 3. 형식 매개 변수가 하나만있는 경우 중간 ()을 생략 할 수 있습니다.
- 4. 코드 본문에 문이 하나 뿐인 경우 {}를 생략합니다. 이때 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));

화살표 기능의 두 가지 작은 응용

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>

겨울 방학 연구 -ES6 (1)

겨울 방학 연구 -ES6 (1)

const하자

let에 대한 몇 가지 고려 사항

const

가변 구조화 할당

템플릿 문자열

개체 단순화

화살표 기능

화살표 기능의 두 가지 작은 응용

추천