JavaScript 入门笔记 - 下 - 函数语法
前言，承接上篇，写完剩下的笔记。
十七、普通函数
- js的函数创建比较特殊，有很多种方式，最简单的一种和c语言类似。
特点：
-
函数名字可以除了字母、数字、下划线外，还可以存在 “$” 字符。 -
在js中，函数名就是一个储存函数对象的变量。使用 typeof 关键字可以查看函数类型。（这个理念和python类似，可以用其他变量接手这个函数） -
函数形参定义时不需要写关键字：var、let、const。应该默认就是局部可修改变量。 -
JS 语法中 不检查输入参数。这意味着，输入参数可少可多。少了输入undefined代替，多了自动忽略。 -
同上理，JS 也不拘束是否有返回值，统一都有返回值。如果没有写明返回值，则统一返回无效值。
function printHello_1$_(name_0)
{
console.log("Hello World!" + name_0);
}
console.log(typeof printHello_1$_);
printHello_1$_();
- js还支持匿名函数，就是不写函数名。python中也有类似，在python学习笔记中也有记录：
lambda匿名函数。
let him = function(){
console.log("him");
}
him()
let add = him;
add();
him = 6;
console.log(him)
在后期用起来，快分不清哪个是数据变量，哪个是功能函数了。
十八、箭头函数
- js中箭头函数就是“名副其实”的匿名函数了，可快速创建嵌套函数功能体（自创用词）……也更加贴合python的
lambda匿名函数用法。
在看实战案例时全是这种匿名函数的创建和传参，第一次接触懵逼得不要不要的。下面的代码为了方便看效果，我会把用不到的部分改成假，屏蔽运行。你问为什么不直接注释？因为想锻炼用法。
- 使用方法看似简单，前面括号就是用到的参数，箭头后面紧跟代码。如果是单行的简易代码可不用写括号，单行还自带隐式返回计算值。
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));
const add_0 = add;
add = 5;
console.log(add);
console.log(add_0(2, 4));
}
if (false)
{
console.log(add_0(10, 4));
}
if (false)
{
const add = (a, b) =>
{
return a + b;
}
console.log(add(1,3));
}
十九、数据包 JSON
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。【截至百科】
- 在之前学习神经网络和
ros时也有接触这类数据包，一个小小的后缀.json文件，装着一堆参数或数据集。从格式上看，很像字典，有键和值成对。如果展开图形化，其实是一个列表，有表头和数据。 - js提供
Object类来创建json对象。（其实就是创建对象，下一节再细说）
if (false)
{
const book = new Object({title : "1984", author : "George Orwell"})
console.log("\n ---------")
console.log(typeof book)
console.log(book)
}
if (false)
{
const book = ({title : "1984", author : "George Orwell"})
console.log("\n ---------")
console.log(typeof book)
console.log(book)
}
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)
console.log(book)
}
- js提供将json对象数据转换为字符串的方法：
JSON.stringify()。
if (false)
{
const book = ({title : "1984", author : "George Orwell"})
console.log("\n ---------")
let bookJSON = JSON.stringify(book);
console.log(typeof bookJSON)
console.log(bookJSON)
}
我做了一个类比实验，看如下注释。
if (false)
{
const book = ([1,23,3,"156"])
console.log("\n ---------")
console.log(typeof book)
let bookJSON = JSON.stringify(book);
console.log(typeof bookJSON)
console.log(bookJSON)
}
- js提供将字符串数据转换为json对象的方法：
JSON.parse()。就是JSON.stringify()的逆操作了。
if (false)
{
let data_0 = "[1,2,3]";
let data = "{\"title\" : \"1984\", \"author\" : \"George Orwell\"}";
let parsed = JSON.parse(data);
console.log("\n -----")
console.log(parsed);
console.log(typeof parsed)
console.log(typeof data)
}
- 学习JSON格式数据的使用非常重要，json变量其实并非普通的数据，而是包含众多数据处理函数的对象。比如上述2个字符串和数据之间相互转换的函数，检查在实战中用到。分别是读取数据和存储数据的2个操作。
二十、对象 Object
- js中的对象创建不同于python的类，而是直接创建对象。我直接看例子，结合例子展开。
if (false)
{
const book = {
title : "1984",
author : "George Orwell",
isAvailable : false,
checkIn : function(){
this.isAvailable = true;
},
checkOut : function(){
this.isAvailable = false;
}
};
console.log(book);
console.log(typeof book);
}
- 从格式可以看出，感觉是一堆属性，有字符串，有匿名函数。而且不是用等于号而是用冒号赋值，就像字典的键对一样。
所以现在看来，其实json数据包，在js中相当于对象的存在。如果是直接打印函数方法，会输出类似字符：[Function (anonymous)]。
- 除了一开始直接赋值，也可以采用先创建空对象，再逐步添加值。如果已经存在的属性会覆盖，否则就当作是添加。（很简单粗暴）
if (false)
{
const book = new Object();
console.log(book);
console.log(typeof book);
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);
console.log(book.title);
console.log(book["title"]);
console.log(book.checkIn);
console.log(book.checkIn());
console.log(book["checkIn"]);
console.log(book["checkIn"]());
}
- 上下文机制：
this ,并不完全是在对象内值指对象的名字，而是指代上下文使用的变量？（具体看视频讲解，我理解还不太透彻） - 类似于我使用的主体，我使用的主体是对象，返回的就是对象，我使用的函数，返回的就是函数。所以
this还可以在函数中使用，虽然函数本身也是一个对象（？）。
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
懵逼的一节，讲js中的异步运行机制？不多解释，怕越说越错。
if (true)
{
function promiseTimeout(ms){
return new Promise((resolve, reject) => {
setTimeout(resolve, ms);
});
}
promiseTimeout(2000)
.then(() => {
console.log('Done!!');
return promiseTimeout(1000);
}).then(() => {
console.log('Also done!!');
return Promise.resolve(42);
}).then((result_0) => {
console.log(result_0);
})
.catch(() => {
console.log('Error!');
})
}
可以看到疯狂嵌套对象的内置方法和使用箭头函数作为传参。看得我人都傻了……
二十二、Async : Await
和Promise机制相反。
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);
const response = await longRunningOperation();
console.log(response);
console.log('Stop!!');
}
run();
二十三、包
- 使用node.js中附带的nvm工具，可以很好的管理js软件包。而且工程可以配备了相关软件包目录。只需要在其中添加对应软件包，再输入更新工程指令就可以在工程中添加软件包。
类似于编译一样，不过这个是下载。过去python提倡将软件包直接安装在电脑工作环境空间内。而c语言的相关库是建议在工程内。js也是提倡在工程内。不过如果要转移程序时，会讲软件包文件夹删除。只转移工程代码部分。转移完毕后在别的电脑上再使用更新下载功能即可。这个操作有点像之前学过的ros工程。不过ros工程就算不设置正确也能正常运行，js如果设置不准确，在编译时就不通过了。
二十四、总结
- 后面这几章比较复杂，我都还没完全弄清楚，只是看了视频教程后大概有概念。
- 在跟着js小项目做时还是看不到那个离谱的 对象+箭头函数传参 的用法。
- 日后再补充详细。
|