前端开发笔记 (一)

开发笔记

1. js里面的单引号和双引号

双引号会搜索引号内的内容是不是有变量，有则输出其值，没有则输出原有内容。所以输出纯字符串的时候用单引号比双引号效率高，因为省去检索的过程。

2. 点击标签，禁止页面自动跳到顶部的解决办法

​ 把 href="#" 改为 href="###"

浏览器会把 "#" 当作是一种页面跳转口令，接到这个口令就会把页面滚动到原始位置。

3. let，const，var的区别

• let

  • let不存在变量提升

    使用let声明变量，必须遵循“先声明，后使用”的原则。否则报错。但如果是var声明的变量，则不会报错。

  • let声明的变量，存在块级作用域

    let声明的变量只在所在声明的代码块有效。块级作用域由{}包括，if语句和for语句里面的{}也属于块级作用域

  • let不允许在同一作用域里进行重复声明同一个变量

    在同一个作用域里，如果使用var进行声明变量，后面会覆盖前面的 。

  • 暂时性死区(TDZ)

    • 在代码块内，使用let声明变量之前，该变量都是不可以使用的只要在同一个作用域内存在let命令，它所声明的变量就”绑定”在这个作用域内，不管外部有没有声明。
    • 暂时性死区的本质就是，只要一进入当前作用域，所使用的变量就已存在，但是不可获取，只有等到声明变量的哪一行代码的出现，在可以获取和使用该变量。

    let b = 1;
    function test() {
        console.log(b);  //1
        let a = 2;
    }
    test()
    

    let b = 1;
    function test() {
        console.log(b);  //not defined 
        let b = 2;
    }
    test()
    /*说明：由于存在全局变量b，但是块级作用域内let又声明了一个局部变量b，同一个作用域内，不能重复声明同一个变量，所以在let声明前，对b进行赋值则报错*/
    

• const

  • const 声明一个只读的常量。一旦声明，常量的值就不能改变。
  • const 一旦声明变量，就必须立即初始化，不能留到以后赋值。对于 const 来说，只声明不赋值，就会报错
  • const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

• var

  • 变量提升（无论声明在何处，都会被提至其所在作用于的顶部）
  • var 声明的变量会挂载在window上，而 let 和 const 声明的变量不会

4. undefined与null的区别

• 相似性
  • 变量分别被赋值为undefined和null，这两种写法几乎等价。
  • undefined 和 null 在 if 语句中，都会被自动转为 false ，相等运算符甚至直接报告两者相等
• 区别
  • null表示"没有对象"，即该处不应该有值。
    • 作为函数的参数，表示该函数的参数不是对象。
    • 作为对象原型链的终点。
  • null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
  • undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
    • 变量被声明了，但没有赋值时，就等于undefined。
    • 调用函数时，应该提供的参数没有提供，该参数等于undefined。
    • 对象没有赋值的属性，该属性的值为undefined。
    • 函数没有返回值时，默认返回undefined。

5. 编程范式：命令式编程、声明式编程、函数式编程

• 命令式编程

  命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。（JavaScript）

• 声明式编程

  声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。（Vue，React）

• 函数式编程

  • 函数式编程和声明式编程是有所关联的，因为他们思想是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。
  • 函数式编程最重要的特点是“函数第一位”，即函数可以出现在任何地方，比如你可以把函数作为参数传递给另一个函数，不仅如此你还可以将函数作为返回值。

6. v-cloak 无效

• 在实际项目中，我们常通过 @import 来加载 css 文件，而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将[v-cloak]写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。
• 为了避免这种情况，我们可以将[v-cloak]写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决

7. CSS 中括号[ ]的用法

• span[class=‘test’] => 匹配所有带有class类名test的span标签

• span[class *=‘test’] => 匹配所有包含了test字符串的class类名的span标签

• span[class] => 匹配所有带有class属性的span标签

• [class=‘all’] => 匹配页面上所有带有class='all’的标签

• [class *=‘as’] => 匹配页面上所有class类且类名带有as字符串的类的标签

8. Vue中{{}}与v-text的区别

• 默认v-text是没有闪烁问题，{{}}存在闪烁的问题

• v-text会覆盖掉元素中原本的内容，但是{{}}只会替换自己的这个占位符。

9. JavaScript 中的 MIN_VALUE 属性

• MIN_VALUE 属性是 JavaScript 中可表示的最小的数（接近 0 ，但不是负数）。它的近似值为 5 x 10-324。

• 比 MIN_VALUE 属性小的数将用 0 表示。

• MIN_VALUE 是 JavaScript 最接近0的数,不是负值，负值属性为 MAX_NUMBER。

• MIN_VALUE 是 JavaScript 中Number 对象的静态属性，所以调用该属性的方法为： Number.MIN_VALUE.

  使用自定义的 Number对象 x 调用该属性（x.MIN_VALUE），将返回 undefined:

10.闭包

• 函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。（即：JavaScript的函数是闭包的）

  function makeAdder(x) {
    return function(y) {
      return x + y;
    };
  }
  
  var add5 = makeAdder(5);
  var add10 = makeAdder(10);
  
  console.log(add5(2));  // 7
  console.log(add10(2)); // 12
  

• 闭包允许将函数与其所操作的某些数据（环境）关联起来，使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为 模块模式（module pattern）

  • 利用匿名闭包，解决 var 关键字在 for 、if 语句中没有块级作用域的问题

    <script>
    	var btns = document.getElementsByTagName('button');
    	for (var i=0; i<btns.length; i++){
            （function （i）{
            	btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击')；
            	})
             })(i)
        }
    </script>
    

  • 另一个可选方案是使用 forEach()来遍历btns数组并给每一个<button>添加一个监听器

    <script>
    	var btns = document.getElementsByTagName('button');
        btns.forEach(function(item, index){
            item.addEventListener('click',function(){
                console.log('第' + index + '个按钮被点击')；
            })
        });    
    </script>
    

  • 若不使用闭包，可把关键字 var 改为 let

    <script>
    	const btns = document.getElementsByTagName('button');
    	for (let i=0; i<btns.length; i++){
            btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击')；
            })
        }
    </script>