JS 数组函数的整理

最近在发现了一些自己不常用但蛮好用的数组函数，稍微整理一下，有以下几个：

• Array.prototype.includes() (ES7)新特性
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.fill()

Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

var array = [1, 2, 3];

console.log(array.includes(2)); // true
console.log(array.includes(5)); // false

Array.prototype.includes()方法接收两个参数：

• 要搜索的值
• 搜索的开始索引

const arr = ['a', 'b', 'c', 'd']
arr.includes('b', 1) // true
arr.includes('b', 2) // false

是不是跟 indexOf 差不多呢，其实还是有所区别的：

1、返回值类型不同，indexOf的返回数是值型的，includes的返回值是布尔型，所以在 if 条件判断的时候 includes 要简单得多，而indexOf 需要多写一个条件进行判断

2、对 NaN 值 的判断不同，如果数组中有 NaN，你又正好需要判断数组是否有存在NaN，这时你使用 indexOf 是无法判断的，你必须使用 includes 这个方法

var ary1 = [NaN];
console.log(ary1.indexOf(NaN)) // -1
console.log(ary1.includes(NaN)) // true

3、当数组的有空的值的时候，includes 会认为空的值是undefined，而 indexOf 不会

var ary1 = new Array(3);
console.log(ary1.indexOf(undefined)); // -1
console.log(ary1.includes(undefined)) // true

数组过滤 Array.prototype.filter()

该方法会创建一个新数组，其包含通过指定函数测试的所有元素

// 语法
arr.filter(callback(element[, index[, array]]) [, thisArg])
// 第一个参数是用来测试每个元素的函数，可接受三个参数：1、用于测试的当前值; 2、当前值的索引(可选); 3、调用filter的当前数组(可选)
// 第二个参数是执行 callback 时使用的 this 值

// === 例子 ===
['banana','orange','apple','pear'].filter(world => world.length > 5)   // ["banana", "orange"]

Array.prototype.every

该方法用于检测数组所有元素是否都通过指定函数的测试，返回类型是布尔值

// 语法
arr.every(callback(element[, index[, array]]) [, thisArg])
// 第一个参数是用来测试每个元素的函数，可接受三个参数：1、用于测试的当前值; 2、当前值的索引(可选); 3、调用every的当前数组(可选)
// 第二个参数是执行 callback 时使用的 this 值

// === 例子 ===
[23, 59, 35,14].every((val, i) => {return val > 10}) // true
[23, 59, 35,14].every((val, i) => {return val > 20}) // false
// every() 不会对空数组进行检测，也不会改变原始数组

Array.prototype.some()

// 语法
arr.some(callback(element [, index[, array]]) [, thisArg])
// 第一个参数是用来测试每个元素的函数，可接受三个参数：1、正在被处理的的元素; 2、被处理元素的索引(可选); 3、被调用的数组(可选)
// 第二参数是 执行 callback 时使用的 this 值

// === 例子 ===
[17, 33, 55].some((val) => val % 2 === 0)  // false
[17, 33, 56].some((val) => val % 2 === 0)  // true

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组的所有元素

// 语法
arr.fill(value [, start [, end]])
// 参数 value 用来填充数组的值；start 指起始索引，默认为0；end 指 终止索引，默认 this.length

// === 例子 ===
let arr = new Array(3)
arr.fill(1) // [1, 1, 1]

---

数组函数整理就到这了，下面再补充点 ES6 后的新特性，aysnc/await 这类的内容不在整理范围内

ES7新特性

• Array.prototype.includes() 前面已介绍
• 求幂运算符（**）

求幂运算符

对于加减乘除的运算，通常都使用中缀表达式，现在 求幂 也可以使用中缀表达式啦！ES7 中Math.pow 可以使用 **代替

Math.pow(2, 10) // 1024
2 ** 10 // 1024

ES8新特性

• Async Functions
• Object.entries()
• Object.values()
• String padding

Async Functions

Async Functions是我们常说的async/await,async/await是一种用于处理JS异步操作的语法糖，可以帮助我们摆脱回调地狱，是代码更易于理解。内容有点多，就不详细介绍了

Object.entries

Object.entries()将一个对象中可枚举属性的键名和键值按照二维数组的方式返回，如果对象是数组，则会将数组的下标作为键值返回

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.entries([1, 2])                //[['0', 1], ['1', 2]]

// === 若是键名是Symbol，编译时会被自动忽略 ====
Object.entries({[Symbol()]:1, two: 2})  //[['two', 2]]

// ==== entries()返回的数组顺序和for循环一样，即如果对象的key值是数字，则返回值会对key值进行排序====
Object.entries({ 3: 'a', 4: 'b', 1: 'c' })    //[['1', 'c'], ['3', 'a'], ['4', 'b']]

// === 利用Object.entries()创建一个真正的Map ===
var obj = { foo: 'bar', baz: 42 };

var map1 = new Map([['foo', 'bar'], ['baz', 42]]); //原本的创建方式
var map2 = new Map(Object.entries(obj));    //等同于map1

console.log(map1);// Map { foo: "bar", baz: 42 }
console.log(map2);// Map { foo: "bar", baz: 42 }

Object.values()

ES6中的 Object.keys() 返回的是键名，而 Object.values 则返回给定对象自己的所有可枚举属性值的数组，数组顺序，跟Object.entries()保持一致

// === Object.keys() ===
Object.keys({ one: 1, two: 2 })  // ["one", "two"]
Object.keys({ 3: 'a', 4: 'b', 1: 'c' })  //  ["1", "3", "4"]

// === Object.values ===
Object.values({ one: 1, two: 2 })            //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' })    //['c', 'a', 'b']

String padding

为 String 对象增加了2个字符串填充函数：padStart 和 padEnd。

主要目的就是填补字符串的首部和尾部，为了使得到的结果字符串的长度能达到给定的长度。可以通过特定的字符/字符串，或者默认的空格填充它

// 使用方法
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
// 第一个参数 targetLength 是指填充后的字符串长度，第二个可选参数是用来填充的字符/字符串，默认值是空格

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padStart(6, 'woof');  // 'wooes8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(7, '6');       // 'es86666'
'es8'.padEnd(6, 'woof');    // 'es8woo'

上面的测试代码可以发现 填充函数只有在字符长度小于目标长度时才有效

---

匹配中文字符

oldReg=/[\u4e00-\u9fa5]/
newReg=/\p{Script=Han}/u
oldReg.test('abc')  // false
newReg.test('abc')  // false

oldReg.test('地平线')  // true
newReg.test('地平线')  // true

oldReg.test('?')  // false
newReg.test('?')  // true