ES6 字符串的拓展、数组的拓展、对象的拓展
2020-04-07 18:33
1276 查看
写在开头
本文将带你了解ES6 字符串的拓展、数组的拓展、对象的拓展
后续的文章都会与前端有关,欢迎各位同路途的人一起交流学习,3月份又是努力的开头,加油!
如果想更多了解ES6,请参考之前写过的一些文章:
ES6 一文弄懂 var let const 三剑客区别 吊打面试题
ES6 深入理解 …拓展运算符 合并数组及demo选项卡实例
ES6 深入理解之字符串篇 保姆级 教你用js写选项卡demo
ES6 深入理解之number篇 保姆级 教你用js写选项卡demo
ES6 深入理解之方法篇 保姆级 教你用js写选项卡demo
字符串的扩展
ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
-
includes(str)
:判断是否包含指定的字符串 -
startsWith(str)
:判断是否以指定字符串开头 -
endsWith(str)
:判断是否以指定字符串结尾 -
repeat(count)
:重复指定次数
举例如下:
let str = 'abcdefg'; console.log(str.includes('a'));//true console.log(str.includes('h'));//false //startsWith(str) : 判断是否以指定字符串开头 console.log(str.startsWith('a'));//true console.log(str.startsWith('d'));//false //endsWith(str) : 判断是否以指定字符串结尾 console.log(str.endsWith('g'));//true console.log(str.endsWith('d'));//false //repeat(count) : 重复指定次数a console.log(str.repeat(5));
打印结果:
Number 的扩展
- 二进制与八进制数值表示法: 二进制用
0b
, 八进制用0o
。
举例:
console.log(0b1010);//10 console.log(0o56);//46
-
Number.isFinite(i)
:判断是否为有限大的数。比如Infinity
这种无穷大的数,返回的就是false。 -
Number.isNaN(i)
:判断是否为NaN。 -
Number.isInteger(i)
:判断是否为整数。 -
Number.parseInt(str)
:将字符串转换为对应的数值。 -
Math.trunc(i)
:去除小数部分。
举例:
//Number.isFinite(i) : 判断是否是有限大的数 console.log(Number.isFinite(NaN)); //false console.log(Number.isFinite(5)); //true console.log(Number.isFinite(Infinity)); //false //Number.isNaN(i) : 判断是否是NaN console.log(Number.isNaN(NaN));//true console.log(Number.isNaN(5));//falsse //Number.isInteger(i) : 判断是否是整数 console.log(Number.isInteger(5.23));//false console.log(Number.isInteger(5.0));//true console.log(Number.isInteger(5));//true //Number.parseInt(str) : 将字符串转换为对应的数值 console.log(Number.parseInt('123abc'));//123 console.log(Number.parseInt('a123abc'));//NaN // Math.trunc(i) : 直接去除小数部分 console.log(Math.trunc(13.123));//13
数组的扩展
下面提到的数组的几个方法,更详细的内容,可以看《04-JavaScript基础/17-数组的常见方法.md》。
扩展1:Array.from()
Array.from(伪数组/可遍历的对象)
作用:将伪数组或可遍历对象转换为真数组。
扩展2:Array.of()
Array.of(value1, value2, value3)
作用:将一系列值转换成数组。
扩展3:find() 和 findIndex()
方法1:
find(function(item, index, arr){return true})
作用:找出第一个满足「指定条件返回true」的元素。
方法2:
findIndex(function(item, index, arr){return true})
作用:找出第一个满足「指定条件返回true」的元素的index。
对象的扩展
扩展1
Object.is(v1, v2)
作用:判断两个数据是否完全相等。底层是通过字符串来判断的。
我们先来看下面这两行代码的打印结果:
console.log(0 == -0); console.log(NaN == NaN);
打印结果:
true false
上方代码中,第一行代码的打印结果为true,这个很好理解。第二行代码的打印结果为false,因为NaN和任何值都不相等。
但是,如果换成下面这种方式来比较:
console.log(Object.is(0, -0)); console.log(Object.is(NaN, NaN));
打印结果却是:
false true
代码解释:还是刚刚说的那样,
Object.is(v1, v2)比较的是字符串是否相等。
扩展2(重要)
Object.assign(目标对象, 源对象1, 源对象2...)
作用: 将源对象的属性追加到目标对象上。如果对象里属性名相同,会被覆盖。
其实可以理解成:将多个对象合并为一个新的对象。
举例:
let obj1 = { name: 'smyhvae', age: 26 }; let obj2 = { city: 'shenzhen' }; let obj3 = {}; Object.assign(obj3, obj1, obj2); console.log(obj3);
打印结果:
上图显示,成功将obj1和obj2的属性复制给了obj3。
扩展3:__proto__
属性
举例:
let obj1 = {name:'smyhvae'}; let obj2 = {}; obj2.__proto__ = obj1; console.log(obj1); console.log(obj2); console.log(obj2.name);
打印结果:
上方代码中,obj2本身是没有属性的,但是通过
__proto__属性和obj1产生关联,于是就可以获得obj1里的属性。
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- 【编译原理】构造产生如下语言的上下文无关文法各一个:
- ECMAScript 6 全套学习目录 整理 完结
- Vue 技术栈专栏 文章架构出炉
- Vue 技术栈 手写响应式原理 到 探索设计模式
- Vue 技术栈 教你玩"坏" v8引擎 吃透 js 内存回收机制
- MATLAB2018a (64位) 安装教程及安装包下载链接 【详】
- Vue插件开发一系列api Vue.util.defineReactive 手写实现
- Vue 路由工作流程 hash 与 history
- Vue 技术栈 带你探究 vue-router 源码 手写vue-router
- 【金三银四】一个问题就知道你会不会CSS了
- 【金三银四】一个问题就知道你看没看过源码了 深度挖掘必问源码题
- 【金三银四】 一文弄懂 js 数据类型、堆栈内存、作用域(链)、闭包知识拓展 (一)
- 跳跃版图 java 大整数 记忆化搜索 dp
- HNUCM-OJ Problem 1614 幸运数 模拟 最短子段和
- 一文过关 matlab 基础练习题
- 【前端干货】金三银四 我面了腾讯 分享面经/学习笔记/实习经历 (附视频讲解分享)
- 【前端知识梳理】HTML篇 笔记整理(一)
- HNUCM Contest1088 - 2020年春季ACM集训队热身赛-第2场 比赛题解
- HNUCM Contest1092 - 2020年春季ACM集训队热身赛-第3场 比赛题解
- 2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)【目录】