ES6新增扩展：字符串-数值-数组-函数-对象

字符串的扩展

判断字符串是否包含在另一个字符中

let s = 'h'
s.startsWith('hello')  // 是否在头部
s.endWith('hello')  // 是否在尾部
s.includes('hello')  // 字符串中是否存在

字符串补全

let b = 'how'
b.padStart('5','a')  // 不足5个字符，在头部补缺少的'a'
.padEnd('5','a') // 尾部补全
.padStart('5')  // 省略第二个参数用空格代替

字符串重复

let a = 'hello'
a.repeat(3)  // hellohellohello 重复三次
'w'.repeat(3)  // www 重复三次
'w'.repeat(3.5)  // 取整，重复三次

消除字符串空格

let s = ' abc '
s.trim()  // 消除首尾空格
s.trimStart()  // 消除首部空格
s.trimEnd()  // 消除尾部空格

replaceAll()替换全部字符串

let s = 'hello'
s.replaceAll('l','o') // heooo

at字符串匹配输出

// 整数头部 复数尾部
'hello'.at(2)  // l  从头部第0位开始，初始下标0
'hello'.at(-1) // 从尾部第1位开始，初始下标1

---

数值的扩展

数值分隔符

允许给较长的数值添加分隔符，分割不没有间隔位数限制，不影响原值，不能再特殊符号前后。

let num = 1_00_000_000;

检测数值是否有限

有限：true

无限：false

Numbet.isFinite(10)  // true
Numbet.isFinite(NaN)  // false

检测是否为NaN

是：true

否：false

Number.isNaN(NaN) // true
Number.isNaN(10)  // false

Number.parseInt()、Number.parseFloat()

将es5的全局方法parseInt()、parseFloat()改为Number.xxx，目的是减少全局方法，使语言模块化。

parseInt('12.55');  // 12
Number.parseInt('12.55');   // 12parseFloat('12.55');  // 12.55
Number.parseFloat('12.55');   // 12.55

isInteger()判断是否为整数

注意：如果数值位数太长，可能会误判，IEEE754标准，53个二进制位后的数值会被丢弃

Number.isInteger(15)  // true
Number.isInteger(1.5) // false
Number.isInteger(false) // false
Number.isInteger(3.0000000000000002) // true

Math.sign()判断是正、负、零，非数值会先转换数值

Math.sign('5') // 1 整数
Math.sign(5) // 1
Math.sign(-5) // -1 负数
Math.sign(0)  // 0
Math.sign(-0) // -0
Math.sign(true) // 1
Math.sign(false)  // -1
// 其它 NaN

Math.hypot()方法返回所有参数的平方和和平方根

Math.hypot(3,4);  // 5

BigInt数据类型-大整数

大整数语法(后缀n)：数据n

BigInt大整数可以保持数值精度

let a = 2172141653n  // 大整数
let b = 15346349309n  // 大整数
console.log(a*b);  // 33334444555566667777n  // 可以保持精度

普通数值与大整数不相等

15n === 15 // false

BigInt继承Object对象的两个实例方法

• BigInt.prototype.toString()
• BigInt.prototype.valueOf()

BigInt继承了Number对象的一个实例方法

• BigInt.prototype.toLocaleString()

提供了三个静态方法

• BigInt.asUintN(width, BigInt)
• BigInt.asIntN(width, BigInt)
• BigInt.parseInt(string[, radix])

BigInt转换规则

Boolean、Number、String三个方法。

转换后后缀n会消失

Boolean(0n)  // false
Number(2n) // 2
String(2n)  // 2

数学运算和number类型基本一致，除法运算 / 会舍去小数部分，返回一个整数

---

函数的扩展

函数作用域

函数进行生命初始化时，参数部分会形成一个单独的作用域，等初始化结束，作用域消失，该作用域在不设置参数默认值时不会出现。

var x = 1
// 传入参数 x = 2 , y = x , y = 2
function f(x,y = x){console.log(y);}
f(2)  // 2

rest参数（…剩余运算符）

function fn(...val){console.log(val)  // [1,2,3]
}
fn(1,2,3)

剩余运算符只能放到最后一位

箭头函数

// 一行简写
let b2 = num => num * 2
// 等同于
let b2 = (num) => {return num * 2}
console.log(b2(10)); // 20

一行默认返回右侧的结果，大括号为代码块，如果箭头函数不是一行，则需要大括号包裹。

无返回值

let b2 = num => void num * 2
console.log(b2(10)); // undefined

参数部分可以解构赋值。

简化回调函数

// 普通函数
let fil = [1,2,3].filter(function(x){return x == 2
})
console.log(fil); // [2]

// 箭头函数
let fil2 = [1,2,3].filter(el=> el == 2 )
console.log(fil2); // [2]

箭头函数this指向

箭头函数没有自己的this，而是引用外层的this。下面是 Babel 转箭头函数产生的 ES5 代码，就能清楚地说明this的指向。

// ES6
function foo() {setTimeout(() => {console.log('id:', this.id);}, 100);
}// ES5
function foo() {var _this = this;setTimeout(function () {console.log('id:', _this.id);}, 100);
} 

箭头函数详解请看文章尾部链接

---

数组的扩展

Array.from() ： 类数组转数组

Array.fo()：数值转数组

find()：返回符合条件的那一项

findIndex()：返回符合条件的那一项的索引

findLast()：从尾部检查，返回符合条件的那一项

fill()：以给定参数填充数组，第二个参数和第三个参数分别为填充的开始位置和结束位置的前一位，从0号位开始

entries()：键值对遍历

keys()：键名遍历

values()：值遍历

includes()：判断数组中是否存在对应的值，返回true和false

flat()：拉平数组，默认拉平一层，参数为拉平几层，（Infinity深度拉平，不管多少层）

flatMap()：拉平并用map函数迭代

at()：参数为数组索引，整数从头（0开始），复数从尾（-1开始）

group()：可以将数组分组，返回一个对象

let gr = [1,2,3,4,5]
let g = gr.group(el=> el > 3 ? 'greater' : 'less')
console.log(g);  // { greater: [4,5], less: [1,2,3] }

groupToMap()：使用map对group迭代。

数组空位：数组空位指数组某一个位置没有任何值，undefined是有值的，如果没有值，那么数组空位会返回empty

Array(3);  // [empty x 3]也就是[,,,]

stor()：排序

let arr = [2,3,6,4,5,1]
// 升序
console.log(arr.sort((a,b) => a - b));  // [1,2,3,4,5,6]
// 降序
console.log(arr.sort((a,b) => b - a));  // [6,5,4,3,2,1]

let arr2 = [{id:1,name:'名称1'},{id:3,name:'名称3'},{id:2,name:'名称2'},{id:6,name:'名称6'},{id:4,name:'名称4'},{id:5,name:'名称5'}]let so = arr2.sort((a,b)=>{ return a.id - b.id });console.log(so);
// [{id: 1, name: '名称1'},{id: 2, name: '名称2'},{id: 3, name: '名称3'},{id: 4, name: '名称4'},{id: 5, name: '名称5'},{id: 6, name: '名称6'}]

---

箭头函数的详细解释：箭头函数详解

数组的扩展详细解读：数组的扩展和新增方法

对象的扩展详细解读：对象定义-解构-枚举属性遍历以及对象内函数

字符串方法详细解读 ： 字符串方法