JS学习笔记（一）

词汇表

Function Invocation 词汇调用

外链式js

一般在最后放置js链接，格式如下:

<script src="myScript.js"></script>

一般来说js和html文件不会放在同一个文件夹，用../回到上一级文件夹，然后通过IDE自动找到目录。

简单的js输出

document.getElementById("demo").innerHTML = 5 + 6;
document.write(5 + 6);
<button type="button" onclick="document.write(5 + 6)">Try it</button>
window.alert(5 + 6);
console.log(5 + 6);
<button onclick="window.print()">Print this page</button>

如上，第一行式简单的找id为demo的元素打印11

第二行是在文档的末尾打印11

第三行将会覆盖整个页面，只剩下一个11

第四行会弹出一个警告框显示11

第五行会在控制台里打印11

第六行会打印整个页面

js声明变量

let x,y,z,k;
x=5;
y=6;
z=x+y;
k="Hello World";

let和var的区别

var在整个函数里有效，let在块作用域有效，比如：在for循环里定义var和let，var可以在整个函数里使用，而let只能在for循环里使用.

let可以声明为一个全局变量，然后在代码块里再次声明，但是不可以在同一个块内声明两次.

var变量可以在声明前导入值（let则不行），如：

carName = "Volvo";

var carName;

运算符号

特别的运算符号包括===和！==，他们除了判断值是否相等，还判断类型是否相同.

数据类型

js的8种数据类型：

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

//科学计数法
let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

js对象

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

js的一些事件

转义字符

字符串

js的字符串也有length属性

字符串的方法

//slice方法包括开头，不包括结尾，输出Banana
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);
//输出第7个字符后面的字符
let part = text.slice(7);
//输出从末尾开始12位后面的字符（输出Banana， Kiwi）
let part = text.slice(-12);
let part = text.slice(-12, -6);

//substring方法与slice方法类似
//substr方法与slice方法类似
//replace方法用于替换第一次匹配到的字符串,默认匹配大小写
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
//replace方法关闭匹配大小写
let newText = text.replace(/MICROSOFT/i, "W3Schools");
//replace方法开启匹配所有字符串
let newText = text.replace(/Microsoft/g, "W3Schools");
//replaceall方法允许不打双引号，但是不打的时候要加上/g,默认匹配所有字符串，区别大小写
text = text.replaceAll(/cats/g,"dogs");
text = text.replaceAll("cats","dogs");
//字符串大写化
let text1 = "Hello World!";
let text2 = text1.toUpperCase();
//字符串小写化
let text1 = "Hello World!";   
let text2 = text1.toLowerCase(); 
//字符串连接
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
//删除多余空白trim
let text1 = "      Hello World!      ";
let text2 = text1.trim();
//trimStart只移除开始的部分空白
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();
//trimEnd只移除从末尾开始的空白
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();
//padEnd和padStart，在字符串的尾部或首部加上n个字符，如下面这段是在尾部加入4个x
let text = "5";
let padded = text.padEnd(4,"x");
//charAt方法，下面这段返回H
let text = "HELLO WORLD";
let char = text.charAt(0);
//charCodeAt,返回对应字符的UTF-16码
let text = "HELLO WORLD";
let char = text.charCodeAt(0);
//字符串可以通过数组的方式来访问，如text[0]="H"
//split方法用于分开字符串，分开后传入一个数组
text.split(",")    // 以，为依据分开
text.split(" ")    // 以空格为依据分开
text.split("|")    // 以竖线为依据分开
text.split("")     // 每个字符为一个元素，输出到数组里

js搜索的方法

//搜寻最后一个匹配的字符串，从第十五个字符开始找
let text = "Please locate where 'locate' occurs!";
text.indexOf("locate", 15);
//indexOf的功能和search相同，但是search只能接受一个数字，而indexOf不能接受正则表达式
//match只匹配第一个，接受正则表达式，将结果存入一个数组，包括匹配成功的次数和匹配出的字符串的重复。
//matchall则是匹配全部（大小写敏感）
//includes返回一个boolean值，并可以指定匹配开始的位置
let text = "Hello world, welcome to the universe.";
text.includes("world");
text.includes("world", 12);

js模块化文字

//使用`替换双引号和单引号，允许在字符串中方便的加入变量
//可以用来输出html元素，比如下面这段代码会输出一个列表
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

js数字

在js中，浮点数的加减法并不准确，比如：

//0.2+0.1！=0.3
let x = 0.2 + 0.1;

为了解决这个问题，建议用乘法化成整数再计算.

let x = (0.2 * 10 + 0.1 * 10) / 10;

数字和字符串的加法

js允许数字和字符串相加，相加时将数字视为字符串

字符串之间允许减乘除运算，js会试图将字符串内容转换为数字，而加法运算则是进行字符串拼接.

如果试图用数字与字符串继续减乘除运算，js会试图将字符串的内容转换为数字，若失败则输出NaN（Not a Number）

NaN是一个特殊的数字类变量，他与任何数字运算结果都是NaN，与字符串相加如NaN+"5"="NaN5"

infinity无穷大，如果一个数大于js能表示的最大数或者小于能表达的最小数，则会将变量转为infinity和

（-infinity）

//js允许通过toString方法将数字转化为2-36进制的数.
let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);
//js允许将数字写为16进制
let x = 0xFF;（x==255）

最后，object对象是不能用来比较的，比如==和===都返回false

jsBigInt

js最大的数是(253-1）即9007199254740991

最小的数是-(253-1)，即 -9007199254740991

超出这个范围的数失去意义，比如：

//结果为true
9007199254740992 === 9007199254740993;

定义BigInt可以解决这个问题：

//两种定义方法
let x = BigInt(999999999999999);
let x = 9007199254740995n;

数字的几个方法

//toExponential方法用于将数字转换为字符串，以指数计数法的形式输出
let x = 9.656;
x.toExponential(2);
x.toExponential(4);
x.toExponential(6);
//括号中的数字表示结果的位数
//假设为2，则上述代码的输出为9.66e+0

//toFixed和toPrecision方法的结果取决于括号内的数字n
//前者输出的数字结果是n，后者是n-1

//Number方法可以把日期转化为number
Number(new Date("1970-01-01"))
//上述代码的结果是0，若改为1970-01-02，结果为86400000

parseInt方法对应的输入和输出：

parseFloat方法的输入和输出：

区别:他们都能把字符串数字转换为数字，且扫描时先遇到非数字字符的话会返回NaN，

只是parseInt会忽略小数，而parseFloat不会

数字类

数字类与数字不同，数字类是对象，而数字是变量

数字类的几个常量：

其中，MAX_VALUE和MIN_VALUE代表的值应当是在BigInt里的