zoukankan      html  css  js  c++  java
  • ES6语法

    let-var-const的区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        /*
        // 1.变量作用域: 变量在什么范围内是可用
        {
            var name = 'kobe';
            console.log(name);
        }
        // 能访问 在C C++是不能访问的
        console.log(name);
        */
    
        //2.没有块级作用域引起的问题 if块级
        var func;
        if(true){
            var name = 'why';
            func = function () {
                console.log(name);
            };
            func() //why
        }
        name = 'kobe';
        func(); // kobe
    
        //3.没有块级作用域引起的问题  for块级
        // ES5写法  使用闭包解决作用域问题
        /*
        var btns = document.getElementsByTagName('button');
        for(var i=0; i < btns.length; i++){
            (function (i) {
                btns[i].addEventListener('click', function () {
                    console.log('第' + i + '个按钮被按下');
                })
            })(i)
        }
        */
    
        // ES6写法
        const btns = document.getElementsByTagName('button');
        for(let i=0; i < btns.length; i++){
            btns[i].addEventListener('click', function () {
                console.log('第' + i + '个按钮被按下');
            })
        }
        // 1.一旦使用const修饰的标识符,不能修改
        // const number = 123;
        // number = 124
        // 2.必须赋一个初始值
        // const number;
        // 3. 常量的含义是指向对象不能被修改,但是可以修改对象内部的属性
        const obj = {
            name: 'kobe',
            age: 40,
            height: 1.98
        };
        console.log(obj);
        obj.name = 'why';
        console.log(obj);
    </script>
    </body>
    </html>  

    属性的增强写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        // 字面量增强
        // const obj = new Object();
        // const obj = {};
    
        // 1.属性、函数的增强写法
        /*
        // ES5 写法
        const obj = {
            name: 'Kebo',
            age: 40,
            height: 1.99,
            run:function () {
                console.log('正在奔跑');
            },
            eat: function () {
                console.log('在吃东西');
            }
        };
        */
    
        const name = 'Kebo';
        const age = 40;
        const height = 1.99;
        const obj = {
            name,
            age,
            height,
            run(){
                console.log('正在奔跑');
            },
            eat(){
                console.log('在吃东西');
            }
        };
        console.log(obj);
        obj.run();
        obj.eat()
    
    </script>
    </body>
    </html>  

    for循环区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>
    </div>
    
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [
                    {id: 110, name: 'Linux编程艺术', price: 119},
                    {id: 111, name: '代码大全', price: 120},
                    {id: 112, name: '深入理解计算机原理', price: 150},
                    {id: 113, name: '现代操作系统', price: 140},
                ]
            },
            computed: {
                totalPrice: function () {
                    let result = 0;
                    /*
                    for (let i=0; i < this.books.length; i++) {
                        result += this.books[i].price
                    }
                    return result
                    */
    
                    /*
                    es6写法
                    for (let i in this.books) {
                        result += this.books[i].price
                    }
                    return result
                    */
                    // es6写法
                    for (let book of this.books) {
                        result += book.price
                    }
                    return result
                }
            }
        })
    </script>
    </body>
    </html>  

    高阶函数的使用(在小项目中使用到reduce计算总的价格)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        /*
        编程范式:命令式编程/申明式编程
        编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
        filter/map/reduce
        filter中回调函数有一个要求:必须返回一个boolean值
        true:当返回是true时,函数内部会自动将这次回调的n加入到新的数组中
        false:当返回是false时,函数内部会过滤掉这次的n
        */
        const nums = [1, 10, 100, 50, 20, 30, 70, 500, 222];
        let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n, 2);
        console.log(total);
        // 1.filter过滤函数的使用 在数组中对每个元素做操作
        let newNums = nums.filter(function (n) {
            return n < 100
        });
        console.log(newNums);
    
        // 2. map函数的使用 对数组中每个元素做操作
        let new2Nums = newNums.map(function (n) {
            return n * 2
        });
        console.log(new2Nums);
    
    
        // 3. reduce函数的使用  作用:对数组中的值进行汇总
        let new3Nums = new2Nums.reduce(function (preValue, num) {
            return preValue + num
        }, 2);
        console.log(new3Nums);
    </script>
    </body>
    </html>
    

    ES6导入导出

    aaa.js

    /*
    // 闭包可以解决var变量作用域问题
    ;(function () {
        let name = '小明';
        let age = 18;
        function sum(num1, num2) {
            return num1 + num2
        }
    })();
    
    
    
    
    // 模块化 其它文件可以调用
    let ModuleA = (function () {
        let obj = {};
        obj.name = '小明';
        obj.age = 18;
        obj.mySum = function sum(num1, num2) {
            return num1 + num2
        };
        return obj
    })();
    
    ModuleA.mySum(10, 20);
    
    
    
    
    
    
    
    
    
    CommonJS的导出
    
    module.exports = {
        flag: true,
        sum(a, b){
            return a + b
        }
    };
    
    CommonJS的导入
    let {flag, sum} = require('module');
    等同于
    let _mA = require(module);
    let flag = _mA.flag;
    let sum = _mA.sum;
    */
    
    let name = '小明';
    let age = 18;
    function sum(num1, num2) {
        return num1 + num2
    }
    
    // 1. 导出方式一
    export {
        name,
        age,
        sum
    }
    
    // 2. 导出方式二
    export let num = 1000;
    
    
    // 3.导出函数/类
    
    // es5 函数
    export function mul(num1, num2) {
        return num1 * num2
    }
    
    
    // es5 类
    function Person1() {
    
    }
    
    export {
        Person1,
    }
    
    
    
    // es6 类
    export class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    
        run() {
            console.log(this.name + '在奔跑');
        }
    }
    
    // 默认同一模块中default只能一次
    /*
    const address = '成都市';
    export default address
    */
    
    export default function (argument) {
        console.log(argument);
    }  

     bbb.js

    import {sum, mul, Person} from "./aaa.js";
    
    console.log(sum(10, 20), mul(10, 20));
    
    const p = new Person('智障', 18);
    p.run();
    
    
    //  统一全部导入
    import * as aaaa from "./aaa.js"
    
    console.log(aaaa.sum(40, 40));
    

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="./aaa.js" type="module"></script>
    <script src="./bbb.js" type="module"></script>
    <script src="./mmm.js" type="module"></script>
    <!--模块化 type="module"-->
    </body>
    </html>  

     mmm.js

    import {name, age, num, } from "./aaa.js";  // 这里不要简写 不然404找不到
    import addr from "./aaa.js";
    
    console.log(name, age, num);
    addr('你好啊!');
    console.log(addr);  

    箭头函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        // 1. 定义函数的方式
        const aa = function () {
            
        }
        // 2.对象在字面量中定义函数+增强写法
        const obj = {
            bbb: function () {
    
            },
            aaa() {
    
            }
        }
    
        // 3. ES6中的箭头函数
        // const ccc = (参数列表) => {
        //
        // }
        // 3.1无参数情况
        const ccc = () => {
    
        }
        // 3.2有参数情况两个参数
        const sum = (num1, num2) => {
            return num1 + num2
        }
        // 3.3有参数并且一个参数
        const power = (num) => {
            return num * num
        }
    
        const power1 = num => {
            return num * num
        }
    
        const test = () => {
    
        }
    
        // 代码只有一行的情况+有返回值
        const mul = (num1, num2) => num1 * num2
        console.log(mul(20, 30));
    
        //无返回值
        const demo = () => console.log('Hello')
    </script>
    </body>
    </html>  

    判断this  一层层的看

    // es6 中对象的解构
    const obj = {
        name: '科比',
        age: 18,
        height: 1.98,
        address: '洛杉矶'
    }
    
    const {name, height, age} = obj
    console.log(name);
    console.log(height);
    console.log(age);
    

      

      

     

  • 相关阅读:
    docker 安装mysql
    Java web项目搭建系列之二 Jetty下运行项目
    Java web项目搭建系列之一 Eclipse中新建Maven项目
    Maven 添加其他Maven组件配置问题
    C# 中定义扩展方法
    Oracle 函数
    【Webservice】2 counts of IllegalAnnotationExceptions Two classes have the same XML type name
    Linux精简版系统安装网络配置问题解决
    Rsync 故障排查整理
    Failed to set session cookie. Maybe you are using HTTP instead of HTTPS to access phpMyAdmin.
  • 原文地址:https://www.cnblogs.com/Alexephor/p/11734176.html
Copyright © 2011-2022 走看看