阿里达摩院训练题3

  |  

前言

每天一练


62



单选题

题目描述: 以下关于CSS选择器说法错误的是

题目答案:d

题目解析:

a.类选择器优先级高于标签选择器

正确:类选择器的特殊性是0,0,1,0,而元素(标签)选择器的特殊性是0,0,0,1

b.a[titile~=foo]是写法正确的选择器

正确:改选择器选择a标签中包含title属性,且属性值包含foo单词的元素

c.页面仅定义了p {font-size: 20px},那么p > a字号也是20px

正确:font-size属于可继承属性,那么身为p的子元素,a的字号也为20px

d. h1 + p可用于匹配h1和p元素

错误:加号是相邻兄弟选择器,h1 + p选择紧接在h1元素出现之后的p元素,所以只能匹配到p元素

e.button#large优先级高于button.large

正确:button是元素选择器,优先级是0,0,0,1,#large是ID选择器,优先级是0,1,0,0,.large是类选择器,优先级是0,0,1,0

所以button#large是选择ID值为large的button元素,优先级为0,1,0,1。button.large是选择class值为large的button元素,优先级为0,0,1,1.

f.div ~ p:first-child是写法正确的选择器

正确:加号是相邻兄弟,~是后面所有兄弟。所以这个选择器是选择div后面所有作为第一个子元素的p标签

多项选择题

题目描述:关于ES6编程,以下说法正确的是

题目答案:b、d、e

题目解析:

a.不要使用var,建议优先使用let
错误:建议优先const

b.[a, b] = [b, a];可以用于变量交换

正确:

变量交换

c.{…x}相当于对x做for in 操作,[…x]相当于对x做for of 操作

错误:...是扩展运算符。for in 不会遍历Symbol属性,而{…x}会

d.尽可能地使用箭头函数代替.bind/_self/that等针对this的操作

正确:这是利用箭头函数没有自己的this的特点。箭头函数内部的this就是其父执行上下文中的this,也就是箭头函数外层第一个包裹它的非箭头函数的代码块的执行环境中的this。这在它定义的时候就确定了。说起来可能有点绕,看个例子

1
2
3
4
5
6
7
8
let x = 11;
let obj = {
x: 22,
say: ()=>{
console.log(this.x);
}
}
obj.say(); // 输出的值为11

say是一个箭头函数,包裹在obj中,那obj执行环境中的this,也就是window,就是箭头函数中的this。所以conosle.log(this.x)就是console.log(window.x)。

再来看一个例子

1
2
3
4
5
6
7
8
var obj = {
birth: 1990,
getAge: function () {
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 30

fn这个箭头函数包裹在getAge这个函数中,所以getAge的执行环境,也就是obj,就是箭头函数fn中的this。那么this.birth就是obj.birth

e.严格模式下,不可使用func.arguments与func.caller属性

正确:严格模式下,不可以使用caller,callee和arguments属性

f.Symbol仅为消除”魔术字符串”

错误:首先我们要理解什么是魔术字符串,及在代码中多次出现,且与代码形成强耦合的某一个具体的字符串或者数值,这种关联性太多的字符串就会导致变量含义不明确,所以应当尽量消除魔术字符串,改由含义清晰的变量代替。

Symbol的确可以用来消除魔术字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getArea(shape, options) {
let area = 0;

switch (shape) {
case 'Triangle': // 魔术字符串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}

return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

在这个例子中字符串”Triangle”就是一个魔术字符串,它多次出现,且跟程序的执行有很大的关系。常用的消除魔术字符串的方法,就是把它写成一个变量,这种方法也叫变量本地化,这样假如需要维护和修改就只需要修改最初定义的变量的值就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const shapeType = {
triangle: 'Triangle'
};

function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
}
return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

从更改后的例子中我们可以看出shapeType.triangle等于那个值并不重要,只要保证不会跟其它shapeType的属性相同就行,因此,这里就很适合改用Symbol值

1
2
3
const shapeType = {
triangle: Symbol()
};

毕竟

1
Symbol() === Symbol(); // false

可以消除,并不代表仅为消除。其实引入Symbol的最主要的作用是解决属性名冲突问题。

开放题

题目描述:如何看待小程序的发展?他有什么优势和劣势?以及未来的走向

题目解析:

其实我都没做过小程序开发。仅个人看法,欢迎探讨

优势:

  • 速度快、不占用用户内存:小程序的前端代码都存在服务器上,不需要下载
  • 安全稳定、保密性强:小程序通信采用https访问,SSL加密。样式代码都封装在小程序中
  • 功能丰富、场景丰富:可以调用比H5更多的手机系统功能,比如GPS定位、录音、拍视频等
  • 入口众多:可以通过扫码、发送朋友、搜索、与公众号关联等方式接入小程序

劣势:

  • 小程序只有1M左右的大小,无法开发一些大型项目
  • 技术框架不太稳定,开发方法时常修改,导致短时间内经常要升级维护

我感觉小程序的短时间内的发展可能不会太乐观,一个小字就有很大的限制。就目前来看小程序中很多程序都是使用频率较低,但是又有必要的工具类应用。不过从小程序更侧重于线下服务的特点来看,随着越来越多的线下服务与小程序对接,比如说越来越多的智能设备,都可能需要相应的小程序与之对接,所以长远来看,小程序还是比较有发展空间。

文章目录
  1. 1. 单选题
  2. 2. 多项选择题
    1. 2.1. 开放题