20220305-ES6

最新推荐文章于 2024-09-05 11:00:53 发布

wudi小乐

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量122

点赞数 1

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/m0_48439892/article/details/123398432

版权

title: ES6
author: 小乐
date: 2022/03/05

个人博客：https://wudixiaole.gitee.io/xiaole

1.什么是ECMAScript

ECMAScript是Ecma国际通过ECMA-262标准化的脚本程序设计语言

1.2为什么要学习es6

ES6版本标动内容多，具有里程碑意义。

ES6加入许多新语法特性，变成实现更简介、高效

ES6是前端发展趋势，就业必备技能

let用法

 <script>
        let items = document.getElementsByClassName('item');
        for(let i = 0;i<items.length; i++){
            items[i].onclick = function(){
                // 修改当前背景颜色
                this.style.background = 'blue';
            }   
        }
       
    </script>
    <style>
        .item {
            width: 30px;
            height: 20px;
            background-color: white;
            /* float: left; */
            display: inline-block;
            margin-left: 10px;
            border :solid  5px black;
        }
    </style>
</head>
<body>
    <h2 class="page-header">点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
   
</body>

const定义常量

   <script>
       const SCHOOL = '哇哈哈';
       console.log(SCHOOL); 
    // 1.   一定要赋初始值
    // 2.一般常量要大写
    // 3.常量值不可以修改
    // 4.块级作用域
//  5.对数组和对象的元素修改，不算做对常量的修改，不会报错
const TEAN= ['123' ,1 ,'132'];
TEAN.push('Meiko');
console.log(TEAN);
    </script>

变量的结构赋值

    <script>
        // 1.es6允许按照一定模式从数组和对象中取值，对变量进行赋值
        // 这被操作解构赋值。
        // 1.数组的结构
            const F4=['小沈阳','刘能','赵四','宋小宝'];
            let [xiao,liu,zhao,song]=F4;
            console.log(xiao);
            console.log(liu);
            console.log(zhao);
            console.log(song);
        // 2.对象的结构
         const ben ={
            name: '赵本山',
            age: '不详',
            xiaopin: function(){
                console.log('我可以演小品');
            }
         };
         let {name,age,xiaopin}=ben;
         console.log(name);
         console.log(age);
         console.log(xiaopin);
    </script>

ES6模板字符串

<script>
    // Es6中引入新的声明字符串的方式[``] ''  ""
    // 1.声明
    let str = `我也是个字符串`;
    console.log(str,typeof str);
    // 2.内容中可以直接出现换行符
    let str1 =`<ul>
        <li>沈腾</li>
        <li>玛丽</li>
        </ul>`;
        // 3.变量拼接
        let loverst ='魏翔';
        let out =`${loverst}xxx是我心目中最搞笑的演员`;
        console.log(out);
</script>

ES6对象的简化写法

<script>
    // ES6中允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
    // 这样书写更简介
    let name ='哇哈哈';
    let change = function(){
        console.log('我们可以改变你');
    }

    const school ={
        name,
        change,
        import(){
            console.log('我们可以提高你的技能');
        }
    }
</script>

箭头函数声明以及特点

<script>
//  ES6中允许使用箭头=>定义函数
// 声明一个函数
// let fn1 =function(){

// }
// let fn = (a,b) => {
//     return a+b;
// }
// let result = fn(1,2);
// console.log(result);
//  this是静态的，this始终指向函数声明所在的作用域下的this的值
function getName(){
    console.log(this.name);
}
let getName2=()=>
{
    console.log(this.name);
}
// 设置window对象的name属性

const school ={
    name: "ATGUIGU"
}
window.name='哇哈哈';
// 直接调用
getName();
getName2();
// call方法调用
getName.call(school);
getName2.call(school);
// 不能作为构造函数实例化对象
// let Person = (name,age)=>{
//     name,
//     age,
// }
// let me = new Person('xiao',30);

// console.log(me);
// 3.不能保存实参，arguments变量
// let fn= () =>{
//     console.log(arguments);
// }
// fn(1,2,3);
// let fn = function(a,b){
//     console.log(arguments);
// }
// fn(1,2);
// 4.箭头函数的简写
// 4.1省略小括号，当形参有且只有一个的时候
let add =n=>{
    return n+n;
}
console.log(add(9));
// 4.5省略花括号，当代码体只有一条语句的时候执行结果就是函数的返回值
let pow  = n =>n*n
console.log(pow(8));
</script>

