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

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

---

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；