ES6基础语法参考_jqueryes6语法中参数的各种写法-CSDN博客

本文链接：https://blog.csdn.net/weixin_39950258/article/details/136880768

ES6基础语法参考

单词掌握

promise中使用  -许诺
resolve 解决
reject  拒绝
reason  原因
const 恒定的
iterator  迭代器

const静态变量

不可改变
  const SCHOOL = 123;
  // SCHOOL =567;
 数组可以加
  const ARR = ['123','456'];
  ARR.push('789')
  console.log(ARR);

解构赋值

const zhao = ['123','456','789']
let [a,b,c] = zhao;

console.log(a)
console.log(b)
console.log(c)
const cc = {
    age:'21',
    name:'哈哈',
    eat:function (){
        console.log("吃个饭")
    }
}
let  {eat,age} = cc
console.log(age)
eat();

模板参数

let name = '打工仔';
let str = `${name}是世界上最苦逼的人`;
console.log(str)

对象简化写法

let name = '刘哈哈';
let eat = function (){
    console.log('吃个蛋')
}
let rxx = {
    name,
    eat,
    hahhaha(){
        console.log('1231231')
    }
}
rxx.eat();
rxx.hahhaha();
console.log(rxx.name)

箭头函数

箭头函数内this是静态的
//需求-1  点击 div 2s 后颜色变成『粉色』
let div = document.getElementById('ad')
div.addEventListener('click',function (){
    setTimeout(()=>{
        this.style.background='pink'
    },0)
});
//需求-2  从数组中返回偶数的元素
const xiii = [1,2,3,4,5,6,7,8,9,10];
const xiii2 = xiii.filter((item)=>{
    if(item>5){
        return true;
    }
    return false;
})
console.log(xiii2);
const xii3 = [1,2,3,4,5,6,7,8,9,10];
const xii31 = xii3.filter(tiem=>tiem>1);;
console.log(xii31);

const ccc = {
    name:'测试',
    aa(){
        console.log(this.name)
        return 1;
    },
    bb:function (){
        console.log(this.name)
        return 1;
    },
    cc:()=>{
        console.log(22222222)
        console.log(this.name)
    }
}
console.log(ccc.aa())

console.log(ccc.bb())
ccc.cc()

解构赋值{}

花括号内填写同名变量或者函数名字，可以不用挨个赋值
let connect = ({name='没有名字',age,pwd})=>{
    console.log(name)
    console.log(age)
    console.log(pwd)
    // arguments a给油门丝
}
connect({
    // name:'测试',
    age:12,
    pwd:'xxxsss'
});

rest（…args）和argument接收参数

function dd(){
    console.log(arguments)
}
dd(1,2,3,4,5,6);
function dd2(...args){
    console.log(args)
}
dd2('好久啊哈','asdas','收到','xs的')

const ttt = ['张三','李四','王五'];
dd(ttt)
dd(...ttt)
console.log("字符串："+"-123"[0])

扩展运算符

...数组名字，...对象名字可以用中括号合并为数组结构
let arr = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr,...arr2]
console.log(arr3);
console.log()

Symbol

在对象{}里面添加自定义的Symbol.iterator属性可以自定义返回
[Symbol.iterator](){
    let index = 0;
    let _this = this;
    return {
        next:function (){
            if(index <_this.stus.length){
                const res = {
                    value:_this.stus[index],
                    done:false
                };
                index++;
                return res;
            }else{
                return {
                    value:undefined,
                    done:true
                }
            }
        }
    }
}

Promise异步处理数据（函数内要定义异步）

//异步，例如setTimeOut() ,nodejs读取文件，网络IO
//一般第一个参数resolve，第二参数reject
let a = new Promise(function (resolve,reject){
    setTimeout(()=>{
        if(true){
            let c  =  '获取用户数据';
            resolve(c);
        }else{
            let b  =  '失败';
            reject(b)
        }
    },1000)
});
//成功返回value
a.then(function (value){
    //成功
    console.log(value)
    //失败返回reason
},function (reason){
    //失败
    console.log(reason)
})


//使用nodejs异步
const fs = require('fs');
// fs.readFile('./res/a.tex',function (err,data){
//     if(err) throw err;
//     console.log(data.toString())
// })