箭头函数的实践与应用场景

   <style>
       div{
           width: 200px;
           height: 200px;
           background-color: blue;
       }
    </style>
<script>
// 需求一，点击div 2s后颜色变成粉色
    // // let _this=this;
    // let ad = document.getElementById('ad');
    // ad.addEventListener("click",function(){
    //     setTimeout(() => {
    //         this.style.background = 'pink';
    //     }, 2000);
    // })
// 需求二，从数组中返回偶数的元素
// const arr =[1,6,9,18,100,20];
// const result = arr.filter(function(item){
//     if(item %2 ==0){
//         return true;
//     }else{
//         return false;
//     }
// })
// console.log(result);
const arr =[1,6,9,18,100,20];
const result = arr.filter(item => item %2 ==0);
console.log(result);
</script>

ES6函数参数的默认值设置

<script>
// es6允许给函数参数赋值初始值
function add(a,b,c=10){
    return a+b+c;
}
let result = add(1,2,3);
let result1 = add(1,2);
console.log(result);
console.log(result1);
// 2.与解构赋值结合
function connect({host='127.0.0.1',username,password,port}){
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);

}
connect({
    // host: 'localhost',
    username: 'root',
    password: 'root',
    port: 3306
})

</script>

ES6-rest 参数

<script>
// es6引入rest参数，用于获取函数的实参，用来代替arguments
// es5参数
// function date(){
//     console.log(arguments);

// }
// date('白芷','阿娇','四惠');
// rest参数
function date(c,b,...a){
    console.log(a);
    console.log(b);
    console.log(c);
}
// date('白芷','阿娇','四惠');
date(1,2,3,4,5,6)
</script>

ES6扩展运算符的介绍

<script>
// ...扩展运算符能将数组转化为逗号分隔的参数序列
const tfboys =['易烊千玺','王源','王俊凯'];
function chuwan(){
    console.log(arguments);
}
chuwan(...tfboys);
</script>

ES6扩展运算符的应用

   <div></div>
   <div></div>
   <div></div>
<script>
// 1.数组的合并
const kuaizi = ['王太利','肖扬'];
const fenghuang = ['曾毅','玲花'];
// const zuxuanxiaopinguo = kuaizi.concat(fenghuang);
const zuxuanxiaopinguo = [...fenghuang,...kuaizi];
console.log(zuxuanxiaopinguo);
// 2.数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];
console.log(sanyecao);
// 3.将伪数组转化为真正的数组
const divs = document.querySelectorAll('div');
console.log(divs);
console.log([...divs]);

ES6中Symbol的介绍与创建

<script>
    // 创建Symbol
    let s = Symbol();
    console.log(s,typeof s);
    let s2 = Symbol('哇哈哈');
    let s3 = Symbol('哇哈哈');
    let s4 = Symbol.for('哇哈哈');
   console.log(s2===s3,s4);
</script>

ES6对象添加Symbol类型的属性

