有趣的面试题
let obj = {
count: 70,
get counter() {
return this.count + 1
},
set counter(x) {
this.count = x++ * +'2' // 这是值是200
}
}
obj.counter = 100;
console.log(obj.counter); //201
引出一个比较简单的问题
let a=10
let b=a++ +1
b // 11
使用本地时间
new Date().toLocaleDateString('sv-SE')
有趣的浏览器快捷键
ctrl +k 搜索
ctrl+l 清空控制台
有意思的解构
let age = 12;
let a={age};
console.log(a);
// { age: 12 }
小知识点
移除数据中的空项
[1,2,,,,,,1,2].flat()
[1,2,1,2]
随机数据API
地址
参数介绍
url https://random-data-api.com/api/
参数
size=number
例如 size=2,就是数组的长度两条
例如用户: /users/random_user
https://random-data-api.com/api/users/random_user?size=2
有趣的学习项目
https://js1024.fun/
rgb的小技巧
两种方式
background-color: rgb(22, 22, 22);
background-color: rgb(196 20 20); //不带逗号
通过斜杠改变颜色/透明度
background-color: rgb(194 20 20/0.1); // 改变 alpha值
background-color: rgb(194 20 20/20%); // 改变透明度
不过我使用
background-color: rgb(194 20 20/20%);用的less 预处理期发现不能用,看了下官网的issues 发现这个问题 # 3547给出的结果是在less4.0 是可以使用的,因为这是一个比较新的功能
event.target.valueAsNumber
直接展示number,这样就不需要转化了,范围 [float,Number] 整数或者浮点数
add($event: KeyboardEvent) {
let a = ($event.target as HTMLInputElement);
let b=a.value;
let c=a.valueAsNumber;
console.log(typeof b,typeof c);
// string,number
}
随便数
console.log(0 % 5); // 0
console.log(1 % 5); // 1
console.log(2 % 5);// 2
console.log(3 % 5);// 3
console.log(4 % 5);// 4
console.log(5 % 5);// 0
console.log(6 % 5);// 1
console.log(7 % 5);// 2
console.log(8 % 5);// 3
console.log(9 % 5);// 4
console.log(new Date() % 5);
// 0<=n<5
console.log(Math.floor(Math.random() * 5));
// 0<=n<5
拿到css 属性
.aaa {
width: 200px;
height: 200px;
background-color: rgb(22, 22, 22);
}
let elem = document.querySelector('.aaa');
let style = getComputedStyle(elem);
console.log(style.getPropertyValue('background-color'));
封装
const getCssProp = (element, propName) => getComputedStyle(element).getPropertyValue(propName);
getCssProp(document.querySelector('#ccc'),'background-color')
必传
const isRequire = () => {
throw new Error('params is require')
};
const print = (a = isRequire()) => a;
console.log(print(1));
// 1
console.log(print());
// throw new Error('params is require')
console.log(print(null));
// null
import 避免异步的操作
hello-type.js
export const a=1;
------
async changFn(){
await import('./hello-type').then(e=>{
console.log(e.a);
})
console.log(22);
}
changFn()
// 1
// 22
Promise.allSettled 科普
我们用Promise 比较多
但是当我们对每一个数组进行操作的时候,就可以用用Promise.allSettled
let promise=[
Promise.resolve('成功1'),
Promise.resolve('成功2'),
Promise.resolve('成功3'),
];
Promise.all(promise).then(res=>{
console.log(res);
})
// [ '成功1', '成功2', '成功3' ]
Promise.allSettled(promise).then(res=>{
return res.forEach(val=>{
console.log(val);
})
})
// { status: 'fulfilled', value: '成功1' }
// { status: 'fulfilled', value: '成功2' }
// { status: 'fulfilled', value: '成功3' }
最大值得加减
let num = Number.MAX_SAFE_INTEGER;
console.log(++num); //9007199254740992
console.log(++num); //9007199254740992
console.log(++num); //9007199254740992
console.log(9007199254740992 === 9007199254740993);
//true
let big = BigInt(num);
console.log(++big); //9007199254740993n
console.log(++big); //9007199254740994n
console.log(++big); //9007199254740995n
console.log(9007199254740992n === 9007199254740993n);
//false
修改数组的值
let a = ['a', 'b', 'c', 'd', 'e'];
console.log(Object.assign(a, {1: '修改1位置的值'}));
// [ 'a', '修改1位置的值', 'c', 'd', 'e' ]
动态的增加数组或者对象
let lastName = 'eee'
let booleans = true;
let obj = {
firstName: 'ku',
...(booleans && {lastName}),
heroName: 'xx'
}
console.log(obj);
// { firstName: 'ku', lastName: 'eee', heroName: 'xx' }
// 我们可以通过改变booleans 的值进行动态加载
删除某值
let user={
name:'xxx',
id:12,
sex:'nan'
}
const removeProp=prop=>({[prop]:_,...rest})=>rest;
console.log(removeProp('id')(user));
// { name: 'xxx', sex: 'nan' }
let a = ['a', 'b'];
let booleans = true;
let arr = [1, 2, 3, 4, ...(booleans ? a : [])];
console.log(arr);
// [ 1, 2, 3, 4, 'a', 'b' ]
只执行一次
document.querySelector('xxx').addEventListener('click',()=>{
console.log('执行一次')
},{once:true})
观察dom size的变化
原生
let a = document.querySelector('.aaa');
const myObser=new ResizeObserver(e=>{
e.forEach(val=>{
console.log(val.contentRect);
})
})
myObser.observe(a);
记得离开页面要清除监控
myObser.unobserve()
angular版
我们会发现控制有报错信息
在投入下载并引入
import ResizeObserver from 'resize-observer-polyfill'就好了
# 对象的preventExtension vs seal vs freeze
preventExtensions
调用的对象不能添加任何新属性。但是可以修改,删除
let a = {name: 'xxx', age: 12}
Object.preventExtensions(a);
a.sex = 'bbb';
console.log(a);
// { name: 'xxx', age: 12 }
// 判断是否可扩展
console.log(Object.isExtensible(a));
//false
// 可以删除原有属性
delete a.name;
console.log(a);
// { age: 12 }
seal
不能增加或者删除任何属性,但是可以修改原有属性
let a = {name: 'xxx', age: 12}
Object.seal(a);
a.sex = 'bbb';
console.log(a);
// { name: 'xxx', age: 12 }
// 判断是否密封
console.log(Object.isSealed(a));
//true
// 删除原有属性,无效...
delete a.name;
console.log(a);
// { name: 'xxx', age: 12 }
a.age='xxx'
console.log(a);
// { name: 'xxx', age: 'xxx' }
freeze
调用的对象不能做任何操作
let person = {
name: "Agustin",
age: 27,
};
Object.freeze(person);
Object.isFrozen(person); // return true
person.name = "Maria";
console.log(person); // return { name: "Agustin", age: 27 }
三者的相同点
let person = {
name: "Agustin", // 三者都能起作用
age: 27, // 三者都能起作用
address: {
// 都不能起作用
country: "Argentina",
city: "Corrientes",
},
};
三者不同点
| 特征 | default | preventExtensions | seal | freeze |
|---|---|---|---|---|
| add 新特性 | ✓ | |||
| remove 原有特性 | ✓ | ✓ | ||
| 修改原有特性 | ✓ | ✓ | ✓ |