es6学习心得

最新推荐文章于 2023-02-15 16:10:23 发布

嘴巴嘟嘟

最新推荐文章于 2023-02-15 16:10:23 发布

阅读量340

点赞数 1

文章标签： es6 es6/es7

本文链接：https://blog.csdn.net/qq_41961239/article/details/109412880

版权

时刻在更新。。。

在这里插入图片描述

let 定义变量

//声明变量
    //    let a=1;
    //    console.log(a);
    //1、变量不能重复声明
    //2、块级作用域 ：全局，函数，eval
    // {
    //     let a = 'aaaa';
    // }
    // console.log(a);  // 会报错
    //3、不存在变量提升，预解析操作
    // console.log(a);
    // let a=1;
    //4、不影响作用于链
    // {
    //     let a = '1';
    //     function fn(){
    //         console.log(a);  
    //     }
    //     fn() //1
    // }

const 定义常量

在这里插入图片描述

 //声明常量
        // 1、一定要赋初始值
        const A = '123';
        // 2、一般常量使用大写（潜规则）
        const a = '123';//也可以
        // 3、常量的值不能修改
        A = 1;
        // 4、块级作用域
        {
            const B = '234';
        }
        console.log(B); // 报错
        // 5、对于数组和对象的元素修改，不算做对常量的修改，不会报错
        const TEAM = ['1', '2'];
        TEAM.push('3');

结构赋值

//结构赋值
        //数据结构赋值
         const A = ['A','B','C'];
         let [a,b,c] = A;
         console.log(a,b,c); //A B C
        //对象的解构
        const obj = {
            name:'张三',
            age:23,
            play :function(){
                console.log("我是一个路人")
            }
        };
        // let {name,age,play} = obj;
        let {play} = obj;
        play(); //直接调用里面的方法

模板字符串

 // 声明
        let str1 = `this is a string`;
        //内容中可以直接出现换行
        let str2 = `
                    <li>this is </li>
                    <li>this is </li>
                    `
        let str3 = `${str1}我是中文`;
        console.log(str3);

简化对象写法

        let name="张三";
        let change =function(){
            console.log("study can change mine")
        }
        const school={
            name,
            change,
            study(){
                console.log("study")
            }
        }
        console.log(school);

箭头函数

        // //声明一个函数
        //  let fn1 = function () { }
        //  let fn2 = (a) => { return a;}
        //  let fn3 = a => a;
        // //1、this是静态的，this始终指向声明函数所在作用域下的
        // //this指向
        // function fn4(){
        //     console.log(this.name)
        // }
        // let fn5=()=>{
        //     console.log(this.name)
        // }
        // window.name = "window";
        // const win ={
        //     name:"win"
        // }
        // fn4() //window
        // fn5() //widow

        // fn4.call(win)  //win
        // fn5.call(win)  //window

        //2、不能作为构造函数
        // let Persion = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // };
        // let me = new Persion('小', 30);
        // console.log(me);
        //3、不能使用arguments 变量
        // let fn = ()=>{
        //     console.log(arguments);
        // }
        // fn(1,2,3);

4、箭头函数的简写

//1) 省略小括号，当形参有且只有一个的时候
// let add = n => {
//     return n * n;
// }
// console.log(add(9));
// //2) 省略花括号，当代码只有一条语句的时候
// // 而且语句的执行结果就是函数的返回值
// let pow = n => n * n;
// console.log(pow(2));

默认参数初始化值

    // 1、形参初始值
        function add(a, b, c) {
            return a + b + c;
        };
        let result = add(1, 2, 3);
        console.log(result);
        //2、与结构赋值结合
        function connect({ host, username, password }) {
            console.log(host)
        }
        connect({
            host: "123",
            username: 'root',
            password: '123'
        });

rest 参数

        // ES6 引入rest参数，用于获取函数的实参，用来代替arguments
        // ES5 获取实参的方式
        function date() {
            console.log(arguments)
        }
        date('张三', '李四', '王五');
        // rest 参数
        function data(...args) {
            console.log(args);
        }
        data('张三', '李四', '王五');

spread 扩展运算符

// spread 扩展运算符 能将【数组】 转换为逗号分隔符的 参数序列
        const arr=['a','b','c']
        function hanshu(){
            console.log(arguments)
        }
        hanshu(...arr);
        // 实现数组的克隆
        const Arr = [...arr];
        // 将伪数组转为真正的数组
        const divs = document.querySelectorAll("div");
        const divArr = [...divs];

        // Symbol 引入了一种新的原始数据类型Symbol，表示独一无二的值
        // 特点： 值是惟一的，用来解决命名冲突问题，
        //       可以使用Reflect.ownKeys来获取对象的所有键名
        // 创建 Symbol 
        let s = Symbol();
        let s2 = Symbol('张三');
        let s3 = Symbol.for('李四');
        //不能与其他数据进行运算
        let result = s + s;  // 报错