let p = new Promise(function (resolve, reject){
    fs.readFile('./res/a.tex',function (err,data){
        if(err)reject(err)
        return resolve(data);
    });
});
p.then(function (value){
    console.log(value.toString())
},function (reason){
    console.log(reason)
});

//node 文件名.js

//nodejs 读取多个文件拼接例子
const fs = require('fs');
// Promise
let p = new Promise((resole,reject)=>{
    fs.readFile('./res/a.txt',(err,data)=>{
        if(err) reject(err);
        return resole(data);
    });
});

p.then(value =>{
    return new Promise((resole,reject)=>{
        fs.readFile('./res/b.txt',(err,data)=>{
            return resole([value,data]);
        });
    });
}).then(value =>{
    return new Promise((resole,reject)=>{
        fs.readFile('./res/c.txt',(err,data)=>{
            value.push(data)
            return resole(value);
        });
    });
}).then(value => {
    console.log(value.join("\n\r"))
})

集合操作

//集合操作
let a = new Set(['你好','你好','你好啊']);//定义集合
console.log(a,typeof a);//输出类型object
console.log(a);//输出
console.log(a.has('你好'));//查询是否存在
console.log(a.has('你好222'));//查询是否存在
a.delete('你好')//删除
console.log(a);
a.add('你好222')//添加
console.log(a);
a.clear();//清空
console.log(a);

//对比操作
const arr=  [1,1,2,3,4,5];
const arr2=  [3,3,4,5,6,6];
//数组去重,
console.log([...new Set(arr)]);
//求交集
console.log([...new Set(arr)].filter(item=>new Set(arr).has(item)));
//求并集
console.log([...new Set([...new Set(arr),...new Set(arr2)])]);
//求差集
console.log([...new Set(arr)].filter(item=>new Set(arr).has(item)));
console.log([...new Set(arr2)].filter(item=>new Set(arr).has(item)));

Map操作类似键值对哈希

//基础操作
let map1 = new Map();
map1.set('name','测试');
console.log(map1);//Map(1) { 'name' => '测试' }
map1.set('haha',function (){
    console.log('这是哈哈');
});
console.log(map1);//Map(2) { 'name' => '测试', 'haha' => [Function (anonymous)] }
map1.get('haha')()//这是哈哈

let key = {
    '测试1':'好的'
}
map1.set(key,['收阿德1','剑剩','概论']);
console.log(map1);
// Map(3) {
//     'name' => '测试',
//         'haha' => [Function (anonymous)],
//         { '测试1': '好的' } => [ '收阿德1', '剑剩', '概论' ]
// }

类操作

//ES5
function Phone(brand,price){
    this.brand = brand;
    this.price = price;
}
Phone.name= '属于类的值';
// Phone.prototype.name= '对象的值';
Phone.prototype.call = function (){
    console.log('我可以打电话')
};
let huawei = new Phone('huawei',1599);
console.log(huawei)
console.log(huawei.name)//这是错误的 undefined
// 当设定Phone.prototype.name值后就可以输出了
console.log(Phone.name)//这是错误的 Phone
huawei.call()

class Shouji{
    static name = '就叫你小王八';
    //初始化
    constructor(brand,price) {
        this.brand = brand;
        this.price = price;
    }
    call(){
        console.log('我可以打电话')
    }
}
let xiaomi = new Shouji('xiami',1854);
xiaomi.call();
console.log(xiaomi)
console.log(xiaomi.name)//undefined
console.log(Shouji.name)//就叫你小王八

//ES6
class Phone2{
    constructor(brand,price) {
        this.brand = brand;
        this.price = price;
    }

    photo(){
        console.log('相册')
    }

}
class sPhone extends Phone2{
    static number;
	#age //私有属性
    constructor(brand,price,size) {
        super(brand,price);
        this.brand = brand;
        this.price = price;
        this.size = size;
    }
    wechat(){
       console.log('可以使用微信')
    }
    //方法的重写直接同名覆盖
    photo(){
        console.log('子类相册')
    }

    get number(){
        //this.参数  的参数无法触发
        console.log('当调用读取number时参数值的时候触发了')
        return 'xxx';
    }
    set number(value){
        //this.参数  的参数无法触发
        console.log('当调用设置number时参数值的时候触发了')
        return 'xxx';
    }
}
let vivo = new sPhone('vivo',1499,5.3);
console.log(vivo)
vivo.wechat();
vivo.photo();
vivo.number;
vivo.number = '15';//

