pxx前端笔试题复盘(4.15)

三道选择

1、选择点击按钮之后控制台打印的结果

知识点:事件捕获和冒泡。

事件传播顺序:外层捕获 => 内层捕获 => 内层冒泡 =>外层冒泡

addEventListener方法:可以增加第三个参数,默认值是false表示在事件冒泡阶段调用事件处理函数。如果更改为true,则表示在事件捕获阶段调用处理函数。

//事件监听器默认监视冒泡行为
button.addEventListener(' ', () => {} , false/true)

stopPropagation()可以阻止事件沿着DOM树向上或向下传播。 

而一个dom元素的事件执行顺序由绑定顺序决定,例如:

button.onclick = function () {
    console.log("1");
};

button.addEventListener('click' , () => {
   console.log("2");
})

//12

因此本题题解思路为:

先寻找捕获期间执行的函数:

button.addEventListener('click', (e) => {
   console.log("4.button");
}, true);

container.addEventListener('click' ,(e) => {
   console.log("2.container");
},true)

因为捕获是从外往里的,因此打印结果为:

2.container => 4.button

再看冒泡期间的执行函数:

//不执行
button.onclick = function (e) {
    e.stopPropagation();
    console.log('1.button')
}

button.onclick = function () {
   console.log('2.button');
}

container.onclick = function () {
   console.log('1.container') //被button的e.stopPropagation()阻止了
}

button.addEventListener('click', (e) => {
   console.log('3.button');
   e.stopPropagation();
}, false)



首先onclick会覆盖,因此只执行第二个onclick

冒泡从里向外,从button开始,按照事件绑定顺序来说,现在打印的结果为

2.container => 4.button => 2.button =>3.container     //为题解

2、考察三元运算符、运算符执行顺序和字符串、数字类型转换

首先明白一点:

|| 或运算符,首先看左边是否是真值,如果是真值就不再计算右边的值。如果是假值再计算右边的表达式,并返回右边表达式的值

&& 和运算符,首先看左边是否是假值,就不再计算第二个表达式。

|| 和 &&都被称为短路运算符。

以及:

任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作

let num = 0;
const message =  '10' + num; //100
const message1 =  '10' + '10'; //1010
const message2 =  '10' + NaN; // 10NaN
const message3 = '10' + []; //10
const message4 = '10' + {}; //10[object,object]

3、css 选择器的优先级

内联样式 :1000 > id:100 > class: 10 > 类型(div) : 1 > 通配符选择器: 0

当权值相等时,后定义的样式表优先于之前定义的;

在同一组属性设置中表有**“!important"**规则的优先级最大;

后代选择器 .container div => 包含所有包裹的元素

子选择器  .container >div => 仅指代第一代子元素

相邻兄弟选择器 .container + div => 两者有相同的父元素,选择的是紧邻着contain后面的一个元素

普通兄弟选择器 .container ~div => 有相同的父元素,选择的是紧邻着后面的所有子元素

并集选择器:h1, h2, h3{  }

交集选择器:<p.cls => <p class = "cls"> </p>

伪类选择器:用来表示定位元素的某种状态所显示的样式:button:hover { }

否定伪类选择器:p:not(.fancy) { color: green; }

伪元素选择器:是添加到选择器的关键字,可用于设置所选元素的特定部分的样式。

.p1::first-line { color: lightcoral; };

::before :创建一个伪元素,该元素是所选元素的第一个子元素。

::after:创建一个伪元素,该元素是所选元素的最后一个子元素。

三道代码

1、api相关,忘记记录了= = 

2、css九宫格

3、去除数组或者对象中的假值

..(本人总感觉还有可以优化的空间,欢迎讨论

const obj1 = [null, 0, false, 1];
const obj2 = { "a": null, "b": [false, 1] };
const obj3 = [null, 0, 5, [0], [false, 16]];
const obj4 = { "a": true, "b": [false, 1] };

var f1 = function hh(obj) {
    if (obj instanceof Array) {
        let newArray = [];
        for (i = 0; i < obj.length; i++) {
            if (obj[i]) {
                if (obj[i] instanceof Array) {
                    let arr1 = [];
                    const arr2 = obj[i];
                    for (j = 0; j < arr2.length; j++) {
                        if (arr2[j]) {
                            arr1.push(arr2[j]);
                        }
                    }
                    newArray.push(arr1);
                    // console.log(newArray);
                } else {
                    newArray.push(obj[i]);
                }
            }
        }
        console.log(newArray);
    } else {
        let newObject = {};
        for (let key in obj) {
           if (obj[key] instanceof Array ) {
              const arr3 = obj[key];
              let arr4 = [];
              for(i = 0; i < arr3.length; i++) {
                if(arr3[i]) {
                   arr4.push(arr3[i]);
                }
              }
              obj[key] = arr4;
              Object.assign(newObject, {[key] : obj[key]})
           } else if (obj[key]) {
              Object.assign(newObject, {[key] : obj[key]});
           }
        }
        console.log(newObject);
    }
}
f1()

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值