使用场景 Symbol
在这里插入图片描述

迭代器

迭代器是一种接口每各种不同的数据结构提供统一的访问机制
任何数据只要部署iterator接口就可以遍历操作
1)ES6创造了一种新的遍历命令for of 循环
2)原生具备iterator接口的数据可以用 for of 遍历
// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧', '白龙马'];
for (let index in xiyou) {
    console.log(index);
}
for (let item of xiyou) {
    console.log(item);
}
//工作原理
// a)创建一个指针对象，指向当前数据结构的起始位置
// b)第一次调用对象的next方法，指针自动指向数据结构的第一个成员
// c)接下来不断调用next方法，指针一直往后移动，知道指向最后一个
// d)每调用next方法返回一个包含value和done属性的对象
// 注：需要遍历的时候 ，要想到用迭代器
let iterator = xiyou[Symbol.iterator]();
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
// 自定义遍历
 let obj = {
            name: "我的班级",
            stus: [
                '张三',
                '李四',
                '王五',
            ],
            [Symbol.iterator]() {
                let index = 0;
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done:false }
                            index++;
                            return result;
                        }else{
                            return {value:undefined,done:true}
                        }
                    }
                }
            }
        }
        for(let i of obj){
            console.log(i)
        }

生成器函数

// 生成器其实是一个特殊的函数
// 异步编程 纯回调函数
// 函数代码的分隔符
function* gen() {
    console.log(111);
    yield 'aaa';
    console.log(222);
    yield 'bbb';
    console.log(333);
    yield 'ccc';
}
let iterator = gen();
iterator.next();
iterator.next();

在这里插入图片描述

 // 异步编程 文件操作 网络操作 数据库操作
        // 生成器函数
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next()
            }, 1000)
        }
        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next()
            }, 1000)
        }
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next()
            }, 1000)
        }
        function* gen() {
            yield one();
            yield two();
            yield three();
        }
        let iterator = gen();
// 案例2
  // 模拟获取  用户数据  订单数据  商品数据
        function getUser() {
            setTimeout(() => {
                let data = '用户数据';
                iterator.next(data);
            }, 1000);
        }
        function getOrders() {
            setTimeout(() => {
                let data = '订单数据';
                iterator.next(data);
            }, 1000);
        }
        function getGood() {
            setTimeout(() => {
                let data = '商品数据';
                iterator.next(data);
            }, 1000);
        }

        function * gen() {
            let users = yield getUser();
            console.log(users)
            let orders = yield getOrders();
            console.log(orders)
            let good = yield getGood();
            console.log(good);
        }
        let iterator = gen();
        iterator.next();

Promise 对象

const p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        let data = '数据库数据';
        reject(data);
    }, 1000)
});
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})
//案例
   const p = new Promise((reslove, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:3000/data1");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        reslove(xhr.response);
                    } else {
                        reject(xhr.status);
                    }
                }
            }
        });
        p.then(function (value) {
            console.log(value);
        }, function (reason) {
            console.log(reason)
        })
        // 案例2
                //Promise-then
        // 调用 then 方法，then 方法的返回 结果是Promise 对象，状态由回调函数的执行结果决定
        // 1、如果回调函数中返回的结构是非promise类型的属性，状态为成功，返回值对象的为成功
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("用户数据");
            }, 1000);
        });
        const result = p.then(value => {
            console.log(value);
            return "123";
        }, reason => {
            console.warn(reason);
        });
        console.log(result);
        // 链式编程
        p.then(value => { }).then(value => { });

var fs = require("fs");

// 使用promise 实现
const p = new Promise((resolve, reject) => {
    fs.readFile("./a.txt", (err, data) => {
        resolve(data);
    })
})
p
    .then(value => {
        return new Promise((resolve, reject) => {
            fs.readFile("./b.txt", (err, data) => {
                resolve([data, value]);
            })
        })
    })
    .then(value => {
        return new Promise((resolve, reject) => {
            fs.readFile("./c.txt", (err, data) => {
                value.push(data)
                resolve(value);
            })
        })
    })
    .then(value => {
        console.log(value.join('\r\n'))
    })

在这里插入图片描述

set

// 声明 一个set 
let s = new Set();
let s2 = new Set(["大事", "小事", "好事"]);
console.log(s2.size);
s2.add("真事");
s2.delete("坏事");
// 检测
console.log(s2.has("真事"));
console.log(s2);
// 清空
s2.clear();
console.log(s2);

    //实战
        let arr = [1, 2, 3, 1, 2, 3, 45, 56, 7];
        // // 数据去重
        // let result = [...new Set(arr)];
        // console.log(result);
        // 交集
        let arr2 = [3, 4, 5];
        let result = [...new Set(arr)].filter(item => {
            let s2 = new Set(arr2);
            if (s2.has(item)) {
                return true;
            } else {
                return false;
            }
        });
        console.log(result);
        // 并集
        let union = [...new Set([...arr, ...arr2])];
        console.log(union);
        // 差集
        let dir = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(dir);

