应项目的需求，我需要调用MediaPipe的face_mesh接口，然后实现我们要做的牙齿2D贴图项目。我是用Python写的脚本，目前需要转成JS语言。在这种情况下，我不得不重新再过一遍JS！
JS 显示
window.alert()写入警告框document.write()写入HTML输入innerHTML写入HTML元素console.log()写入浏览器控制台
JS 变量
ES6不再建议使用 var 定义变量，而使用 let 定义变量，使用 const 定义常量。
let定义的变量可以修改，不可重复定义。var定义的常量不可修改，不可重复定义。
JS 数据类型
- 数字类型：
var length = 7; - 字符串类型：
var lastName = "Gates"; - 数组类型：
var cars = ["Porsche", "Volvo", "BMW"]; - 对象类型：
var x = {firstName:"Bill", lastName:"Gates"}; - 空、Undefined、Null类型：
var person;var car="";var person=null;
JS 事件
HTML 事件是发生在 HTML 元素上的“事情”。
常见 HTML 事件:
- onchange：HTML 元素已被改变。
- onclick：用户点击了 HTML 元素。
- onmouseover/onmouseout：用户把鼠标移到/移开 HTML 元素上。
- onkeydown：用户按下键盘按键。
- onload：浏览器已经完成页面加载。
更多 HTML DOM 事件，请点击。
使用事件的方式：
- document 改变 id='demo' 元素的内容
<body>
<p id="demo"></p>
<button onclick="document.getElementById('demo').innerHTML=Date()">现在是几点？</button>
</body>
- this 改变自身元素的内容
<body>
<p id="demo"></p>
<button onclick="this.innerHTML=Date()">现在是几点？</button>
</body>
- 调用函数
<body>
<p id="demo"></p>
<button onclick='myData()'>现在是几点？</button>
<script src="myScript.js"></script>
</body>
myScript.js：
function myData(){
document.getElementById("demo").innerHTML=Date()
}
JS For 循环
- for 循环
for(i = 0; i < cars.length; i++){
text += cars[i] + "<br>"
}
- for in 循环
数组：for in 遍历索引
对象：for in 能遍历对象
const person = {fname:"Bill", lname:"Gates", age:19}
for(let x in person){
txt += person[x]
}
- for of 循环
数组：for of 遍历值
对象：for of 只能遍历带接口的对象，如 Set，Map，String，Array
const cars = ["BMW", "Volvo", "Mini"]
let text = ""
for(let x of cars){
text += x
}
JS 函数
- JS 的普通函数
function add(a,b){
return a+b;
}
- JS 的箭头函数
add = (a,b) => a+b;
注：
带箭头的函数，只有1个参数可省略参数括号：
hello = (val) => "hello" + val;
hello = val => "hello" + val;
无参数：
hello = () => "Hello World!";
- 调用：
const res = add(5,6);
//如果函数调用，没有返回值，则res为undefine
JS 类
用 class 关键字来创建一个类，类体在一对大括号中，打括号中定义类成员的位置，比如方法或构造函数。每个类中包含一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下：
class ClassName{
constructor(){...}
}
实例：
class robot{
constructor(name, url){
this.name = name;
}
}
调用：创建对象时会自动调用构造方法。
let r1 = new robot("Lily")
JS 对象
-
JS中除了原始值（没有属性和方法的值），其余的都是对象。
-
原始数据类型指的是拥有原始值的数据： string、number、boolean、null、undefined
对象声明
对象由属性和方法组成。
- 法 1：
let 对象名 = {
属性名 ：属性值,
方法名 : 函数
}
- 法 2：
let 对象名 = new Object()
对象属性使用
- 查
对象名.属性名
- 改/增
对象名.属性名 = 新值
对象名['属性名'] = 新值
- 删：
delete 对象名.属性
对象方法使用
- 查：
对象名.方法名()
- 改/增:
在对象外部
对象名.方法名 = 函数
遍历对象
JS 的 Set、Map
- 普通对象
obj = ['one', 'two', 'three']
for (let k in obj){
console(obj[k])
// 对于键值对的对象，这种方式拿到的是值
// 不能用 obj.k 是因为 k 是一个字符串
}
- Set 对象
创建 Set：
const letters = new Set(['a', 'b', 'c'])
增加元素：
letter.add('d')
遍历 Set：
<script>
letters = new Set(['a', 'b', 'c'])
let text = "";
letters.forEach(function(value){
text += value;
})
console.log(text) // abc
</script>
- Map 对象
创建 Map：
const fruits =new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
])
增加元素：
// 创建一个 Map
const fruits = new Map();
// 设置 Map 的值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
得到元素：
fruits.get("apples");
遍历 Map：
<script>
let text = "";
fruits.forEach(function(key, value){
text += key + ':' + value;
})
console.log(text) // abc
</script>
JS 模块
模块仅适用于 HTTP(s) 协议，通过 file:// 协议打开的网页无法使用导入/导出。
JS 模块允许您将代码分解成单独的文件，当需要使用的时候，可以使用 import 语句从外部文件导入的。
message.js：
const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;
从 message.js 中导入：
<script type="module">
import message from "./message.js"
</script>
JS JSON
JSON 指的是 JavaScript Object Notation
{
"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]
}
JSON 语法规则
- 数据是键值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 文本转 JS 对象
var obj = JSON.parse(text);
什么是 this？
在 JavaScript 中，this 关键字引用对象。
引用哪个对象取决于调用（使用或调用）的方式。
根据其使用方式，关键字 this 引用不同的对象：
- 在对象方法中，
this引用该对象。 - 单独使用时，
this引用全局对象。 - 在函数中，
this引用全局对象。 - 在函数中，在严格模式下，
this是undefined。 - 在事件中，
this引用接收事件的元素。 - call()、apply() 和 bind() 等方法可以将
this引用到任何对象。
注意：this 不是变量。它是一个关键字。您无法修改 this 的值。
