1、设置元素浮动后，display的值是多少？（B）
A、inline
B、block
C、inline-block
D、none
参考：设置元素为浮动后，display的值是多少？
解析：设置元素浮动后，改元素的 display 值自动变成 block 。
我们都知道，行内元素不能设置 height、width、padding/margin-top/bottom属性值，但是当我们给 span、a 这些行内元素设置 float 属性的时候，就又可以设置它们的宽和高。那是因为当我们给行内元素设置 position:absolute/fixed、float:left/right 的时候，行内元素就变成了块级元素，也就是说，它们本身的 display 属性被忽略了。
2、CSS 优先级排序及对应的权重
（1）选择器的优先级
!important > 内联选择器（style）（1000）> id 选择器（100） > 类选择器、伪类选择器、属性选择器（10）> 标签选择器、伪元素（1） > 通用选择器（*）、子选择器（>）、相邻同胞选择器（+）（0）
权重越大优先级越大。有！important 则！important最大
补充：css属性选择器
补充：css伪元素和伪类的区别
- 行内样式>内部样式表>外部样式表（方式优先级）
- 优先级关系：!important > 行内样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签 、伪元素 > 通用选择器、子选择器、相邻选择器 > 继承 > 浏览器默认属性
css中的优先级规则为：
- 有
！important的最优先； - 其次权重高的优先；
- 权重相同则后定义优先，会覆盖前面的。
（2）选择器的权重
| 选择器 | 权重 |
|---|---|
| !important | 10000 |
| 内联选择器（style） | 1000 |
| id 选择器 | 100 |
| 类选择器 / 属性选择器 / 伪类选择器 | 10 |
| 元素选择器 | 1 |
| 通配符（*） | 0 |
权值等级划分， 一般来说是划分4个等级：
第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；
3、执行下列的代码会输出（A）
(() => {
let x;
let y;
try {
throw new Error()
} catch (x) {
x = 1;
y = 2;
console.log(x); // 1
}
console.log(x, y); // undefined 2
})()
A、 1 undefined 2
B、1 1 2
C、1 undefined undefined
D、undefined undefined undefined
答案：1 undefined 2
解析：
-
catch 代码块接收参数 x。当我们传递参数时，这与之前定义的变量 x 不同 。这个 x 是属于 catch 块级作用域的。
-
然后，我们将块级作用域中的变量赋值为 1，同时也设置了变量 y 的值。现在，我们打印块级作用域中的变量 x，值为 1。
-
catch 块之外的变量 x 的值仍为 undefined， y 的值为 2。当我们在 catch 块之外执行 console.log(x) 时，返回 undefined，y 返回 2。
-
需要注意的是 catch 的作用域其实并不是常见的块作用域，并不能绑定自己的内部声明的变量。catch 创建的作用域，只对 catch 的参数有效。对于在内部声明的变量，catch 并没有创建一个新的作用域，只是一个普通的代码块。
4、执行下列的代码会输出什么？
class Chameleon() {
static colorChange(newColor) {
this.newColor = newColor;
return newColor;
}
}
constructor({ newColor = "green" } = {}) {
this.newColor = newColor;
}
const freddie = new Chameleon({ newColor: purple });
freddie.colorChange("orange");
答案: TypeError
colorChange 是一个静态方法。静态方法被设计为只能被创建它们的构造器使用（也就是 Chameleon），并且不能传递给实例。因为 freddie 是一个实例，静态方法不能被实例使用，因此抛出了 TypeError 错误。
知识点：
- 静态方法： 在方法前加 static 关键字。表示该方法不会被实例继承，而是直接通过类来调用 。
- 静态属性： 在属性前加 static 关键字。指的是 class 是本身的属性，即 Class.propName，而不是定义在实例对象（this）上的属性。
5、执行下列的代码会输出什么？
function getPersonInfo(one, two, three) {
console.log(one)
console.log(two)
console.log(three)
}
const person = 'Lydia'
const age = 21
getPersonInfo`${person} is ${age} years old`
答案：["", " is ", " years old"] "Lydia" 21
知识点：
如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值！
6、执行下列的代码会输出什么？
const obj = { 1: 'a', 2: 'b', 3: 'c' }
const set = new Set([1, 2, 3, 4, 5])
obj.hasOwnProperty('1') // true
obj.hasOwnProperty(1) // true
set.has('1') // false
set.has(1) // true
答案：
true true false true
解析：
- hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。
- 所有对象的键（不包括 Symbol）在底层都是字符串，即使你自己没有将其作为字符串输入。这就是为什么 obj.hasOwnProperty(‘1’) 也返回 true。
- 对于集合，它不是这样工作的。在我们的集合中没有 ‘1’：set.has(‘1’) 返回 false。它有数字类型为 1，set.has(1) 返回 true。
7、执行下列的代码会输出什么？
const a = {}
const b = { key: 'b' }
const c = { key: 'c' }
a[b] = 123
a[c] = 456
console.log(a[b])
答案：456
解析：
- 对象的键会自动转换为字符串，我们试图将对象b设置为对象a的键。
- 当将一个对象转化为字符串的时候，会变成
"[object Object]"所以，a["[object Object]"] = 123。然后，我们再一次做了同样的事情，c 是另外一个对象，这里也有隐式字符串化，于是，a["[object Object]"] =456。然后，我们打印 a[b]，也就是 a["[object Object]"]。之前刚设置为 456，因此返回的是 456。
8、执行下列的代码会输出什么？
var a = 1 + null
var b = 1 + undefined
var c = 1 + []
var d = 1 + {}
console.log(a, b, c, d);
答案：1 NaN "1" "1[object Object]"
参考：JavaScript 语法：运算符号
9、下面说法错误的是（ B ）
A、每个对象都具有一个名为 proto 的属性
B、每个对象都具有一个名为 prototype 的方法
C、每个对象的 proto 属性指向自身构造函数的 prototype
D、对象不具有 prototype 属性，只有函数才有 prototype 属性
解析：
这里考察原型，js原型遵循5个规则：
1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null”以外）；
2、所有的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象；
3、所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通对象；
4、所有的引用类型（数组、对象、函数），__proto__属性值指向（完全相等）它的构造函数的 “prototype” 属性值；
5、当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去 proto（ 即它的构造函数的 prototype 中）寻找。
9、＜img src=“./logo.jpeg“ style=“width: 480px!important；“ alt=““＞，在不改变原有代码的基础上，将图片的宽度修改为300px，方法有哪些？
max-width:300px;- 给图片设置
box-sizing: border-box;padding: 0 50px;，但图片左右会有50px的内边距 - 利用缩放，给图片设置zoom: 0.625
- 利用缩放，
transform: scale(0.625,0.625)，但是占据的位置还是原来的 300px - js 获取元素使用
imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’ - 动画：谷歌无效！给图片设置动画，
from{width:300px;} to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于 !important 的特性
参考：＜img src=“./logo.jpeg“ style=“width: 480px!important；“ alt=““＞`，修改图片的宽度
10、js实现把一个字符串的大小写取反
方法1：利用正则表达式
思路：
- 大小写取反，最先想到的是替换 replace
- 怎么实现替换，通过正则，首先找到所有字母
/[a-zA-Z]/g - replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
- 实现：如果当前的字母转化为大写还和自己一样，那么他铁定就是大写字母，利用三木运算，是大写，那么就变为小写，反之
- 每一次正则匹配的结果返回
代码：
function reverseChar(str) {
// 使用正则的全局匹配
str = str.replace(/[a-zA-Z]/g, content => {
// content : 每一次正则匹配的结果
return content.toUpperCase() === content ? content.toLowerCase() : content.toUpperCase()
})
return str;
}
方法2：利用 charAt()
<script>
// 第二种方法是利用 字符串中的charAt(i) ---来获取字符串中的每一个字符（）-----再比较编码集
//charAt()--------比较的是Unicode编码集-----charAt(i)找的是字符串中第i个字符
var str1 = "azcBfHIjs"
console.log(str1);
var newStr = '';//保存转换后的字符串
for (var i = 0; i < str1.length; i++) {
if (str1.charAt(i) >= 'a') {//a unicode是97、比a大的是小写字母
aa = str1.charAt(i).toUpperCase();
}
else if (str1.charAt(i) >= 'A') {//A unicode 是65、比A 大的是大写字母
aa = str1.charAt(i).toLowerCase();
}
newStr = newStr + aa;//字符串的拼接的思想就是 新建一个数组
}
console.log(newStr);
</script>
11、将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组
问题描述：
已知如下数组：
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组。
解决问题：
思路： 扁平化处理 => 去重 => 升序
step1：
借助数组自带的flat函数进行扁平化处理
var newArray =arr.flat(depth) //flat方法依赖浏览器支持，部分低版本浏览器可能不支持该方法
step2:
ES6提供了一个强大的数组去重方法 Set
var newArray =Array.from(new Set(arr))
step3:
常用排序 sort 方法
var newArray =arr.sort((a,b)=>{return a - b})
代码：
var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
// 1. 递归实现扁平化
function flat(arr, res) {
// pre 初始值, 或者计算结束后的返回值
// cur 当前元素
// res 传递给函数的初始值
return arr.reduce((pre, cur) => {
if (Array.isArray(cur)) {
flat(cur, pre) //递归实现扁平化
} else {
pre.push(cur)
}
return pre
}, res)
}
var res = [];
var result = flat(arr, res);
console.log(result);
// [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
// 2. 去重
function uniq(arr) {
return Array.from(new Set(arr))
}
result = uniq(result);
console.log(result);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 10]
// 3. 排序
function upper(arr) {
return arr.sort((a, b) => {
return a - b
})
}
result = upper(result);
console.log(result);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
扫一扫
1286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
