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