JavaScript前端项目问题小结

hello你好我是辰兮，很高兴你能来阅读，最近要陆续整理一下关于前端开发过程中真实的项目问题，以及相关解决思路，分享获取新知，大家一起进步！

一、前端方法生成UUID

我们数据库的ID常常是Java后台用UUID生产的，但是我们是否思考过前端如何生产UUID的问题呢？

最近做一个新的业务，后台接口已经写好了，当我保存一个对象的时候，我要给后台传一个ID,这里我们就可以用到前端UUID的方法，这样生产一个无序的ID传给后台,这样也解决了ID重复的问题

以下代码就是前端生产UUID的方法，可自行实践

uuid() {
                var s = [];
                var hexDigits = '0123456789abcdef';
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = '4';
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = '-';

                this.uuidA = s.join('');
                console.log(s.join(''), 's.join("")');
                return this.uuidA;
            },

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

ps:当然是参考网上大佬然后复制过来总结自用

二、JavaScript实现数组中移除对象

这里单独整理了一篇关于数组中移除对象的方法，欢迎打卡：JavaScript实现删除数组中某个的对象

这里用到的是JavaScript简单逻辑实现移除对象，底层还是splice方法

三、JavaScript面向对象编程

数组对象[].属性取值

前端和后台都是面向对象编程，你要去某一个数组中某一个特定的属性，那你就要先找到这个对象，然后即可

 "list": [
            {
                "id": 16,
                "typeId": 9,
                "weights": 1.00,
                "name": "腾讯内推"      
            },
            {
                "id": 22,
                "typeId": 9,
                "weights": 0.80,
                "name": "百度内推"
            }
        ]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

取第一个对象的id :用索引取出第一个对象，然后对象.属性

//第一个对象的id
List[0].id

  

 

  
1
  
2
 

相关业务：之前写了一个下拉框，页面加载的时候会自动访问后台得到下拉框的数据，当我们点击具体数据的时候，表格下面出来对应数据的对应的表格，问题是如果我们不赋值给这个下拉框就很难页面加载出来就是空的情况,这里在加载的时候就要遍历一遍取到数组中第一个对象的相关lable属性

我只是整理一下怕以后太久不做前端忘记了哈哈

四、let和var的总结

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

{ 
  var i = 9;
} 
console.log(i);  // 9

  

 

  
1
  
2
  
3
  
4
 

ES6新增的let，可以声明块级作用域的变量。

{ 
  let i = 9;     // i变量只在 花括号内有效！！！
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

  

 

  
1
  
2
  
3
  
4
 

let变量不能重复声明
let不允许在相同作用域内，重复声明同一个变量。否则报错：Uncaught SyntaxError: Identifier ‘XXX’ has already been declared

let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared

  

 

  
1
  
2
  
3
 

ES6的let让js真正拥有了块级作用域，也是向这更安全更规范的路走，虽然加了很多约束，但是都是为了让我们更安全的使用和写代码。

1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
    
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>

  

 

  
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
 

本篇先整理这些吧，比较基础，留给自己吧，接下来陆续更新前端相关项目问题……

The best investment is to invest in yourself.

2020.11.22 愿你们奔赴在自己的热爱里！

文章来源: blessing.blog.csdn.net，作者：辰兮要努力，版权归原作者所有，如需转载，请联系作者。

原文链接：blessing.blog.csdn.net/article/details/109959081