数值判断，方法扩展


let n2 = Number.MAX_SAFE_INTEGER;//最大整数
console.log(Number.MAX_SAFE_INTEGER + 2 )//会出问题
BigInt(n2) + BigInt(3);//123n 大整形只能和大整形相加
// Number.EPSILON 是JavaScript最小数单位
Math.abs('');//求绝对值
if(Math.abs(0.1+0.2) - 0.3<Number.EPSILON){
    console.log('认为数是一致的')
}
//禁止
let a = 0b1010;//0b开头是2进制
let b = 0o777;//0b开头是8进制
let d = 0xff;//0x开头是16进制
//检测一个数值是否为有限数
Number.isFinite(4/2) //true
Number.isFinite(100/0) //false
Number.isFinite(isFinite) //false isFinite无穷
Number.isNaN();   //检测数值是否是NaN
Number.parseInt();  //字符串转为整数;
Number.parseFloat();//字符串转为小数
Math.trunc() //去除数字的小数部分
Math.sign()  //检测一个数是正数/负数/0    正：1/0：0/负：-1
// 判断数值是否一样
// NaN 与任何数字作比较都不相等，自己也不行
console.log(NaN === NaN) //false
Object.is(123,123)//true 类似全等
Object.is(NaN,NaN)//true
//对象合并  后面的覆盖前面的值
const obj1 = {
    name:'test1',
    age:'25'
}
const obj2 = {
    name:'张三',
    class:'五年级二班'
}
const obj3 = Object.assign(obj1,obj2);
console.log(obj3)//{ name: '张三', age: '25', class: '五年级二班' }
//设置原型对象
const school = {
    name:'test'
}
const  sc_1 = {
     banji:['1班','2班','3班']
}
Object.setPrototypeOf(school,sc_1)//设置完成后在控制台的_proto_找到
Object.getPrototypeOf(school)//获取设置的值
const arr4 = ['张三','李四'];
arr4.includes('张三');//判断字符是否在数组内
console.log(2**10);//1024 幂运算2的10次方
console.log(Math.pow(2,10));//1024 幂运算2的10次方
const  aa = {
    name:'哈哈',
    city:['北京','上海','广州','杭州']
}
//对象转数组
const arrxx  = Object.entries(aa);
console.log(arrxx)//ES8[ [ 'name', '哈哈' ], [ 'city', [ '北京', '上海', '广州', '杭州' ] ] ]
console.log(Object.fromEntries(arrxx))//entries逆运算
//数组转map
const m1 = new Map(arrxx);
console.log(m1)//ES8 Map(2) { 'name' => '哈哈', 'city' => [ '北京', '上海', '广州', '杭州' ] }


//正则提取在(这个位置.*?)加上?<url>可以给抓到的数据起别名
let str = '<a href="https://www.baidu.com">百度</a>';
const reg = /<a href="(?<url>.*)>(?<aname>.*)<\/a>/
const result = reg.exec(str);
console.log(result)
console.log(result.groups.url)
console.log(result.groups.aname)
//正则匹配所有
let str = '<a href="https://www.baidu.com">百度</a><a href="https://www.douyin.com">抖音</a>';
const reg = /<a href="(.*)>(.*)<\/a>/g
const result = reg.exec(str);
console.log(result)
const resul2t = str.matchAll(str);
console.log([...resul2t])
//去除空格
let str = " asdkasbd ";
console.log(str.trim())
console.log(str.trimStart())
console.log(str.trimEnd())

const str = Symbol('测试');
console.log(str.description);//测试 读取Symbol的描述字符

const arr34 = [1,2,3,4,5,6];
const arr35 = arr34.flatMap(item=>{
    return [item * 10 ]
})
console.log(arr35)//[ 10, 20, 30, 40, 50, 60 ]转为一维数组和map处理合并一起

//可选链操作符
const conf1 = {
    db:{
        host:'嘎哈',
        name:'下划线很喜欢'
    },
}
function conf(config){
    //这样写自动返回最后一个值
    const name = config && config.db&&config.db.name;//下划线很喜欢
    console.log(name)
    const xx = config && config.db&&config.db.xx;
    console.log(xx)//undefined

    const name3 = config?.db?.name;//不会报错，最多undefined
    console.log(name3)//下划线很喜欢 
}
conf(conf1);

