JavaScript 常用函数整理
数组相关函数
splice()
splice() 方法用于添加或删除数组中的元素，这种方法会改变原始数组。
第一个参数为起始索引位置，第二个参数为删除的项数，第三个参数为插入任意数量的项。
// 删除功能
> arr = [1, 2, 3, 4]
> arr.splice(0, 1) // 两个参数默认为删除
[1]
> arr
[2, 3, 4]
// 插入、替换功能
> arr.splice(1,0,3)
[]
> arr
[1, 3, 2, 3, 4]
> arr = [1, 2, 3, 4]
> arr.splice(1, 1, 4)
[2]
> arr
[1, 4, 3, 4]
> arr.splice(1, 2, 5)
[4, 3]
> arr
[1, 5, 4]
> arr.splice(1, 0, 3, 4)
[1, 3, 4, 5, 4]字符串相关函数
split()
split() 方法用于把一个字符串分割成字符串数组，不改变原始字符串。
> str = "L-P-x-z"
> str.split('-')
["L", "P", "x", "z"]
> str.split('')
["L", "-", "P", "-", "x", "-", "z"]substring()
用于提取字符串中介于两个指定下标之间的字符，左闭右开。
> str = "Hello world!"
> str.substring(3)
"lo world!"
> str.substring(3, 7)
"lo w"trim()
trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等
> str = " LPxz "
> str.trim()
"LPxz"
// trim() 不会改变原始字符串
> str
" LPxz "e.preventDefault() 与 e.stopPropagation() 的区别
e.stopPropagation() 阻止事件冒泡
<table border='1'>
<tr>
<td><span>冒泡事件测试</span></td>
<td><span>冒泡事件测试2</span></td>
</tr>
</table>我们先看这段 js 代码：
<script>
$('table').on('click', function (e) {
alert('table alert!');
});
$('tr').on('click',function(){
alert('tr alert');
});
$('span').on('click',function(){
alert("span alert!")
});
</script>我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。
有的时候我们不希望事件冒泡：
<script>
$(function(){
$('table').on('click','span',function(e){
alert('span alert!');
e.stopPropagation();
});
$('table').on('click',function(){
alert('table alert!');
});
})
</script>这样，点击 span 时，弹出”span alert!”对话框即结束，然后禁止事件冒泡，“table alert!”对话框即不会触发。
如果想获得事件相关信息，就要给匿名方法加一个 e 对象，e 就是事件对象。
e.preventDefault() 阻止事件默认行为
<a href="http://www.baidu.com">测试</a>
<script>
$("a").click(function (e) {
alert("默认行为被禁止了"); // 点击标签不跳转
e.preventDefault();
});
</script>return false 等效于同时调用 e.preventDefault() 和 e.stopPropagation()
return false 除了阻止默认行为之外，还会阻止事件冒泡。jQuery 源代码其中有如下代码：
if (ret===false){
event.preventDefault();
event.stopPropagation();
}回调函数 callback()
回调函数并不复杂，明白两个重点即可：
- 函数可以作为一个参数在另一个函数中被调用
- 大多数语言都是同步编程语言，而JS是异步编程语言。同步：一定要等任务执行完了，得到结果，才执行下一个任务。 异步：不等任务执行完，直接执行下一个任务。
下面以一个简单的 JS 文件为例，举一个例子：
var data = 0;
function func(n) {
console.log(n);
}
function writeFile() {
fs.writeFile('input.txt', '内容', function (err) {
if (!err) {
data = 1;
console.log("文件写入完毕!");
}
});
}
writeFile();
func(data);以上代码不难理解，按照正常逻辑，结果应该是打印 1，但结果是 0，明明我们在 writeFile 函数里我们重新对 data 进行了赋值，为什么结果还是 0 呢？
因为程序运行到 writeFile() 这一行的时候，是一个比较耗时的 I/O 操作，系统并不会卡在此处，死等 writeFile 执行完毕再执行下一条语句，而是直接下一条代码，即 f(data)，而此时 data 并没有被重新赋值为 1，所以打印出来的结果还是 0 。
我们使用 callback 改写一下 writeFile 函数：
var data = 0;
function func(n) {
console.log(n);
}
function writeFile(callback) { // 关键字callback，在这里就是指 func()
fs.writeFile('input.txt', '内容', function (err) {
if (!err) {
console.log("文件写入完毕!");
data = 1;
callback(data); // 此行相当于func(data)
}
});
}
writeFile(func); // 函数 func 作为一个参数传进 writeFile 函数我们在 writeFile 函数的形参里加入了一个关键字 callback，表示这是一个回调函数，即所谓的“以函数为参数”，然后当文件写入完毕后，执行 data = 1, 再用一次 callback 关键字，在这里，关键字“callback”就是 func() 函数的化身，表示我们在此处调用一次 func() 函数.
总结：
【在大多数编程语言中，函数的形参总是由外往内向函数体传递参数，但在JS里如果形参是关键字”callback”则完全相反，它表示函数体在完成某种操作后由内向外调用某个外部函数】
所谓的“回调”，就是回头调用的意思。本例子中即是：先写文件，写操作结束后，再回头调用 func() 函数。
有时候，我们会看到一些回调函数并没有使用 callback 关键字，这种连 callback 关键字和函数名都省略了，直接在函数的形参中嵌入一个 function 的写法，在 js 代码中更为常见，其本质上仍然是回调函数。
JS 中 some(), every(), filter(), map() 循环的区别
some()
返回一个 Boolean，判断是否有元素符合 func 条件
const arr = [1, 2, 3, 4];
arr.some((item) => { return item > 1 });结果：true
every()
返回一个 Boolean，判断每个元素是否符合 func 条件
const arr1 = [1, 2, 3, 4];
arr.every((item) => { return item > 3 });结果：false
filter()
返回一个符合 func 条件的元素数组（es6）
let ages = [33, 44, 55, 66, 77];
ages.filter((item) => { return item > 18 });结果：[33, 44, 55, 66, 77]
可以用来做删除数组元素的操作，这个操作很好用，假如我要删除一个父 id 下有多个元素的数组，假如使用 splice，删除这个数组下的第一个元素后，坐标 i 就会改变，导致后面的删除错乱，且删除操作达不到效果，这个时候就可以使用如下代码：
// el.list是要进行删除操作的数组，rootCateId为父Id
el.list = el.list.filter(({ rootCateId }) => rootCateId !== '559');这样就可以删除所有父 id 为 559 的数据，其他的操作可以同理处理
map()
返回一个新的 array，数组元素由每一次调用函数产生结果组成
const arr = [1, 2, 3, 4, 5, 6];
arr.map((item) => { return item * 10 });结果：[10, 20, 30, 40, 50, 60]