Map

 // Map
        let m = new Map();
        m.set("name", "张三");
        m.set("change", function () {
            console.log("我在改变");
        })
        let key = {
            age: 23
        };
        m.set(key, ['a', 'b']);
        console.log(m.size);
        
        m.delete("name")
        console.log(m);
        m.get('change')
        m.clear()

在这里插入图片描述

ES6

   //ES6 引入了class类，作为对象的模板，通过class关键字，可以定类，
        // ES6的class可以看做只是一个语法糖，新的class写法只是让对象原型的写法更加清晰、更面向对象编程
        class Phone{
            constructor(brand,price){
                this.brand = brand;
                this.price = price;
            }
            call(){
                console.log("打电话");
            }
        }
        let p = new Phone("华为",4399);
        console.log(p);
        p.call();

  // 用static 包括的对象 属于类 不属于对象
        class Phone {
            static name = "手机";
            static change() {
                console.log("我是手机")
            }
        }
        let p = new Phone();
        console.log(p.name); // undefined
        console.log(Phone.name);
        //  案例
         // 通过ES5 实现集成
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }
        function samllPhone(brand, price, color) {
            Phone.call(this, brand, price);
            this.color = color;
        }
        samllPhone.prototype = new Phone;
        samllPhone.prototype.call = function () {
            console.log("打电话");
        }
        var sm = new samllPhone("华为", 2499, "红色");;
        console.log(sm);
        sm.call();
        //-----------------------
          class Phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log("我在打电话");
            }
        }
        class iPhone extends Phone {
            constructor(brand, price, color) {
                super();
                this.color = color;
            }
            photo() {
                console.log("我会拍照");
            }
            call() {
                console.log("我会打电话");
            }
        }
        const p = new iPhone("苹果", 5600, "黑色");
        console.log(p);
        p.photo();
        p.call();
//-----------------------------------
  class People {
  			//set里面得有一个参数
            set price(pri) {
                console.log(pri);
            }
            get price() {
                console.log("get")
                return "价格"
            }
        }
        let s = new People();
        s.price = 23;
        console.log(s.price)

使用模块


  // 如果文件打开出现报错 则是跨域 ，或者用node打开即可
        import * as m from "./00-model.js"
        console.log(m);

//模块暴露
export let data = "你好啊"
function obj(){
	console.log("你好啊"）
}
export {obj}
export default{
	name:"张三"
}

// 引入模块
import { name,teach } from "./00-model";
import { name as na,teach as te} from "./00-model";
console.log(name);
console.log(teach);
//  文件2  00-model.js
let name = "战三"
function teach(){
    console.log("你好啊")
}
export{name,teach}
//  文件2  01-model.js
let name = "战三"
function teach(){
    console.log("你好啊")
}
export{name,teach}

babel对模块化代码的转换

// 1. 安装工具 babel-cli babel-preset-env browserify
// 2. npx babel 需要打包的文件 -d 打包之后的路径 --presets=nanel-preset-env
// 3. 打包 npx browserify 入口文件 -o 输出文件路径

ES7 中新特性

// includes 方法用来检测数组中是否包含每个元素
const arr = ['a','b','c','d'];
console.log(arr.includes('a'))
// ** 实现幂运算 == Math.pow(2,10)
console.log(2**10)

ES8 新特性

   //  async and await 两种语法结合可以让异步代码像同步代码一样
    //  async函数 的返回值为 promise
    // promise对象的结果由async函数执行的返回值决定
    
    // 声明的时候再函数前面加上async
    // 返回的结果根据 return 语句决定
    async function fn() {
        // 
        return new Promise((resolve, reject) => {
            resolve("成功!");
        })
    }
    const result = fn();
    result.then(value=>{
        console.log(value)
    },reason=>{
        console.log(reason)
    })

 // await 表达式
        /* 
            1.await必须写在async函数中
            2.await右侧的表达式一般为promise对象
            3.await返回的是promise成功的值
            4.await 的promise失败了，就会抛出异常，需要通过try...catch捕获处理
        */

        const p = new Promise((resolve, reject) => {
            resolve("数据")
        })
        async function fn() {
            let result = await p;
            console.log(result);
        }
        fn();
      //--------------------
         const p = new Promise((resolve, reject) => {
            reject("失败数据")
        })
        async function fn() {
            try {
                let result = await p;
                console.log(result);
            } catch (e) {
                console.log(e);
            }
        }
        fn();

//  例子
var fs = require("fs");

function readFile() {
    return new Promise((resolve, reject) => {
        fs.readFile("./a.txt", (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    })
}

async function aa() {
    try {
        let result = await readFile();
        console.log(result.toString())
    } catch (error) {
        console.log(error)
    }
}
aa();

    <script>

        // 模仿ajax 
        function sendAj(url) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        } else {
                            reject(xhr.status);
                        }
                    }
                }
            })
        }
    
        async function hanshu() {
            try {
                let result = await sendAj('http://localhost:3000/data1').then(value => {
                    console.log(value);
                }, reason => {
                    console.log(reason);
                });
                console.log(result);
            } catch (error) {
                console.log(error);
            }
        }
        async function hanshu() {
            try {
                let result = await sendAj("http://localhost:3000/data1");
                console.log(result);
            } catch (error) {
                console.log(error);
            }
        }
        hanshu();
    </script>

