本两周学习总结

判断质数

const isPrime = num => {
    let bount = Math.floor(Math.sqrt(num))
    for (let i = 2; i <= bount; i++) {
        if (num % i === 0) {
            return false
        }
    }
    return num >= 2
}

getBoundingClientRect

获取页面元素的位置和判断元素是否在可视区域

getBoundingClienetRect 用于获取页面中某个元素的上,下,左,右,分别相对浏览器的位置

• 该函数返回一个object 对象, 改对象有6个属性top,left,right,bottom,widht,height
• width,height 是元素自身的宽高

 const { innerHeight, innerWidth } = window;
 视口的宽度,高度

isObject

const isObject = obj => obj === Object(obj);
EXAMPLES
isObject([1, 2, 3, 4]); // true
isObject([]); // true

console.log({}===Object({})) //false
其实应该这样理解

Intl.NumberFormat

格式化数据类

const formatter = new Intl.NumberFormat('en');
formatter.format(987654.321);
// → '987,654.321'
formatter.formatToParts(987654.321);
// → [
// →   { type: 'integer', value: '987' },
// →   { type: 'group', value: ',' },
// →   { type: 'integer', value: '654' },
// →   { type: 'decimal', value: '.' },
// →   { type: 'fraction', value: '321' }
// → ]

虽然可以通过Number.prototype.toLocaleString来实现

紧密计法是使用特定于语言环境的符号来表示大数字。它是科学计数法的一种更人性化的替代方案：

  const formatter = new Intl.NumberFormat('en', {
    notation: 'compact',
  });
  formatter.format(1234.56);
  // → '1.2K'
  formatter.format(123456);
  // → '123K'
  formatter.format(123456789);
  // → '123M'

encodeURI 和encodeURIComponent 区别

暂时觉得encodeURIComponent是最新的,解决了原有会出现的问题

toPrecision

指定的精度返回该数值对象的字符串

let numObj=5.1234567
console.log(numObj.toPrecision(1))
//5
console.log(numObj.toPrecision(3))
//5.12
console.log(numObj.toPrecision(5))
// 5.1235 会四舍五入
console.log(numObj.toFixed(4))
// 5.1235 跟toFixed 保持一致
let numObj1=51234.21
console.log(numObj1.toPrecision(2))
//5.1e+4  这种情况就以指数表示法返回

**的优先权比*/高

2/123**0
// 2

内存换算

const prettyBytes = (num) => {
    const UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    if (Math.abs(num) < 1) {
        return num + UNITS[0]
    }
    // 指数
    const exponent = Math.min(Math.floor(Math.log10(num < 0 ? -num : num) / 1000), UNITS.length - 1)
    const n=(num<0?-num:num)/1000**exponent.toPrecision(3)
    return num<0?'-':''+n+UNITS[exponent]
}

requestAnimationFrame

重绘后执行的动画,可以做逐帧动画

简单的说调用一次动画,就重绘一次动画

平滑滚动到页面顶部

export const scrollToTop = () => {
    const c = document.documentElement.scrollTop || document.body.scrollTop;
    if (c > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
    }
};

滚动到指定元素区域

const smoothScroll = element =>{
    document.querySelector(element).scrollIntoView({
        behavior: 'smooth'
    });
};

时间操作

获取当前时间戳

Date.parse(new Date())  //精确到秒
new Date().getTime()

前一天/后一天的时间戳

+new Date()-28*60*60*1000
+new Date()-24*60*60*1000

css 实用属性: pointer-events

当pointer-events:none,他有如下相关特性

• 阻止用户的点击动画产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止css里的hover和active状态的变化触发事件
• 阻止javascript点击动作触发的事件

可以考虑给页面加一个遮罩的时候使用这个

proxy

let person = {
  name: 'tom',
  age: 20,
  _aaa: 12
}
const defaults = (obj, inital) => {
  return new Proxy(obj, {
    // get方法有三个参数,目标对象,属性名,proxy实例本身
    get(obj, prop) {
      if (prop[0] === '_') {//属性带有_是私有属性,禁止访问
        throw new Error('报错')
      }
      if (prop in obj) {
        return obj[prop]
      }

      return inital //设置默认值
    }

  })
}
let obj = defaults(person, '默认')
//set方法可以拦截对属性的赋值操作,
// 接受四个参数,分别是目标对象,属性名,属性值,proxy实例
// 验证规则
const validators = {
  name: {
    validate(value) {
      return value.length > 6
    },
    message: '用户名长度不能小于六'
  },
  password: {
    validate(value) {
      return value.length > 10
    },
    message: '密码长度不能小于十'
  },
  moblie: {
    validate(value) {
      return /^1(3|5|7|8|9)[0-9]{9}$/.test(value)
    },
    message: '手机号格式错误'
  }
}

