第11章 0330-常量,函数与数据类型-PHP课程网总结-前端部分-郭俊杰的知识库

第11章 0330-常量,函数与数据类型

Data: 2018-04-15 07:44:20Form: JournalClick: 2

问题集合：

1. 函数就是对象，函数和方法是什么关系？

答：函数在对象中叫方法,引用对象的函数,需要使用对象才能引用到

2. 哪位同学知道html如何定义变量，就是监听输入框的文本，自动存为变量？

答：能够预设初始值，或是利用js获取，然后存为变量使用

3. 我下载的vscode和老师的版本不同吗？有些按钮没有？

答：这些都是插件，后面需要使用的话，老师会推荐安装的

按钮是

字体颜色：

4. 我的编辑器用单引号保存自动变成双引号了，这个咋弄？

答：插件导致的

5. 这创建一个对象到底前面需要东西？

答：创建一个变量，目前有几种 var(不推荐使用)、let、const(常量使用)，如果变量名前什么都不加，则默认为全局变量

demo1：作用域与函数

let：只影响当前作用代码块

var：执行完函数就会销毁该变量

const：一经赋值，不可改变

最好不用var、不变函数用const、会变参数用let

// 作用域: 块作用域,函数作用域, 代码成员的可见范围
        // 1. Let 块作用域，只影响当前作用代码块，不影响超出范围变量
        {
            let a = 123;
            // let a ;
            // a = 123
            console.log(a);
        }
        // console.log(a);

        // 1. 函数作用域
        function sum(a, b) {
            // 私有成员
            let res = a + b;
            console.log(res);
        }

        sum(3, 4);

        // 3. 全局作用域: 代码块之外,公共变量
        let email = 'aaaa@php.cn';
        console.log(email);

        {
            console.log(email);
        }

        function fn() {
            console.log(email);
        }

        fn();

        function f1() {
            return function f2() {
                return function f3() {
                    console.log(email);
                    //这边没有 return 所以会输出undefined
                };
            };
        }
        // 以上语句理解等效如下
        // let x = f1();
        // let y = x();
        // let z = y();

        console.log(f1()()());

demo2：变量命名方式

// 常量:经常使用的数据,不能更新,以保持一致性
        // 不能更新,所以在声明时,必须初始化
        const APP = '我的博客';
        console.log(APP);
        // 常量通常是全大写,多个单词之间用下划线

        // 标识符: 变量,函数,对象...
        // 标识符有二类:
        // 1. 系统预定义:  const, let ,function , 不需要声明,直接使用
        // 2. 自定义标识符: 必须"先声明,再使用", 扩展系统功能

        // 命名规则:
        // 必须是: 字母,数字, 下划线"_", "$"(四种),其它字符均是非法符号
        //  首字母不得使用"数字"

        // username, user-name, user_name, user@name, user$name, $username
        // user123name, 123username, user name,  user#name

        // 推荐的命名规范,不是强制性的,只是行业规范
        // 1. 驼峰式:
        // 小驼峰: userName
        // 大驼峰: UserName
        // 2. 蛇形式:
        // user_name
        // APP_PATH

demo3：函数调用方法

  // 函数是一等公民: 当成数据类型来用

        // 1. 命名函数

        function getName(username) {
            return 'Hello ' + username;
        }

        console.log(getName('猪老师'));

        // 2. 匿名函数
        // 第一种声明方式,将匿名函数当成值赋给一个变量
        let getUserName = function(username) {
            return 'Hello ' + username;
        };
        console.log(getUserName('王老师'));

        // 第二种方式将声明与调用二合一: 立即调用函数,IIFE
        // 表达式,是用一对括号包住的
        console.log(
            (function(username) {
                return 'Hello ' + username;
            })('张老师')
        );

        // 3. 箭头函数,用来简化匿名函数的声明

        function sum(a, b) {
            console.log(a + b);
        }

        // 改成箭头函数
        // 将命名函数改成了匿名函数
        let add = function(a, b) {
            console.log(a + b);
        };

        // 使用箭头函数来简化匿名函数
        // => 胖箭头, ->

        // 转化方法
        // 1. 去掉 function
        // 2. 在参数列表与大括号之间使用 '=>'
        add = (a, b) => {
            console.log(a + b);
        };

        // 如果只有一个参数,可以不写参数列表的括号
        add = a => {
            console.log(a + 88);
        };
        // 如果没有参数,括号必须加上
        add = () => {
            console.log(34 + 88);
        };

        // 如果函数体只有一条语句, 大括号都可以不用

        add = () => console.log(34 + 88);
        add();

        //  let getUserName = function(username) {
        //     return 'Hello ' + username;
        // };

        let fn = username => 'Hello ' + username;
        console.log(fn('猪老师好'));
        // 1. 如果函数需要多次调用, 用命名, 函数表达式, 都可以
        // 2. 如果代码要求,必须遵循"先声明, 再调用"的规则, 那就必须用"函数表达式"
        // 3. 如果只有完成一些特定的,一次性的工作, 不想留下任何痕迹, 用"IIFE", 模块
        // 4. 如果调用函数时,需要一个函数充当参数,例如:回调, 就可以使用箭头函数来简化 匿名函数的 声明

