东莞建设建网站,东莞形象设计公司,郑州做网站建设的公司,微商代运营公司2.1.let关键字
为了解决之前版本中 var 关键字存在存在着越域, 重复声明等多种问题, 在 ES6 以后推出 let 这个新的关键字用来定义变量
//声明变量
let a;
let b,c,d;
let e 100;
let f 123, g hello javascript, h [];let 关键字用来声明变量#xff0c;使用 let 声明的…2.1.let关键字
为了解决之前版本中 var 关键字存在存在着越域, 重复声明等多种问题, 在 ES6 以后推出 let 这个新的关键字用来定义变量
//声明变量
let a;
let b,c,d;
let e 100;
let f 123, g hello javascript, h [];let 关键字用来声明变量使用 let 声明的变量有几个特点 不允许重复声明 var s 王小二;
var s 李小三;let name 王小二;
let name 李小三; // Uncaught SyntaxError: Identifier name has already been declared块儿级作用域 if else while for 语句 都可以定义代码块 // for(var i 0;i 5; i){
// console.log(i)
// }
// console.log( i:, i ) // i 越域{let girl 赵静子;
}
console.log(girl); // Uncaught ReferenceError: girl is not defined不存在变量提升 // console.log(s) // undefined
// var s abc
// console.log(s) // abcconsole.log(song); //Uncaught ReferenceError: Cannot access song before initialization
let song 最炫民族风;
console.log(song) // 不会再执行到这行2.2. const 关键字
定义常量, 不能修改
//声明常量
const GOODS 书包;const 关键字用来声明常量const 声明有以下特点 声明必须赋初始值 const A; // Uncaught SyntaxError: Missing initializer in const declaration标识符一般为大写(潜规则, 不是必须的) 不允许重复声明 const GOODS 书包;
const GOODS 钢笔; // Uncaught SyntaxError: Identifier GOODS has already been declared块儿级作用域 {const NAME 王小二;
}
console.log(NAME); // Uncaught ReferenceError: NAME is not defined值不允许修改 const BOOK 三体;
BOOK 西游记; // Uncaught TypeError: Assignment to constant variable.特别要注意 : 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错 const TEAM [王小二,李小三];
TEAM.push(赵小四);const STU {name: 王小二,age: 18
}
STU.name 赵小四;应用场景声明对象类型使用const非对象类型声明选择 let 2.3.变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构赋值。
2.3.1.数组的解构赋值
const F4 [王小二,李小三,赵小四,张不开];
// let wang F4[0];
// let li F4[1];
// let zhao F4[2];
// let zhang F4[3];let [ wang, li, zhao, zhang ] F4;
console.log(wang);
console.log(li);
console.log(zhao);
console.log(zhang);2.3.2.对象的解构赋值
const STU {name: 王小二,age: 18,sayHello: function(){console.log(Hello, 我是 this.name);}
};// let name STU.name
// let age STU.age;
// let sayHello STU.sayHello;// let { name : name , age : age , sayHello : sayHello } STU;
let { name, age, sayHello } STU;
console.log(name);
console.log(age);
// console.log(sayHello);
sayHello();// let { sayHello } STU;
// sayHello();// let { name : abc } STU;
// console.log(abc)2.3.3.复杂解构
先定义对象
let wang {like : [运动,美食,音乐],study:[{ name: java, info:啥都能干},{ name: HTML, info: 挺好学的},{ name: javascript, info: 也啥都能干}]
}2.3.3.1.解构方式1
let { like, study } wang;
console.log( like );
console.log( like[0] );
console.log( like[1] );
console.log( like[2] );
console.log( study );
console.log( study[0].name );
console.log( study[0].info );2.3.3.2.解构方式2
one , two, three, java, html, js 才是解构出来的变量
let { like : [ one, two, three ] , study : [ java, html, js ] } wang;
// console.log( like ); // 使用报错 : Uncaught ReferenceError: like is not defined
console.log( one );
console.log( two );
console.log( three );console.log(java.name);
console.log(html.info);
console.log( js )
console.log( js.name )注意频繁使用对象方法、数组元素就可以使用解构赋值形式
2.4.字符串优化
2.4.1.模板字符串
模板字符串template string是增强版的字符串用反引号标识特点
字符串中可以出现换行符可以使用 ${xxx} 形式输出变量
2.4.1.1.定义字符串
let s 我也是一个字符串哦!;console.log(s, typeof s);let str ulli王小二/lili李小三/lili赵小四/li/ul;
console.log(str, typeof str);2.4.1.2.输出变量
let zhao 赵静子;
let out ${zhao}是个大美女!!;
console.log(out);注意当遇到字符串与变量拼接的情况使用模板字符串 2.4.2.新增方法 startsWith()判断字符串是否以特定的字符开头。 endsWith()判断字符串是否以特定的字符结尾。 includes()判断字符串是否包含特定的字符。 repeat()重复生成指定次数的字符串。 let str hello.vue;
console.log(str.startsWith(hello)); //true
console.log(str.endsWith(.vue)); //true
console.log(str.includes(e)); //true
console.log(str.includes(hello)); //true
let ss str.repeat(3); //hello.vuehello.vuehello.vue
console.log(ss)( ES 10 ) trimStart() 和 trimEnd() let str hello world ;console.log(str); // hello world
console.log(str.trim() ); // hello world
console.log(str.trimStart()); // hello world
console.log(str.trimEnd()); // hello world2.5.函数优化
2.5.1.箭头函数
ES6 允许使用「箭头」定义函数。
let fn1 function(){console.log(function)
}
fn1()let fn2 (){console.log()
};
fn2()2.5.1.1.写法
// 声明一个函数
let fn (a,b) {return a b;
}
// 调用函数
let result fn(1, 2);
console.log(result);// 如果形参只有一个则小括号可以省略
let fn3 num {return num * 10;
};// 函数体如果只有一条语句则花括号可以省略
let fn4 ()console.log(hello)// 函数的返回值为该条语句的执行结果
let fn5 score score * 20;
let result fn5(10);
console.log(result) 箭头函数解构 const person {name: jack,age: 21,language: [java, js, css]
}function hello(person){console.log(hello, person.name)
}//箭头函数解构
var hello2 ({name}) console.log(hello, name);
hello2(person);2.5.1.2.this
this 指向声明时所在作用域中 this的值
// 设置 window 对象的 name 属性
window.name 王小二;
let name 赵静子;
console.log( this )
function getName(){console.log(this.name);
}let getName2 () {console.log(this.name);
}//直接调用
getName(); // 王小二
getName2(); // 王小二注意this 是静态的 , 箭头函数不会更改 this 指向用来指定回调函数会非常合适 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法 const STU {name: 李小三
}//call 方法调用
getName.call(STU); // 李小三
getName2.call(STU); // 王小二2.5.1.3.不能作为构造函数
箭头函数不能作为构造函数实例化
let Sss function (name, age) {this.name name;this.age age;
}
let wang new Sss(王小二,12);
console.log(wang);let Stu (name, age) {this.name name;this.age age;
}
let li new Stu(李小三,13); //Uncaught TypeError: Stu is not a constructor
console.log(li);2.5.1.4.不能使用 arguments
let fn6 function () {console.log(arguments);
}
fn6(1,2,3);let fn7 () {console.log(arguments);
}
fn7(1,2,3); //Uncaught ReferenceError: arguments is not defined2.5.2. rest 参数(不定参数)
ES6 引入 rest 参数用于获取函数的实参用来代替 arguments
// ES5 获取实参的方式
// function getName1(){
// console.log(arguments);
// }
// getName1(王小二,李小三,赵小四);// rest 参数
// function getName2(...args){
// console.log(args);// filter some every map
// }
// getName2(王小二,李小三,赵小四);
// getName2(王小二,李小三);// rest 参数必须要放到参数最后
function fn(a,b,...args){console.log(a);console.log(b);console.log(args);console.log(args.length);
}
fn(1,2,3,4,5,6);注意rest 参数非常适合不定个数参数函数的场景 2.5.3. spread 扩展运算符
扩展运算符spread也是三个点…。
它好比 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列对数组进行解包。
// 声明一个数组
const names [王小二,李小三,赵小四];// 声明一个函数
function getName(){console.log(arguments);
}getName(...names); // getName(王小二,李小三,赵小四)2.5.4.参数设置默认值
//在ES6以前我们无法给一个函数参数设置默认值只能采用变通写法
function add(a, b) {// 判断b是否为空为空就给默认值1b b || 1;return a b;
}
// 传一个参数
console.log(add(10));//现在可以这么写直接给参数写上默认值没传就会自动使用默认值
function add2(a, b 1) {return a b;
}
console.log(add2(20));
2.5.5.( ES 11 )可选链操作符
使用参数之前 先判断参数有效性, 否则使用未传入的参数会报错
使用 ?. 运算符, 可以自动根据参数有效性进行判断, 如果参数无效, 不报错, 返回 undefined
// ?.
function main(config){// const dbHost config config.db config.db.host;const dbHost config?.db?.host;console.log(dbHost);
}// main({
// db: {
// host:192.168.1.100
// }
// })
main();2.6.对象Object优化
2.6.1.对象新的方法
2.6.1.1.结构分析
const STU {name: 王小二,age: 21,language: [java, js, vue]
}console.log( Object.keys(STU) ); //[ name, age, language ]
console.log( Object.values(STU) ); //[ 王小二, 21, Array(3) ]
console.log( Object.entries(STU) ); //[ Array(2), Array(2), Array(2) ]2.6.1.2.判断完全相等
// Object.is 判断两个值是否完全相等
console.log(Object.is(120, 120));// true
console.log(Object.is(120, 120));// false
console.log(Object.is(NaN, NaN));// true
console.log(NaN NaN);// false
console.log(NaN NaN);// false2.6.1.3.合并
const STU1 {name : 王小二,age : 18,birth : 2001-01-01,info1: 一个好学生
};
const STU2 {name : 李小三,age : 22,sex : 女,info2: 也是一个好学生
}Object.assign(STU1, STU2) // 将STU1和STU2合并到 STU1console.log( STU1 );
// 结果是合并结果
// {
// age : 22,
// birth : 2001-01-01,
// info1 : 一个好学生,
// info2 : 也是一个好学生,
// name : 李小三,
// sex : 女
// }console.log( STU2 ); // 不变化2.6.1.4.拷贝
// 1、拷贝对象深拷贝
let s1 { name: 王小二, age: 15 }
let s2 { ...s1 }
console.log( s2 ) //{ name:王小二, age:15 }// 2、合并对象
let age1 { age: 15 }
let name1 { name: 王小二 }
let s3 { name : 李小三 }
s3 { ...age1, ...name1 }
console.log( s3 ) // {age: 15, name: 王小二}2.6.1.5.( ES 8 ) Object.values 和 Object.entries Object.values()方法返回一个给定对象的所有可枚举属性值的数组 Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组 //声明对象
const STU {name : 王小二,study : [java,html,js]
};//获取对象所有的键
console.log(Object.keys(STU)); // [name, study]
//获取对象所有的值
console.log(Object.values(STU)); // [王小二, [java, html, js]]
//entries
console.log(Object.entries(STU)); // [[name, 王小二], [study, [java, html, js]]]//创建 Map
const m new Map(Object.entries(STU));
console.log(m.get(study));2.6.1.6.( ES 9 )Object.fromEntries
从 二维数组 / Map 创建对象
//二维数组
const result1 Object.fromEntries([[name,王小二],[study, Java,html,js]
]);
console.log(result1) //{name: 王小二, study: Java,html,js}//Map
const m new Map();
m.set(name,李小三);
m.set(like, [电影,美食,旅游] )
const result2 Object.fromEntries(m);
console.log(result2); //{name: 李小三, like: Array(3)}2.6.1.7.( ES 8 )Object.getOwnPropertyDescriptors
该方法返回指定对象所有自身属性的描述对象
数据属性value值、writable是否可写、enumerable是否可枚举、configurable是否可配置
console.log(Object.getOwnPropertyDescriptors(STU));
// 输出 :
// {
// name: { value: 王小二, writable: true, enumerable: true, configurable: true },
// study: { value: [ java, html, js ], writable: true, enumerable: true, configurable: true }
// }也可以在创建时 指定这些属性
const obj Object.create(null, {name: {//设置值value: 李小三,//属性特性writable: true,configurable: true,enumerable: true}
});
console.log(obj)2.6.2.对象原型 ***
2.6.2.1.Object.setPrototypeOf()
在 JavaScript 中__proto__ 和 Object.setPrototypeOf() 都是用来操作对象的原型链的。 __proto__ 是对象的一个内部属性用于获取或设置对象的原型。可以通过访问器属性的方式来获取或设置 __proto__。
const obj {};
const proto { hello: world };
obj.__proto__ proto; // 设置 obj 的原型为 proto
console.log(obj.hello); // 输出 world需要注意的是__proto__ 属性在 ECMAScript 6 标准中被弃用虽然现代浏览器仍然支持它但不建议在生产环境中使用它。 因此推荐使用 Object.setPrototypeOf() 方法来设置对象的原型。 Object.setPrototypeOf() 是一个静态方法用于设置一个对象的原型。它接收两个参数要设置原型的对象和要设置的原型对象。例如
Object.setPrototypeOf() 方法会将第一个参数对象的原型设置为第二个参数的对象。 这样第一个参数对象就能够继承第二个参数对象的属性和方法。 需要注意的是频繁地改变对象的原型链会对性能产生负面影响。因此除非必要一般不建议经常性地改变对象的原型。
const obj {};
const proto { hello: world };
Object.setPrototypeOf(obj, proto); // 设置 obj 的原型为 proto
console.log(obj.hello); // 输出 world2.6.2.2.Object.getPrototypeOf()
在 JavaScript 中Object.getPrototypeOf() 是一个静态方法用于获取指定对象的原型。 Object.getPrototypeOf() 方法接收一个参数即要获取原型的对象。它会返回指定对象的原型。
const obj {};
const proto { hello: world };
Object.setPrototypeOf(obj, proto); // 设置 obj 的原型为 proto
const objPrototype Object.getPrototypeOf(obj);
console.log(objPrototype); // 输出 { hello: world }在上面的示例中我们使用 Object.setPrototypeOf() 方法将 obj 的原型设置为 proto。 然后通过 Object.getPrototypeOf() 方法获取了 obj 的原型并将其赋值给 objPrototype。 需要注意的是Object.getPrototypeOf() 方法返回的是指定对象的原型即它的 [[Prototype]] 属性的值。 如果指定对象没有明确的原型即它是通过 Object.create(null) 或者 null 构造的对象 那么 Object.getPrototypeOf() 方法会返回 null。 Object.getPrototypeOf() 方法的应用场景包括 判断对象是否继承了指定的原型检查对象的原型链关系以及执行一些基于对象原型的操作。
2.6.3.简化对象写法
ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。
let name 王小二;
let sayHello function(){console.log(大家好!!);
}// const STU {
// name : name,
// sayHello : sayHello,
// study: function(){
// console.log(我们一起学 js);
// }
// }const STU {name,sayHello,study(){console.log(我们一起学 js);}
}console.log(STU);
STU.sayHello()几种对象函数的写法:
let person3 {name: 王小二,// 以前eat: function (food) {console.log(this.name 在吃 food);},//箭头函数this不能使用对象.属性eat2: food console.log(person3.name 在吃 food),// 匿名eat3(food) {console.log(this.name 在吃 food);}
}person3.eat(香蕉);person3.eat2(苹果)person3.eat3(橘子);2.6.4.( ES 9 )Rest/Spread 属性
Rest 参数与 spread 扩展运算符在 ES6 中已经引入不过 ES6 中只针对于数组在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
//rest 参数
function connect({host, port, ...user}){console.log(host); // 127.0.0.1console.log(port); // 3306console.log(user); // { username: root, password: root, type: master }
}connect({host: 127.0.0.1,port: 3306,username: root,password: root,type: master
});//对象合并
const teamOne {a : 王小二,b : 李小三
}const teamTwo {c : 赵小四,d : 张不开,e : 刘小六
}const team {...teamOne,...teamTwo
}console.log(team) //{a: 王小二, b: 李小三, c: 赵小四, d: 张不开, e: 刘小六}2.7. 扩展Map
ES6 提供了 Map 数据结构。
它类似于对象也是键值对的集合。但是“键”的范围不限于字符串各种类型的值包括对象都可以当作键。
Map会按照插入的顺序来迭代元素而对象中的键值对没有固定的顺序。
Map 也实现了iterator 接口所以可以使用『扩展运算符』和『for…of…』进行遍历。
2.7.1.创建和初始化
// 创建一个空 Map
let map1 new Map();// 使用数组形式初始化 Map
let map2 new Map([[name, 王小二],[123, abc],[{ key: objectKey }, Value for object key]
]);
console.log(map2);
// 使用可迭代对象如另一个 Map 或 Set初始化
let obj { a: 1, b: 2 };
let entries Object.entries(obj);
let map3 new Map(entries);console.log(map3); // Map(2) { a 1, b 2 }2.7.2.Map 的属性和方法 size 返回 Map 的元素个数 set 增加一个新元素返回当前 Map get 返回键名对象的键值对数组 has 检测 Map 中是否包含某个元素返回 boolean 值 clear 清空集合返回 undefined
//声明 Map
let m new Map();//添加元素
m.set(name,王小二);
m.set(sayHello, function(){console.log(大家好!!);
});
let key {study : JAVA
};
m.set(key, [spring,mybatis,springmvc]);//size
console.log(m.size);//删除
m.delete(name);
//获取
console.log(m.get(name));
console.log(m.get(sayHello));
console.log(m.get(key));//清空
// m.clear();//遍历
for(let v of m){console.log(v);
}console.log(m);2.8.数组Array 扩展
在 ES6ECMAScript 2015中JavaScript 对 Array 对象进行了多个重要扩展和改进以增强数组操作的便利性和性能。
2.8.1.主要的 新特性
2.8.1.1.扩展运算符 (...)
可用于解构赋值、复制数组以及将数组转换为参数序列。
let arr1 [1, 2, 3];
let arr2 [...arr1]; // 复制数组[1, 2, 3]
let combined [0, ...arr1, 4]; // 合并数组[0, 1, 2, 3, 4]
function logArgs(...args) {console.log(args);
}
logArgs(...arr1); // 输出[1, 2, 3]2.8.1.2.Array.from()
将类数组对象或可迭代对象转换为真正的数组。
let arrayLike { 0: a, 1: b, length: 2 };
let arr Array.from(arrayLike); // 转换为[a, b]2.8.1.3.Array.of()
根据传入的参数创建一个新数组。
let arr Array.of(1, 2, 3); // 创建[1, 2, 3]2.8.1.4.( ES 7 )Array.prototype.includes()
检查数组是否包含某个指定的值。
let arr [1, 2, 3];
console.log(arr.includes(2)); // 输出true2.8.1.5…参数与展开语法在数组方法中的应用
例如在 Math.max() 和 Math.min() 中可以使用剩余参数来替代 apply() 方法。
let maxNumber Math.max(...arr); // 获取数组中的最大值2.8.1.6.fill()
填充数组的方法用给定值填充数组的一部分或全部。
let filledArr new Array(5).fill(hello);
console.log(filledArr); // 输出[hello, hello, hello, hello, hello]2.8.1.7.( ES 10 ) flat() / flatMap()
将嵌套数组拉平为一维数组。
let arrs [ [1,2,3], [4,5,6,7], [8,9,10] ];
console.log(arrs.length) //3// 将嵌套数组拉平为一维数组。
let arrs1 arrs.flat()
console.log(arrs1.length) // 10
console.log(arrs1) // 10// 先对数组中的每个元素执行映射函数然后将结果拉平为一维数组。
let arrs2 arrs.flatMap( item Math.max(...item) )
console.log(arrs2) 2.8.1.8.copyWithin()
在数组内部的一个位置复制数组的一部分到另一个位置。
let copyArr [1, 2, 3, 4, 5];
copyArr.copyWithin(0, 3); // 把从下标3开始的元素复制到下标0开始的位置[4, 5, 3, 4, 5]2.8.2.结合箭头函数
2.8.2.1.map()
map() 方法对数组中的每个元素执行给定的回调函数并将回调函数的返回值组成一个新数组返回。
它可以用于对原始数组中的每个元素进行处理并返回一个处理后的新数组。
let numbers [1, 2, 3, 4, 5];
let squared numbers.map(n n * n); // 映射[1, 4, 9, 16, 25]2.8.2.2.reduce()
reduce() 为数组中的每一个元素依次执行回调函数不包括数组中被删除或从未被赋值的元素 arr.reduce(callback,[initialValue]) callback () 的参数
1、previousValue 上一次调用回调返回的值或者是提供的初始值initialValue 2、currentValue 数组中当前被处理的元素 3、index 当前元素在数组中的索引 4、array 调用 reduce 的数组
let arr [2, 40, -10, 6]
let result arr.reduce( (a,b){console.log(上一次处理后 a);console.log(当前正在处理 b);return a b;
},100 );
console.log(result)// 运行结果// 上一次处理后100
// 当前正在处理2
// 上一次处理后102
// 当前正在处理40
// 上一次处理后142
// 当前正在处理-10
// 上一次处理后132
// 当前正在处理6
// 1382.8.2.3.filter()
方法用于过滤数组中的元素返回满足给定条件的新数组。
它可以通过指定一个回调函数来筛选出需要的元素该方法返回一个新数组。
// 筛选出数组中偶数
let numbers [1, 2, 3, 4, 5, 6, 7, 8, 9];
let evenNumbers numbers.filter(number number % 2 0);
console.log(evenNumbers); // 输出[2, 4, 6, 8]// 从用户对象列表中筛选出年龄大于等于18岁的用户
let users [{ id: 1, name: 王小二, age: 20 },{ id: 2, name: 李小三, age: 17 },{ id: 3, name: 赵小四, age: 22 },{ id: 4, name: 张不开, age: 16 }
];
let adults users.filter(user user.age 18);
console.log(adults);
// 输出
// [
// { id: 1, name: 王小二, age: 20 },
// { id: 3, name: 赵小四, age: 22 }
// ]// 筛选非空字符串
let strings [apple, , 张不开, null, undefined , 123];
let nonEmptyStrings strings.filter(str str str.trim().length 0);
console.log(nonEmptyStrings);
// 输出[apple, 张不开, 123]2.8.2.4.find()
find(): 返回数组中满足提供的测试函数的第一个元素的值否则返回 undefined。
let arr [ 1, 2, 3, 4, 5, 6]
let found arr.find(item item 3); // 返回第一个大于3的元素
console.log( found )let foundIndex arr.findIndex(item item 3); // 返回第一个大于3的元素
console.log( foundIndex )2.8.2.5.迭代器方法
entries(), keys(), values() 提供了迭代器接口。
let arr [ 1, 2, 3, 4, 5, 6]
for (let [index, value] of arr.entries()) {console.log(index, value);
}2.9. 扩展Set
ES6 提供了新的数据结构 Set集合。
它类似于数组但成员的值都是唯一的
集合实现了 iterator 接口所以可以使用『扩展运算符』和『for…of…』进行遍历
2.9.1.集合的常用属性和方法 size 返回集合的元素个数 add 增加一个新元素返回当前集合 delete 删除元素返回 boolean 值 has 检测集合中是否包含某个元素返回 boolean 值 clear 清空集合返回 undefined
//声明一个 空 set
let s new Set();
let s2 new Set([王小二,李小三,赵小四,张小三,李小三]);
console.log(s2);
// //元素个数
console.log(s2.size);
// //添加新的元素
s2.add(刘小六);
s2.add(王小二)
console.log(s2);
// //删除元素
s2.delete(张小三);
console.log(s2);
// //检测
console.log(s2.has(赵小四));
// //清空
// s2.clear();
// console.log(s2);
//
for(let v of s2){console.log(v);
}2.9.2.应用
let arr [1,2,3,4,5,4,3,2,1];
//1. 数组去重
// let result [...new Set(arr)];
// console.log(result);//2. 交集 has()
let arr2 [4,5,6,5,6];
// let result [...new Set(arr)].filter(item {
// let s2 new Set(arr2);// 4 5 6
// if(s2.has(item)){
// return true;
// }else{
// return false;
// }
// });
// // let result [...new Set(arr)].filter(item new Set(arr2).has(item));
// console.log(result);//3. 并集
// let union [...new Set([...arr, ...arr2])];
// console.log(union);//4. 差集
// let diff [...new Set(arr)].filter(item !(new Set(arr2).has(item)));
// console.log(diff);2.10. 数值扩展
2.10.1.Number新增方法
2.10.1.1.Number.EPSILON Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16 function equal(a, b){if(Math.abs(a-b) Number.EPSILON){return true;}else{return false;}
}
console.log(0.1 0.2 0.3);
console.log(equal(0.1 0.2, 0.3))2.10.1.2.二进制和八进制
ES6 提供了二进制和八进制数值的新的写法分别用前缀 0b 和 0o 表示。
let b 0b1010; // 二进制
let o 0o777; // 八进制
let d 100; // 十进制
let x 0xff; // 十六进制
console.log(x);2.10.1.3.Number.isFinite()
Number.isFinite() 用来检查一个数值是否为有限的
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100/0)); // false
console.log(Number.isFinite(Infinity)); // false2.10.1.4.Number.parseInt() 与 Number.parseFloat()
ES6 将全局方法 parseInt 和 parseFloat移植到 Number 对象上面使用不变。
console.log(Number.parseInt(5211314love)); // 5211314
console.log(Number.parseFloat(3.1415926神奇)); // 3.14159262.10.1.5.Number.isInteger
Number.isInteger() 用来判断一个数值是否为整数
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(2.5)); // false2.10.2.Math新增方法
2.10.2.1.Math.sign
判断一个数到底为正数 负数 还是零
console.log(Math.sign(100)); // 1
console.log(Math.sign(0)); // 0
console.log(Math.sign(-20000)); // -12.10.2.2.Math.trunc
用于去除一个数的小数部分返回整数部分。
console.log(Math.trunc(3.5)); // 32.10.2.3.( ES 7 )幂运算新写法
在 ES7 中引入指数运算符「**」用来实现幂运算功能与 Math.pow 结果相同 console.log(2 ** 10);// console.log(Math.pow(2, 10));2.10.3.( ES 11 ) BigInt
更大的数据范围, 只能是整数
//大整形
let n 521n;
console.log(n, typeof(n)); // 521n bigint//函数
// let n 123;
console.log(BigInt(n)); // 123n
console.log(BigInt(1.2)); // Uncaught RangeError: The number 1.2 cannot be converted to a BigInt because it is not an integer//大数值运算
let max Number.MAX_SAFE_INTEGER; // 9007199254740991
console.log(max); // 9007199254740991
console.log(max 1); // 9007199254740992
console.log(max 2); // 9007199254740993console.log(BigInt(max)) // 9007199254740991n
console.log(BigInt(max) BigInt(1)) // 9007199254740992n
console.log(BigInt(max) BigInt(2)) // 9007199254740993n2.11. ( ES 9 ) 正则表达式
2.11.1.( ES 9 ) 命名捕获组
同时 匹配多个信息, 之前的处理方式
//声明一个字符串
let str a hrefhttp://www.baidu.com百度/a;//提取 url 与 『标签文本』
const reg /a href(.*)(.*)\/a/;//执行
const result reg.exec(str);console.log(result);
// 输出:
// [
// a hrefhttp://www.baidu.com百度/a,
// http://www.baidu.com,
// 百度,
// index: 0,
// input: a hrefhttp://www.baidu.com百度/a,
// groups: undefined
// ]
console.log(result[1]); // http://www.baidu.com
console.log(result[2]); // 百度ES 9 允许命名捕获组使用符号 ?name ,这样获取捕获结果可读性更强
let str a hrefhttp://www.baidu.com百度/a;
//分组命名
const reg /a href(?url.*)(?text.*)\/a/;const result reg.exec(str);
console.log(result)
// 输出:
// [
// a hrefhttp://www.baidu.com百度/a,
// http://www.baidu.com,
// 百度,
// index: 0,
// input: a hrefhttp://www.baidu.com百度/a,
// groups:{ text:百度, url:http://www.baidu.com },
// length : 3
// ]
console.log(result.groups.url); // http://www.baidu.com
console.log(result.groups.text); // 百度2.11.2.( ES 9 )反向断言
ES9 支持反向断言通过对匹配结果前面的内容进行判断对匹配进行筛选。
//声明字符串
// let str 电话号码13123456789年龄23岁;
let str 电话号码13987654321年龄45岁;
//正向断言
const reg1 /\d(?岁)/;
const result1 reg1.exec(str);
console.log(result1);//反向断言
const reg2 /(?年龄)\d/;
const result2 reg2.exec(str);
console.log(result2);2.11.3.( ES 9 )dotAll 模式
正则表达式中点.匹配除回车外的任何单字符标记s改变这种行为
允许行终止符出现
//dot . 元字符 除换行符以外的任意单个字符
let str ullia热辣滚烫/ap上映日期: 2024-02-10/p/lilia你好, 李焕英/ap上映日期: 2021-02-12/p/li/ul;
//声明正则
// const reg /li\sa(.*?)\/a\sp(.*?)\/p/;
const reg /li.*?a(.*?)\/a.*?p(.*?)\/p/gs;
//执行匹配
// const result reg.exec(str);
let result;
let data [];
while(result reg.exec(str)){data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);2.11.4.( ES 11 ) String.prototype.matchAll
得到 正则批量匹配结果
let str ullia肖生克的救赎/ap上映日期: 1994-09-10/p/lilia阿甘正传/ap上映日期: 1994-07-06/p/li/ul;//声明正则
const reg /li.*?a(.*?)\/a.*?p(.*?)\/p/sg//调用方法
const result str.matchAll(reg);// for(let v of result){
// console.log(v);
// }const arr [...result];console.log(arr);
