get 和 set

class Phone {
    // 读取时调用这个函数
    get price(){
        console.log("价格属性被读取了");
    }
    // 设置时调用这个函数,要加形参,不然报错
    set price(newVal){
        console.log('价格属性被修改了');
    }
}
let s = new Phone();
console.log(s.price); // 价格属性被读取了
s.price = 'free'; // 价格属性被修改了

ES6数值扩展

// 0.number.EPSILON 是javasc表示的最小精度
// EPSILON 属性的值接近于2.220446049250........
// 1.二进制和八进制
    let b = 0b1010; // 10
    let o = 0o777; // 511
// 2.number.isFinite 检测一个数组是否为有限数
    console.log(Number.isFinite(100)); // true
    console.log(Number.isFinite(100/0)); // false
    console.log(Number.isFinite(Infinity)); // false
// 3.Number.isNaN 检测一个数值是否为NaN
    console.log(Number.isNaN(123)); // false
// 4.Number.parseInt Number.parseFloat 字符串转整数
    console.log(Number.parseInt('3132132132asdad')); // 3132132132
    console.log(Number.parseFloat('323130s')); // 323130
// 5.Number.isInteger 判断一个数是否为整数
    console.log(Number.isInteger(5)); // true
    console.log(Number.isInteger(2.5)); // false
// 6.Math.trunc 将数字的小数部分抹掉
    console.log(Math.trunc(3.5)); // 3
// 7. Math.sign 判断一个数到底为正数 负数 还是零
    console.log(Math.sign(100)); // 1
    console.log(Math.sign(0)); // 0
    console.log(Math.sign(-100)); // -1

ES6对象方法扩展

// 1.Object.is 判断两个值是否完全相等
    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:'locahost',
            port:3306,
            test: 'test'
        }
        const  config2 = {
            host: 'http:geek',
            port: 33060
        }
        Object.assign(config1,config2);
        // config1,被覆盖,如果有值就覆盖,没有就保留
// 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf
    const school = {
        name : 'Geek'
    }
    const cities = {
        xiaoqu: ['北京','上海','深圳']
    }
    Object.setPrototypeOf(school,cities);
    console.log(school);
    // 原型是cities,原型的原型就是Object了
    console.log(Object.getPrototypeOf(school)); // {xiaoqu: Array(3)}

ES6 模块化

// 模块功能主要是由两个命令构成:export 和 import
// export 命令用于规定模块的对外接口
// import 命令用于输入其他模块提供的功能

// mi1.js
// export let school = 'geek';
// export function teach(){
//  console.log("我们可以交给你技能");
// }

// HTML 应用
// <script type="module">
//  import * as m1 from "./m1.js"
// console.log(m1);
//<script>

// 统一暴露
let school = 'geek';
function as(){
    console.log("asdadad");
}
export {school,as}; // 统一暴露

// 默认暴露
export  default {
    school:'GEEK',
    change:function(){
        console.log("asdadads");
    }
}
// 要用的话就要多写一层
// m3.default.change();

// 引入模块
    // 1.通用的导入方式 import * as m1 from "路径",
    // 2.解构赋值形式 import {school,teach} from "路径",重名会报错,如果重名可以用别名方法,名字 as 别名,default不能直接使用,要写个别名
    // 3.简便形式 只针对默认暴露 import m3 from "路径";

ES7 新特性

// 1.includes 判断数组中是否存在数值
const mingzhu = ['asdad','adas','a123'];
// 判断
console.log(mingzhu.includes('ada1s')); // true
// ** 2的10次方 和 Math.pow一样
console.log(2 ** 10); // 1024
console.log(Math.pow(2,10)); // 1024

ES8 新特性

// async 和 await
// async 和 await两种语法结合可以让异步代码像同步代码一样
// async 函数
// async function fn () {
//     return "adsadasd";
// }
// const result = fn();
// console.log(result);
// async和await 实战
// 封装ajax函数
function sendAjax(url){
    return new Promise((resolve,reject)=>{
        let x = new XMLHttpRequest();
        x.open('GET',url);
        x.send();
        x.onreadystatechange = function(){
            if(x.readyState == 4){
                if(x.status >= 200 && x.status < 300){
                    resolve(x.response);
                }else{
                    reject(x.status);
                }
            }
        }
    })
}
// Promise 方法
const  result = sendAjax("https://api.apiopen.top/getWangYiNews").then(value => {
    console.log(value);
},reason => {});
// async await 方法
async function main() {
    let result = await sendAjax("https://api.apiopen.top/getWangYiNews");
    console.log(result);
    let tianqi = await sendAjax("http://meiriyikan.cn/api/json.php");
    console.log(tianqi);
}
main();

