一

使用三目运算例如：v-for="(sonItem,indexs) in items.isunfold ? getSubReply(items) : getSubReply(items).splice(0,3)" 中的items.isunfold改变时，v-for并没有实时监听并刷新这个函数数组时，使用（vue2）this.$forceUpdate()语法即可。

二

js 数组常用的方法和高阶函数： 1、Array.isArray() 我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法： 在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。

Array.isArray(arr)

2 、length列表中的第二项不是方法，而是数组的一个重要属性。我认为它也必须在列表中。从属性名称可以清楚地看出，它返回数组中项目的长度（总数）。语法： 在下面的代码中 arr 是我们的输入数组，我们将通过使用 length 属性获取其项目数。

arr.length;

3、forEach() forEach 方法的行为类似于 for 循环。但是您不必定义它将执行多少次迭代，因为它将执行与输入数组中的项目数相等的迭代。语法： 在下面的代码中， arr 将是我们的输入数组，forEach() 方法将在该数组上执行。forEach 方法包含一个回调函数 callbackFn 作为 forEach 方法的参数。callbackFn 是一个 ES6 箭头函数。但是您也可以使用传统样式函数。此 callbackFn 将执行与输入数组中存在的项目数等效的迭代。在每次迭代中，都会在 callbackFn 的范围内执行一些代码。同样在 callbackFn 的每次迭代参数中，arrItem 和 index 将使用连续的数组项和增量索引值进行更新。

arr.forEach(callbackFn);
const callbackFn = (arrItem, index) => {callbackFn Scope Code Exec}
// combining above statements together into one line of 
codearr.forEach((arrItem, index) => {
callbackFn Scope Code Exec}
);

如果您还不明白，别着急，让我们看看下面的例子。例子： 在下面的例子中，我们有一个输入数组 [‘apple’, ‘banana’, ‘carrot’]，它在 forEach callbackFn 中迭代。在 callbackFn 的范围内，我们正在打印 callbackFn 的参数。callbackFn 有 2 个参数，arrItem 和 index。第二个参数 index 是可选的，如果你不需要它，你可以简单地省略它。由于 arr 有 3 个项目，因此 callbackFn 将迭代 3 次并在每次迭代时打印 callbackFn 的参数。

['apple', 'banana', 'carrot'].forEach((arrItem, index) => {  
console.log(index + ' => ' + arrItem);
});// 0 => apple// 1 => banana// 2 => carrot

4、map( ) map() 方法的行为类似于 forEach，但主要区别在于，它返回一个新数组作为结果。您在一个数组上执行map()，在map方法callbackFn的范围内（如果您对callbackFn不清楚，查看forEach()方法解释），您执行一些语句。callbackFn 的每次迭代都会为结果数组返回一个项目。语法： arr 是我们的输入数组，map 方法将在其上执行，并且在每次迭代时，都会将一个新项目添加到结果数组中，该数组将作为 resultIteration 返回。

arr.map((arrItem, index) => { return resultIteration });

例子： 我们对 arr [2, 4, 6, 8, 16] 执行 map 方法，并将结果保存在变量 mapResult 中。mapResult 将是一个数组，该数组将填充 map 方法每次迭代的结果。在 map 方法 callbackFn 作用域中，我们将 arr 的每一项乘以 2，并将每次迭代的结果附加到 mapResult 中。5 次迭代后我们的最终 mapResult 数组将是 [4, 8, 12, 16, 32]。

const arr = [2, 4, 6, 8, 16];
const mapResult = arr.map(arrItem => arrItem * 2);console.log(mapResult);// [4, 8, 12, 16, 32]

5、filter() filter() 方法的行为类似于 map() 并返回一个数组作为结果。但正如名称所描述的，它返回一个过滤后的结果数组。您可以使用过滤器 callbackFn 范围内的条件来过滤结果数组。语法： arr 将是 filter 方法将执行的数组，并且在每次迭代时，都会将一个新项目添加到结果数组中，该结果数组将作为 resultIteration 返回。

