前端常用属性及方法汇总上篇

前端技术兴起以后各类框架层出不穷，在学好各个框架的同时也要注重一下小技巧的应用，今天就来总结一下前端工作中及其常见的属性及方法；灵活运用以后会大幅度优化代码的可读性及简便性质；

1、array.includes();

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。，功能类似于indexOf，但是不需要 === - 1 来判断，直接返回bool;

栗子:

[1, 2, 3].includes(1)  // 返回 true

2、array.concat();

concat() 方法用于连接两个或多个数组。

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

栗子:

arrayObject.concat(array1,array2,......,array3);

也可以是用 es6 的扩展运算符号...;

栗子:

let array = [...array1, ...array2,......, ...array3]

3、array.reverse();

reverse() 方法用于 颠倒数组 中元素的顺序。
栗子:

arrayObject.reverse(array);

4、array.reverse();

5、array.reduce();

reduce(fn,initValue)接收 2 个参数。第一个是迭代器函数，函数的作用是对数组中从左到右的每一个元素进行处理。函数有 4 个参数，分别是 accumulator、currentValue、currentIndex、array。

accumulator 累加器，即函数上一次调用的返回值。

第一次的时候为 initialValue || arr[0]

currentValue 数组中函数正在处理的的值。

第一次的时候 initialValue || arr[1]

currentIndex 数组中函数正在处理的的索引

array 函数调用的数组

initValue reduce 的第二个可选参数，累加器的初始值。没有时，累加器第一次的值为 currentValue；

栗子:

array.reduce((total, currentValue, currentIndex, arr) => total + num, initialValue); 

6、array.filter();

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

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

注意： filter() 不会改变原始数组。

栗子:

array.filter((item) => item === 0);

7、array.find() 和 array.findIndex();

该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为 true 时，返回该元素。如果没有符合条件的元素，返回值为 undefined。

栗子:

const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5

findIndex()与 find()的使用方法相同，只是当条件为 true 时 findIndex()返回的是索引值，而 find()返回的是元素。如果没有符合条件元素时

findIndex()返回的是 -1，而 find()返回的是 undefined。

8、map、some、every

这三个都是数组循环遍历的方法，区别在于：

1. map 在遍历过程中不能终止操作（除非在循环中抛出错误），即便 return，也是 return 出；
2. some 和 every 循环是可以终止操作的，some方法用于检测数组中的元素 是否有满足 指定条件的，若满足返回 true，否则返回 false；every方法用于检测数组中所有元素 是否都符合 指定条件，若符合返回 true，否则返回 false;

注意： 在 map 循环中给数组 push 新元素，新元素也会在 map 方法中出现！

map、some、every 都接收一个参数fn, 以 map 为例:

array.map((`item, index, _self`) => {return true});

item: 为数组的每一个子项；
index：为当前操作子项的下标；
_self: 为数组本身；

9、字符串模板 ` `

模板字符串使用反引号 ` ` 来代替普通字符串中的用 双引号 和单引号 。模板字符串可以包含特定语法${expression} 的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号 ` 时，需要在它前面加转义符\。

栗子:
不使用字符串模板：

var a = 5;
var b = 10;
console.log('Fifteen is' + (a + b) + 'and\nnot' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

使用字符串模板：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

10、~和 ~~

~是 按位取反 的意思，对一个表达式执行位非 求非 运算。如 ~1 = -2；~2 = -3；~99 = -100;;

~~就是再转回来，利用两个按位取反的符号，进行类型的转换，转换成数字符号。

（注意：另外一种取反符号是 ！ 例：!false === true）；

栗子:

~~false === 0  
~~true === 1
~~undefined === 0
~~!undefined === 1
~~null === 0
~~!null === 1  
~~"" === 0
~~!"" === 1
~~ /* 双取反运算 相当于是 Math.floor()*/

11、判断数据类型

栗子:

    typeof array;
    array.isArray(array);
    array instanceof Array;
    arr.constructor === Array;

12、padStart和padEnd

padStart(len, str)

根据给定长度自动在字符串的前面补充想补充的字符串（只返回修改后的字符串，不修改原字符串）
len 给定的长度，转换后
str 想补充的字符串

栗子:

'abc'.padStart(10);         // "abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

兼容性：

目前来看用于前端需要兼容,node.js 支持到版本 8；