js信息以及相关常使用信息-CSDN博客

本文链接：https://blog.csdn.net/weixin_42888568/article/details/118685870

…正在完善，不知道啥时候完成

JavaScript篇

文章目录

JavaScript篇
一、什么是JavaScript
二、使用相关
总结

一、什么是JavaScript

JavaScript 是属于 HTML 和 Web 的编程语言。
编程令计算机完成您需要它们做的工作，主要做动态美化网页,校验表单等等。

二、使用相关

1.JavaScript版本

ES5学习地址: ES5学习地址.
ES6学习地址: ES6学习地址.
ES7学习地址: ES7学习地址.

2.JavaScript数值类型以及相关内容判断

字符串值（“”），数值（123），布尔值（true,false），数组([])，对象({})。
/*********/
2.0.0.1 对象判断

let profitAYing1= {}
//第一种
if(JSON.stringify(profitAYing1) == "{}"){
   console.log("空对象")
}else {
   console.log("非空对象")
}
//第二种
if (Object.keys(profitAYing1).length == 0){   
   console.log("空对象")
}else {
   console.log("非空对象")
}

2.0.0.2 数组判断

let profitAYing1= []
if(profitAYing1.length == 0){
   console.log("空对象")
}else {
   console.log("非空对象")
}

2.0.0.3 空值、undefine、null判断
注：很少出现这种情况，假如出现情况这种，请与后端协商下

if(profitAYing1 && profitAYing1 !== undefine && profitAYing1  !== null){}

3.JavaScript数值处理相关转化以及其他

3.0.1 字符串转json

//es5
JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号

3.0.2 字符串转换为数组

var string = '123,456,789';
var stringResult = string.split(',');
console.log(string2Result) //输出['a','b','c','d','e','f']
string2.split(",").map(Number);//输出[123,456,789]
JSON.parse("[" + string + "]"); //输出[123,456,789]

3.0.3 数组转换为字符串

var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) // 输出"abc,def,hig"
array.toString()//输出"abc,def,hig"

3.0.4 数组添加/删除对象/数值等等