arr.filter((arrItem, index) => { condition to return arrItem });

例子： 我们对 arr [2, 4, 6, 8, 16] 执行 filter 方法，并将结果保存在变量 filterResult 中。我们过滤输入数组的条件是（ arrItem < 5 OR arrItem > 10 ）。mapResult 将是一个数组，它将填充符合条件的 arr 项目。在 map 方法函数代码块中，我们将 arr 的每一项乘以 2，并将每次迭代的结果附加到 mapResult 中。

const arr = [2, 4, 6, 8, 16];const filterResult =   arr.filter(arrItem => arrItem < 5 || arrItem > 10);console.log(mapResult);// [2, 4, 16]

6、sort( ) JavaScript 中的 sort() 方法按字母顺序对输入数组进行排序。默认情况下，sort() 函数将值作为字符串进行排序。

const arr = ['banana', 'orange', 'apple', 'mango'];
arr.sort();// ['apple', 'banana', 'mango', 'orange']

如果我们尝试对数字数组进行排序，那么默认的排序方法结果会有点混乱。

const arr = [22, 14, 0, 100, 89, 201];
arr.sort();// [0, 100, 14, 201, 22, 89]

如果使用 sort() 方法对数字数组进行排序，则默认情况下将其视为字符串数组。所以“22”会在“100”之后，因为“22”的2比“100”的1大。我们可以通过提供一个比较函数 (compareFn) 来解决这个问题。

// compareFn for ascending orderconst compareFnAsc = (a, b) => a - b;// compareFn for descending orderconst compareFnDes = (a, b) => b - a;const arr = [22, 14, 0, 100, 89, 201];arr.sort(compareFnAsc);// [0, 14, 22, 89, 100, 201]arr.sort(compareFnDes);// [201, 100, 89, 22, 14, 0]

有关一些高级排序示例，请查看此处：developer.mozilla.org/en-US/docs/… )** concat() 方法用于合并两个或多个数组。它不会更改现有数组，而是返回一个新的结果数组。语法： 您可以在 concat 方法中将 1 到 N 个值作为参数传递。每个值可以是任何类型。结果 concat 方法将这些所有值合并到一个结果数组中。

arr.concat(value);arr.concat(value0, value1, ... , valueN);

例子： 让我们看一下 concat 方法的 2 个示例。

// Example 1 // Concat 2 arrays of string and number typeconst letters = ['a', 'b', 'c'];const numbers = [1, 2, 3];
letters.concat(numbers);// ['a', 'b', 'c', 1, 2, 3]// Example 2 // Concat a string array with 2 values (number and number array)const letters = ['a', 'b', 'c'];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);// ['a', 'b', 'c', 1, 2, 3]

8、every( ) 我们列表中的下一个有用的数组方法是every()。该方法测试输入数组中的所有元素是否都通过了实现的条件。它返回一个布尔值。语法：

arr.every(callbackFn);const callbackFn = (arrItem, index) => {  condition to check on every arrItem}

例子： 在下面的示例中，我们有带有数字值的 arr1 和 arr2 数组。我们要检查它们的两个数组值是否都大于或等于 0。对于 arr1，结果将为假，因为它包含 -4 和 -1。所以我们的条件将在那里失败，但 arr2 将在每个数组项上传递条件，我们将获得真实的结果。

const arr1 = [89, 0, -4, 34, -1, 10];const arr2 = [89, 0, 45, 34, 1, 100];arr1.every(arrItem => arrItem >= 0);// falsearr2.every(arrItem => arrItem >= 0);// true

9、some() 我们列表中的下一个方法是 some()。这个方法和every()完全一样。不同之处在于我们检查输入数组的所有元素的条件，如果有任何元素满足条件，则返回 true。如果输入数组的元素都没有通过条件，则返回 false。语法与 every() 方法相同。例子： 在这个例子中，我们有 2 个类型为 number 的数组。我们正在检查的条件与 every() 方法中的最后一个示例相同，任何大于或等于 0 的 arrayItem 值。这里因为我们使用 some() 方法，所以，如果任何项目将满足我们的条件，则为真，否则为假。