const obj = {
            name: "张三",
            city: ['北京', '南京', '上海']
        }
        // console.log(Object.keys(obj))
        // console.log(Object.values(obj))
        // console.log(Object.entries(obj));

        const obj1 = Object.create(null, {
            name: {
                value: "值",
                writable: true,
                configurable: true,
                enumerable: true
            }
        })
        console.log(Object.getOwnPropertyDescriptor(obj1))
        console.log(obj1)

 // Rest 参数spread扩展运算符在ES6中已经引入，不过ES6中只针对数组，
        //  在ES9 中为对象提供了像数组一样的rest参数和扩展运算符
        function connect({ host, port, ...user }) {
            console.log(host)
            console.log(port)
            console.log(user)
        }
        connect({
            host:'localhsot',
            port:3306,
            username:'root',
            pwassword:'root'
        })

在这里插入图片描述

// 正向断言
        let str = '123123你好啊123哈哈哈';
        const reg = /\d+(?=哈)/;
        const result = reg.exec(str);
        console.log(result);
        // 反向断言
        const reg1 = /(?=啊)+\d/
        const result1 = reg.exec(str);
        console.log(result1);

Object.fromEntries

// 二维数组
const result = Object.fromEntries([
    ['name', '名字'],
    ['xueke', 'java']
]);
console.log(result);
  //Map
        const m = new Map();
        m.set('name', 'JAVA');
        const result = Object.fromEntries(m);
        console.log(result);
        // Object.entries ES8  对象转数组
        const arr = Object.entries({
            name: "姓名"
        })
        console.log(arr);

在这里插入图片描述

// flat()  也可以在里面写上数字 表示深度  将多维数组为低位数组
		const arr = [1,2,3,[4,5,6]];
		console.log(arr);
		console.log(arr.flat());
// flatMap
        const arr = [1, 2, 3];
        const result = arr.flatMap(item => [item * 10]);
        console.log(result)

ES11 私有属性

       class Persion {
            name;
            #age;
            #weight;
            constructor(name, age, weight) {
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
            info() {
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }
        const body = new Persion("张三", 34, "50kg");
        console.log(body.name);
        console.log(body.#age);
        console.log(body.#weight);

则会报错

aa.html:201 Uncaught SyntaxError: Private field ‘#age’ must be declared in an enclosing class

body.info();
// 则会正常使用

        const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('数据-1');
            }, 1000);
        });
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('数据-2');
                reject('失败了')
            }, 1000);
        });
        //  第一个 无论成功还是失败 都会返回一个数组 
        // 第二个 只有全部一样的时候才会返回数组
        // const result = Promise.allSettled([p1, p2]);
        // console.log(result);
        const res = Promise.all([p1.p2]);
        console.log(res);

 let str = `
            <ul>
            <li>
                <a>肖申克救赎</a>
                <p>上映时间</p>
            </li>
            <li>
                <a>当幸福来敲门</a>
                <p>上映时间</p>
            </li>
            <li>
                <a>海上钢琴师</a>
                <p>上映时间</p>
            </li>
            <li>
                <a>泰坦尼克号</a>
                <p>上映时间</p>
            </li>
        </ul>
            `
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
        const resutl = str.matchAll(reg);
        const arr = [...resutl];
        console.log(arr);

在这里插入图片描述

  // 动态 import
        btn.onclick = function(){
            import('./a.js').then({module=>{
                module.hello();
            });
        }

目前就更新这么多等我再学习一下继续更新

嘴巴嘟嘟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
es6学习心得

let 定义变量//声明变量 // let a=1; // console.log(a); //1、变量不能重复声明 //2、块级作用域：全局，函数，eval // { // let a = 'aaaa'; // } // console.log(a); // 会报错 //3、不存在变量提升，预解析操作 // console.log(a); // let a=1; //4、不影响作用于链
复制链接

扫一扫