Mrli
别装作很努力,
因为结局不会陪你演戏。
Contacts:
QQ博客园

Js-ShortCode

2021/12/07 js
Word count: 2,597 | Reading time: 12min

js判断字符串是否为空

最近写了点前端代码,记录一下常用的shortCode

1
2
3
4
5
6
7
8
9
10
11
12
13
// 方法一:直接使用条件语句if判断
function isEmpty(str) {
if(typeof str== null || str== "" || str== "undefined") {
return true;
} else {
return false;
}
}
// 方法二:根据字符串的length来判断
var strings = '';
if (string.length == 0) {
alert('不能为空');
}

js中=区别

简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢,

这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则自动进行一次类型转换, 转换成相同类型后再进行比较, 而===比较时, 如果类型不同,直接就是false.

双等号==:

  1. 如果两个值类型相同,再进行三个等号(===)的比较
  2. 如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较:
    1. 如果一个是null,一个是undefined,那么相等
    2. 如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较

三等号===:

  1. 如果类型不同,就一定不相等
  2. 如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相等。(判断一个值是否是NaN,只能使用isNaN( ) 来判断)
  3. 如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。
  4. 如果两个值都是true,或是false,那么相等
  5. 如果两个值都引用同一个对象或是函数,那么相等,否则不相等
  6. 如果两个值都是null,或是undefined,那么相等

拷贝

1. 浅拷贝

1
2
3
4
5
6
7
8
9
10
11
12
// 法一:将父对象的属性,通过赋值拷贝给子对象。
function copy(origin) {
let target = {};
for (let i in origin) {
target[i] = origin[i];
}
return target;
}
// 法二:Objece.assign(): 方法用于对象的合并,将源对象的所有可枚举属性,复制到新的目标对象。
let target = Object.assign({}, origin);
// 法三:扩展运算符: ES2018 中将...扩展运算符引入了对象。于是实现浅拷贝的语法更为简单。
let target = { ...origin };

more: 包含[原型属性]一起拷贝: https://zhuanlan.zhihu.com/p/45249918

2.深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 法一:JSON.parse:这是一种很古老的方法,通过将对象转化为 JSON,再转化为对象来实现拷贝,具体的做法是这样的,这样虽然简单,但有但有两个缺点:一是不支持Function、Date等数据类型;二是不支持循环引用。
let target = JSON.parse(JSON.stringify(origin));
// 法二: 递归遍历:与浅拷贝的基本相同,也需要通过遍历对象属性。只是在遇到一个 Object属性时,需要再次调用拷贝函数。
// 定义一个深拷贝函数 接收目标target参数
function deepClone(target) {
// 定义一个变量
let result;
// 如果当前需要深拷贝的是一个对象的话
if (typeof target === 'object') {
// 如果是一个数组的话
if (Array.isArray(target)) {
result = []; // 将result赋值为一个数组,并且执行遍历
for (let i in target) {
// 递归克隆数组中的每一项
result.push(deepClone(target[i]))
}
// 判断如果当前的值是null的话;直接赋值为null
} else if (target === null) {
result = null;
// 判断如果当前的值是一个RegExp对象的话,直接赋值
} else if (target.constructor === RegExp) {
result = target;
} else {
// 否则是普通对象,直接for in循环,递归赋值对象的所有值
result = {};
for (let i in target) {
result[i] = deepClone(target[i]);
}
}
// 如果不是对象的话,就是基本数据类型,那么直接赋值
} else {
result = target;
}
// 返回最终结果
return result;
}
// 法三: 结构化拷贝
// 法四:Lodash一个实用的第三方 JavaScript 工具库。 嫌自己写方法麻烦的话,就直接去用它的defaultsdeep方法吧。

见: https://zhuanlan.zhihu.com/p/45249918

在forEach循环里头使用splice()遇到的坑

forEach自带索引的增加规则,但是splice后数组的索引都会改变,导致有元素会被跳过,因此需要自定义索引的增加规则

应用如下: 递归去掉Array中obj.hide==true的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 过滤掉routes中hide为true的路由
function filterNavs(ary) {
let i = 0
while (i < ary.length){
if ( ary[i].children ){
filterNavs(ary[i].children)
i++
}else if ( typeof(ary[i], Number)){
if ( ary[i].hide == true ){
ary.splice(i, 1);
}else{
i ++
}
}
}
return ary
}

javascript 数组(list)添加/删除的实现

javascript 数组Array(list)添加/删除

  • unshift:将参数添加到原数组开头,并返回数组的长度
  • pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined
  • push:将参数添加到原数组末尾,并返回数组的长度
  • concat:用于连接两个或多个数组。不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。
  • splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,…splice() 方法会改变原始数组。==>more: http://c.biancheng.net/view/5668.html
  • reverse:将数组反序
  • sort(orderfunction):按指定的参数对数组进行排序
  • slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组

6、数组的拷贝

1
2
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序

1
2
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort(); //对数组元素排序,返回数组地址

8、数组元素的字符串化

1
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

from: https://www.jb51.net/article/202307.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
// Splice示例:
// 添加: 如果不执行删除操作,第 2 个参数值应该设置为 0,但是不能够空缺,否则该方法无效。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