const arr1 = [89, 0, 44, 34, -1, 10];const arr2 = [-8, -45, -1, -100, -9];arr1.some(arrItem => arrItem >= 0);// truearr2.some(arrItem => arrItem >= 0);// false

10、includes( ) include() 方法检查输入数组是否在其条目中包含某个值，并返回一个布尔值。例子：

const arr = [1, "2", 3, 4, 5];// Type of matching argument should match with the array entry// In the code below 2 is of type number but in arr "2" is stringconsole.log(arr.includes(2));// falseconsole.log(arr.includes("2"));// true

11、join( ) join() 方法通过连接输入数组中的所有条目来返回一个新字符串。如果数组只有一项，则该项将在不使用分隔符的情况下返回。将分隔符参数传递给 join 方法是可选的。无论您将在 join 方法中传递什么参数字符串，输入数组的所有条目都将使用该字符串连接起来。语法：

arr.join();arr.join(separator);

示例：

const arr = ['Hello', 'World', '!'];arr.join();      // 'Hello,World,!'arr.join(', ');  // 'Hello, World, !'arr.join(' + '); // 'Hello + World + !'arr.join('');    // 'HelloWorld!'arr.join(' ');    // 'Hello World !'

12、reduce() reduce() 方法执行一个 reducer 功能，由用户应用于输入数组的项目。在数组的所有项目上运行 reducer 的最终结果返回一个值。我认为理解 reduce() 方法案例的最简单方法是返回数组中所有项目的总和。这里的reducer函数会遍历每一个数组项，在每一步都将当前数组项的值加到上一步的结果中（这个结果是前面所有步骤的运行总和），直到没有更多的项要添加。语法： 输入数组 arr 对其执行 reduce() 方法。reduce() 方法有一个回调函数 (callbackFn) 作为参数。这个 callbackFn 基本上是 reducer 函数，它累加输入 arr 的所有值并返回单个值。reduce() 方法的第二个参数是初始值 (initVal)，这是一个可选参数。现在 reducer 函数/回调函数 (callbackFn) 有 4 个参数。第一个参数 total 是上一次调用 callbackFn 的值。第二个参数是当前数组项 (currArrItem) 的值。第三个参数是索引，它是可选的。最后一个参数是输入数组（ arr ），它也是可选的。

const callbackFn = (total, currArrItem, index, arr) => { ... }
arr.reduce(callbackFn, initVal)// Combining above statements into one statementarr.reduce((total, currArrItem, index, arr) => { ... }, initVal)

让我们看一下示例以更好地理解 reduce() 方法。例子： 在下面的示例中，我们使用 reduce() 方法来累积输入 arr。

const arr = [1, 2, 3, 4];
const reducer = (prevVal, currVal) => prevVal + currVal;
arr.reduce(reducer);// 10
// In the code below initVal is set to 5, which means that we have 
// to init the sum with initial value 5: 5 + 1 + 2 + 3 + 4 
arr.reduce(reducer, 5);// 15

13、find() 列表中的下一个 JavaScript 数组方法是 find()。它返回输入数组中满足 find 方法 callbackFn 中给定条件的第一个元素的值。如果没有值满足 callbackFn 的条件，则返回 undefined。语法：

arr.find((arrItem) => condition to check on arrItem);

示例：

const arr = [5, 10, 100, 12, 8, 130, 44];
const result = arr.find(arrItem => arrItem > 10);
console.log(result);// 100

14、findIndex( ) findIndex() 方法返回输入数组中满足 find 方法 callbackFn 中给定条件的第一个元素的索引。否则返回-1，表示没有数组项通过条件检查。语法将与 find() 方法保持相同，只是返回结果会有所不同。例子：

