相关视频链接:尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili
目录
2.16.2. Number.isFinite() 与 与 Number.isNaN()
2.16.3. Number.parseInt() 与 与 Number.parseFloat()
2.16.6 Math.sign 判断一个数到底为正数 负数 还是零
2.12 Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。
1) Promise 构造函数: Promise (excutor) {}
2) Promise.prototype.then 方法
3) Promise.prototype.catch 方法
<script>
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){
setTimeout(function(){
//
// let data = '数据库中的用户数据';
// resolve
// resolve(data);
let err = '数据读取失败';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
//若读取成功,则调用第一个函数,失败则调用第二个函数
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
})
</script>
Promise.prototype.then 方法
<script>
//创建 promise 对象
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('用户数据');
// reject('出错啦');
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值
// const result = p.then(value => {
// console.log(value);
// //1. 非 promise 类型的属性
// // return 'iloveyou';
// //2. 是 promise 对象
// // return new Promise((resolve, reject)=>{
// // // resolve('ok');
// // reject('error');
// // });
// //3. 抛出错误
// // throw new Error('出错啦!');
// throw '出错啦!';
// }, reason=>{
// console.warn(reason);
// });
//链式调用
p.then(value=>{
}).then(value=>{
});
Promise.prototype.catch 方法
<script>
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
//设置 p 对象的状态为失败, 并设置失败的值
reject("出错啦!");
}, 1000)
});
// p.then(function(value){}, function(reason){
// console.error(reason);
// });
p.catch(function(reason){
console.warn(reason);
});
</script>
2.13. Set
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
1) size 返回集合的元素个数
2) add 增加一个新元素,返回当前集合
3) delete 删除元素,返回 boolean 值
4) has 检测集合中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined
<script>
//声明一个 set
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
//元素个数
// console.log(s2.size); //运行结果:4
//添加新的元素
// s2.add('喜事儿'); //'大事儿','小事儿','好事儿','坏事儿','小事儿','喜事儿'
//删除元素
// s2.delete('坏事儿'); //'大事儿','小事儿','好事儿','小事儿'
//检测
// console.log(s2.has('糟心事')); //false,有这个元素返回true,没有返回false
//清空
// s2.clear(); //清空s2中的内容
// console.log(s2);
for(let v of s2){
console.log(v); //遍历s2
}
</script>
set集合实践
let arr = [1,2,3,4,5,4,3,2,1];
//1. 数组去重
// let result = [...new Set(arr)];
// console.log(result);
//2. 交集
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);
has(),fliter()的用法
链接:js中的find(),filter(),has()的用法和区别_努力_才幸福的博客-CSDN博客_js的has函数
2.14 Map
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。
Map 的属性和方法:
1) size 返回 Map 的元素个数
2) set 增加一个新元素,返回当前 Map
3) get 返回键名对象的键值
4) has 检测 Map 中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined
//声明 Map
let m = new Map();
//添加元素
m.set('name', '尚硅谷'); //第一个是键,第二个是值
m.set('change', function() {
console.log("我们可以改变你!!");
});
let key = {
school: 'ATGUIGU'
};
m.set(key, ['北京', '上海', '深圳']); //添加元素
//size,元素个数
// console.log(m.size);
//删除
// m.delete('name');
//获取
// console.log(m.get('change'));
// console.log(m.get(key));
//清空
// m.clear();
//遍历
for (let v of m) {
console.log(v);
}
// console.log(m);
2.15. class 类
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
1) class 声明类
2) constructor 定义构造函数初始化
//ES5
function Phone(brand, price){
this.brand = brand;
this.price = price;
}
//添加方法
Phone.prototype.call = function(){
console.log("我可以打电话!!");
}
//实例化对象
let Huawei = new Phone('华为', 5999);
Huawei.call();
console.log(Huawei);
//ES6
//class
class Shouji{
//构造方法 名字不能修改
constructor(brand, price){
this.brand = brand;
this.price = price;
}
//方法必须使用该语法, 不能使用 ES5 的对象完整形式
call(){
console.log("我可以打电话!!");
}
}
let onePlus = new Shouji("1+", 1999);
console.log(onePlus);
3) extends 继承父类
4) super 调用父级构造方法
5) static 定义静态方法和属性
function Phone(){
}
Phone.name = '手机';
Phone.change = function(){
console.log("我可以改变世界");
}
let nokia = new Phone();
console.log(nokia.name);
nokia.change();
以上写法会报错
name,change属于Phone这个函数对象,不属于nokia这个实例对象
下面的为正确写法
class Phone{
//静态属性
static name = '手机';
static change(){
console.log("我可以改变世界");
}
}
let nokia = new Phone();
console.log(nokia.name); //undefined
console.log(Phone.name); //手机
6) 父类方法可以重写
综合:
// 父类
class Phone {
// 构造方法
constructor(brand, color, price) {
this.brand = brand;
this.color = color;
this.price = price;
}
// 对象方法
call() {
console.log('我可以打电话!!!')
}
}
// 子类
class SmartPhone extends Phone {
constructor(brand, color, price, screen, pixel) {
super(brand, color, price);
this.screen = screen;
this.pixel = pixel;
}
// 子类方法
photo(){
console.log('我可以拍照!!');
}
playGame(){
console.log('我可以玩游戏!!');
}
// 方法重写
call(){
console.log('我可以进行视频通话!!');
}
// 静态方法
static run(){
console.log('我可以运行程序')
}
static connect(){
console.log('我可以建立连接')
}
}
补充:
class中get与set的用法
class Phone{
//小括号里的为形参,{ }里的为实参
get price(){
console.log("价格属性被读取了");
return 'iloveyou';
}
// set后面的小括号里必须有一个形参
set price(newVal){
console.log('价格属性被修改了');
}
}
//实例化对象
let s = new Phone();
// console.log(s.price);
s.price = 'free';
2.16. 数值扩展
Number.EPSILON是JavaScript表示的最小精度
function equal(a, b){
if(Math.abs(a-b) < Number.EPSILON){
return true;
}else{
return false;
}
}
console.log(0.1 + 0.2 === 0.3); //false
console.log(equal(0.1 + 0.2, 0.3)); //true
}
2.16.1. 二进制和八进制
ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。
let b = 0b1010; //10
let o = 0o777; //511
let d = 100; //100
let x = 0xff; //255
console.log(x);
2.16.2. Number.isFinite() 与 与 Number.isNaN()
Number.isFinite() 用来检查一个数值是否为有限的
console.log(Number.isFinite(100)); //true
console.log(Number.isFinite(100/0)); //false
console.log(Number.isFinite(Infinity)); //false
Number.isNaN() 用来检查一个值是否为 NaN
2.16.3. Number.parseInt() 与 与 Number.parseFloat()
ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变。
console.log(Number.parseInt('5211314love')); //5211314
console.log(Number.parseFloat('3.1415926神奇')); //3.1415926
2.16.4. Math.trunc
用于去除一个数的小数部分,返回整数部分
console.log(Math.trunc(3.5)); //3
2.16.5. Number.isInteger
Number.isInteger() 用来判断一个数值是否为整数
console.log(Number.isInteger(5)); //true
console.log(Number.isInteger(2.5)); //false
2.16.6 Math.sign 判断一个数到底为正数 负数 还是零
console.log(Math.sign(100)); //1
console.log(Math.sign(0)); //0
console.log(Math.sign(-20000)); //-1
2.17. 对象扩展
ES6 新增了一些 Object 对象的方法
1) Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN)
console.log(Object.is(120, 120));// true
console.log(Object.is(NaN, NaN));// true
console.log(NaN === NaN);// false
2) Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象
const config1 = {
host: 'localhost',
port: 3306,
name: 'root',
pass: 'root',
test: 'test'
};
const config2 = {
host: 'http://atguigu.com',
port: 33060,
name: 'atguigu.com',
pass: 'iloveyou',
test2: 'test2'
}
console.log(Object.assign(config1, config2));
//结果:
//host: 'http://atguigu.com',
//port: 33060,
//name: 'atguigu.com',
//pass: 'iloveyou',
//test: 'test',
//test2: 'test2'
3) __proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型
const school = {
name: '尚硅谷'
}
const cities = {
xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);