关于前端:ES6新增扩展字符串数值数组函数对象

字符串的扩大

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

let s = 'h'

// 后果：true
s.startsWith('hello')  // 是否在头部 

// 后果：false
s.endWith('hello')  // 是否在尾部  

// 后果:true
s.includes('hello')  // 字符串中是否存在 

字符串补全

let b = 'how'

// 后果：aahow
b.padStart('5','a')  // 有余 5 个字符，在头部补短少的 'a' 

// 后果：howaa
b.padEnd('5','a') // 尾部补全 

// 后果："how"
b.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) // 0 从尾部第 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');   // 12

parseFloat('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()：从尾部查看，返回符合条件的那一项

filter() : 返回符合条件的数组成员数组

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'}]

箭头函数的具体解释：箭头函数详解

数组的扩大具体解读：数组的扩大和新增办法

对象的扩大具体解读：对象定义 - 解构 - 枚举属性遍历以及对象内函数

字符串办法具体解读：字符串办法