前端笔记

发表于 更新于 分类于 阅读次数：

简介

随手记

URL

前端访问后端地址，带有小数点导致参数不全

例：

  1. https://localhost:3000/download/voice.wav
  2. https://localhost:3000/download/voice.wav?parameter=1

会忽略小数点之后的内容。
原因：url中含有小数点，浏览器会认为是访问的文件
解决办法：

  1. 访问API时，url的末尾加 /， 如：https://localhost:3000/download/voice.wav/
  2. 把带小数点的路径前移， 如：https://localhost:3000/voice.wav/download
    在后端中，如果需要接收voice.wav这个参数，Spring可以用：
    1
    2
    3
    4
    @RequestMapping(/{fileName}/download)
    public ResponseEntity<byte[]> download(@RathVariable("fileName") String fileName) {
        ...
    }

JS

1.函数

js中有三种：函数声明、函数表达式、匿名函数

函数声明： function fnName() {...} ；
使用 function 关键字声明一个函数，再执行一个函数名，叫函数声明。

函数表达式： var fnName = function() { ... } ；
使用 function 关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数： function() { ... } ；
使用 function 关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处在于

1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明，而函数表达式必须等到 JavaScript 引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。

2、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以 fnName() 形式调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(a) {
  console.log(a);  //使用()运算符，打印出123
})(123);

(function(a) {
  console.log(a);  //使用()运算符，打印出1234
}(1234));

!function(a) {
  console.log(a);  //使用!运算符，打印出12345
}(12345);

+function(a) {
  console.log(a);  //使用+运算符，打印出123456
}(123456);

-function(a) {
  console.log(a);  //使用-运算符，打印出1234567
}(1234567);

var fn = function(a) {
  console.log(a);  //使用=运算符，打印出12345678
}(12345678);

可以看到输出结果，在 function 前面加 ! 、+ 、- 甚至是逗号等都可以起到函数定以后立即执行的效果，而 () 、! 、+ 、- 、= 等运算符，都将函数声明转换成函数表达式，消除了 javascript 引擎识别函数表达式和函数声明的歧义，告诉 javascript 引擎这是一个函数表达式，不是函数声明，可以在后面加括号，并立即执行函数的代码。

加括号是最安全的做法，因为 ! 、+ 、- 等运算符还会和函数的返回值进行运算，有时造成不必要的麻烦。

立即执行函数作用：创建一个独立的作用域。
不过这样的写法有什么用呢？

javascript 中没有私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，根据 javascript 函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以 (function(){ … })() 内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

jQuery 使用的就是这种方法，将 jQuery 代码包裹在 (function(window,undefined){ …jquery代码…})(window) 中，在全局作用域中调用 jQuery 代码时，可以达到保护 jQuery 内部变量的作用。

参考资料：10道典型的JavaScript面试题

splice()数组元素的插入删除与替换

面试的时候如果主考官让你使用JavaScript来实现对数组元素进行插入、删除、替换操作。如果不知道Array.prototype.splice的使用的方法那很有可能就要被扣分了。使用javascript数组类型内置的splice方法仅需一行代码即可轻松实现对数组元素进行插入、删除、替换操作。

方法名：Array.prototype.splice(index,count[,elm1,elm2…n])

使用Array类型的splice方法可以对数组元素进行插入、替换、删除。该方法讲直接影响当前的数组对象(与.slice(index1,index2)方法不同)并返回被删除的数组项。

参数：

index ：数组中元素的起始下标。
count ：需要要被删除或替换的元素个数。
elems ：需要插入到数组中的项。
返回值 ：返回从素组中被移除的项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var items =["a","b","c","d","e"];

//删除元素
result = items.splice(1,2)
//这个操作删除了示例中items数组中的元素["b"，"c"],并返回["b"，"c"]给result.

//替换元素
result = items.splice(1,2,"x","y")
//这个操作使用元素"x","y"替换了示例中items数组中的元素["b"，"c"],并返回["b"，"c"] 给 result.

//插入元素
result = items.splice(1,0,"x","y")
//这个操作的结果是在示例中items数组的的"b"元素后插入["x","y"],返回值为空。
</script>