技术分享博客

1、方法一（常规for循环）

两个数组进行for循环嵌套，然后判断元素是否相等，如果相等就push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let intersection = []

for (let i = 0; i < arr1.length; i  ) {
  for (let j = 0; j < arr2.length; j  ) {
    if (arr1[i] === arr2[j]) {
      intersection.push(arr1[i])
    }
  }
}
console.log(intersection) // [4, 5]

方法二（使用ES6的filter函数和includes函数）

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
console.log(arr1.filter((item) => arr2.includes(item))) // [4, 5]

方法三（reduce）

先合并和排序，然后通过reduce参数进行对比，判断上一个和当前元素相同时push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let arr = arr1.concat(arr2).sort()
let intersection = []

arr.reduce((pre, now) => {
  if (pre === now) {
    intersection.push(now)
  }
  return now
})
console.log(intersection) // [4, 5]

方法一（利用解构赋值...和Set的唯一性）

先将两个数组合并再通过Set()去重

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]

let result = [...new Set(arr1.concat(arr2))]
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]

方法二（reduce）

先合并和排序，然后通过reduce参数进行对比，判断上一个和当前元素不相同时，就push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let arr = [...arr1, ...arr2].sort()
let result = [arr[0]]

arr.reduce((pre, now) => {
  if (pre !== now) {
    result.push(now)
  }
  return now
})
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]

方法三（转json对象）

将数组转成JSON对象，数组每个元素都作为对象的键和值，如果元素相同，则对象键和值会覆盖，达到去重效果，接着再使用Object.values提取对象的值返回一个新的数组。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let obj = {}

arr1.forEach((item) => {
  obj[item] = item
})
arr2.forEach((item) => {
  obj[item] = item
})
let result = Object.values(obj)
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]

// 实例化对象
const speakMsg = new SpeechSynthesisUtterance()

// 设置在说话时将合成的文本内容。
speakMsg.text = speech;
// 设置话语的语言。 例如：“zh-cn”表示中文
speakMsg.lang = "zh-CN";
// 设置将在其中发言的音量。区间范围是0到1，默认是1
speakMsg.volume = 1;
// 设置说话的速度。默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍
speakMsg.rate = 1;
// 设置说话的音调(音高)。范围从0（最小）到2（最大）。默认值为1
speakMsg.pitch = 10;
//音高:0-1

// 方法调用
window.speechSynthesis.speak(speakMsg)

用户在登录时，数据传输过程中如果密码使用的是明文，那么在报文被拦截之后是可以直接获取传输的数据，所以明文密码在传输时被拦截是十分危险，因此在传输密码前前端需要对密码进行加密。

前端使用MD5进行加密如下：

1、使用npm安装md5

npm install js-md5

2、引入md5

import md5 from 'js-md5'

3、使用md5进行加密，加密方式有以下三种

// 密码
let password="123456"
// 盐值
let solt = 'yanzhi'

// 普通的md5加密
md5(password)

// 双重md5加密
md5(md5(password))

// md5加盐solt加密算法
md5(solt password)
md5(password solt)
md5(solt password solt)
md5(md5(password) solt)
md5(solt md5(password))

match用来在一个字符串中查找匹配的子串，并返回一个包含匹配结果的数组。match()方法可以接收一个参数，这个参数可以是正则表达式对象或者一个字符串。

1、匹配括号中的内容，包含括号

var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言，是一种{花括号}标记语言。'

var reg1 = /\((. ?)\)/g // () 小括号
var reg2 = /\[(. ?)\]/g // [] 中括号
var reg3 = /\【(. ?)\】/g // 【】中文大括号
var reg4 = /\{(. ?)\}/g // {} 花括号

str.match(reg1) // ['(小括号)']
str.match(reg2) // ['[中括号]']
str.match(reg3) // ['{花括号}']
str.match(reg4) // ['【中文中括号】']

2、匹配括号中的内容，不包含括号

var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言，是一种{花括号}标记语言。'

var reg1 = /(?<=\()(. ?)(?=\))/g // () 小括号
var reg2 = /(?<=\[)(. ?)(?=\])/g // [] 中括号
var reg3 = /((?<=\【)(. ?)(?=\】))/g // 【】中文大括号
var reg4 = /(?<=\{)(. ?)(?=\})/g // {} 花括号，大括号

str.match(reg1) // ['小括号']
str.match(reg2) // ['中括号']
str.match(reg3) // ['中文中括号']
str.match(reg4) // ['花括号']

把颜色值转换床RGB模式

const colorHex2Rgb = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var sColor = color.toLowerCase();

  if(sColor && reg.test(sColor)){
      if(sColor.length === 4){
          var sColorNew = "#";
          
          for(var i=1; i<4; i+=1){
              sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));    
          }
          
          sColor = sColorNew;
      }
      
      var sColorChange = [];
      
      for(var i=1; i<7; i+=2){
          sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));    
      }
      
      return "RGB(" + sColorChange.join(",") + ")";
  }else{
      return sColor;    
  }
};

将RGB模式转换成十六进制

const colorRgb2Hex = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var that = color;
  
  if(/^(rgb|RGB)/.test(that)){
      var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
      var strHex = "#";
      
      for(var i=0; i<aColor.length; i++){
          var hex = Number(aColor[i]).toString(16);
      
          if(hex === "0"){
              hex += hex;    
          }
          
          strHex += hex;
      }
      
      if(strHex.length !== 7){
          strHex = that;    
      }
      
      return strHex.toUpperCase();
  }else if(reg.test(that)){
      var aNum = that.replace(/#/,"").split("");
      
      if(aNum.length === 6){
          return that;    
      }else if(aNum.length === 3){
          var numHex = "#";
      
          for(var i=0; i<aNum.length; i+=1){
              numHex += (aNum[i]+aNum[i]);
          }
          
          return numHex.toUpperCase();
      }
  }else{
      return that.toUpperCase();    
  }
};

文本域内容通过回车键进行换行后，提交表单保存到数据库中，数据库保存的内容格式和文本域是一致的。

请求接口后，返回的数据是带有/n换行符的字符串。/n换行符是后端的代码换行的符号，在前端代码中是不展示也不起换行作用。

为了保证页面展示和我们输入一致的换行效果，此时，我们需要对该字段的数据进行处理。可以通过替换方法replace()方法\n替换成浏览器可识别的换行标签进行处理。

summary.replace(/\n/g, '<br/>')

闭包是指存在自由变量的函数。在A作用域中使用的变量a，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，a就是一个自由变量。如下代码

promise是一个构造函数，是用来处理异步操作的解决方式。promise构造函数是同步执行的，then方法是异步执行的

js的数据类型可分为基本数据类型和引用数据类型。基本数据类型(栈存储)：Undefined，Null，Boolean，Number、String引用数据类型(堆存储)：对象、数组、函数