javascript原生技巧篇

有趣的面试题

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] 整数或者浮点数

<input type="number" (keydown)="add($event)">

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 属性

<input class="aaa" type="number" >

.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 原有特性	✓	✓
修改原有特性	✓	✓	✓