let newelement1 = “abc”
arrayObject.push(newelement1)
例如：
let imgArray =[{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'},{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'},{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'}]
let aaa = []
for(const item of imgArray) {
	aaa.push(item)
}
asplice(index){
	imgArray.splice(index, 1)//删除某元素
}
asplite(){
  datastr="2,2,3,5,6,6";      
  var str= new Array();   
  str=datastr.split(",");   
}

3.0.5 类型转化

Number() 方法
parseInt() 方法
parseFloat() 方法

数值转化可能出现精确度确实可以通过此方法防止精确度对视
var showSure = 222
let seed = ""
seed = parseFloat((showSure*100).toFixed(10));

3.0.6concat() 方法用于连接两个或多个数组。

let arrayObject = [1,2,3];
arrayObject.concat(4,5)

3.0.7 JavaScript中includes()和indexOf()

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
var str="Hello world, welcome to the universe.";
var n=str.includes("welcome");

3.0.8 JavaScript去重、匹配返回

JavaScript去重

//利用ES6 Set去重（ES6中最常用）
function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
//利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了
//字符串去重
let productIds = {1,2，3,4，5,6，1,2，2,2}
productIds = Array.from(new Set(productIds.split(','))).join(',');
//对象去重
objArry(arr){
    let result = {};
    let finalResult=[];
    for(let i=0;i<arr.length;i++){
        //利用对象的键名无法重复的特点，cpmch_id是唯一区别的属性值
        result[arr[i].mch_id] ? '' : result[arr[i].mch_id] = true && 				   finalResult.push(arr[i]);
    }
    return finalResult;
}

截取内容slice方法
使用时 slice(start,end)

//假如没有end，默认为最后一位
let newArrayList = newArray.slice( newArray.length-changeData.length);

JavaScript匹配返回

querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) :       restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      let spreadItem = spreadPosterData.find((item) => {
      return !item.spreadPoster
})
//根据返回值分反元/万元并分配小数点值
amountFliter(val) {
      if (!val) return '--';
      if (val == 0) return '--';
      if (Number(val) >= 10000) {
        var exValue = Number(val) / 10000;
        var unit = '万元';
      } else {
        var exValue = Number(val);
        var unit = '元';
      }
      let arr = [Number(exValue).toFixed(0), Number(exValue).toFixed(1), Number(exValue).toFixed(2)];
      return arr.find(item => { return (item - arr[arr.length - 1] == 0) }) + unit
    },

3.0.9 JavaScript脱敏

身份证

let str = "331082199611095387";
str = str.replace(/(\w{10})\w*(\w{2})/, '$1******$2');
console.log(str);

手机号

var str="18912341234"
var pat=/(\d{3})\d*(\d{4})/
var b=str.replace(pat,'$1****$2');
console.log(b)

3.0.10 JavaScript数据拉平(flat)

var a = [1,2,3,[4,8]].flat()
console.log('aaa', a)//1,2,3,4,8

3.0.11 JavaScript负数索引(at)

var a = [1,2,3,4,5,6,7].at(-2)
console.log(a)//6

4.JavaScript循环区别

1、for

for(let index = 0; index < array.length; index++) {
    const element = array[index];
}

2、forEach

array.forEach(element => {
 });

3、for…of…

for (const iterator of object) {  
}

4、for…in…

for (const key in object) {
       if (Object.hasOwnProperty.call(object, key)) {
          const element = object[key];
          console.log(o[p]);  // 属性名赋值给变量p  输出每一个属性的值
       }
 }

5. JavaScript链式调用基本原理、实现方法

一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。
在调用一个方法是，后面的方法像链条一样被调用（如.XXX方法）

function Person(name) {
  this.name = name
  this.sayHi = function() {
    console.log(this.name)
    return this
  }
  this.modifyName = function(name) {
    this.name = name
    return this
  }
}
var person = new Person('Shikai Yuan')

person
  .sayHi()
  .modifyName('Shikai Yuan')
  .sayHi()

vue3.0 main中类似调用

import {
  ...
} from 'ant-design-vue'
createApp(App)
  .use(Radio)
  .use(Popconfirm)
  .use(Switch)
  .use(Modal)
  .use(store)
  ...

6. js版本增加灵活功能

6.0.1 ES5\6

//判断两个
//判断数组中是否包含符合条件的元素 
var bool=arr.some(function(val){
		return 判断条件
	  })
//判断数组中是否所有元素都符合条件
var bool=arr.every(function(val){
		return 判断条件
	  })
//遍历2个
//仅单纯遍历原数组中每个元素
  arr.forEach(function(val){
		对val的操作
	  })
//遍历元素数组中每个元素，修改后，放入新数组中返回
var 新数组=arr.map(function(val){
		return 根据当前元素值val，修改后的一个新值
	  })
//过滤和汇总
//复制出原数组中符合条件的元素组成新数组返回，原数组保持不变
var 新数组=arr.filter(function(val){
		return 判断条件
	})
//遍历数组中每个元素，对所有元素进行统计，最终得出一个统计结果
var 统计结果=arr.reduce(
		function(prev, val){
			prev+=val;
			return prev
		},
		起始值
	)

6.0.2 前端js数值正除后精度丢失问题

parseFloat((quotaMax*10000).toFixed(10)))

6.0.3 手机号脱敏以及姓名脱敏以及身份证脱敏

function noPassByMobile(str){
    if(null != str && str != undefined){
        var pat=/(\d{3})\d*(\d{4})/;
        return str.replace(pat,'$1****$2');
    } else {
        return "";
    }
}

身份证号脱敏

function noPassByName(str){
    if(null != str && str != undefined){
        if(str.length <= 3){
            return "*" + str.substring(1,str.length);
        } else if(str.length > 3 && str.length <= 6){
            return "**" + str.substring(2,str.length);
        } else if(str.length > 6){
            return str.substring(0,2) + "****" + str.substring(6,str.length)
        }
    } else {
        return "";
    }
}

计算两个日期之间的间隔

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

判断微信号、QQ号的校验

//微信号是不以数字开头，位数在19位以内
const reg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/
//qq号校验
const reg =  /^[1-9][0-9]{4,9}$/gim;

7.如何删除字符串最后一位

https://blog.csdn.net/qq_34707272/article/details/105345477

js 删除字符串最后一个字符

// 原字符串
const str = "1,2,3,4,5,"
 
// 想要的结果 "1,2,3,4,5"

JavaScript slice() 方法

const str = "1,2,3,4,5,";
console.log(str.slice(0, -1)); // "1,2,3,4,5"

JavaScript substr() 方法

const str = "1,2,3,4,5,";
console.log(str.substr(0, str.length-1)); // "1,2,3,4,5"

JavaScript substring() 方法

const str = "1,2,3,4,5,";
console.log(str.substring(0, str.length-1)); // "1,2,3,4,5"

JavaScript replace() 方法

const str = "1,2,3,4,5,";
const reg = /,$/gi;
console.log(str.replace(reg, "")); // "1,2,3,4,5"

8.如何知道按键按的是哪一个

<el-input placeholder="请输入内容" @keyup.enter.native="handleSearchMember" v-model.trim="searchKey"></el-input>

mounted() {
	const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
},

methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}