cc第四周 js基础
JavaScript学习
JavaScript的概述
JavaScript（简称JS）是一种Web前端开发中常用的脚本语言。它为网页添加了很多动态效果、交互功能和数据处理能力，使得网页不再是单调的静态页面，而成为了一个更加多彩、有趣且具有实用性的应用程序。
JS功能
- 动态效果：JS可以使用DOM（文档对象模型）操作HTML元素，实现动态的页面效果，如菜单栏下拉、轮播图等。
- 交互功能：JS可以通过事件监听机制实现响应用户操作，如点击、拖动等。同时，JS也可以和后端服务器进行通信，实现数据的增删改查等操作。
- 表单验证：JS可以对用户输入的表单数据进行验证，确保数据的合法性和正确性。
- 数据处理：JS可以对数据进行处理，如计算、格式化、加密等。
- 浏览器控制：JS可以调用浏览器API，实现浏览器控制，例如打开新窗口、关闭当前窗口等操作。
JS引入方式
JS代码可以嵌入到HTML页面中，也可以通过外部文件进行引入。
- 嵌入式引入：把JS代码直接写在HTML页面中的 script 标签内。
DOCTYPE html>
<html>
<head>
<title>JS Demotitle>
head>
<body>
<script>
// JS 代码
script>
body>
html>
- 外部文件引入：将JS代码编写在一个独立的.js文件中，然后在HTML页面中通过 script 标签引入该文件。
DOCTYPE html>
<html>
<head>
<title>JS Demotitle>
<script src="js/main.js">script>
head>
<body>
body>
html>
其中，src属性指定了.js文件所在的路径。
JS语法
变量声明
JavaScript是一种动态类型的语言，因此在使用变量时不需要声明具体的数据类型。在JavaScript中，变量的声明可以使用var、let和const关键字进行。
- var用于声明变量
- let用于声明块级作用域的变量
- const用于声明常量
var和let声明的变量是可修改的，const声明的变量是不可修改的常量。
变量的赋值直接用=即可
// 使用var关键字声明变量
var num = 10;
var name = "Jack";
// 使用let关键字声明变量
let age = 20;
let isStudent = true;
// 使用const关键字声明变量
const PI = 3.14;
运算符
- 赋值运算符
在JavaScript中，使用等号（=）进行赋值操作。
var a = 10;
- 算术运算符
常见的算术运算符包括加（+）减（-）乘（*）除（/）和取余（%）
var a = 10;
var b = 3;
console.log(a + b); // 输出13
console.log(a - b); // 输出7
console.log(a * b); // 输出30
console.log(a / b); // 输出3.33333
console.log(a % b); // 输出1
- 比较运算符
常见的比较运算符包括相等（== ）不相等（!=）全等（=== ）不全等（!==）大于（>）小于（<）大于等于（>=）和小于等于（<=）
var a = 10;
var b = "10";
console.log(a == b); // 输出true，因为会进行类型转换
console.log(a === b); // 输出false，因为不会进行类型转换
console.log(a != b); // 输出false
console.log(a !== b); // 输出true
console.log(a > b); // 输出false
console.log(a < b); // 输出false
console.log(a >= b); // 输出true
console.log(a <= b); // 输出true
- 逻辑运算符
常见的逻辑运算符包括与（&&）、或（||）和非（!）。
var a = 10;
var b = 3;
var c = 5;
console.log(a > b && b > c); // 输出false 同真才真
console.log(a > b || b > c); // 输出true 有真则真
console.log(!(a > b)); // 输出false 取反
还支持自增（++）和自减（–）运算符。 这些运算符可以放在变量前面或后面，分别表示先运算再赋值和先赋值再运算。
var a = 10;
a++; // 等价于 a = a + 1;
console.log(a); // 输出11
var b = 10;
++b; // 等价于 b = b + 1;
console.log(b); // 输出11
数据类型
数据类型主要包括基本数据类型和引用数据类型两种。
- 基本数据类型包括数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）和未定义（Undefined）
- 引用数据类型包括对象（Object）、数组（Array）、函数（Function）等。
基本数据类型
- 数字
数字类型用于表示数值。JavaScript的数字类型是浮点型的，并且没有区分整型和浮点型，因此可以使用小数来表示任意的数值。
var a = 10; // 整数
var b = 3.14; // 浮点数
除了普通的数值之外，JavaScript还提供了一些特殊的数值，如NaN、Infinity和-Infinity。NaN代表“不是一个数”，Infinity代表正无穷大，-Infinity代表负无穷大。
console.log(1 / 0); // 输出Infinity
console.log(-1 / 0); // 输出-Infinity
console.log("abc" / 2); // 输出NaN
- 字符串
字符串用于表示文本。字符串可以使用单引号（'）、双引号（"）或反引号（`）来定义。
var str1 = 'hello';
var str2 = "world";
JavaScript中的字符串也支持一些常见的操作，如截取子字符串、查找子字符串、替换子字符串等。例如：
var str = "hello world";
console.log(str.substring(0, 5)); // 输出"hello"
console.log(str.indexOf("world")); // 输出6
console.log(str.replace("world", "JavaScript")); // 输出"hello JavaScript"
- 布尔值
布尔值用于表示真或假。布尔值只有两个取值：true和false。
var a = true;
var b = false;
- 空值和未定义
空值（null）表示一个空的对象
未定义（undefined）表示一个未定义的变量
var a = null; // 空值
var b; // 未定义
引用数据类型
对象
对象的定义
由花括号（{}）包围的键值对集合。 每个键值对包含一个键和一个值，用冒号分隔。
键必须是一个字符串或一个符号（Symbol），而值可以是任何数据类型， 包括基本数据类型和其他引用数据类型。
let person = {
name: "John",
age: 30,
isStudent: true,
address: {
street: "123 Main St",
city: "Anytown",
state: "CA"
}
};
在上面的例子中，person 对象有四个属性：name、age、isStudent 和 address。其中 name、age 和 isStudent 的值都是基本数据类型，而 address 的值是一个嵌套对象。
对象的访问
在 JavaScript 中，可以使用点符号（.）或方括号（[]）来访问对象的属性。
console.log(person.name); // "John"
console.log(person["age"]); // 30
console.log(person.address.city); // "Anytown"
使用点符号访问属性时，属性名必须是一个有效的标识符。如果属性名包含特殊字符（比如空格、连字符或关键字），则需要使用方括号来访问该属性。
可以使用方括号访问属性时，可以将属性名包含在引号中，也可以不加引号。如果属性名是一个变量，则必须使用方括号访问该属性。
let propertyName = "name";
console.log(person[propertyName]); // "John"
构造函数创建对象
JavaScript 中的对象可以使用构造函数（Constructor）来创建。构造函数是一种特殊的函数，它用于创建新的对象并初始化其属性和方法。构造函数中的关键字 this 表示当前正在创建的对象。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log("Hello, my name is " + this.name);
};
let john = new Person("John", 18);
console.log(john.name); // "John"
john.sayHello(); // "Hello, my name is John"
我们定义了一个名为 Person 的构造函数，它包含两个参数 name 和 age。我们还在 Person.prototype 上定义了一个方法 sayHello。最后，我们使用 new 关键字来创建一个新的 Person 对象，并将其赋值给 john 变量。
对象的遍历
JavaScript 中的对象可以使用 for…in 循环来进行遍历。这个循环将枚举对象的所有可枚举属性（包括继承来的属性）。
函数
使用function关键字定义函数，可以接受参数，并且可以返回值。函数是JavaScript的核心语法之一，也是封装和复用代码的重要手段。
函数的定义
函数声明和函数表达式。
函数声明使用 function 关键字来定义，它需要一个函数名和一组参数。
function add(x, y) {
return x + y;
}
函数表达式是通过将函数定义为表达式赋值给变量而创建的。
var add = function(x, y) {
return x + y;
};
无论是函数声明还是函数表达式，都可以通过函数名来调用函数，并将参数传递到该函数中。
console.log(add(2, 3)); // 输出 5
匿名函数
匿名函数
它们没有名称。匿名函数通常用作回调函数或立即执行函数（IIFE）。回调函数是在异步编程中经常使用的一种技术，它允许将函数传递给另一个函数，并在后者完成后自动调用它。
setTimeout() 方法接受一个匿名函数作为第一个参数，该函数将在一秒钟后被调用：
setTimeout(function() {
console.log('Hello, world!');
}, 1000);
数组
创建数组
JavaScript中创建数组的方式有两种：使用字面量创建和使用Array对象创建。
- 使用字面量创建数组
使用字面量创建数组是最常见的方式。可以使用方括号“[]”来创建一个新的数组，例如：
var arr = [1, 2, 3];//创建了一个具有三个元素的数组。在数组中，每个元素都有一个唯一的数字索引，它们以0为起始值，依次递增。数组的第一个元素的索引是0，第二个是1，依此类推。
- 使用Array对象创建数组
var arr = new Array(1, 2, 3);//与使用字面量创建数组的效果相同。如果只给Array构造函数传递一个参数，则该参数将被视为数组的长度，而不是数组的值。
var arr = new Array(3);
console.log(arr.length); // 输出3
创建了一个长度为3的空数组。但是，该数组并没有包含任何元素，它的每个元素都是undefined。
访问数组元素
在JavaScript中，可以使用方括号来访问数组中的元素。
var arr = [1, 2, 3];
console.log(arr[0]); // 输出1
修改和添加数组元素
可以通过索引来修改和添加数组中的元素。
var arr = [1, 2, 3];
arr[1] = 4; // 修改第二个元素的值
console.log(arr); // 输出[1, 4, 3]
arr[3] = 5; // 添加一个新的元素
console.log(arr); // 输出[1, 4, 3, 5]
在数组中添加新元素时，如果指定的索引大于数组当前长度，则会自动将数组长度调整为索引加1的大小。
删除数组元素
可以使用delete关键字来删除数组中的元素
var arr = [1, 2, 3];
delete arr[1]; // 删除第二个元素
console.log(arr); // 输出[1, undefined, 3]
使用delete关键字删除数组元素时，并不会改变数组的长度。而是将要删除的元素的值设置为undefined。
如果想要删除数组中的某个元素并将其从数组中完全移除，可以使用splice()方法。
var arr = [1, 2, 3];
arr.splice(1, 1); // 从索引1开始，删除一个元素
console.log(arr); // 输出[1, 3]
这里从索引1处开始，删除一个元素，然后输出了修改后的数组。splice()方法还可以用来插入新元素、替换已有元素等操作。
数组常用方法
- push()和pop()方法：在数组的末尾添加或删除元素
var arr = [1, 2, 3];
arr.push(4); // 在数组末尾添加一个元素4
console.log(arr); // 输出[1, 2, 3, 4]
arr.pop(); // 删除数组末尾的元素
console.log(arr); // 输出[1, 2, 3]
- shift()和unshift()方法：在数组的开头添加或删除元素
var arr = [1, 2, 3];
arr.unshift(0); // 在数组开头添加一个元素0
console.log(arr); // 输出[0, 1, 2, 3]
arr.shift(); // 删除数组开头的元素
console.log(arr); // 输出[1, 2, 3]
- join()方法：将数组中的所有元素转化为字符串，并用指定的分隔符连接起来
var arr = [1, 2, 3];
var str = arr.join("-"); // 将数组中的元素以"-"分隔符连接成一个字符串
console.log(str); // 输出"1-2-3"
- slice()方法：返回数组的一个子集，不会修改原数组
var arr = [1, 2, 3, 4, 5];
var subArr = arr.slice(1, 3); // 返回索引1到索引3之间的子数组，不包括索引3
console.log(subArr); // 输出[2, 3]
console.log(arr); // 输出[1, 2, 3, 4, 5]
- sort()方法：对数组进行排序
var arr = [3, 2, 1];
arr.sort(); // 对数组进行升序排列
console.log(arr); // 输出[1, 2, 3]
需要注意的是，sort()方法默认按照字母顺序对数组元素进行排序。如果需要按照数值大小进行排序，可以传递一个比较函数作为参数。
多维数组
JavaScript中也可以创建多维数组，即数组中的元素也是数组。使用多个方括号来指定各个维度的索引。
var arr = [[1, 2], [3, 4]];
console.log(arr[0][1]); // 输出2
异步任务
- 指那些不会阻塞主线程执行的任务，通常包括向服务器发起请求、处理用户输入、从文件系统读取数据等操作。由于这些任务需要花费一定的时间才能完成，因此我们不能使用传统的同步方式来处理它们。
- 在 JavaScript 中，异步任务通常会被放置在“事件循环”（Event Loop）中进行管理。当一个异步任务完成时，它会将其结果放入一个“消息队列”（Message Queue）中，并等待 JavaScript 引擎空闲时从消息队列中取出并调用对应的回调函数。
- JavaScript 引擎在每个事件循环周期内都会执行以下几个步骤：
执行当前的同步任务，直到执行完毕或者遇到异步任务。
如果当前存在异步任务，则将其添加到异步任务队列中。
将消息队列中的第一个消息取出，并执行对应的回调函数。 - 多种处理异步任务的机制，包括回调函数、Promise 和 async/await 等
- 在回调函数中，我们将需要等待的代码放在一个函数中，并把该函数作为参数传递给另一个函数。
- Promise 对象表示一个异步操作的最终完成或失败，并提供了一些方法来处理该操作的结果。我们可以通过 Promise 的 then 和 catch 方法来注册回调函数，当异步操作完成时，Promise 会自动调用对应的回调函数。
- async/await 让异步代码看起来更像同步代码，让程序员能够更加容易地编写和理解异步代码。
注释
使用//或/**/来添加注释，增加代码的可读性和可维护性。
在 for 循环结束后，变量 i 的值为 3。第四个定时器的回调函数中的 i 值为 3。然而，由于第四个定时器在执行前被清除了，所以它的回调函数没有机会执行。所以答案为012
也许把它换成立即执行函数就能实现0123了？（）
ps:
1.浏览器会按代码顺序解析html文档 所以js一般写在body里更合适
-textarea 高度自适应
在这里插入代码片
` +$ 可以在避免输入多个“”
tc由var 改成let
回传参数加tc