es8对象方法扩展

// 声明对象
const school = {
    name:"Geek",
    cities: ['北京','济宁','深圳'],
    xueke:['前端','后端','运维','PHP']
};
// 获取对象所有的键
console.log(Object.keys(school)); // ["name", "cities", "xueke"]
// // 获取对象的所有值
console.log(Object.values(school)); // ["Geek", Array(3), Array(4)]
// entries
console.log(Object.entries(school));
// 创建Map
const m = new Map(Object.entries(school));
console.log(m.get('xueke'));
//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));

ES9 rest参数和扩展运算符

// ...user,除了前面的两个参数以外剩下都放在user数值中
function tstx({host,port,...user}){
    console.log(host); //localhost
    console.log(user); // {username: "root", password: "root"}
}
tstx({
    host: 'localhost',
    port: 3306,
    username:'root',
    password:'root'
});

Object.fromEntries

// 数组 fromEntries 数组转为对象
    const result = Object.fromEntries([
        ['name','Geek'],
        ['xueke','前端,后端,大数据']
    ]);
    console.log(result); // {name: "Geek", xueke: "前端,后端,大数据"}
// 对象 Entries 对象转为数组
    const arr = Object.entries({
        name: 'Geek',
        xueke: "前端,后端,大数据"
    });
    console.log(arr);
    // 输出结果(2) [Array(2), Array(2)]
        // 0: (2) ["name", "Geek"]
        // 1: (2) ["xueke", "前端,后端,大数据"]
        // length: 2
        // __proto__: Array(0)
// Map对象
    let m = new Map();
    m.set('name','GEEK');
    const result = Object.fromEntries(m);
    console.log(result); // {name: "GEEK"}
    console.log(typeof result); // object

ES10 扩展字符

// trimStart(清除字符串前侧空格) trimEnd(清除字符串后侧空格)
let str = ' iloveyou ';
console.log(str);
console.log(str.trimStart());
console.log(str.trimEnd());

私有属性

  class Person {
        name;
        #age;
        #weight;
        constructor(name,age,weight) {
            this.name = name;
            this.#age = age;
            this.#weight = weight;
        }
        intro(){
            console.log(girl.name); // 小红
            console.log(this.#age); // 18
            console.log(this.#weight); // 45kg
        }
    }
    // 实例化
    const girl = new Person('小红',18,'45kg');
    girl.intro();
    console.log(girl); // 可以输出
    console.log(girl.name);
    console.log(girl.#age); // 报错,获取不到是私有得
    console.log(girl.#weight); // 报错,获取不到是私有得

Promise.allSettled 批量处理异步任务

 // 声明两个Promise对象
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('商品数据 + 1')
            // reject('出错了,老妹');
        },1000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('商品数据 + 2')
            // reject('出错了,老妹');
        },1000)
    })
    // 调用allSettled方法 allSettled 只要有一个返回是成功他得状态就是成功
    const res = Promise.allSettled([p1,p2]);
    // 调用all方法 , all方法 只要有一个失败他得状态就是失败
    const res = Promise.all([p1,p2]);
    console.log(res); // promiseValue 是一个数组,数组里面是 状态(成功-fulfilled,失败-reason)和返回值

可选链操作符

// ?.
function main(config){
    const dbHost = config?.db?.host; // 如果有config,就获取db,如果有db,就获取host
    console.log(dbHost);
}
main({
    db: {
        host: '192.168.1.103',
        username: 'root'
    },
    cache: {
        host: '192.168.1.200',
        username: 'admin'
    }
});

ES11动态的import(懒加载)

import('./js路径').then(module => {
        module.hello();// 这里就可以用引入的方法了
    });  // 返回值是promise对象

ES11 BigInt 大整型

let n = 521n;
console.log(n,typeof n);// 521n "bigint"
// 函数 但是不能使用浮点型来转换
let n = 123;
console.log(BigInt(n));
// 大数值运算
let max = Number.MAX_SAFE_INTEGER; // 最大数
console.log(max + 2); // 已经达到最大不能运算了
console.log(BigInt(max));
console.log(BigInt(max) + BigInt(1)); // BigInt 不能和普通整数做运算,所以要BigInt转一下

ES11 globalthis

//始终指向全局对象,可以在做项目里使用忽略环境直接指向全局变量
console.log(globalThis); // window,全局变量

说点什么
支持Markdown语法
在"ES6笔记(二)"已有3条评论
Loading...