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

简介: 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'}]

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

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

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

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

目录
相关文章
|
6月前
|
JavaScript 前端开发
ES6之模板字符串及字符串新增方法
ES6之模板字符串及字符串新增方法
|
6月前
|
编解码 JavaScript 前端开发
ES6 字符串的新增方法
ES6 字符串的新增方法
|
3月前
|
JavaScript 前端开发
ES6 中新增的两种数据类型及类型判断 ( 二 )
ES6 中新增的两种数据类型及类型判断 ( 二 )
|
3月前
|
存储 JavaScript 前端开发
ES6 中新增的两种数据类型及类型判断 ( 一 )
ES6 中新增的两种数据类型及类型判断 ( 一 )
|
3月前
|
JavaScript 前端开发 网络架构
ES6新特性: 默认参数及扩展运算符和剩余参数
ES6新特性: 默认参数及扩展运算符和剩余参数
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
57 1
|
6月前
|
JavaScript 前端开发 API
ES6学习笔记--字符串与数值的拓展
ES6学习笔记--字符串与数值的拓展
ES6新增操作字符串的七种方法
ES6新增操作字符串的七种方法
|
6月前
|
前端开发 JavaScript Java
ES6中将非数组转换为数组的三种方法
ES6中将非数组转换为数组的三种方法
|
11月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法