先圣博客
0%

Alchemy University 免费Web3教程：JavaScript第一周

发表于 分类于
看看老外设计的JavaScript教程

这一篇可以作废，但是为了记录，姑且一看。

https://www.alchemy.com/

这是一个有名的网站，因为他们的水龙头服务。

我从他们官网上找到了这个：

https://university.alchemy.com/

炼金学院，他有三门免费的课程：js基础、以太坊开发、Web3之路

你只需要注册一个账号就可以免费享受这些课程，我直接用谷歌账号登录的。

js基础——第一周

首先，我作为一个曾经学习一个星期JavaScript的人来说，我想着应该是不难的。

我更多的是想知道，他如何让初学者入门，和国内的学习方式有什么不同吗？

第一章他会教你怎么样使用他们的平台，还有如何加入社区，以及向谷歌寻求帮助。

我会按照他的结构来调整行文结构，尽量保持一致。

JavaScript基础

什么是程序？

What are Programs?

Programs are text files that humans write. They tell computers what to do! Very often the text that we write in programs is referred to as code. People who write programs are referred to as programmers or coders.

Programs are written in a programming language designed to be human-readable. In this way many programmers can work on the same code with a common understanding of what it’s trying to accomplish!

When a program is ready to be executed by a machine, it is read line-by-line by a compiler or an interpreter. Both of these tools will translate the code into instructions a machine can run.

什么是程序？

程序是人类编写的文本文件。他们告诉电脑该做什么！我们在程序中编写的文本通常称为代码。编写程序的人被称为程序员或编码员。

程序是用设计为人类可读的编程语言编写的。通过这种方式，许多程序员可以在对代码试图完成的目标达成共识的情况下处理相同的代码！

当程序准备好由机器执行时，它会被编译器或解释器逐行读取。这两种工具都会将代码翻译成机器可以运行的指令。

JavaScript简介

  1. 数值变量 Number Variable
  2. 多个变量 Multiple Variables
  3. 布尔值 Booleans
  4. 字符串 Strings
  5. 可变的let Mutable Let
  6. 注释 Comments

怎么说呢，他并不是直接从数据类型开始，或者说没有严格的死板的从数据类型走。

感觉还算不错，就是例子太简单了一些。

函数与操作

  1. 获取消息 Get Message
  2. 数值加二 Add Two
  3. 乘法 Multiply
  4. 平均数 Average
  5. 随机数 Random
  6. 地板 Floor

除了第一个是处理String，其他的都还是处理数值，我有些不明白，他们为什么如此钟爱数值。

选择

  1. 是否相等 Is Equal
  2. 是否不相等 Is Not Equal
  3. 否则 Else
  4. 大于 Greater Than
  5. 足够的 Is Enough
  6. 否则如果 Else If

我原本觉得应该是选择结构，但是实际上只出现了if和else，对于初学者来说这完全够用了。

我个人觉得可能不会英语才是学习的障碍，另外这个编辑器还是蛮友好的，基本上之需要你写最重要的部分。

循环

  1. 总和 Summation
  2. 阶乘 Factorial
  3. 尖叫 Scream 字符串处理
  4. 弹性尖叫 Modulus Scream
  5. 双倍顶部 Top Double

这些题目还是很有意思的，比如说尖叫就是利用循环来重复字母a，练习不至于太过僵硬。

练习题1

  1. 是偶数吗 isEven
  2. 较小的数 Smaller Number
  3. 信息插入 Message Interpolation 此处需要学习对象相关知识
  4. 号码检查 Number Check
  5. 最大求和 Max Sum

除了第三题有些莫名其妙外，其他的都还好，我一度以为他需要面向对象的知识，结果发现完全不需要。

数据存储 Data Storage

字符串处理 String Manipulation

  1. 以X开头 Starts With X
  2. 忽略大小写 Starts With Casing
  3. 以X结尾 Ends With X
  4. 所有的都是X吗 Is All X
  5. 找到第一个X Find First X
  6. 分割X Split at X

挺有趣的，有些要看下测试文件才知道该怎么过关 emmm中间穿插学习了数组。