// 边删除边添加: splice() 方法的删除和插入操作是同时进行的,且是在原数组基础上执行操作。
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

from:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

JS删除对象中的某一属性

1
2
3
4
5
6
var obj={
name: 'zhagnsan',
age: 19
}
delete obj.name //true
typeof obj.name //undefined

数组中使用delete

在数组中,与普通的旧对象不同,使用delete在表单中留下垃圾,null在数组中创建一个“洞”, 而且length不变

1
2
3
4
5
var array = [1, 2, 3, 4];
delete array[2];
/* Expected result --> [1, 2, 4]
* Actual result --> [1, 2, null, 4]
*/

js遍历对象的几种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 第一种: for......in
const obj = {
id:1,
name:'zhangsan',
age:18
}

for(let key in obj){
console.log(key + '---' + obj[key])
}
/**
第二种:
1)、Object.keys(obj)
2)、Object.values(obj)
*/
console.log(Object.keys(obj)) // ['id','name','age']
console.log(Object.values(obj)) // ['1','zhangsan','18']
Object.keys(obj).forEach(function(key){
console.log(key,obj[key]);
});
// 第三种:使用Object.getOwnPropertyNames(obj)
/**返回一个数组,包含对象自身的所有属性(包含不可枚举属性)
遍历可以获取key和value*/
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key+ '---'+obj[key])
})
// 4、使用Reflect.ownKeys(obj)遍历
var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});

javaScript遍历数组总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1、使用forEach遍历
var arr=[1,2,3,4];
arr.forEach(function(val, index) {
console.log(val, index);
});
// 2、使用for..in..遍历
var arr=["张三","李四","王五","赵六"];
for (var i in arr){
console.log(i,":",arr[i]);
}
/**
3、使用for-of遍历
不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象.
也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历.
*/
for (var value of arr){
console.log(value);
}

将对象转成URL-Params

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const _parse2Params = function(data, isPrefix = false) {
let prefix = isPrefix ? '?' : ''
let _result = []
for (let key in data) {
let value = data[key]
// 去掉为空的参数
if (['', undefined, null].includes(value)) {
continue
}
if (value.constructor === Array) {
value.forEach(_value => {
_result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
})
} else {
_result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
}
}

return _result.length ? prefix + _result.join('&') : ''
}

const combileURLandParams = function(url, params) {
if (Object.getOwnPropertyNames(params).length != 0) {
return url + "?" + _parse2Params(params)
} else {
return url
}
}

根据Json数据动态生成表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
<h1>{{ $route.params.template }} </h1>
<div class="form-table-div">
<n-form style="width: 500px;" :model="configData.data" :label-width="120" ref="formRef">
<!-- config为每一个配置项 -->
<template v-for="(val, key, i) in configData.data" :key=key>
<n-form-item size='large' :label="key">
<n-input v-model:value="configData.data[key]" :placeholder="val" />
</n-form-item>
</template>
</n-form>
</div>

<div style="display: flex; justify-content: center;">
<n-button round type="primary" @click="generate">
生成
</n-button>
</div>

</template>

<script>
import {
defineComponent,
ref,
onMounted,
reactive,
computed
} from 'vue'
import {
useRoute
} from "vue-router"

import {
getOption,
doGenerte
} from "../api/index.js"

import {
combileURLandParams
} from "../utils/index.js"


function simplyData(params, str) {
const res = {}
for (let key in params) {
if (!key.includes(str)) {
res[key] = params[key]
}
}
return res
}

export default defineComponent(
setup() {
const route = useRoute()
const template = ref(route.params.template)

const formRef = ref(null)
const message = useMessage()
const configData = reactive({
data: {}
})

onMounted(
getConfigData()
)

async function getConfigData() {
let result = await getOption(template.value);
if (result.status === 200) {
let d = result.data.data
if (d.length == 1) {
configData.data = simplyData(d[0], "slug")
}
}
}

async function generate() {
var a = document.createElement('a');
let params = { ...configData.data }
params.template = template.value

var url = combileURLandParams("http://127.0.0.1:5501/api/v1/generate", params)
a.href = url;
a.click();
}

return {
formRef,
configData,
generate
}
}
})
</script>

js中的string.format

1
2
3
4
5
delete(ids) {
return Axios(`/bus/cloudRoleTeam/${ids}`, {
method: 'delete'
}
}

Author: Mrli

Link: https://nymrli.top/2021/12/07/Js-ShortCode/

Copyright: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

< PreviousPost
NodeJS包管理工具
NextPost >
前后端-实现上传和下载
CATALOG
  1. 1. js判断字符串是否为空
  2. 2. js中和=区别
  3. 3. 拷贝
  4. 4. 在forEach循环里头使用splice()遇到的坑
  5. 5. javascript 数组(list)添加/删除的实现
  6. 6. JS删除对象中的某一属性
  7. 7. js遍历对象的几种方法
  8. 8. javaScript遍历数组总结
  9. 9. 将对象转成URL-Params
  10. 10. 根据Json数据动态生成表单
  11. 11. js中的string.format