const arr = [5, 10, 100, 12, 8, 130, 44];
const result1 = arr.findIndex(arrItem => arrItem > 10);
const result2 = arr.findIndex(arrItem => arrItem > 1000);
console.log(result1);//2
console.log(result2);// -1

15、indexOf( ) 这类似于 findIndex() 方法，但不同之处在于 indexOf() 方法返回可以在输入数组中找到给定元素（作为 indexOf() 方法的参数传递）的第一个索引。如果未找到，则返回 -1。示例：

const arr = [5, 10, 100, 12, 8, 130, 44];
arr.indexOf(12);// 3
// As the input argument '12' is of type string and the input array 
// arr elements are of type number so there will be no match in 
// input 
arrarr.indexOf('12');// -1

16、fill( ) fill() 方法使用静态值更改输入数组中的所有元素。此方法返回修改后的数组。语法： 传递给 fill() 方法需要第一个参数。如果我们没有在 fill() 方法中传递第二个和第三个参数，那么第二个参数将默认为 0 (startIndex)，第三个参数将是数组 (arr.length) 索引中的最后一项。

arr.fill(value)// default startIndex = 0arr.fill(value, startIndex)
// default endIndex is 
arr.lengtharr.fill(value, startIndex, endIndex)

示例：

const arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr1.fill(0);// [0, 0, 0, 0, 0, 0, 0, 0]
const arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr2.fill(0, 5);// ['A', 'B', 'C', 'D', 'E', 0, 0, 0]
const arr3 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr3.fill(0, 5, 7);// ['A', 'B', 'C', 'D', 'E', 0, 0, 'H']
const arr4 = [1, 2, 3, 4, 5];
arr4.fill();//[undefined, undefined, undefined, undefined, undefined]

17、slice() slice() 方法是一个非常有用的 JavaScript 数组方法。它为 slice 方法中传递的给定参数制作原始数组的副本。这些参数定义了新数组副本的开始和结束索引。不会修改原始数组。语法：

arr.slice()
arr.slice(startIndex)
arr.slice(startIndex, endIndex)

示例：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.slice();// ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]
arr.slice(3);// ['chickens', 'dogs', 1001]
arr.slice(2, 5);// ['cows', 'chickens', 'dogs']
arr.slice(-4);// ['cows', 'chickens', 'dogs', 1001]

18、splice() splice() 方法通过删除或替换现有项目和/或添加新项目来更改数组的内容。不会修改原始数组。语法：

arr.splice(startIndex)
arr.splice(startIndex, deleteCount)
arr.splice(startIndex, deleteCount, item1)
arr.splice(startIndex, deleteCount, item1, ..., itemN)

示例：

// Example 1
// Remove 0 items before index 2 & insert "drum"
let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removedArr = arr.splice(2, 0, 'drum');// arr: ["angel", "clown", "drum", "mandarin", "sturgeon"]// removedArr: []
// Example 2
// Remove 0 items before index 2 & insert "drum", "guitar"
let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removedArr = arr.splice(2, 0, 'drum', 'guitar');// arr: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]// removedArr: []
// Example 3
// Remove 1 element at index 3
let arr = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
let removedArr = myFish.splice(3, 1);// arr: ["angel", "clown", "drum", "sturgeon"]// removedArr: ["mandarin"]
// Example 4
// Remove 1 element at index 2 & insert "trumpet"
let arr = ['angel', 'clown', 'drum', 'sturgeon'];
let removedArr = arr.splice(2, 1, 'trumpet');// arr: ["angel", "clown", "trumpet", "sturgeon"]// removedArr: ["drum"]
// Example 5
// Remove 2 items from index 0 & insert "parrot", "anemone", "blue"
let arr = ['angel', 'clown', 'trumpet', 'sturgeon'];
let removedArr = arr.splice(0, 2, 'parrot', 'anemone', 'blue');// arr: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]// removedArr: ["angel", "clown"]

19、reverse() 顾名思义，reverse() 方法反转输入数组。例子：

