ES6习题

第一章 ES6初步

1.简述var

和let

区别是什么？

var

变量提升

作用域

重复声明

暂时性死区

语法

重新赋值

2.下面程序执行结果是？

var a= 123;

if (true) {

声明提升，赋值不提升

函数作用域（寻找距离最近的函数的左大括号）

可以

不会

const class

不提升(报错Cannot access 'm' before 不提

initialization)

升

块级作用域（寻找最近的左大括号）

let

不可以（报错identifier 'a' has already 不可been declared）

以

会（原因：1、全局变量和局部变量同

时存在，局部变量优先。2、没有变量提升）

ES6

可以

不可以

ES5

可以

a= 'abc'; // ReferenceError

let a;

}

结果：Cannot access 'a' before initialization

原因：a属于局部变量，let无法提升变量声明，故a变量赋值了，却还没有声明。

6中常用解构赋值有哪几种？

ES6的常用解构：数组解构、对象解构、字符串解构

数组解构：数组元素依次赋值给变量；

let[a,b,c,d]=[1,2,3,4];

(a,b,c,d);

对象解构：和数组解构不一样，数组是有顺序的。对象只能按照属性来进行解构；

let{name,age}={

name:'zs',

age:12

}

(name,age)

字符串解构：和数组解构类似；

let [x1,y1,z1]='hello';

(x1,y1,z1);//输出 h e l

4.下面程序执行结果是？

let {x,y} = { foo: "aaa", bar: "bbb" };

(x);// undefined

结果：undefined;

原因：x和y 的声明了，却没有赋值；

5.补充下面程序代码

var person={

name:'zhangsan',

age:10

};

let str=` `; //使用模板字符串补全程序

mentById('result').innerHTML=str;

补充的代码：${}

${}

6.将下面字符串改用模板字符串实现?

......

$("#result").append(

"He is "++""+"and we wish to

know his"++".That is all" );

......

使用模板字符串：

......

$("#result").append(`

He is ${}and we wish to

know his${}.That is all

`);

......

7.下面程序输出的结果是：B (原因：前后的 last

的拼写不一致，属于声明了，没有赋值)

let object = { first: 'Bill', lasts: 'Gates' };

let { first: firstName, last: lastName } = object;

(firstName+'t'+lastName);

A. Bill Gates

B. Bill undefined

C. Bill null

D. Uncaught ReferenceError

8.下列程序执行f()函数运行的结果是？C

var tmp = new Date();

function f(){

(tmp);

if (false){

var tmp = "hello world";

}

}

f()

A. 当前系统时间

B. hello world

C. undefined

D. 程序报错

（原因：tmp属于局部变量，var声明提升，赋值不提升）（！变量的作用域跟if(false)没有关系）

//特殊情况

//未声明的变量，直接赋值。作用域是从该变量赋值以后就可以使用。

function add(){

if(true){

a=10;

}

}

function app(){

if(false){

b=10;

}

}

add();

app();

(a); //输出10

(b);//输出b is not a defined

9.对比以下两道程序输出的值相同吗？不相同

//A程序：

var a = [];

for (let i = 0; i < 10; i++) {

a[i] = function () {

(i);

};

}

a[8]();

a[9]();

结果：8，9

//B程序

var a = [];

for (var i = 0; i < 10; i++) {

a[i] = function () {

(i);

};

}

a[8]();

a[9]();

结果：10 ，10

（原因：let是块级作用域，var是全局作用域，使用var只能获取循环的最后一个值）

10.下面程序的执行结果是什么？请分析原因?

function f({ x = 10 } = {}, { y } = { y: 10 }) {

( x + " " + y +"n");

}

f(); // 10 10

f( undefined, undefined ); // 10 10

f( {}, undefined ); // 10 10

f( {}, {} ); // 10 undefined

f( undefined, {} ); // 10 undefined

f( { x: 2 }, { y: 3 } ); // 2 3

原因：函数f()使用解构，x有声明并赋值为10，所以无论实参是空还是undefined，x的结果都为10，y声明了，但还没有赋值，如果实参为undefined，y则为10，实参为空，y则没有赋值，最后，实参为2，3，x，y也对应被赋值为2，3

第二章 ES6基础编程

方法的作用是什么？

是为了将类数组和对象转化为数组；

和使用Array()或new Array()构建数组实例有什么区别

()相当于扩展了new Array();

// 创建长度为1的数组，值为10

// var arr=(10);

3.下面程序执行结果是什么？1,2,3

function push(array, ...items) {

h(function(item) {

(item);

(item);

});

}

var a = [1,2];

push(a, 1, 2, 3)

（原因：items数组内有1，2，3使用forEach依次加入array中，并打印出来）

4.下面程序执行结果是什么？

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(6, 2, 3, 4, 5)

// [6,[2,3,4,5]]

（原因：...tail将剩余的参数形成一个数组）

5.以下程序执行的结果是：1，2，3

function push(array, ...items) {

h(function(item) {

(item);

(item);

});

}

var b = [];

push(b, 1, 2, 3)

6.下面程序执行的结果为：

function foo() {

//此时的this是id=20;

setTimeout(() => {

('id:', );

}, 100);

}

var fu=()=>{

(this);//此时this为18；

}

var id = 18;

({ id: 20});

:20

:18

:undefined

D.程序错误

a (原因：foo()不是箭头函数，可以使用call。箭头函数中的this,指向的是定义的时候所在的对象，不是使用的时候所在的对象)

7.下面程序打印a,b,c的值分别为多少? -5 10 2

var a=[1, 4, -5, 10].find((n) => n < 0); //a返回-5；

var b=[1, 5, 10, 15].find(function(value, index, arr) {

return value > 9; //返回10

})

var c=[1, 5, 10, 15].findIndex(function(value, index, arr) {

return value > 9; //返回2

})

(a);

(b);

(c);

（原因：find找到第一个符合条件的值，箭头函数内容只有一句，可以省略大括号，但也要省略return）

8.下面程序this打印值为？第一个：window

第二个：person

var person = {

name:'zfpx',

getName:function(){

//setTimeout异步操作，正常情况下，执行的时候，person已经执行完毕，this不指向当前对象

setTimeout(function(){(this);},1000); //this->window

setTimeout(() => (this),1000); //this->person

}

}

e();

/*

*/

ajax原生步骤与兼容性

同步与异步的区别；同步阻塞；异步：非阻塞；

异步：

（客户端）：

ajax

定时器

事件

（服务器端）：

读文件 fs,writeFile(,,function())

服务器

定时器

(同步：表单提交后要刷新.)

9.下面程序的执行结果是什么？30

var obj = {

birth: 1990,

getAge: function () {

var b = ;

var fn = () => new Date().getFullYear() - ;

return fn();

}

};

(()); //2020-1990=30

第三章 ES6 类（class）使用

uctor方法的特点？

1.其中 constructor 方法是类的构造函数，是一个默认方法，通过 new 命令创建对象实例时，自动调用该方法。

2.一个类必须有 constructor 方法，如果没有显式定义，一个默认的 consructor 方法会被默认添加。所以即使你没有添加构造函数，也是会有一个默认的构造函数的。

3.一般 constructor 方法返回实例对象 this;但是也可以指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例。

代表什么意思？

1.普通函数中的this指向window

2.箭头函数中的this

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。箭头函数导致 this 总是指向函数定义生效时所在的对象。

3.对象中的this,指向该对象

和 prototype分别表示什么意思？两者有什么区别？

=ype

1、每个对象（包括函数、函数的prototype对象）都有一个proto属性，她指向创建该对象的函数的prototype属性

2、每个函数都有一个prototype对象，而只有prototype对象才有constructor属性，其指向该函数本身

4.下面程序对吗？为什么？

对

class Person{ /* ... */ }

class Student extends Person {

constructor() {

}

}

let cp = new Student ();

5.编写程序使用ES6定义 Person类，包括类实例属性（name,age）,实例方法say()该方法返回name和age字符串

class Person{

constructor(name,age){

=name;

=age;

}

say(name,age){

return +;

}

}

6.下面程序执行结果为: true

var p=new Person();

7.下面程序正确吗？错在哪里？如何改正？错了

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

}

