关注
分享
本专栏博客文章本人后续遇到一些冷门的用法与特性会更新，更详细的内容请查看业内权威es6阮一峰https://es6.ruanyifeng.com/#docs/regex
LiuJie_Boom
高粒度抽象的代价就是无法做到低粒度的修改
展开
-
（29）es6——es11新增globalThis
文章结构// 永远指向当前环境的全局对象console.log(globalThis);原创 2022-04-25 23:41:17 · 196 阅读 · 0 评论 -
（28）es6——es11新增动态import()
文章结构动态import是用来干嘛的动态import是用来干嘛的// 以前的静态引入，一股脑的引入，不管是不是现在立马要用都直接引入，影响性能// import * as obj from './a.js';// console.log(obj.a);a.jsexport let a = 1;// 当我们需要的时候再执行import()动态引入// 动态引入import函数执行之后返回一个promise对象import('./a.js').then(module => { co原创 2022-04-25 23:38:49 · 967 阅读 · 0 评论 -
（27）es6——es11新增BigInt大整数数据结构
文章结构BigInt的作用声明方式整数转大整数大整数运算BigInt的作用大整数，主要用来超大整数的运算处理声明方式// 表示方式let a = 521n;console.log(a,typeof a); // 521n 'bigint'整数转大整数// 将其它整数转换为大整数,只能转换整数，不能转换浮点数let b = 200;console.log(BigInt(b)); // 200n大整数运算// 大数值运算// js中最大的整数let max = Number.M原创 2022-04-25 23:34:36 · 778 阅读 · 1 评论 -
（26）es6——es11新增可选链式调用?.
文章结构链式调用属性的痛点没有链式调用怎么解决痛点链式调用解决痛点链式调用的好处链式不只是用来调用对象属性调用函数调用动态属性可选链式有三个属性短路堆叠可选删除链式调用属性的痛点当我们读取比较深的对象属性时可能会编写出下面的代码console.log(person.hobby.category); // 读取人的爱好中的类别属性前置知识： 1、我们知道js去读取一个对象不存在的属性时，返回值为undefined。 2、js去读取undefined的xxx属性时会报错。那么此时consol原创 2022-04-25 23:26:41 · 902 阅读 · 0 评论 -
（25）es6——es8async和await关键字
asyncasync用来修饰函数，被async修饰的函数调用执行默认返回一个promise对象，值由被修饰函数的返回值async function fn(){ // 默认返回undefined // 1、返回非promise对象，状态为完成 return 123; // 2、抛出一个对象，状态为拒绝 throw new Error('错误'); // 3、返回一个promise对象，状态和值由返回的promise对象的值决定 return ne原创 2022-04-25 14:42:01 · 527 阅读 · 1 评论 -
（24）es6——es8Object原型新增方法keys,values,entries,getOwnPropertyDescriptor和create
keys获取对象的所有键名,返回一个数组const obj = { name: '804-3', people: ['zhangsan','lisi','wangwu','zhaoliu'], age: [18,18,18,18]}console.log(Object.keys(obj));values获取对象所有的属性值，返回一个数组const obj = { name: '804-3', people: ['zhangsan','lisi','wangwu','zhaol原创 2022-04-25 09:51:28 · 168 阅读 · 0 评论 -
（23）es6——Math原型上新增方法trunc和sign
truncMath.trunc 将小数部分抹掉,返回一个整数。console.log(Math.trunc(1.2)); // 1sign判断一个数是正数还是负数还是0，整数返回1，负数返回-1,0返回0console.log(Math.sign(111));//1console.log(Math.sign(-111));//-1console.log(Math.sign(0));//0...原创 2022-04-25 09:21:00 · 173 阅读 · 0 评论 -
（22）es6——计算属性
var attName = 'name';var p1 = { attName: '李四', // 这里的attName是属性名，相当于各级p定义了属性名叫 attName的属性。 age: 20, name: 'a'}// 实际上输出的是p1["name"]console.log(p1[attName]) // avar attName = 'name';var p = { [attName]: '李四', // 引用了变量attName。相当于添加了一个属原创 2022-04-24 15:19:22 · 236 阅读 · 0 评论 -
（21）es6——Object原型新增方法is,assign,getPrototypeof,setPrototypeof和es10新增方法fromEntries
isObject.is 比较两个数是否相等可以用来判断一个值是不是NaNconsole.log(Object.is(100,100));//trueconsole.log(Object.is(NaN,NaN));//trueconsole.log(NaN === NaN);//false,NaN使用===和任何比较都是falseassign合并对象const obj1 = { a:1, b:2, c:3}const obj2 = { a:2, b:3, d:4}原创 2022-04-24 15:17:43 · 322 阅读 · 0 评论 -
（20）es6——Number原型新增方法EPSILON，isFinite，parseInt，parseFloat，isInteger和允许赋值2进制，8进制和16进制啦
Number.EPSILONNumber.EPSILON是JavaScript的最小精度可以用来解决前端经典面试题0.1 + 0.2 !== 0.3console.log(0.1 + 0.2 === 0.3);//falsefunction fn(){ if(0.1 + 0.2 - 0.3 < Number.EPSILON){ return true; }else { return false; }}console.log(fn());//true二进制0b开头和八进.原创 2022-04-24 15:14:53 · 234 阅读 · 0 评论 -
（19）es6——模块化
在浏览器中使用es6模块化方式1html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2022-04-24 15:24:27 · 3428 阅读 · 0 评论 -
（18）es6——String原型新增方法startsWith，endsWith，repeat和es10新增trimStart，trimEnd
console.log(String.prototype);startsWith()和endsWith()// startsWith: 表示参数字符串是否在原字符串的头部，返回布尔值// endsWith: 表示参数字符串是否在原字符串的尾部，返回布尔值let str = 'hello world!';console.log(str.startsWith('hel'));//trueconsole.log(str.endsWith('!'));//truerepeat()// repea原创 2022-04-24 15:12:05 · 263 阅读 · 0 评论 -
（17）es6——Array原型新增方法from，find，findIndex和es7新增includes以及es10新增flat,flatMap
from()//将伪数组和可遍历的对象转换为数组//属性名必须是数字0开始不然访问不到var obj = { 0: 1, 1: 2, 2: 3, length: 3}console.log(Array.from(obj));find()// 用于找出第一个符合条件的数组成员， 如果没有找到返回undefinedlet arr = [1,23,4,5];// find接收一个函数，函数有两个形参，一个接收值，一个接收索引，return中写判断条件let a = arr.find(原创 2022-04-24 15:10:26 · 383 阅读 · 0 评论 -
（16）es6——Map
什么是Map Map就是一个升级版的对象，原始对象的键名只能是字符串，但是Map的键名可以是任何类型Map的特性Map也支持iterator,可以使用扩展运算符和for ofMap的使用声明// 声明let m = new Map();属性和方法let m = new Map();// API// 添加键值对m.set('name','zhangsan');m.set('run',function(){ console.log('run');})let key = {原创 2022-04-24 15:08:30 · 757 阅读 · 0 评论 -
（15）es6——Set
Set的介绍ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，是一个集合对象。Set本身是一个构造函数,用来生成Set数据结构。Set的使用初始化const a = new Set();Set函数可以接受一个数组或多个数组作为参数,来初始化。const b = new Set([1,2,2,3]);console.log(b);//{1,2,3}特性支持for of支持扩展运算符属性和方法size属性是集合的大小Set原型身上的方法：a原创 2022-04-24 15:05:54 · 688 阅读 · 0 评论 -
（14）es6——promise
promise构造函数基本使用/* Promise构造函数接收一个函数，这个函数是同步执行的，这个函数接收两个参数（类型都是函数） */const p = new Promise((resolve, reject) => { console.log("执行1"); resolve("成功");});console.log("执行2");console.log(p);Promise.resolve()resolve()传入一个promise对象，那么返回值是一个promise原创 2022-04-24 15:02:42 · 741 阅读 · 0 评论 -
（13）es6——生成器函数
生成器函数的定义与使用// 声明 function * fn() { // yield类似于断点 console.log(111); yield '第一段' console.log(222); yield '第二段' console.log(333); yield '第三段' console.log(444); } // 调用 let iterator = fn(); // 生成器函数每次调用的时候都会生成一个新原创 2022-04-24 14:06:07 · 407 阅读 · 0 评论 -
（12）es6——迭代器iterator
iterator的说明es6创建了一种新的迭代器for of 可以遍历使用迭代器Array Arguments Set Map String TypeArray NodeList 都支持iterator是对象的一个symbol类型的属性const arr = ['o', 'r', 'e', 'a'];// 不同于for in 的是 for in i 是下标、键 for of 是值for (let i of arr) { console.log(i); // o r e a}/原创 2022-04-23 23:44:11 · 334 阅读 · 0 评论 -
（11）es6——js第7种数据类型symbol和es10新增属性description
创建symbol的方式// 第一种创建symbol的方式let s = Symbol();console.log(s, typeof s); // Symbol() symbol// 传递一个字符串标识名,实际上s1和s2还是随机的，唯一的let s1 = Symbol('zhangsan');let s2 = Symbol('zhangsan');// 第二种symbol.for创建,可以通过后面的标识符查询到，可以与后面的标识符一一对应let s3 = Symbol.for('zha原创 2022-04-23 23:45:54 · 431 阅读 · 0 评论 -
（10）es6——面向对象Class
什么是面向过程编程? 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步的实现，作为前端人员来说对于这种方式应该已经不陌生了。使用的时候再一个个的依次调用就可以了。 比如：打开冰箱门-->大象装进去-->关上冰箱门。 总结：面向过程就是按照我们分析好了的步骤，按照步骤解决问题。// 声明3个回调函数，三个回调函数分别对应程序的三个过程const open_the_door = function() { console.log("开门");};const原创 2022-04-21 17:57:52 · 1292 阅读 · 0 评论 -
（9）es6——拓展运算符
1、拓展运算符可以将数组和对象转换为逗号分隔的参数变量序列，变量名和变量值，数组时下标为变量名，对应的值为变量值，对象键值对就是变量名和变量值let arr = [1,2,3,4,5];//...arr 就是1,2,3,4,5console.log(...arr);//12345 log函数将逗号作为分隔符了let obj1 = { name1: '刘德华', age1: 18}let obj2 = { name2: '张学友', age2: 19, ...obj1,}con原创 2022-04-23 23:45:22 · 541 阅读 · 2 评论 -
（8）es6——剩余参数rest...接收函数参数
/* 剩余参数(...变量名)允许我们将不定量的参数表示为一个数组 */function fn(first,...args){ console.log(first);//1 console.log(args);//[2,3,4]}fn(1,2,3,4);/* 箭头函数中没有arguments对象，所以只能用剩余参数来存储多于的参数 */const sum = (...args) => { let total = 0; args.forEach(item => total原创 2022-04-23 23:44:49 · 320 阅读 · 0 评论 -
（7）es6——函数形参默认值
// 给形参设置初始值function add(a, b, c = 3) { return a + b + c;}console.log(add(1, 2));// 6原创 2022-04-23 23:43:40 · 272 阅读 · 0 评论 -
（6）es6——箭头函数
箭头函数的使用声明定义方式() => {}箭头函数的参数// 只有一个参数的时候，可以省略小括号const sum = a => a; 箭头函数的函数体/* 1、当函数体中只有一条js表达式时，可以省略大括号，且js表达式的执行结果就是return返回值 */const sum1 = (num1,num2) => num1 + num2;// 等同于==function sum2(num1,num2){ return num1 + num2;}使用箭头函数原创 2022-04-23 23:43:08 · 672 阅读 · 0 评论 -
（5）es6——对象属性的简写
let name = 'zhangsan';let clog = function() { console.log('shuchu')}// 属性名和变量名相同let obj = { name, clog, add(num1, num2) { return num1 + num2; }}// 效果相同的写法let obj2 = { name: name, clog: clog, add: function(nu原创 2022-04-23 18:06:47 · 591 阅读 · 0 评论 -
（4）es6——模板字符串
//创建模板字符串let str = `liudehua`;console.log(str);//liudehua//模板字符串可以解析变量let name = '刘德华';let text = `${name} 很帅`;console.log(text);//刘德华很帅//模板字符串可以保留空格let obj = { name: '刘德华', age: 18, sex: '男'}let str = `<div> <span>${obj.name}&原创 2022-04-23 17:38:46 · 453 阅读 · 0 评论 -
（3）es6——解构赋值
es6中允许从数组、对象中提取值，按照对应位置，进行赋值。数组解构let [a, b, c] = [1, 2, 3];console.log(a); //1console.log(b); //2console.log(c); //3// 没有对应值就是underfinedlet [d, e, f] = [4];console.log(d); //4console.log(e); //undefinedconsole.log(f); //undefined对象解构// 对象解构：原创 2022-04-22 22:48:37 · 292 阅读 · 0 评论 -
（2）es6——let和const（讲解一个经典面试题）
let具有块级作用域let声明的变量只处在的块级有效，具有块级作用域(if\for\function)中if(true){ let a = 10;}console.log(a);//报错：a is not defined防止循环变量变成全局变量for(var i = 0;i < 3;i++){ }console.log(i);//3for(let j = 0;j < 3;j++){}console.log(j);//拨错：j is not defined原创 2022-04-22 10:56:58 · 576 阅读 · 2 评论 -
（1）es6——什么是es6以及它的作用
什么是es6?ES全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范 ES2015 发布于201506 ES2016 发布于201606 ES2017 发布于201706 ES2018 发布于201806ES6实际上是一个泛指，泛指ES2015及后续的版本es6的作用是什么？每一次标准的诞生都意味着语言的完整、功能的强大，JavaScript语言本身也有许多令人不满的地方 比如：变量提升 语法松散，实现相同的功能，不同的原创 2022-04-22 10:57:27 · 959 阅读 · 0 评论