function validator(obj, validators) {
  return new Proxy(obj, {
    set(obj, key, value) {
      const validator = validators[key]
      if (value == null || value == '') {
        console.log('输入的不能为空')
      } else if (validator.validate(value)) {
        obj[key] = value
      } else {
        console.log(validator.message)
      }
    }
  })
}

let form = {}
form = validator(form, validators)
form.name = ''
//输入的不能为空
form.name='1'
// 用户名长度不能小于六

apply

一般拦截函数的调用,接受三个目标参数,目标对象,上下文对象(this),参数数组

通过 apply 方法可以获取到函数的执行次数

function log() {}
const func = new Proxy(log, {
    _count: 0,
    apply(target, context, args) {
        target.apply(context, args);
        console.log(`this function has been called ${++this._count} times`);
    }
})
func()

construct

拦截new操作符

接受三个参数: 目标对象, 构造函数的参数列表,Proxy对象

function noop() {}
const Person = new Proxy(noop, {
   construct(target, args, newTarget) {
       return {
           name: args[0],
           age: args[1]
       }
   }
})
const a = new Person('tom', 21); // { name: 'tom', age: 21 }

泛类

function add<T>(a: T): T {
  return a
}

// 如果我们想知道传的参数的长度
function add1<T>(a: T[]): T[] {
  console.log(a.length);
  return a
}

// 也可以写成这样
function add2<T>(a: Array<T>): Array<T> {
  return a
}

interface Gener {
  <T>(arg: T): T;
}

// 赋值
let a: Gener = add;

// 一个相似的例子

interface Gener1<T> {
  (arg: T): T;
}

let b: Gener1<number> = add;

typescript 使用类型报错问题

类型断言

类型守卫

双重断言

**类型断言**
    
值  as  类型

function padLeft(value: string, padding: string | number) {
  // 报错: 
  // types 'string | number' => 'number'
  return Array(padding + 1).join(" ") + value;
}
解决方法
直接强转
function padLef(value: string, padding: string | number) {
  return Array(+padding + 1).join('') + value
}
断言
function padLef(value: string, padding: string | number) {
  return Array(padding as number + 1).join('') + value
}

类型守卫

• typeof: 用于判断 "number"，"string"，"boolean"或 "symbol" 四种类型.
• instanceof : 用于判断一个实例是否属于某个类
• in: 用于判断一个属性/方法是否属于某个对象
• 字面量类型保护

function padLeft(value: string, padding: string | number) {
    if (typeof padding === 'number') {
        return Array(padding + 1).join(' ') + value; //正常
    }
    if (typeof padding === 'string') {
        return padding + value;
    }
}

class Man {
    handsome = 'handsome';
}
class Woman {
    beautiful = 'beautiful';
}

function Human(arg: Man | Woman) {
    if (arg instanceof Man) {
        console.log(arg.handsome);
    } else {
        // 这一块中一定是 Woman
        console.log(arg.beautiful);
    }
}

interface B {
    b: string;
}
interface A {
    a: string;
}
function foo(x: A | B) {
    if ('a' in x) {
        return x.a;
    }
    return x.b;
}

字面量类型保护
type Man = {
    handsome: 'handsome';
    type: 'man';
};
type Woman = {
    beautiful: 'beautiful';
    type: 'woman';
};

function Human(arg: Man | Woman) {
    if (arg.type === 'man') {
        console.log(arg.handsome);
        console.log(arg.beautiful); // error
    } else {
        // 这一块中一定是 Woman
        console.log(arg.beautiful);
    }
}

typescript 在angular中一些新特性

export class NewComponent implements OnInit {
  public a = {b: 2};
  public b;
// 空值联合
  public c = this.b??'22';

  constructor() {
  };

  ngOnInit(): void {
    console.log(this.a?.b);
  }

}

删去某个属性

let a = {
  name: 'xxx',
  age: 123,
  address: {
    name: 'xxx'
  }
}
let {name, ...g} = a
console.log(g)
// { age: 123, address: { name: 'xxx' } }