const arr1 = [1, 2, 3];arr1.reverse();// [3, 2, 1]
const arr2 = ['1', '4', '3', 1, 'some string', 100];
arr2.reverse();// [100, 'some string', 1, '3', '4', '1']

20、push() JavaScript 中的 push() 方法将一个或多个（任何类型的）项目添加到数组的末尾，并返回数组中项目的更新总数。语法：

arr.push(value);
arr.push(value0, value1, ... , valueN);

示例：

const animals = ['cats', 'rats', 'sheep'];
animals.push('cows');// 4
console.log(animals);// ['cats', 'rats', 'sheep', 'cows']animals.push('chickens', 'dogs', 1001);// 7
console.log(animals);// ['cats', 'rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]

21、pop() pop() 方法从数组中删除最后一项并返回该项。输入数组的长度减1。例子：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.pop();// 1001
console.log(arr);// ['rats', 'sheep', 'cows', 'chickens', 'dogs']

22、shift() JavaScript 的 shift() 方法从数组中删除第一项并返回该项。输入数组的长度减1，和pop()方法一样。例子：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];arr.shift();// 'rats'
console.log(arr);// ['sheep', 'cows', 'chickens', 'dogs', 1001]

23、unshift() unshift() 方法将一项或多项添加到数组的开头，并返回数组的新长度。语法与 push() 相同。 push() 方法只是在数组的末尾，但 unshift() 方法在开头添加。例子：

const animals = ['cats', 'rats', 'sheep'];
animals.unshift('cows');// 4
console.log(animals);// ['cows', 'cats', 'rats', 'sheep']
animals.unshift('chickens', 'dogs', 1001);// 7
console.log(animals);// ['chickens', 'dogs', 1001, 'cows', 'cats', 'rats', 'sheep']

24、Array.of( ) Array.of() 方法从可变数量的参数创建一个新的 Array 实例，而不管参数的数量或类型。例子：

Array.of(1); // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

25、Array.from( ) Array.from() 静态方法从类数组或可迭代对象创建一个新的、浅复制的 Array 实例。语法：

Array.from(value, callbackFn)

示例：

Array.from('hello');// ['h', 'e', 'l', 'l', 'o']
Array.from([1, 2, 3], arrItem => arrItem * 4);// [4, 8, 12]

26、flat() JavaScript 的 flat()方法创建一个新数组，其中所有子数组项以递归方式连接到指定深度。句法： 指定嵌套数组结构应展平的深度的深度级别。如果没有参数传递给 flat() 方法，则默认深度为 1。或者您可以传递任何深度参数。

arr.flat()arr.flat(depth)

示例：
让我们看一些 JavaScript 中 flat() 方法的例子。

// Example 1
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());// [0, 1, 2, 3, 4]
// Example 2
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));// [0, 1, 2, [3, 4]]
console.log(arr2.flat(3));// [0, 1, 2, 3, 4]

27、at() at() 方法将一个整数作为参数，并返回输入数组中该索引处的项目。 at() 方法的参数可以是正数或负数。负整数从输入数组的最后一项开始计数。语法：

arr.at(index)

示例：

const arr = ['chickens', 'dogs', 1001, 'cows', 'cats', 'sheep']
arr.at(1);// 'dogs'
arr.at(-1);// 'sheep'
arr.at(2);// 1001
arr.at(-2);// 'cats'
arr.at(-100);// undefined

三

如何让某个元素点击鼠标时不触发任何鼠标事件？这边建议直接在元素类中使用

pointer-events: none;

属性，这样能直接让该元素屏蔽拦截如何鼠标点击的触发事件。

四

Vue.js 2.x 提供了一系列的生命周期钩子函数，它们允许你在组件的不同阶段执行自定义的代码。以下是 Vue.js 2 中的生命周期钩子函数及其用法：

1.beforeCreate：

2.在实例初始化之后，数据观测（data observation）和 event/watcher 事件配置之前被调用。 3.适合进行一些初始化操作，但无法访问 data 和 methods。

4.created：

