JavaScript-21
1.ES6数值
- 新增属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //ES6数值的表示 10 //1.二进制写法：前缀0b或者0B 11 console.log(0b11 === 3);//true 12 console.log(0B11 === 3);//true 13 //2.八进制表示新写法：前缀0o或者0O 14 console.log(0o11 === 9);//true 15 console.log(0O11 === 9);//true 16 //3.常量 17 //该属性表示1与大于1的最小浮点数之间的插 18 console.log(Number.EPSILON);//2.220446049250313e-16 19 //4.最大最小安全整数 20 //安全整数表示在JS中能够精确表示的整数 21 //最大安全整数为2^53-1 22 Number.MAX_SAFE_INTEGER 23 //最小安全整数1-2^53 24 Number.MIN_SAFE_INTEGER 25 </script> 26 </body> 27 </html>
- 方法更改
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //Number对象新方法 10 //1.Number.isFinite()检测一个数值是否为有限的 11 console.log(Number.isFinite(1)); 12 console.log(Number.isFinite(Infinity)); 13 //注意：此方法没有隐式转换所有非数值都返回false 14 //2.Number.isNaN()用于检测一个数值是否为NaN 15 //注意在全局的isNaN中存在隐式转换，会提前将非数值转化为数值 16 //Number.isNaN()不存在隐式转换，所有非NaN全部返回false 17 /* 18 3.从全局移植到Number对象的方法 19 -Number.parseInt():不指定进制时，默认是10进制 20 -Number.parseFloat() 21 -Number.isInteger() 22 -Number.isSafeInteger()：用于判断数值是否在安全范围内 23 */ 24 </script> 25 </body> 26 </html>
2.Math对象的扩展
- ES6在Math对象上新增了17个数学相关的今天方法
| 方法 | 说明 |
| Math.cbrt | 用于计算一个数的立方根（会对非数值进行转换，非数值且无法转换为数值时返回NaN） |
| Math.imul | 大多数情况，形同a*b，特殊情况下（大数相乘）用于返回大数乘法结果中的低位数值 |
| Math.hypot | 用于计算所有参数的平方和的平方根 |
| Math.clz32 | 用于返回32位无符号整数形式的前导0的个数 |
| Math.trunc | 用于返回数字的整数部分（会对非数值进行转换，非数值且无法转换为数值时返回NaN） |
| Math.fround | 用于获取数字的32位单精度浮点数形式（参数为NaN或Infinity时返回本身，会进行转换） |
| Math.sign | 判断数值的符号（正、负、0）（会对非数值进行转换，非数值且无法转换为数值时返回NaN） |
| Math.expm1 | 用于计算e的x次方-1的结果（会对非数值进行转换，非数值且无法转换为数值时返回NaN） |
| Math.log1p | 用于计算1+x的自然对数，即Math.log(1+x) |
| Math.log10 | 用于计算以10为底的对数 |
| Math.log2 | 用于计算以2为底的对数 |
| Math.sinh | 用于计算双曲正弦 |
| Math.cosh | 用于计算双曲余弦 |
| Math.tanh | 用于计算双曲正切 |
| Math.asinh | 用于计算反双曲正弦 |
| Math.acosh | 用于计算反双曲余弦 |
| Math.atanh | 用于计算反双曲正切 |
- 指数运算符**
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //指数运算符 10 console.log(2**2);//4 11 console.log(2**2**2);//16 12 </script> 13 </body> 14 </html>
3.ES6对象
- 对象字面量
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1.属性的简介表示方式 10 const age = 12; 11 let obj = {age}; 12 console.log(obj);//{age: 12} 13 //2.方法名简写 14 obj = { 15 sayHi(){ 16 console.log("Hi"); 17 } 18 } 19 obj.sayHi(); 20 //注意如果是Generator函数，则要在前面加一个*号 21 //3.属性名表达式 22 //ES6允许用表达式作为属性名但必须将表达式放在方括号里 23 obj = { 24 ["lo"+"ve"]:'BH' 25 } 26 //注意：属性的简洁表达式不可以与属性同时使用，否则会报错 27 console.log(obj); 28 </script> 29 </body> 30 </html>
- 对象新方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1.Object.assign(target,source_1...)浅拷贝 10 //用于将源对象中所有可枚举的属性复制到目标对象中 11 let target = {a:1}; 12 let source_1 = {b:2}; 13 let source_2 = {c:3}; 14 //如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的会覆盖前面的 15 //该函数如果只有一个参数，当参数为对象时，直接返回该对象，否则，就将其转换为对象后再返回 16 //注意：null和undefined不能转换为对象否则会报错 17 Object.assign(target,source_1,source_2); 18 console.log(target); 19 //2.Object.is用来比较两个值是否严格相等，与===基本类似 20 console.log(Object.is('p','p'));//true 21 console.log(Object.is([1],[1]));//false 22 //注意：与===的区别 23 console.log(+0===-0);//true 24 console.log(Object.is(+0,-0));//false 25 console.log(Object.is(NaN,NaN));//true 26 console.log(NaN === NaN);//false 27 </script> 28 </body> 29 </html>
4.ES6数组
- 数组创建
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //数组创建 10 //1.Array.of()将参数中所有值作为元素形成数组 11 // -参数值可以为不同的类型 12 // -当参数为空时返回空数组 13 console.log(Array.of(1,true,NaN,undefined,'1')); 14 //2.Array.from(arrLike,fun,thisArg)将类数组对象或可迭代对象转换为数组 15 // -arrayLike：想要转换的类数组或可迭代对象 16 // -fun：可选，用于对每个元素进行处理，放入数组的都是处理后的元素 17 // -thisArg：可选，用于指定map函数执行时的this对象 18 </script> 19 </body> 20 </html>
- 扩展的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1.find() 10 //查找数组中符合条件的元素，有多个符合条件的元素则返回第一个 11 let arr = Array.of(1,2,3,4); 12 console.log(arr.find(item=>item>1));//2 13 //2.findIndex() 14 //查找数组中符合条件的元素索引，所有多个符合条件的，则返回第一个 15 console.log(arr.findIndex(item=>item>2));//2 16 //3.fill() 17 //参数一：用来填充的值，参数二：被填充的起始索引，参数三：被填充的结束索引，默认为数组尾 18 //将一定范围内索引的数组元素内容填充为单个指定的值 19 // console.log(arr.fill(1,1));//[1, 1, 1, 1] 20 //4.copyWithin() 21 //将一定范围索引的数组元素修改为此数组另一指定范围索引的元素 22 //参数一：被修改的起始索引， 23 //参数二：被用来覆盖的数据起始索引 24 //参数三：被用来覆盖的数据的结束索引，默认为数组末尾 25 // console.log(arr.copyWithin(0,2,4))//[3, 4, 3, 4] 26 /* 27 5.遍历：for…of… 28 -entries()：遍历键值对 29 -keys()：遍历键名 30 -values()：遍历键值 31 */ 32 for(item of arr.entries()){ 33 console.log(item); 34 } 35 //6.包含includes 36 //数组是否包含指定的值 37 //参数一：包含的指定值 参数二：可选，搜索的起始索引 38 //注意：如果存在NaN的包含判断与其他值无异 39 console.log(arr.includes(1));//true 40 //7.flat()嵌套数组转换为一位数组默认转换层数是两层，注意：自动跳过空位 41 console.log([1,2,[3,[4,5]]].flat());//[1, 2, 3, Array(2)] 42 //不管嵌套多少层，可以指定转换的嵌套层数 43 console.log([1,2,[3,[4,5]]].flat(Infinity));// [1, 2, 3, 4, 5] 44 //7.flatMap()先对数组中的每个元素进行处理，再对数组执行flat方法 45 //参数一：遍历函数，该遍历函数可接受三个参数，当前元素，当前元素索引，原数组 46 //参数二：指定遍历函数中，this的指向 47 console.log([1,2,3].flatMap(item=>item*2));//[2, 4, 6] 48 </script> 49 </body> 50 </html>
- 创建数组缓冲区
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //通过构造函数创建数组缓冲区 10 let buffer = new ArrayBuffer(10); 11 console.log(buffer.byteLength);//10 12 //分割已有的数组缓冲区 13 let buffer1 = buffer.slice(2,6); 14 console.log(buffer1.byteLength);//4 15 </script> 16 </body> 17 </html>
- 视图
- 视图是用来操作内存的接口
- 视图可以操作数组缓冲区或缓冲区字节的子集，并按照其中一种数值数据类型来读取和写入数据
- DataView类型是一种通用的数组缓冲区视图，其支持8中数值型数据类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //默认DataView可操作数组缓冲区全部内容 10 let buffer = new ArrayBuffer(10); 11 dataView = new DataView(buffer); 12 dataView.setInt8(0,1); 13 console.log(dataView.getInt8(0));//1 14 //通过设定偏移量（参数1）与长度（参数2）指定DataView可操作的字节范围 15 let buffer1 = new ArrayBuffer(10); 16 dataView1 = new DataView(buffer1,0,3); 17 dataView1.setInt8(5,1);//Offset is outside the bounds of the DataView 18 </script> 19 </body> 20 </html>
- 定型数组
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 /* 10 定型数组 11 -数组缓冲区的特定类型的视图 12 -可以强制使用特定的数据诶新，而不是通用的DataView对象来操作数组缓冲区 13 */ 14 //创建 15 //1.通过数组缓冲区产生 16 // let buffer = new ArrayBuffer(10); 17 // view = new Int8Array(buffer); 18 // console.log(view.byteLength); 19 //2.通过构造函数 20 let view = new Int32Array(10); 21 console.log(view.byteLength);//40 22 console.log(view.length);//10 23 //不传参时默认长度为0 24 //在这种情况下数组缓冲区分配不到空间，创建的定型数组不能用来保存数据 25 //可接受的参数包括定型数组，可迭代对象，数组，类数组对象 26 let view2 = new Int16Array([1,2]); 27 //注意：length属性不可写，如果尝试更改这个值，在非严格模式会直接忽略该操作 28 //在严格模式会直接抛出错误 29 //定型数组可使用entries()、keys()、values()进行迭代 30 let view1 = new Int16Array([1,2,3]); 31 for(var [key,item] of view1.entries()){ 32 console.log(key+": "+item); 33 } 34 </script> 35 </body> 36 </html>
- 注意
- find()等方法可用于定型数组，但是定型数组的方法会额外检查数值类型是否安全，也会通过Symbo.species确认方法的返回值是定型数组而非普通的数组
- concat()方法由于两个定型数组合并结果不确定，故不能用于定型数组
- 另外，由于定型数组的尺寸不可更改，可以改变数组的尺寸的方法，例如：splice()，不适用于定型数组
- 所有定型数组都含有of()和from()犯法，区别是普通数组返回普通数组，定型数组返回定型数组
- set()和subarray()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //set方法 10 //参数一：一个定型数组或普通数组 11 //参数二：可选，偏移量，开始插入数组的位置，默认为0 12 let view = new Int16Array(4); 13 view.set([1,2]); 14 view.set([3,4],2); 15 console.log(view);//[1,2,3,4]; 16 //2.subarray 17 //参数一：可选，开始位置，默认为0 18 //参数二：可选，结束位置(不包含结束位置)，默认为数组长度 19 let view1 = new Int16Array([1,2,3,4,5,6]); 20 subview1 = view1.subarray(); 21 subview2 = view1.subarray(1); 22 subview3 = view1.subarray(1,4); 23 console.log(subview1);//[1,2,3,4,5,6] 24 console.log(subview2);//[2,3,4,5,6] 25 console.log(subview3);//[2,3,4] 26 </script> 27 </body> 28 </html>
5.ES6 Class 类
- 在ES6中，class（类）作为对象的模板被引入，可以通过class关键字定义类，其本质是function
- 类定义
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1.匿名类 10 let Example = class{ 11 constructor(a) { 12 this.a = a; 13 } 14 } 15 //2.命名类 16 let Stu = class Stu{ 17 constructor(name) { 18 this.name = name; 19 } 20 } 21 //注意： 22 //(一)类不可以重复声明 23 //(二)类定义不会被提升，所以必须要在访问前对类进行定义，否则会报错 24 //(三)类中方法不需要加function 25 </script> 26 </body> 27 </html>
- 类的属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 ///1.prototype 10 let Exam = class Example{ 11 constructor(a) { 12 this.a = a; 13 } 14 }; 15 //覆盖方法 16 // Example.prototype = { 17 // sing(){ 18 // console.log("sing a song"); 19 // } 20 // } 21 // console.log(Example.prototype); 22 //添加方法 23 // Object.assign(Example.prototype,{ 24 25 // }); 26 //2.静态属性 27 //class本身的属性，即直接定义在类内部，不需要实例化 28 //ES6规定 ,Class内部只有静态方法，没有静态属性 29 // Example.b = 'ex'; 30 // console.log(Example.b);//'ex' 31 //3.公共属性 32 // Example.prototype.a = 2; 33 //4.实例属性 34 //定义在实例对象(this)上的属性 35 //5.name属性返回跟在class后的类名 36 console.log(Exam.name);//Example 37 </script> 38 </body> 39 </html>
- 类的方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 class Exam{ 10 //1.costructor方法 11 //该方法是类的默认方法，创建累的实例化对象时被调用 12 constructor() { 13 //默认返回实例对象this 14 console.log('我是constructor') 15 //4.实例方法 16 this.add = (a,b)=>a+b; 17 } 18 //2.静态方法 19 static sum(a,b){ 20 console.log(a+b); 21 } 22 //3.原型方法 23 mult(a,b){ 24 console.log(a*b) 25 } 26 }; 27 new Exam();//我是constructor 28 Exam.sum(1,2);//3 29 let exam = new Exam(); 30 exam.mult(1,2);//2 31 console.log(exam.add(1,55));//56 32 </script> 33 </body> 34 </html>
- decorator
- decorator是一个函数，用来修改类的行为，在代码编译时起作用
- 类修饰
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //类修饰 10 //一个参数 11 // function testable(target){//第一个参数target指向类本身 12 // target.isTestable = 'true'; 13 // } 14 // @testable 15 // class Example{} 16 // console.log(Example.isTestable);//true 17 //多个参数--嵌套实现 18 function testable(isTestable){ 19 return function(target){ 20 target.isTestable = isTestable; 21 } 22 }; 23 @testable(true) 24 class Example{} 25 console.log(Example.isTestable); 26 </script> 27 </body> 28 </html>
- 方法修饰
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //方法修饰 10 //3个参数：target(类的原型对象) 11 //name(修饰的属性名) 12 //descriptor(该属性的描述对象) 13 class Exam{ 14 @writable 15 sum(a,b){ 16 return a+b; 17 } 18 } 19 function writable(target,name,descriptor){ 20 descriptor.writable = false; 21 return descriptor; 22 } 23 //修饰器执行顺序，由外向内进入，由内向外执行 24 </script> 25 </body> 26 </html>
- 封装与继承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //getter不可单独出现，getter和setter必须同级出现 10 class Example{ 11 constructor(a,b) { 12 this.a = a; 13 this.b = b; 14 } 15 get a(){ 16 console.log('getter'); 17 // return this.a; 18 return this._a; 19 } 20 set a(a){ 21 console.log('setter'); 22 // this.a = a;//自身递归调用 23 this._a = a; 24 } 25 } 26 //不断输出setter 27 // let exam = new Example(1,2);//RangeError 28 let exam1 = new Example(1,2); 29 //不会调用getter方法，只输出setter 30 console.log(exam1._a);//1 31 </script> 32 </body> 33 </html>
浙公网安备 33010602011771号