JavaScript教程_ES6(二)

peppacatt

已于 2022-04-17 22:23:36 修改

阅读量718

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-17 21:23:55 首次发布

本文链接：https://blog.csdn.net/weixin_46349544/article/details/124085873

版权

前端专栏收录该内容

8 篇文章 4 订阅

订阅专栏

章节	地址
JavaScript教程_基础(一)	https://blog.csdn.net/weixin_46349544/article/details/124084866
JavaScript教程_ES6(二)	https://blog.csdn.net/weixin_46349544/article/details/124085873

1 对象的简化写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写更加简洁

let name = 'aaa';
let change = function(){
    console.log('change()执行了...');
}

//未简化的完整写法
const school = {
    name: name,
    change: change,
    improve: function(){
        consolg.log('improve()执行了...');
    }
}

//简化的写法
const school1 = {
    name,
    change,
    improve(){
        consolg.log('improve()执行了...');
    }
}

2 结构赋值

什么是解构赋值：
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

演示代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>解构赋值</title>
</head>

<body>
    <script>
        // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值； 
        // 1、数组的解构赋值 
        const F4 = ["大哥", "二哥", "三哥", "四哥"];
        let [a, b, c, d] = F4;
        // 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"
        console.log(a + b + c + d); // 大哥二哥三哥四哥 

        // 2、对象的解构赋值 
        const F3 = {
            name: "大哥",
            age: 22,
            sex: "男",
            xiaopin: function () {
                // 常用console.log("我会演小品！");
            }
        }
        let { name, age, sex, xiaopin } = F3; // 注意解构对象这里用的是{}
        console.log(name + age + sex + xiaopin); // 大哥22男 
        xiaopin(); // 此方法可以正常调用 

    </script>
</body>

</html>

3 模板字符串

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script>
        // 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
        // 声明 
        let string = `我也一个字符串哦！`;
        console.log(string);
        // 特性 
        // 1、字符串中可以出现换行符
        let str = `<ul>
                    <li>大哥</li>
                    <li>二哥</li>
                    <li>三哥</li> 
                    <li>四哥</li>
                </ul>`;
        console.log(str);
        // 2、可以使用 ${xxx} 形式引用变量 
        let s = "大哥";
        let out = `${s}是我最大的榜样！`;
        console.log(out); 
    </script>
</body>

</html>

4 箭头函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>

<body>
    <script>
        // ES6 允许使用「箭头」（=>）定义函数。
        //声明一个函数
        // let fn = function(){

        // }
        // let fn = (a,b) => {
        //     return a + b;
        // }
        //调用函数
        // let result = fn(1, 2);
        // console.log(result);


        //1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
        function getName(){
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }

        //设置 window 对象的 name 属性
        window.name = '尚硅谷';
        const school = {
            name: "ATGUIGU"
        }

        //直接调用
        // getName();
        // getName2();

        //call 方法调用
        // getName.call(school);
        // getName2.call(school);

        //2. 不能作为构造实例化对象
        // let Person = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person('xiao',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) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
            // 而且语句的执行结果就是函数的返回值
            let pow = n => n * n;
                
            console.log(pow(8));

    </script>
</body>

</html>

5 函数参数默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数参数默认值</title>
</head>
<body>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        // function add(a,c=10,b) {
        //     return a + b + c;
        // }
        // let result = add(1,2);
        // console.log(result);

        //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: 'atguigu.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
    </script>
</body>
</html>

6 模块化

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        // import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
        // import {school, teach} from "./src/js/m1.js";
        // import {school as guigu, findJob} from "./src/js/m2.js";
        // import {default as m3} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        // import m3 from "./src/js/m3.js";
        // console.log(m3);
    </script>

    <!-- <script src="./src/js/app.js" type="module"></script> -->
</body>
</html>

m1.js

//分别暴露
export let school = '尚硅谷';

export function teach() {
    console.log("我们可以教给你开发技能");
}

m2.js

//统一暴露
let school = '尚硅谷';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}

//
export {school, findJob};

m3.js

//默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

peppacatt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程_ES6(二)

1 对象的简化写法ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写更加简洁let name = 'aaa';let change = function(){ console.log('change()执行了...');}//未简化的完整写法const school = { name: name, change: change, improve: function(){ consolg.log('improve()执行了
复制链接

扫一扫