<script>
//  向对象中添加方法 up down
let game ={...
let methods = {
    up: Symbol(),
    down: Symbol()
};
game[methods.up]= function(){
    consol.console.log('我可以改变形状');
}
// 方法二
let youxi ={
    name:'狼人杀',
    [Symbol('')]:function(){
        console.log('我可以发言')
    }
    
}
</script>

ES6迭代器介绍

迭代器是一种接口。

<script>
const xiyou =['唐僧','孙悟空','猪八戒','沙僧'];
// 使用for...of遍历数组
for(let v of xiyou){
    console.log(v);
}
let iterator = xiyou[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

</script>

生成器函数声明与调用

生成器函数是es6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

<script>
// 生成器其实是一种特殊的函数
// 异步编程 纯回调函数 node fs ajax mongodb
// yield函数代码的分隔符
function *gen(){
    console.log('hello 111');
    yield '一只没有耳朵';
    console.log('hello 222');
    yield '一只没有尾巴';
    console.log('hello 333');
    yield '真奇怪';
    console.log('hello 444');

}
// let iterator = gen();
// console.log(iterator);
// iterator.next();
// iterator.next();
// iterator.next();
// iterator.next();
//遍历
for(let v of gen()){
    console.log(v);
}
</script>

ES6生成器函数的参数传递

<script>
// ES6生成器函数的参数传递
        function * gen(arg){
            console.log(arg)
            let one =yield 111;
            console.log(one);
     
            yield 222;
            yield 333;
        }
        // 获取迭代器对象
        let iterator =gen('AAA');
        console.log(iterator.next());
        // next方法可以传入实参
        console.log(iterator.next('bbb'));
        console.log(iterator.next('ccc'));
        // console.log(iterator.next());
        // console.log(iterator.next());
        // console.log(iterator.next());
</script>

ES6生成器函数实例

<script>
// 异步编程  文件操作  网络操作（Ajax，requeest） 数据库操作
// 1s后控制台输出 111 2s后输出222 3s后输出333、
// 回调地狱
    // setTimeout(() => {
    //     console.log(111);
    //     setTimeout(() => {
    //         console.log(222);
    //             setTimeout(() => {
    //                 console.log(333);
    //         }, 3000);
    //     }, 2000);
    // }, 1000);.
    function one(){
        setTimeout(() => {
            console.log(111);
            iterator.next();
        }, 1000);
    }
    function two(){
        setTimeout(() => {
            console.log(222);
            iterator.next();
        }, 2000);
    }
    function three(){
        setTimeout(() => {
            console.log(333);
            iterator.next();
        }, 3000);
    }
    function * gen(){
        yield one();
        yield two();
        yield three();
    }
    let iterator = gen();
    iterator.next();
</script>

ES6生成器函数实例2

<script>
    function getUsers(){
        setTimeout(() => {
            let data ='用户数据';
            iterator.next(data);
        }, 1000);
    }
    function getOrders(){
        setTimeout(() => {
            let data = '订单数据';
            iterator.next(data);
        }, 1000);
    }
    function getGoods(){
        setTimeout(() => {
            let data ='商品数据'
            iterator.next(data);
        }, 1000);
    }
    function * gen(){
        console.log(users)
        yield getUsers(orders);
        yield getOrders(orders);
        yield getGoods();
    }
    let iterator =gen();
    iterator.next();
</script>

promise介绍与使用

   <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('用户数据');
        }, 1000);
    });
    // 调用then方法
    const result = p.then(value=>{
        console.log(value);
        return 123;
    },reason=>{
        console.warn(reason);
    })
    console.log(result);

   </script>

Promise对象catch方法

   <script>
    //    创建promise对象
    constp =new Promise((resolve,reject)=>{
        setTimeout(() => {
            reject("出错了");
        }, 1000);
    });
    p.catch(function(reason){
        console.warn(reason)
    });

   </script>

集合介绍与API

 <script>
// 声明一个set
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿']);
// 元素个数
console.log(s2.size);
console.log(s2,typeof s);
s2.add('喜事儿');
s2.delete('小事儿');
// 检测是否有'大事儿'元素
s2.has('大事儿');
console.log(s2);
s2.clear();
console.log(s2);
for (const v of s2) {
    console.log(v);
}
</script>

集合实践

   <script>
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 result2 = [...new Set(arr)].filter(item =>{
    let s2 =new Set(arr2);
    if(s2.has(item)){
        return true;
    }else{
        return false;
    }
});
let result3 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(result3);
// 3.并集
let union =[...new Set ([...arr,...arr2])];
console.log(union);
// 差集
let diff = [...new Set(arr)].filter(item=> !(new Set(arr2).has(item)));
console.log(diff);

</script>

Map的介绍与API

<script>
// 声明Map
let m = new Map();
// 添加元素
m.set('name','哇哈哈');
console.log(m);
m.set('change',function(){
    console.log('我可以改变你');
});
console.log(m);
let key = {
    school: 'ATGUIGU'
};
m.set(key,['北京','伤害']);
console.log(m);
// 删除元素
m.delete('name');
// 获取元素
console.log(m.get(key));
// 清空
m.clear();
// 遍历
for(let v of m){
    console.log(v);
}
</script>

class类

<script>
// class
class phone{
    //构造方法名字不可以修改
    constructor(brand,price){
        this.brand =brand;
        this.price =price;
    }
    // 方法必须使用该语法
    call(){
        console.log('我可以打电话');
    }
}
let onePlus = new phone("1+",1999);
console.log(onePlus);
</script>

