JavaScript  函数语法详解

// 1. Function Definition
function printHello_1$_(name_0) 
{
    // execution
    console.log("Hello World!" + name_0);
}
console.log(typeof printHello_1$_);
// 2. Function Invocation
printHello_1$_(); 
// 3. Function Naming
// 4. Function Parameters
// 5. Function Return

// 6. 函数还可以没名字，直接这样创建。
let him = function(){
    console.log("him");
}
him() // 侧面反映了，名字其实就是一个变量名。
// 8. 函数名字本身不支持传递赋值，但是变量可以。
// him = printHello_1(); // 报错（有点类似数组定义后就不能再赋值？）
let add = him;
add();
// 7. 该变量还是可以赋值其他内容。
him = 6;
console.log(him) // 输出数字 6

if (false)
{
    const add = (a, b) => a + b; // 类似直接创建函数，并且将该函数丢给一个变量调用。
    console.log(add(1,3)); // 没有写返回值，还隐式返回了计算值    
}
if (false)
{
    let add = (a, b) => a + b;
    console.log(add(1,3)); // 打印 4
    const add_0 = add; // 可以正常的变量赋值替换
    add = 5; // 可以看出本质还是变量，如果定义是使用可变类型，则可以改变
    console.log(add); // 打印 5
    console.log(add_0(2, 4)); // 打印 6
}
if (false)
{
    console.log(add_0(10, 4)); // const 变量类型不可以跨作用域
}

if (false)
{
    const add = (a, b) => 
    {
        return a + b;
    }
    console.log(add(1,3));  // 有返回值，表示如果用了大括号可以表示换行但是不会有隐式返回。而单行总是会有隐式返回的。
}

// 例子1
if (false)
{
    const book = new Object({title : "1984", author : "George Orwell"}) // 创建 JSON 对象
    console.log("\n ---------")
    console.log(typeof book) // 查看类型，确实是对象
    console.log(book) // 能正常打印
}
// 例子2（下一节细说，对象的知识点）
if (false)
{
    const book = ({title : "1984", author : "George Orwell"}) // 就算不加关键词 Object 也能有相同效果。
    console.log("\n ---------")
    console.log(typeof book)
    console.log(book)
}
// 例子3
if (false)
{
    const book = [
        {title : "1984", author : "George Orwella"},
        {title : "1985", author : "George Orwellb"},
        {title : "1986", author : "George Orwellc"},
        {title : "1987", author : "George Orwelld"}
    ]
    console.log("\n ---------")
    console.log(typeof book) // 打印类型还是对象 object，但是实际上一个算是数组
    console.log(book)
}

if (false)
{
    const book = ({title : "1984", author : "George Orwell"}) // 就算不加关键词 Object 也能有相同效果。
    console.log("\n ---------")
    let bookJSON = JSON.stringify(book); // 将对象保留原本格式，转换为了字符串，其中键名变成了字符串（就是加了双引号）？方便用于保存在文本内？
    console.log(typeof bookJSON) // 想起来，JSON不也是之前我写ros工程时用到的参数文件吗，还有百度飞浆的文本文件都是这种格式。
    console.log(bookJSON)
}
/* 输出内容如下：
 ---------
string
{"title":"1984","author":"George Orwell"}
*/
// 可以发现键值还是原本的字符串，但是键名已经变换为字符串

if (false)
{
    const book = ([1,23,3,"156"]) 
    console.log("\n ---------")
    console.log(typeof book) // 类型依旧属于 object
    let bookJSON = JSON.stringify(book); // 依旧可以调用，不会出现报错。
    console.log(typeof bookJSON) // 得到的结果 和原结果一模一样的字符串。
    console.log(bookJSON)
}
/* 输出内容如下：
 ---------
object
string
[1,23,3,"156"]
*/
// 可以发现函数好像没有起到作用。判断格式不符合json要求时不会起作用，也不会报错。

if (false)
{
    let data_0 = "[1,2,3]";
    let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 注意，JSON的字符串形式下，键和值都是要加双引号的，弄成类似字符串的形式。有一点不对都会转换失败。
    let parsed = JSON.parse(data); // 逆向操作，将字符串再变回成对象类型。会解析是否符合格式。
    console.log("\n -----")
    console.log(parsed); // 
    console.log(typeof parsed) 
    console.log(typeof data) 
}
/* 输出内容如下：
 -----
{ title: '1984', author: 'George Orwell' }
object
string
*/
// 需要注意的就是字符串中的斜杆表示比较麻烦