class ColorPoint extends Point {

constructor(x, y, color) {

(p.__proto__===ype)

= color; // ReferenceError

super(x, y);

}

}

var cp=new ColorPoint(10,20,'red');

改正：constructor里的this 要写在super的后面

8.下面程序执行结果为？

class Parent {

static myMethod(msg) {

('static', msg);

}

myMethod(msg) {

('instance', msg);

}

}

class Child extends Parent {

static myMethod(msg) {

od(msg);

}

myMethod(msg) {

od(msg);

}

}

od(1); // static 1

var child = new Child();

od(2); // instance 2

原因：静态函数只能由构造函数自身调用，非静态函数可以使用实例对象调用

9.请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，

返回字符串'Hello, xxx!'

class Animal {

constructor(name) {

= name;

}

}

.....

class Cat extends Animal{

constructor(name){

super(name);

}

say(){

return 'Hello,xxx!';

}

}

10.接上面程序分析下面代码执行结果为：

测试失败

var kitty = new Cat('Kitty');

var doraemon = new Cat('哆啦A梦');

if ((new Cat('x') instanceof Animal) && kitty && === 'Kitty' && &&

typeof === 'function' && () === 'Hello,Kitty!' &&

=== ) {

('测试通过!');

} else {

('测试失败!');

}

11.下面程序执行结果为： B

(typeof (new (class { class () {} })));

A、 "function"

B、 "object"

C、 "undefined"

D、 Error

原因：new{}是一个类

第四章 ES6模块化

1.简单叙述前端模块化系统演进历史？

2.在ES6中使用什么语句实现模块的导入导出？

导出 export / export default

导入 import {a} from './'

import a from './a,js'

import * a from './'

3.补充下面程序的代码

//

export class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

toString() {

return this.x + 't' + this.y;

}

}

//

let p=new Point(2,3);

(ng());

//

export default class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

toString() {

return this.x + 't' + this.y;

}

}

//

import Point from './';

let p=new Point(2,3);

(ng());

4.在下滑线处补充完下面模块的程序

//

_______function (x, y) {

return x * y;

}

//

import myMethod from './moudle6'

(myMethod(2,2));

//

export default myMethod function (x, y) {

return x * y;

}

//

import myMethod from './moudle6'

(myMethod(2,2));

5.下面程序打印的结果为？

//文件

export let foo = ()=> {("fnFoo") ;return "foo"},bar = "stringBar";

//文件

import {foo, bar} from "./lib";

(foo());

(bar);

结果：fnFoo foo

stringBar

6.下面程序执行的结果为？B

//

export let add=(a, b) => {

if (typeof a == 'number' && typeof b == 'number') {

return a + b

} else {

return 0

}

}

//文件

import {add} from "./add";

(add(10,'a'));

a.10a

b.0

c. 程序错误

d.107

7.编写程序在模块中构建bubbleSort函数实现素组的冒泡排序并返回该数组。在模块调用函数bubbleSort传递let data=[10,2,3,98]到bubbleSort函数，并打印返回值。

//冒泡

8.下面程序执行结果为？

//

import {bar} from './b';

(''); //

(bar); //bar

export let foo = 'foo';

//

import {foo} from './a';

('');

(foo);

export let bar = 'bar';

执行node 运行结果为？

bar