数组 Arrays

  1. 创建数组 Create Array
  2. (数组中)有一吗 Has One
  3. 偶数求和 Sum Even
  4. 独一无二的 Unique
  5. 加入一个(元素) Add One
  6. 删除事件 Remove Occurrences

他都有一些提示的，会提示一些方法，其实不用他的方法也可以写出来，有兴趣的自己尝试一下。

对象 Objects

  1. 披萨订单 Pizza Order
  2. 有多少个披萨 How Many Pizzas
  3. 多少个订单 Many Orders
  4. 类型订单 Typed Orders
  5. 按照类型添加 Add By Type
  6. 对象键 Object Keys
  7. 秘密键 Secret Key

请看清楚测试题目的要求，很多题目不难的，但是将要求看错了emmm看测试文件才知道该怎么写。

我个人觉得他把对象说的太简单了，就是键值对，但是在JS里面这又没啥问题，可能是学Java的太执着了。

练习题2

  1. 最短的字符串 Shortest String
  2. 减半的值 Half Value
  3. 计数C Count C
  4. 计数元音 Count Vowels
  5. 反转 Reverse
  6. 回文 Palindrome
  7. 一起求和 Sum Together
  8. 数元素 Count the Elements
  9. 玩家手牌得分 Player Hand Score

都是很好的题目，有些方法你得回去重新看，或者去搜索。我建议用最朴素的方法区完成他，这感觉真不错。

中级JS特性 Intermediate JavaScript Features

逻辑运算符 Logical Operators

  1. 或者运算符 OR Operator
  2. 默认运算符 Default Operator
  3. 并且运算符 AND Operator
  4. 保护运算符 Guard Operator
  5. 取反运算符 NOT Operator

蛮有意思的，原本我以为只有三个的，没有想到OR和AND还有其他的意思。稍加思索，也觉得这是可行的。

异常 Exceptions

  1. 抛出错误 Throw an Error
  2. 捕获错误 Catch An Error
  3. 返回错误 Return Error
  4. 产生错误 Start an Error

总的来说，和Java差不多，都是tay和catch关键词。如果你没有学过Java，那得努力看点其他资料。

类型转换 Type Conversion

  1. 字符串转数字 String to Number
  2. 转化成字符串 To String
  3. 布尔值转换 Is Truthy
  4. 宽松的比较 Loose Equals
  5. 对象和JSON Object to JSON
  6. 有效的JSON Valid JSON

初学者注意下显式转换和隐式转换。

JS提供了两个内置方法来处理对象和JSON，分别如下：

JSON.stringify(); 将Object转为JSON

JSON.parse(); 将JSON转为Object

解构 Destructuring, Rest & Spread

ECMAScript新特性：() => {}、class、import

因为到了这里我也不会，所以就多写一点，也作为备忘录吧。

解构 Destructuring

解构可以拆包一个对象，将他的属性赋值到新的变量中。

1
2
3
4
5
6
7
var student={
    name:'张三',
    age:18,
}
var {age,name}=student
console.log(name); // 张三
console.log(age); // 18

这里我特意使用初学者熟悉的var而非const，不过在这里这关系不大。

我构建了一个学生对象，有name和age两个属性，按照一般的赋值方法是：

var name = student.name

通过结构我们能够更加方便的取值，但是请注意变量名要和属性名相同，如果你用names是无法取到值的。

解构对象时：你可以只取一个值，也可以取多个值，顺序可以颠倒，但是名字一定要对应。

1
2
3
4
var arr = ["hello", "world"];
var [b, a] = arr;
console.log(b); // hello
console.log(a); // world

解构还可以用于数组，毕竟数组也是引用类型。

解构数组时，按照下标顺序解构，名字不重要。

同样适用于函数参数，比如：

1
2
3
4
5
6
7
8
9
10
function addThree([a,b,c]) {
    return a + b + c;
}
function getName({name:name}) {
    return name;
}
var sum = addThree([1,2,3]);
var name = getName({name:'王小二'});
console.log(sum); // 6
console.log(name); // 王小二

其实就是上面的内容，只是做了一个自动转换而已，用起来感觉很方便的。

可变参数 Rest Parameters