console.log(globalThis) // 全局对象  可以忽略任何环境js nodejs

引入模块化js文件

export 暴漏
import * as m1 from 引入

aa1.js  暴漏-1
export let name ='测试2';
export function getx(){
    return '123';
}
aa2.js 暴漏-2
let name ='测试3';
export {
    name
}
aa3.js 暴漏-3 
export default {
    name:'哈哈'
}
//console.log(m3.default.name)调用方法


<script type="module">
    import * as m1 from "./js/aa1.js";
    import {name,getx} from "./js/aa1.js";
    import {name as name1,getx as getx2} from "./js/aa1.js";//别名
    //default 默认暴漏
    import {default as m4} from "./js/aa3.js";
    //只针对 default 默认暴漏
    import m5 from "./js/aa3.js";
</script>
<script src="./js/app.js" type="module"></script>


//动态加载js
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',()=>{
    import('./hello.js').then(moudle=>{
        console.log(moudle)
        moudle.hello()
    })
});

把语法ES6转为ES5

//安装三个工具
初始化npm
mpm init --yes
npm i -D @babel/cli @babel/core
npm i -D @babel/preset-env
npm i   browserify -D
bable-cli bable命令行工具
bable-preset-env 预设包可以把最新的ES特性转为ES5特性
browserify 打包工具（可以使用webpack）
-D 开发依赖
//把js目录重新编译到js2
npx babel js  --out-dir js2 --presets @babel/preset-env
npx browserify js2/app.js -o js2/bundle.js

//重要，语法不能卸载html文件内

ES6使用npm Jquery包

//安装jquery
npm i jquery
import $ from 'jquery';//引入包
$('body').css('background','pink'); //设置背景颜色为粉色
npx babel js  --out-dir js2 --presets @babel/preset-env
npx browserify js2/app.js -o js2/bundle.js
引入bundle.js
//重要，语法不能卸载html文件内

ES8新特性

//async 返回promise
async  function tex(){
    return '正确的结果对象Promise';
}
async  function tex2(){
    return new Error('失败的结果对象Promise，抛出错误');
}
async  function tex3(){
    return new Promise((resolve,reject)=>{
        resolve('我返回啥tex3返回啥');
    });
}
tex().then(value => console.log(value));//我返回啥tex3返回啥
// tex2()//抛出错误
tex3().then(value => console.log(value));//我返回啥tex3返回啥


//使用sync+awit+Promise读取文件
//awit 只能在 sync内使用
const fs = require('fs');
function read_a (){
    return new Promise((resolve,reject)=>{
        fs.readFile('./res/a.txt',(err,data)=>{
            if(err) reject(err);
            return resolve(data);
        })
    })
}
function read_b (){
    return new Promise((resolve,reject)=>{
        fs.readFile('./res/b.txt',(err,data)=>{
            if(err) reject(err);
            return resolve(data);
        })
    })
}
function read_c (){
    return new Promise((resolve,reject)=>{
        fs.readFile('./res/c.txt',(err,data)=>{
            if(err) reject(err);
            return resolve(data);
        })
    })
}
async function readall(){
    const a = await read_a();
    const b = await read_b();
    const c = await read_c();
    console.log(a.toString());
    console.log(b.toString());
    console.log(c.toString());
}
readall()


//发送ajax


function sendAjax(url){
    return new Promise((resolve, reject)=>{
        const x = new XMLHttpRequest();
        x.open('GET',url);
        x.send();
        x.onreadystatechange=function (res){
            if(x.readyState == 4){
                if(x.status >= 200 && x.status<=300 ){
                    return resolve(x.response);
                }else{
                    reject('err');
                }
            }
        };
    })
}
async function se(){
    const baidu = await sendAjax('http:/');
    console.log(baidu)
}
se();




const p1 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        return resolve('模拟成功');
    },1000);
})
const p2 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        // if(1) reject('模拟失败');//Promise.all抛出错误
        return resolve('成功');
    },1000);
})
//将Promise的值放在一个组内
//所有成功才返回成功

Promise.all([p1,p2]);
//任何时候返回成功，状态在返回值显示
Promise.allSettled([p1,p2]);