ES6 exercise

1：ES6 What is it? , Why study it ? 

ES6（ECMAScript） Namely JavaScript Syntax specification in , yes javascript An important part of . It defines how we write JS.

Study ES6 Why ：

(1) ES6 The version change content of is the most , It's a milestone .

(2) ES6 Many new syntax features have been added , Programming becomes simpler 、 Efficient .

(3) ES6 Is the front-end development trend , Necessary skills for employment .

2：let,var,const Differences among the three .

（1） Use var Declared variables , The scope is global or function scope , Can be used before declaration , You can define and assign values repeatedly , And there is the phenomenon of variable promotion .

（2） Use let Declared variables , The scope is a block level scope , Declare before use , Cannot be defined repeatedly , But it can be assigned multiple times , No variable promotion .

（3） Use const Declared constant , You can't change the value of this constant in later code . The scope is a block level scope , Declare before use , Cannot be defined repeatedly , The basic data type cannot be assigned multiple times , No variable promotion .

（4） Use let,const The declared variable of does not belong to the top-level object , return undefined.

3： How to deconstruct objects , Please give an example of ！

The most basic use of object deconstruction is to retrieve attribute keys from objects key Value . Find the property of the same name first , And then assign it to the corresponding variable .

for example , Defines an object Person, He has two attributes ：realname and age

        let Person = {realname:" Zhang San ",age:20};

        let {realname:myrealname,age,height=180} = Person;  // rename

        console.log(myrealname,age,height);  // Zhang San 20  180

The properties of an object have no order , Variable must have the same name as property , To get the right value , Otherwise, the failure of deconstruction is undefined.

4：for...in and for...of What's the difference? ？

for in Traverse index ( Traverse enumerable types )

for of Traversing the values of an array ( Traversal iterations have iterator interfaces )

5： Arrowhead function this And ordinary functions this The difference between ？

difference ：

(1) Ordinary function this The point of is the caller , Arrow function this Of points to its parent function .

(2) In the arrow function this It is defined in the declaration , And in normal functions this Is defined at the time of invocation .

(3) The arrow function cannot be changed this Point to , Only ordinary function Function can change this Point to .

6：ES6 Please give an example of how to use the template string in .

function demo(){

            return "end";

        }

        let es6 = "es6!";

        let str = `hello,${es6},${demo()}`;

console.log(str);  // hello,es6!,end

7：Array Extension method of map and filter Similarities and differences .

The same thing ： Neither will detect empty arrays ; Will not change the original array .

difference ：map() Method returns a new array , The element in the array is the value after the original array element calls the function .

filter() Method to create a new array , The elements in the new array are checked by checking all the eligible elements in the specified array .

8： What is the output result of the following figure , Why? ？

The output is zero 10 .

Variable i yes var  Declarative , Is a global variable . The scope is the whole for loop , In each cycle, when i When there is a change , a Each of them i  Values are also changed synchronously , When the cycle ends ,i The value of is 10.

9： What is the output result of the following figure , Why? ？

The output is 20.

First, through obj call fn function , stay fn Internal function this The direction is obj. and setTimeout The arrow function in does not change this The direction of , So here this.a === obj.a , The result is obj Inside a Value .

10： About rest Parameter what is the result in the figure below ？ Why? ？

The result is Report errors , as a result of rest The parameter must be the last formal parameter , Otherwise, an error will be reported .

Two ： Operation questions

1： Save a group of students with an array , The attributes of each student include , full name , fraction , Names and scores from the page input Box acquisition , Click query button , Brush selection score is greater than 60 All my classmates . The effect is as shown in the picture ：(30 branch )

The code is as follows ： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 1： Save a group of students with an array , The attributes of each student include , full name , fraction , Names and scores from the page input Box acquisition , Click query button , Brush selection score is greater than 60 All my classmates . The effect is as shown in the picture ：(30 branch ) -->

    <div>
         full name : <input placeholder=" Enter student name " type="text" id="uname" value="" />
         fraction : <input placeholder=" Enter student scores " type="text" id="score" value="" />
        <button> add to </button>
    </div>
    <p> Student information :</p>
    <ul class="persons"></ul>
    <input type="button" value=" Find qualified students " id="search" />
    <p> The passing students are as follows :</p>
    <ul class="pass"></ul>

    <script>
        let sName = document.querySelector('#uname');
        let sScore = document.querySelector('#score');
        let btn = document.querySelector('button');
        let ul1 = document.querySelector('.persons');
        let search = document.querySelector('#search');
        let ul2 = document.querySelector('.pass');

        let arr = [];

        btn.addEventListener('click', function () {

            let obj = { uname: sName.value, score: sScore.value };
            arr.push(obj);
            sName.value = '';
            sScore.value = '';

            let str = '';
            arr.forEach(item => {
                const { uname, score } = item;
                str = str + `<li> full name ：${uname}   fraction ：${score}</li>`;
            })
            ul1.innerHTML = str;
        })

        search.addEventListener('click', function () {
            let newArr = arr.filter(item => {
                return item.score >= 60;
            })

            let str = '';
            newArr.forEach(item => {
                const { uname, score } = item;
                str = str + `<li> full name ：${uname}   fraction ：${score}</li>`;
            })
            ul2.innerHTML = str;
        })
    </script>
</body>

</html>

effect ：

2： Calculate the minimum value in a set of arrays . Such as ：const arr = [3,4,10,1,9];(20 branch )