if (false)
{
    let data_0 = "[1,2,3]";
    let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}"; // 注意，JSON的字符串形式下，键和值都是要加双引号的，弄成类似字符串的形式。有一点不对都会转换失败。
    let parsed = JSON.parse(data); // 逆向操作，将字符串再变回成对象类型。会解析是否符合格式。
    console.log("\n -----")
    console.log(parsed); // 
    console.log(typeof parsed) 
    console.log(typeof data) 
}
/* 输出内容如下：
 -----
{ title: '1984', author: 'George Orwell' }
object
string
*/
// 需要注意的就是字符串中的斜杆表示比较麻烦

// 2. 另一种创建对象的方法，使用构造函数创建
if (false)
{
    const book = new Object();
    console.log(book); // 一开始创建是空的
    console.log(typeof book); //类型是 object
    book.title = "1984";
    book.author = "George Orwell";
    book.isAvailable = false; // 添加属性
    book.checkIn = function(){
        this.isAvailable = true;  // 添加方法
    };
    book.checkOut = function(){
        this.isAvailable = false; 
    };
     console.log(book); // 打印正常
     console.log(typeof book);
    // 3. 访问对象内元素的方法：
    console.log(book.title); // 类似结构体的访问
    console.log(book["title"]); // 类似字典的访问，输出结果是一样的，注意，这样访问的话，键名一定要加双引号，看作字符串形式
    console.log(book.checkIn); // 如果是访问函数，如果不加括号，会返回对象。打印类似字符：[Function (anonymous)]
    console.log(book.checkIn()); // 如果加括号就相当于调用执行.（返回值空，因为函数内没用写返回值）
    console.log(book["checkIn"]); // 也可以使用字典的形式访问，结果一样
    console.log(book["checkIn"]());  // 就是这个括号是在方括号外面的。
}

if (false)
{
    const bookObj = {    			// 创建一个对象
        checkIn : function(){		// 添加一个属性
            return this;			// 这个属性是一个方法，且有返回值，返回对象本身
        }
    }
    function anotherCheckIn(){		// 创建一个函数
        return this;				// 返回一个函数本身
    }
    console.log(bookObj.checkIn() == bookObj); // 返回值是不是对象本身，对的
    console.log(bookObj.checkIn() == globalThis); // 返回值是不是函数，错的
    console.log(anotherCheckIn() == globalThis); // 返回值是不是函数，对的
}

// Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
if (true)
{
    function promiseTimeout(ms){ // 创建一个函数
        return new Promise((resolve, reject) => { // 返回一个 Promise 对象， 输入参数是一个匿名函数，其中匿名函数又有2个参数，一个是成功时会执行的内容，一个是失败时会执行的内容
            setTimeout(resolve, ms); // js内部函数，延时第二个参数ms后执行 第一个参数的内容。
        });
    }
    promiseTimeout(2000) // 调用函数，传入参数2000ms；
        .then(() => { // 返回的 Promise 对象的内置方法；如果成功则会调用。该内置方法也有一个参数，该参数是匿名函数
            console.log('Done!!'); // 该匿名函数无参入参数，内部功能只有打印
            return promiseTimeout(1000); // 再调用一次函数，又返回一个变量
        }).then(() => { // 因为上面又返回了一个变量，所以可以链式调用，
            console.log('Also done!!'); // 延时1000ms，运行成功后会接着调用
            return Promise.resolve(42); // 又返回一个对象，无限套娃
        }).then((result_0) => { // 传入参数,这个参数名字是随意的，我修改后还是能实现效果。ide自动标红，应该能知道是变量，而非语法关键字
            console.log(result_0); // 打印参数
        })
        .catch(() => { // 同上，不过是失败时调用
            console.log('Error!');
        })
    // 因为 Promise.prototype.then 和  Promise.prototype.catch 方法返回的是 promise， 所以它们可以被链式调用。
}
/*
运行结果为：
先稍等一会打印一行：
Done！
稍等片刻后再同时先后打印两行：
Also done！
42
*/

// Async:Await
function promiseTimeout(ms){
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}
async function longRunningOperation(){
    return 42;
}
async function run(){
    console.log('Start!');
    await promiseTimeout(2000); // 添加await关键字，结果类似去同步运行。本来使用Promise会使先打印，后延时，如果加上A/A后就会按顺序先延时再打印。
    const response = await longRunningOperation();
    console.log(response); // 按道理应该直接返回42并打印，实际上，如果不加await关键字，会立刻返回一个Promise对象，而不是42.
    console.log('Stop!!');
}
run();
/*
运行结果为：
先打印一行：
Start！
稍等片刻后再同时先后打印两行：
42
Stop！
*/