最近在发现了一些自己不常用但蛮好用的数组函数,稍微整理一下,有以下几个:
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