5.在实例创建完成后被立即调用。 6.可以访问实例上的 data 和 methods。 7.适合进行异步操作，如请求数据。

8.beforeMount：

9.在挂载开始之前被调用。 10.可以访问实例上的 data，但尚未渲染模板。

11.mounted：

12.在挂载完成后被调用。 13.可以访问实例上的 data，并且模板已经渲染。 14.适合进行 DOM 操作，或在模板渲染后执行一些操作。

15.beforeUpdate：

16.在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。 17.可以在更新之前访问先前的状态。

18.updated：

19.在数据更新之后被调用。 20.可以访问实例上的 data，并且可以执行一些 DOM 操作。 21.避免在此钩子函数中修改数据，以防陷入无限循环。

22.beforeDestroy：

23.在实例销毁之前被调用。 24.可以进行一些清理工作，如清除定时器或取消订阅。

25.destroyed：

26.在实例销毁完成后被调用。 27.实例上的所有指令、事件监听器等都已被解绑。 28.可以进行一些最终的清理工作。

以上是 Vue.js 2.x 中主要的生命周期钩子函数及其常见用法。在使用这些钩子函数时，可以根据需要选择适当的阶段执行自定义逻辑。

五

字符串的恒定性：也就是说字符串不可改！

字符串不可改，所以我们学的任意方法，都不会改变原本的字符串

只会产生一个新的字符串

1、trim()去除字符串两边的空格格式：字符串.strim() 返回两边没有空格的字符串

    let str = '    abc     '
    console.log(str)
    console.log(str.trim()) // 临时转成了包装类型调用方法

2、substr() 截取字符串格式: 字符串.substr(起始位置,截取几个) 返回截取到的字符串

如果只传一个参数代表,从该位置一直截取到最后.

    let str = 'hello world'
    // 从下标2开始截，截取3个
    console.log(str.substr(2,3)) // llo

3、把字符串当作伪数组 let str = '假装这是伪数组' console.log(str.length) console.log(str[0]) // 假 console.log(str[1]) // 装 console.log(str[2]) // 这

验证字符串不可被更

    let str = '假装这是伪数组'
    str[0] = '上'
    console.log(str[0]) // 假
    console.log(str) // 假装这是伪数组

4、split()按某个符号切割成数组格式：字符串.split('切割符号') 返回一个数组

    let str = '刘备|张飞|关羽'
    // 按某个符号切割成数组
    let arr = str.split('|')
    console.log(arr) // [刘备,张飞,关羽]

如果什么都没传，代表没有下刀切割的地方,会将整个字符串当作数组元素放在一个数组中

    let str = '刘备|张飞|关羽'
    let arr = str.split() // ['刘备|张飞|关羽']
    console.log(arr)

如果传的是空字符串，那就代表把字符串每个字都变成一个数组元素

    let str = '刘备|张飞|关羽'
    let arr = str.split('')
    console.log(arr) // 如果传的是空字符串，那就代表把字符串每个字都变成一个数组元素

5、toUpperCase()转大写 let str = 'abc' console.log(str.toUpperCase()) // 转大写 console.log(str) // 本身还是小写的abc

6、toLowerCase()转小写 console.log('AH'.toLowerCase()) // 转小写

六

正则表达式RegExp

特殊符号： \d 任意数字，相当于[0-9] \s 空⽩字符 \b 单词便捷 \uxxxx 匹配unicode字符
区间： [0-9] 从0到9的任意数字 [0123456789] [13579] 表⽰1、3、5、7、9中任意⼀个数字 [a-z] 从a到z的任意⼀个⼩写字⺟ [A-Z] 从A到Z的任意⼀个⼤写字⺟ [a-zA-Z] 任意⼀个字⺟ [0-9a-zA-Z] 任意字⺟和数字
量词 a+ ⾄少⼀个a a* 0~~n个a a? 0~~1个a a{m} m个a a{m,n} m~n个

前端（Vue）学习日志

一

二

三

四

五

六