clss静态成员

   // function Phone(){

    // }
    // Phone.name='手机';
    // Phone.change=function(){
    //     console.log('我可以改变世界');
    // }
    // Phone.prototype.siz = '5.5inch';
    // let nokia = new Phone();
    // console.log(nokia.name);
    // console.log(nokia.size);
    class Phone{
        static name ='手机';
        static change(){
            console.log('我可以改变世界');

        }
    }
    let nokia =new Phone();
    console.log(nokia.name);
    console.log(Phone.name);

类继承

<script>
    class Phone{
        // 构造方法
        constructor(brand,price){
            this.brand = brand;
            this.price =price;
        }
        // 父类的成员属性
        call(){
            console.log('我可以打电话');
        }
    }
    class SmarPhone extends Phone{
        // 构造方法
        constructor(brand,price,color,size){
                super(brand,price);//Phone.call(this,brand,price)
                this.color = color;
                this.size =size;
        }
        photo(){
            console.log('我可以拍照');
        }
        playGame(){
            console.log('玩游戏');
        }
    }
    const xiaomi =new SmarPhone('小米',799,'黑色','4.7inch');
    console.log(xiaomi);


</script>

class中getter和setter设置

<script>
    // get和set
    class Phone{
        get price(){
            console.log('价格属性被读取了');
            return 'iloveyou';

        }
        set price(newVal){
            console.log('价格属性被修改了');
        }
    }
    let s = new Phone();
    console.log(s.price);
    s.price = 'free';

</script>

es6的数值扩展

<script>
    // 0.Number.EPSILON是js表示的最小精度
    console.log(0.1 + 0.2 == 0.3);
    // 二进制与八进制
    let b =0b1010;
    let o = 0o777;
    let d =100;
    // Number.isFinite检测一个数值是否为有限数
    console.log(Number.isFinite(100));
    console.log(Number.isFinite(100/0));
    // Number.isNAN检测一个数组是否为NAN
    console.log(Number.isNAN(123));
    // Number.parseInt Number.parseFloat字符串转整数
    console.log(Number.parseInt('5211314love'));
    console.log(Number.parseFloat('301415'));
    // Number.isInteger判断一个书是否为整数
    console.log(Number.isInteger(5));
    console.log(Number.isInteger(2.5));
    // Math.trunc将数字的小数部分抹掉
    console.log(Math.trun(3.5));
    // Math.sign判断一个书到底为正数 负数 还是零
    console.log(Math.sign(100));
    console.log(Math.sign(0));
    console.log(Math.sign(-20000));
</script>

对象方法扩展

<script>
//   object.is判断两个值是否完全相等
    console.log(Object.is(120,120));
// object.assign对象的合并
    const config1 = {
        host: 'localhost',
        port: 3306,
        name: 'root',
        pass: 'root'
    };
    const config2 = {
        host: 'http://www.baidu.com',
        port: 3306,
        name: 'baidu.com',
        pass: 'baidu'
    };
   console.log( Object.assign(config1,config2));

// object.setprototypeof 设置原型对象 object.getprototypeof
const school ={
    name: '哇哈哈'
}
const cities={
    xiaoqu: ['北京','伤害']
}
Object.setPrototypeOf(school,cities);
console.log(school);
</script>

es6的模块化

m1.js

//  分别暴露
 export let school = '哇哈哈';
export function teach(){
    console.log('我们可以教你');
}

m23,js

// 统一暴露
let school = '哇哈哈';
function findJob(){
    console.log('找工作');
}
export{school,findJob};

es学习.html

<script type="module">
    // 1.通用方式导入
    import * as m1 from "./m1.js";
    console.log(m1);
    import * as m23 from "./m23.js";
    console.log(m23);
    // 2.解构赋值形式
    import {school,teach} from "./m1.js";
    import{default as m23} from "./m23.js";
    // 简单方式
    import m3 from "./m23.js";
</script>

babel对es6模块化代码转化

<!-- 1.安装工具babel-cli babel-preset-env browserify(webpack) -->
<!-- 2.npx babel src/js -d dist/js -->
<!-- 3.打包npx browserify dist/js/app.js -o dist/bundle.js -->

引入npm包

npm i jquery;
import $ from 'jquery';
$('body').css('background','pink');

wudi小乐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
20220305-ES6

内含es6的大部分重要特性，以及最后如何打包成es5，为了浏览器的兼容性。
复制链接

扫一扫

20220305-ES6

title: ES6 author: 小乐 date: 2022/03/05

title: ES6
author: 小乐
date: 2022/03/05