在函数的参数上使用…来完成可变参数。

1
2
3
4
5
function log(...args) {
    console.log(args);
}

log(1, '2', true, 4.8, {name:'高祖'}); // [1, '2', true, 4.8, {name:'高祖'}]

他将所有的参数封装到了数组里面，自己多写几个案例体会一下。

展开参数 Spread Arguments

看代码自己体会，将可变参数逆着运用，区别在于不是获取多少参数，而是展开多少参数。

1
2
3
4
5
6
var numbers = [1, 2, 3, 4];
function add(a, b, c) {
  return a + b + c;
}
var sum = add(...numbers);
console.log(sum); // 6

解构只是给你提供便利，你任然可以按照之前的方式写代码，这是个人习惯，而非强制。

练习3

  1. 被3或5整除，但非同时 Either Not Both
  2. 用单词替换数字 Fizz Buzz

考验一点点逻辑思维，稍加思索就可以给出正确答案。

类和原型 Classes & Prototypes

This关键词 This Keyword

  1. 使用This Using This
  2. 绑定This Binding This
  3. 隐式绑定 Implicit Binding
  4. 未绑定函数 Unbound Function

这里我其实是云里雾里的，我觉得我可能还需要看其他的资料才能明白这到底是怎么回事。

如果只是做题，我觉得题目和答案，就是那种看答案才知道题目意思的感觉。

原型链 Prototype Chain

  1. 逐渐成形 Taking Shape
  2. 改变形态 Move Shape
  3. 圆形 Circle Shape
  4. 变动的圆 Move Circle
  5. 矩形 Rectangle
  6. 矩形翻转 Rectangle Flip

我开始搞不懂了，何为原型？我向GPT询问，他给出答案是。

JavaScript中的原型链（Prototype Chain）和Java中的类（Class）是两种不同的概念和实现方式。

原型链是JavaScript中实现继承的一种机制。每个JavaScript对象都有一个内部属性[[Prototype]]，它指向另一个对象，称为原型对象（Prototype Object）。当访问一个对象的属性时，如果对象本身没有该属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的顶端（通常是Object.prototype）。这样就实现了属性的继承和共享。通过修改原型对象，可以实现对所有继承自该原型的对象的属性和方法的修改和扩展。

Java中的类是面向对象编程中的一个基本概念。类定义了对象的属性和方法。通过实例化类，可以创建类的对象，并通过对象来访问属性和方法。Java中的继承是通过使用extends关键字来实现的，一个类可以继承另一个类的属性和方法。子类可以扩展父类的功能，也可以重写父类的方法。

区别如下：

  1. 原型链是JavaScript中的一种继承机制，而类是Java中的基本概念。
  2. JavaScript的原型链是基于对象的，每个对象都有一个指向原型对象的引用。而Java的类是独立定义的，对象通过实例化类来创建，类和对象之间是显式的关系。
  3. JavaScript的原型链是动态的，可以在运行时修改和扩展。Java的类在编译时定义，通常是静态的，不能在运行时动态修改。
  4. JavaScript的原型链可以是多层嵌套的，一个对象可以作为另一个对象的原型，形成一个链式结构。Java的类之间是通过继承关系来连接的，形成一个树状结构。

总的来说，原型链和类是不同的继承机制，JavaScript的原型链更加灵活和动态，而Java的类提供了更严格和静态的定义和继承方式。

类 Classes

  1. 英雄 Hero
  2. 受到伤害 Take Damage
  3. 战士 Warrior
  4. 超级战士 Super Warrior
  5. 构建愤怒 Building Rage
  6. 通过健康 Passing Health

我觉得应该先学习Classes再学习Prototype Chain的，毕竟类的概念好理解多了。

我觉得JS还是有可取之处的，就比如同样的情况下，JS的语法会简洁很多。不知道是不是Java写多了，反而觉得这样不适应。另外，一些关键词也和Java有所差异，需要去理解独有的概念。总的来说，教程设计的还是不错的，但是这似乎太过片面，以至于难以整理成体系。趣味性很强，很多的都是一个系列的游戏，但是却无法把概念说清楚，用于启蒙是足够的。