…正在完善，不知道啥时候完成
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('++++');
}
},
}
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
