JS随笔，想到什么写什么

目录

阻止标签默认事件，preventDefault()

$set

push() 向数组的末尾添加一个或多个元素，并返回新的长度。

pop() 删除数组的最后一个元素并返回删除的元素。

shift() 把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

splice() 添加或删除数组中的元素。

sort() 对数组的元素进行排序。

reverse() 颠倒数组中元素的顺序。

翻转字符

 filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

String对象 cincat()连接两个或多个字符串

 Array对象 cincat()连接两个或多个数组

Array对象 slice()从已有的数组中返回选定的元素。

String对象 slice() 提取字符串的某个部分，并以新的字符串返回被提取的部分。

---

阻止标签默认事件，preventDefault()

$event 和 e.preventDefault是固定搭配

与.prevent 效果相同。

<template>
  <div>
    <a @click="one" href="http://www.2345.com">123</a>
    <a @click="ones(asd, $event)" href="http://www.2345.com">123</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    ones(a, e) {
      e.preventDefault()
    }
  }
}
</script>

$set

受现代 JavaScript 的限制，Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

数组：
this.$set(Array, index, newValue)
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
解决：用$set方法
当你修改数组的长度时，例如：vm.items.length = newLength
解决：vm.items.splice(newLength)

对象：
this.$set(Object, key, value)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。
但是，添加到对象上的新属性不会触发更新。
在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

push() 向数组的末尾添加一个或多个元素，并返回新的长度。

array.push(item1, item2, ..., itemX)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

结果输出：Banana,Orange,Apple,Mango,Kiwi

注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。

pop() 删除数组的最后一个元素并返回删除的元素。

array.pop()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
结果输出：Banana,Orange,Apple

注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用 shift() 方法。

shift() 把数组的第一个元素从其中删除，并返回第一个元素的值。

array.shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
结果输出：Orange,Apple,Mango

注意： 此方法改变数组的长度！
提示: 移除数组末尾的元素可以使用 pop() 方法。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

array.unshift(item1,item2, ..., itemX)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
结果输出：Lemon,Pineapple,Banana,Orange,Apple,Mango

注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用 push() 方法。

splice() 添加或删除数组中的元素。

array.splice(index,howmany,item1,.....,itemX)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
输出结果：Banana,Orange,Lemon,Kiwi,Apple,Mango

注意：这种方法会改变原始数组。

删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。
arr.splice( 0 , 2 )
数组arr从索引0开始删除，共删除两项。


插入：可以向指定位置插入任意数量的项
只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
arr.splice( 2,0,4,6 )
数组arr从索引2开始插入，共插入两项元素，即4，6（参数0的意思就是没有要删除的项）。


替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项
只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
arr.splice( 1,1,2,3 )
数组arr从索引1开始替换，原位置元素替换为2，3（第二个参数1的意思就是删除1项，把索引为1的项删除，
替换成新元素）。

sort() 对数组的元素进行排序。

array.sort(sortfunction)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
输出结果： Apple,Banana,Mango,Orange

排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
注意：当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。
注意： 这种方法会改变原始数组！。

reverse() 颠倒数组中元素的顺序。

array.reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
输出结果： Mango,Apple,Orange,Banana

翻转字符

<template>
  <div>
    <h1>{{ txt }} </h1>
    <button @click="fz">反转</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      txt: '12345678'
    }
  },
  methods: {
    fz(){
      this.txt = this.txt.split('').reverse().join('')
      console.log(this.txt);
    },
  }
}
</script>

 filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue)

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果：32,33,40  
返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

function(currentValue, index,arr)
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象

String对象 cincat()连接两个或多个字符串

string.concat(string1, string2, ..., stringX)

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
输出结果：Hello world!

该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

 Array对象 cincat()连接两个或多个数组

array1.concat(array2,array3,...,arrayX)

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。
如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

Array对象 slice()从已有的数组中返回选定的元素。

array.slice(start, end)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
输出结果：Orange,Lemon
返回一个新的数组，包含从 start（包括该元素） 到 end （不包括该元素）的 arrayObject 中的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

array.slice(start, end)
start：可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，
slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，
那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的
倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素
（不包含最后一个元素，也就是只有倒数第二个元素）。

String对象 slice() 提取字符串的某个部分，并以新的字符串返回被提取的部分。

string.slice(start,end)

var str="Hello world!";
var n=str.slice(1,5);
输出结果：ello

slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

start 必须 参数字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推，
如果是负数表示从尾部截取多少个字符串，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素
（包含最后一个元素）。

end  可选  紧接着要截取的片段结尾的下标。
若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。参数如果为负数，-1 
指字符串的最后一个字符的位置，-2 指倒数第二个字符，到最后一个元素（包含最后一个元素）以此类推。

 Math（算数）生成随机数

方法	描述
ceil(x)	对数进行上舍入，即向上取整。
floor(x)	对 x 进行下舍入，即向下取整。
round(x)	四舍五入。
random()	返回 0 ~ 1 之间的随机数，包含 0 不包含 1。

Math.ceil(Math.random()*10);     
// 获取从 1 到 10 的随机整数，取 0 的概率极小。
Math.round(Math.random());       
// 可均衡获取 0 到 1 的随机整数。
Math.floor(Math.random()*10);    
// 可均衡获取 0 到 9 的随机整数。
Math.round(Math.random()*10);    
// 基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半。

trim()删除字符串的头尾空白符

string.trim()

var str = "       Runoob        ";
alert(str.trim());
输出结果：Runoob

trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。
trim() 方法不会改变原始字符串。
trim() 方法不适用于 null, undefined, Number 类型。

findIndex()查找目标元素，找到就返回元素的位置，找不到就返回-1

array.findIndex(function(currentValue, index, arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。数组每个元素需要执行的函数。 函数参数: 参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引 arr 可选。当前元素所属的数组对象
thisValue	可选。 传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

获取数组中年龄大于等于 18 的第一个元素索引位置
var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
输出结果 2

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，
之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

reduce（）接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

详细教程：JS高阶函数——reduce()用法总结 - 知乎

toFixed() 四舍五入为指定小数位数的数字。、

number.toFixed(x)

var num = 5.56789;
var n=num.toFixed(2);
输出结果：5.57

every() 检测数组所有元素是否都符合指定条件

array.every(function(currentValue,index,arr), thisValue)

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

检测数组 ages 的所有元素是否都大于等于 18 
var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

parse（）解析一个日期时间字符串，并返回距离该日期时间的毫秒数。

Date.parse(datestring)

返回 1970/01/01 至 2012/3/21 之间的毫秒数：
var d = Date.parse("March 21, 2012");
输出结果：1332259200000

JSON.stringify() 将 JavaScript 对象转换为JSON字符串。

JSON.stringify(value[, replacer[, space]])

• value:

  必需， 要转换的 JavaScript 值（通常为对象或数组）。

• replacer:

  可选。用于转换结果的函数或数组。

  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

• space:

  可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JSON 不能存储 Date 对象。

JSON.stringify() 会将所有日期转换为字符串。

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

var myJSON = JSON.stringify(obj);

JavaScript 存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

存储对象属性

属性	描述
length	返回存储对象中包含多少条数据。

存储对象方法

方法	描述
key(n)	返回存储对象中第 n 个键的名称
getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键
clear()	清除存储对象中所有的键

Web 存储 API

属性	描述
window.localStorage	在浏览器中存储 key/value 对。没有过期时间。
window.sessionStorage	在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。