ES6练习

鹿蹊zz

已于 2022-07-18 16:27:18 修改

阅读量644

点赞数 5

分类专栏： ES6-ES11 文章标签： es6 javascript 前端 vscode ecmascript

于 2022-07-18 16:26:21 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125853224

版权

ES6-ES11 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1：ES6是什么，为什么要学习它?

ES6（ECMAScript）就是JavaScript中的语法规范，是javascript的重要的组成部分。它规定了我们怎样写JS。

学习ES6的原因：

(1) ES6的版本变动内容最多，具有里程碑意义。

(2) ES6加入了许多新的语法特性，编程实现变得更简单、高效。

(3) ES6是前端发展趋势，就业必备技能。

2：let，var，const三者的区别。

（1）使用var声明的变量，作用域为全局或函数作用域，可以声明前使用，可以重复定义和多次赋值，且存在变量提升现象。

（2）使用let声明的变量，作用域为块级作用域，先声明后使用，不能重复定义，但可以多次赋值，不存在变量提升。

（3）使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。作用域为块级作用域，先声明后使用，不能重复定义，基本数据类型不能多次赋值，不存在变量提升。

（4）使用let，const的声明的变量不属于顶层对象，返回undefined。

3：对象如何解构，请举例说明！

对象解构最基本的用法是从对象中检索属性键key的值。先找到同名属性，然后再赋给对应的变量。

例如，定义了一个对象Person，他有两个属性：realname和age

      let Person = {realname:"张三",age:20};

let {realname:myrealname,age,height=180} = Person;  //重命名

console.log(myrealname,age,height);  // 张三 20 180

对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则解构失败就是undefined。

4：for...in 和for...of有什么区别？

for in遍历索引(遍历可枚举类型)

for of遍历数组的值(遍历可迭代具备迭代器接口)

5：箭头函数的this和普通函数的this的区别？

区别：

(1) 普通函数this的指向是调用者，箭头函数this的指向的是其父级函数。

(2) 箭头函数中的this是在声明中就定义好了的，而普通函数中的this则是在调用时定义好的。

(3) 箭头函数不能改变this指向，只有普通function函数能改变this指向。

6：ES6中的模板字符串如何使用请举例。

function demo(){

return "end";

}

let es6 = "es6!";

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

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

7：Array的扩展方法map和filter相同点与区别。

相同点：两者都不会对空数组进行检测；都不会改变原始数组。

区别：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

8：下列图输出的结果是什么，为什么？

输出的结果是 10 。

变量i是var 声明的，为全局变量。作用域为整个for循环，每一次循环中当i发生改变时， a中每个i 值也是同步改变的，当循环结束，i的值为10。

9：下图输出结果是什么，为什么？

输出结果是 20。

首先通过obj调用fn函数，在fn函数内部this的指向是obj。而setTimeout中的箭头函数不会改变this的指向，所以这里的this.a === obj.a ，打印结果为obj内部的a的值。

10：关于rest参数下图结果是什么？为什么？

结果是报错，原因是rest参数必须是最后一个形式参数，否则会报错。

二：操作题

1：用数组保存一组学生，每个学生的属性包含，姓名，分数，姓名和分数从页面input框获取，点击查询按钮，刷选出分数大于60的所有同学。效果如图：(30分)

代码如下：

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

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

<body>
    <!-- 1：用数组保存一组学生，每个学生的属性包含，姓名，分数，姓名和分数从页面input框获取，点击查询按钮，刷选出分数大于60的所有同学。效果如图：(30分) -->

    <div>
        姓名: <input placeholder="输入学生姓名" type="text" id="uname" value="" />
        分数: <input placeholder="输入学生分数" type="text" id="score" value="" />
        <button>添加</button>
    </div>
    <p>学生信息:</p>
    <ul class="persons"></ul>
    <input type="button" value="查找及格的学生" id="search" />
    <p>及格学生如下:</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>姓名：${uname}  分数：${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>姓名：${uname}  分数：${score}</li>`;
            })
            ul2.innerHTML = str;
        })
    </script>
</body>

</html>

效果：

2：计算一组数组中的最小值。如：const arr = [3,4,10,1,9]；(20分)

鹿蹊zz

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ES6练习

而setTimeout中的箭头函数不会改变this的指向，所以这里的this.a===obj.a，打印结果为obj内部的a的值。作用域为整个for循环，每一次循环中当i发生改变时，a中每个i值也是同步改变的，当循环结束，i的值为10。它规定了我们怎样写JS。//张三20180。（2）使用let声明的变量，作用域为块级作用域，先声明后使用，不能重复定义，但可以多次赋值，不存在变量提升。(2)箭头函数中的this是在声明中就定义好了的，而普通函数中的this则是在调用时定义好的。......
复制链接

扫一扫