博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
7342
积分:0
P豆:46

值与引用传递,模板字面量与标签函数,解构赋值,对象字面量的简化,bind,call,apply,访问器

2021年05月30日 23:41:51阅读数:333博客 / 豌豆君/ html

值传递与引用传递 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>值传递与引用传递</title></head><body>    <script>        // 1 赋值        // 1.1 值传递:原始类型,string,number,bool        let a = 1;        let b = a;        console.log("a = %d, b = %d", a, b);        a = 2;        //更新a, 不影响b        console.log("a = %d, b = %d", a, b);        //1.2 引用传递:引用类型,object,array        let obj1 = {a:1, b:2};        console.log(obj1);        let obj2 = obj1;        console.log(obj2);        //更新obj1        obj1.a = 10;        console.log(obj1);        //obj2同步更新        console.log(obj2);        // 2.传参        const f1 = x => (x = 10);        let m = 5;        console.log("m = %d", m);        f1(m);        // 入参:调用函数是传入的参数,简称:“入参”        // 函数中对参数的更新,并不会影响到入参        console.log("m = %d", m);        const f2 = x => (x.a = 10);        let o = {a: 1, b: 2};        console.log(o);        f2(o);        //看上去函数对于o.a的更新生效,实际上仍是值传递        console.log(o);        // 对与引用类型,只有全新赋值才算是更新,修改属性不算的        const obj = {x: 1, y: 2};        obj.x = 20;        // 赋值一个全新对像,才是更新        // obj = {}        const f3 = x => ( x = {} );        f3(o);        console.log(o);        // 深拷贝:值传递        // 浅拷贝:引用传递    </script></body></html>

模板字面量与标签函数 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>模板字面量与标签函数</title></head><body>    <script>        // 1. 模板字面量:将表达式嵌入到字符串        let a = 1, b = 2;        let res = a + " + " + b + " = " + (a + b);        console.log(res);        // 模板字面量使用反引号:“`”        res = `${a} + ${b} = ${a + b}`;        console.log(res);        // 模板字面量的组成:        // 1. 字符串字面量: "+, ="        // 2. 变量或表达式:a, b, (a+b)        // 模板字面量创建多行字符串可以保留格式        let menu = ['首页', '视频', '文章'];        let htmlStr = `<ul>            <li><a href="">${menu[0]}</a></li>            <li><a href="">${menu[1]}</a></li>            <li><a href="">${menu[2]}</a></li></ul>`;        console.log(htmlStr);        document.body.insertAdjacentHTML("beforeEnd",htmlStr);        // 2.标签函数: 自定义模板字面量的行为        let hello = name => alert(name);        // hello("天蓬老师");        // hello `天蓬老师`;        // 使用自定义函数来处理模板字面量,它的参数约定        // 1. 第一个参数:模板字面量中的字符串字面量组成的数组        // 2. 从第二个参数开始,将模板字面量中的变量依次传入        let sum = (strs, a, b) => {            console.log(strs);            console.log(a,b);        }        sum([' + ', ' = ',''], a, b);        sum `${a} + ${b} = `;        //rest        sum = (strs, ...args) => {            console.log(strs);            console.log(args);        }        sum `${a} + ${b} = `;    </script></body></html>

解构赋值 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>解构赋值</title></head><body>    <script>        //解构赋值: 快速从集合数据(数组/对象)解构出独立变量        //1.数组        let [a,b,c] = [1,2,3];        console.log(a,b,c);        [a,b] = [1,2,3];        console.log(a,b);        [a,b,c,d = "xxxx"] = [1,2,3];        console.log(a,b,c,d);        [a,b,...c] = [1,2,3,4,5];        console.log(a,b,c);        [,,a,,] = [1,2,3,4,5];        console.log(a);        let x = 1,            y = 2,            t;        console.log("x = %d, y = %d", x, y);        // t = x;        // x = y;        // y = t;        [y,x] = [x,y];        console.log("x = %d, y = %d", x, y);        // 2.对象解构        let {id, name} = {id: 10, name: "手机"}        console.log(id, name);        //属性名与变量名必须一一对应,顺序无所谓        ({name, id} = { id: 10, name: "手机"});        console.log(id, name);        let email = "admin@php.cn";        let { role, email: userEmail } = {role: "user", email: "user@php.cn"};        console.log(userEmail);        console.log(email);        //3. 参数解构        // 数组传参        let sum =  ([a,b]) => a + b;        console.log(sum([10, 20]));        // 对象传参        let getUser = ({name,email}) => [name,email];        console.log(getUser({email:"tp@php.cn", name: "天蓬老师"}));    </script></body></html>