demo4：数据类型

// 1. 原始类型: number, string, boolean,undefined, null
        // console.log(100 + 200);
        // console.log(typeof 100, typeof 200);
        // console.log('hello ' + 'world');
        // console.log(typeof('hello ' + 100));
        // 为什么要发生类型转换?
        // 因为不同的类型的数据,不能直接运算
        // 先转换,再运算
        // console.log(true, false);
        // console.log(typeof true);
        // console.log(typeof(true + 1));
        // true => 1 隐式转换
        // console.log(typeof undefined);
        // let a;
        // console.log(a);
        // console.log(null);
        // 一个变量对应一个值,标量

        // 2. 引用类型, array, object, function
        // 一个变量保存的是一个集合,并非单值,访问时不能直接访问,必须通过这个变量的引用来访问
        // 数组
        // const arr = [1, 2, 3];
        // const arr = [1, 'admin', true];
        const arr = [1, 'admin', [1, 2, 3], true];
        console.log(arr);
        // 访问数据元素,必须通过数组的引用(数组名称arr)来访问(arr是一个访问入口)
        // 数组成员 的索引是从0开始
        console.log(arr[1]);
        console.log(arr[2][1]);
        // 引用类型判断不能用typeof
        console.log(typeof arr);
        console.log(Array.isArray(arr));

        // 对象
        // 先把对象想象成一个关联数组
        let obj = {
            id: 1,
            username: 'jack',
            num: [1, 2, 3],
            isOk: true,
            'my email': '498668472@qq.com',
        };
        console.log(arr[1]);
        console.log(obj['username']);
        // 为了简化,并与数组区别,对象有自己的成员访问符: .
        console.log(obj.username);
        console.log(obj['my email']);

        function getUser(obj) {
            return 'id =' + obj.id + ', username =' + obj.username;
        }

        console.log(getUser(obj));

        // 对象是可以将数据与函数封装到一起,做为一个独立的编程单元

        // 对象字面量
        obj2 = {
            id: 1,
            username: 'jack',
            num: [1, 2, 3],
            isOk: true,
            'my email': '498668472@qq.com',
            // 将一个函数转为对象的方法,封装到对象中
            getUser: function() {
                // 在对象中,使用变量this来引用对象自身
                return 'id =' + this.id + ', username =' + this.username;
            },
        };

        console.log(obj2.getUser());

        // 函数
        // 函数是对象,也是一个值,可以当成参数传递,也可以当成返回值
        console.log(typeof
            function() {});

        function f1(callback) {
            console.log(typeof callback);
            console.log(callback());
        }

        f1(function() {
            return 'Hello 猪老师';
        });

        // 函数当返回值: 闭包

        function f2() {
            // a是 f2的私有变量
            let a = 1;
            return function() {
                // return (a += 1);
                // 而此时,子函数中的a并不是自己的,是父函数的
                return a++;
            };
        }

        console.log(f2());
        const f = f2();
        // console.log(f);
        console.log(f());
        console.log(f());
        console.log(f());
        console.log(f());
        console.log(f());
        console.log(f());

        // 函数就是对象,对象就可以添加属性和方法
        let f3 = function() {};
        f3.myemail = 'admin@php.cn';
        console.log(f3.myemail);
        f3.getEmail = function() {
            console.log(this.myemail);
        };
        f3.getEmail();