前端常用技术备忘录（定时更新）

置顶 **之火

已于 2024-04-30 15:14:02 修改

阅读量1.1k

点赞数 1

分类专栏：总结文章标签：前端 javascript json

于 2021-12-14 10:50:50 首次发布

本文链接：https://blog.csdn.net/qq_35876316/article/details/121922105

版权

总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的Map数据结构应用，区分Object和Map，以及如何合理组织模块输出。此外，讲述了ESLint在代码质量控制中的作用，并讨论了const与let的使用原则。还涵盖了Promise、网络请求、文档工具ShowDoc和严格模式支持等内容。

摘要由CSDN通过智能技术生成

1、Map 结构 –
注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制

2、Module
如果模块默认输出一个函数，函数名的首字母应该小写。

function makeStyleGuide() {
}
export default makeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {
es6: {
}
};
export default StyleGuide;

3、ESLint
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、全局常量和线程安全
const优于let有几个原因。
一个是const可以提醒阅读程序的人，这个变量不应该改变；
另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；
最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率；
也就是说let和const的本质区别，其实是编译器内部的处理不同。

5、Promise
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

6、创建XHR

const client = new XMLHttpRequest(); //new实例对象
client.open("GET", url); //设置请求方式和url地址
client.onreadystatechange = handler; // 添加请求后的回调方法
client.responseType = "json"; //响应类型
client.setRequestHeader("Accept", "application/json"); //这是请求头
client.send(); //发送

7、常见的请求头类型
application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式
application/json：消息主体是序列化后的 JSON 字符串
multipart/form-data：需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的
text/plain：数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。

8、ShowDoc是一个非常适合IT团队的在线API文档、技术文档工具，可以用他来写接口文档。

9、JavaScript实现是否支持严格模式：

var hasStrictMode = (function(){"use strict"; return this === undefined})()
console.log(hasStriceMode) // true支持严格模式，false不支持

10、ES6后续新增运算符
1、指数运算符(**) 2 ** 2 == 4 a **= 2; ==> a = a * a;
2、链判断运算符 (？.) iterator.return?.()
3、空值合并：null或undefined判断运算符(??) headerText = response.settings ?? ‘Hello, world!’;
只有运算符左侧的值为null或undefined时，才会返回右侧的值
4、逻辑赋值运算符 (||=、&&=、??=)
三个运算符相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。
// 老的写法
user.id = user.id || 1;
// 新的写法
user.id ||= 1;

11、js实现事件发射监听（观察－订阅模式）

var events = {};
var eventEmitter = {
  emit: function (eventName) {
    var callbackArr = events[eventName]
    if (callbackArr && callbackArr.length) {
      for (var i = 0; i < callbackArr.length; i++) {
        callbackArr[i]()
      }
    }
  }
};
var eventListener = {
  on: function (eventName, callback) {
    if (!events[eventName]) {
      events[eventName] = []
    }
    events[eventName].push(callback)
  },
  remove: function (eventName, callback) {
    var callbackArr = events[eventName]
    if (callbackArr && callbackArr.length) {
      var index = callbackArr.indexOf(callback);
      callbackArr.splice(index, 1);
    }
  }
};
var clickCallback = function () {
  console.log('click callback');
}
eventListener.on('click', clickCallback)
eventEmitter.emit('click');
eventListener.remove('click', clickCallback)

12、‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序解决方式：

解决办法1
npm install --global vue-cli
解决办法2
我使用的淘宝的源
nrm ls
切换源
nrm use npm
删除 node_moudles
重新 npm install

优化规则：

1、始终在 v-for 中使用 :key
2、在发出定制事件时，最好使用短横线命名，如this.$emit(‘father-handle’)
3、使用驼峰式声明 props，并在模板中使用短横线命名来访问 props（ props:{ title-text: String}）
4、data 应始终返回一个函数（data(){ return {};}）
5、不要在同个元素上同时使用v-if和v-for指令
6、遍历一个计算属性，计算属性中根据条件的过滤返回一个只适合模板需要的数据
7、用正确的定义验证我们的 props

props: {
	status: {
		type: String,
		required: true,
		validator: function (value) {//自定义验证函数
			return [
			'syncing',
			'synced',
			'version-conflict',
			'error'
			].indexOf(value) !== -1
		}
	}
}

8、基本组件应该相应地加上前缀（如：BaseButton.vue，BaseIcon.vue）
9、单实例组件命名应该带有前缀 The（如：TheButton.vue，TheIcon.vue）
10、模板表达式中只有方法，不含计算逻辑，要分离表达式
11、减少魔数函数的使用；如：fun(1,‘name’,…) 写 let _num = 1, _str = ‘name’
js运算奇葩：

1++; // -> SyntaxError
"x"++; // -> SyntaxError
undefined++; // -> NaN
1/0; // -> Infinity
Math.pow(10, 1000); // -> Infinity
Infinity > Infinity; // -> false
Number(""); // -> 0
[].toString(); // -> ""
"" + ""; // -> ""
let _NaN = NaN;
_NaN++;
isNaN(_NaN); // -> true
_NaN--;
isNaN(_NaN); // -> true
_NaN *= 10;
isNaN(_NaN); // -> true

13、JavaScript介绍
JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

14、js下载文件

function runCode(html) {
    var newwin = window.open(&apos;&apos;, &apos;&apos;, &apos;&apos;);
    newwin.opener = null;
    newwin.document.write(html);
    newwin.document.close();
}

15、js常用判断的工具函数

1.邮箱
export const isEmail = (s) => {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
2.手机号码
export const isMobile = (s) => {
return /^1[0-9]{10}$/.test(s)
}
3.电话号码
export const isPhone = (s) => {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
4.是否url地址
export const isURL = (s) => {
return /^http[s]?:\/\/.*/.test(s)
}
5.是否字符串
export const isString = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
6.是否数字
export const isNumber = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
7.是否boolean
export const isBoolean = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
8.是否函数
export const isFunction = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
9.是否为null
export const isNull = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
10.是否undefined
export const isUndefined = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
11.是否对象
export const isObj = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
12.是否数组
export const isArray = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
13.是否时间
export const isDate = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
14.是否正则
export const isRegExp = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
}
15.是否错误对象
export const isError = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Error'
}
16.是否Symbol函数
export const isSymbol = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
}
17.是否Promise对象
export const isPromise = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
}
18.是否Set对象
export const isSet = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
}

16、数组的空位介绍
数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。
Array(3) // [, , ,]
上面代码中，Array(3)返回一个具有 3 个空位的数组。
注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
上面代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。
ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

17.‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序解决方式：

解决办法1
npm install --global vue-cli
解决办法2
我使用的淘宝的源
nrm ls
切换源
nrm use npm
删除 node_moudles
重新 npm install

18.typeScript类几种高级用法之一
给属性添加访问修饰符readonly
各种访问修饰符
使用constructor,属性会在构造函数中自动分配，类会更加简洁

class Person {
readonly name: string; // 不可变
private isCool: boolean; // 类的私有属性、外部访问不到
protected email: string; // 只能从这个类和子类中进行访问和修改
public age: number; // 任何地方都可以访问和修改

constructor(n: string, c: boolean, a: number) {
	this.name = n;
	this.isCool = c;
	this.age = a;
}

sayHello() {
	return `Hi，我是 ${this.name} ，我今年 ${this.age} 岁了`;
	}
}
const person1 = new Person('ConardLi', true, 'conard@xx.com', 17);
console.log(person1.name); // ConardLi
person1.name = 'Makey'
或写法
class Person {
  constructor(
    readonly name: string,
    private isCool: boolean,
    protected email: string,
    public age: number
  ) {}
}