对象字面量的简化 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>对象字面量的简化</title></head><body>    <script>        let user = {            userName: "天蓬老师",            userEmail: "tp@php.cn",            getInfo: function (){                return `${this.userName} (${this.userEmail})`;            }        };        console.log(user.getInfo());        let {userName, userEmail} = user;        console.log(userName, userEmail);        user = {            // userName: userName,            userName,            // userEmail: userEmail,            // 当属性与同一作用域中的变量同名时,可以直接使用属性来引用变量值            userEmail,            // 方法也能简化:删除冒号和 function 关健字            getInfo(){                return `${this.userName} (${this.userEmail})`;            },            // 当前箭头函数中的this指向了全局window            test: ()=> console.log(this),        }        console.log("简化后: ", user.getInfo());        console.log(user.test());        // 箭头函数中的this总是指向定义它时的作用域(静态作用域/词法作用域),而并非调用时的作用域        // user对象不能创建作用域,this 指向了user的作用域/作用域链: window        // 全局没有userName, userEmail,所以输出 undefined    </script></body></html>

bind,call,apply 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>bind,call,apply</title></head><body>    <button>Click</button>    <script>        function hello(name) {            this.name = name;            console.log(this.name);        }        const obj = { name: "admin" };        //经典调用        console.log(hello("朱老师"));        //bind()不会立即执行, 只返回一个函数声明        let f = hello.bind(obj,"天蓬老师");        console.log(f());        // call/apply 立即执行        f = hello.call(obj, "灭绝老师");        console.log(f);        f = hello.apply(obj, ["西门老师"]);        console.log(f);        // bind()应用案例:动态改变this        document.querySelector("button").addEventListener(            "click",            function(){                console.log(this.name);                console.log(this);                document.body.appendChild(document.createElement("p")).innerHTML = "欢迎:" + this.name;            }.bind({name:"猫科动物"})        );    </script></body></html>

访问器属性 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>访问器属性</title></head><body>    <script>        const product = {            data: [                { name: "电脑", price: 5000, num: 5 },                { name: "手机", price: 4000, num: 10 },                { name: "相机", price: 8000, num: 3 },            ],            getAmounts() {                return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );            },            // 访问器属性            // 将方法伪造成一个属性            get total() {                return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );            },            set setPrice(price) {                this.data[1].price = price;            },        }        console.log("总金额 :", product.getAmounts());        console.log("总金额 :", product.total);        product.setPrice = 9988;        console.log(product.data[1].price);    </script></body></html>

访问器属性的优先级 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>访问器属性的优先级</title></head><body>    <script>        let user = {            // name: "朱老师",            data: { name: "朱老师"},            get name() {                // return "灭绝小师妹";                return this.data.name;            },            set name(value){                // this.name = value;                this.data.name = value;            }        }        // 访问器属性优级高于同名的普通属性        user.name = "天蓬老师";        console.log(user.name);    </script></body></html>

流程控制-分支 代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>流程控制-分支</title></head><body>    <script>        let score = 64;        // // 单分支        // if (score >= 60) {        //     console.log('及格');        // }        //双分支        if (score >= 60) {            console.log('及格');            //默认分支        } else {            console.log('补考');        }        //多分支        score = -1;        if (score >= 60 && score < 80) {            console.log('合格');        } else if (score >= 80 && score <= 100) {            console.log('学霸');        }else if(score > 100 || score < 0){            console.log("非法数据");        } else {            console.log('补考');        }        //        switch( true ) {            case score >= 60 && score < 80 :                console.log('合格');                break;            case score >= 80 && score <= 100 :                console.log('学霸');                break;            case score > 100 || score < 0 :                console.log("非法数据");                break;            default:                console.log('补考');        }        // switch 用在单值判断        let response = "Success";        switch(response.toLowerCase()) {            case 'fail':                console.log("请求失败");                break;            case 'success':                console.log("请求成功");                break;            default:                console.log("未知错误");        }        //三元运算符        // 条件? true : false        // //双分支        // if (score >= 60) {        //     console.log('及格');        //     //默认分支        // } else {        //     console.log('补考');        // }        score = 80;        console.log( score >= 60 ? "及格" : "补考");    </script></body></html>

总结:

值传递与引用传递:

  • 值传递(原始类型)如:深拷贝

  • 引用传递(object,array)如:浅拷贝

模板字面量:

  • 将表达式嵌入到字符串

  • 模板字面量使用反引号:“`”

  • 格式${a} 其中a为变量

  • 使用自定义函数来处理模板字面量,它的参数约定


    1. 第一个参数:模板字面量中的字符串字面量组成的数组


    1. 从第二个参数开始,将模板字面量中的变量依次传入

解构赋值:

  • 快速从集合数据(数组/对象)解构出独立变量

  • 对象解构中:属性名与变量名必须一一对应,顺序无所谓

参数解构:

  • 数组传参 和 对象传参

对象字面量的简化:

  • 当属性与同一作用域中的变量同名时,可以直接使用属性来引用变量值

  • 方法也能简化:删除冒号和 function 关健字

  • 箭头函数中的this总是指向定义它时的作用域(静态作用域/词法作用域),而并非调用时的作用域

  • user对象不能创建作用域,this 指向了user的作用域/作用域链: window

  • 全局没有userName, userEmail,所以输出 undefined

bind,call,apply:

  • bind()不会立即执行, 只返回一个函数声明

  • call/apply 立即执行

访问器属性:

  • get set

  • 访问器属性优级高于同名的普通属性

流程控制-分支

  • 单分支

  • 双分支

  • 多分支

  • switch 用在单值判断

  • 三元运算符 条件? true : false

批改状态:未批改

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论