本文介绍了JavaScript的基础知识，包括三种引入JS的方式：内部、外部和行内；变量的声明（var、let、const）及其运算符的使用；数据类型如数字、字符串、布尔值以及对象、数组的特性；并探讨了函数的概念，以及异步编程中的回调函数和Promise机制。
简介
JavaScript 是一种脚本语言，通常用于前端网页开发，可以增强网页的交互性和动态效果。它可以在网页中处理用户输入、动态改变网页内容、与后端服务器进行数据交互等等。
js引入方式
JavaScript 如何引入呢？通常有三种方式：内部 JavaScript、外部 JavaScript 和行内 JavaScript。
1.内部 JavaScript 是将 JavaScript 代码写在网页的 或 标签内，使用
<!DOCTYPE html>
<html>
<head>
<title>网页</title>
<script>
// 这里是 JavaScript 代码
</script>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
2.外部 JavaScript 是将 JavaScript 代码单独写在一个 .js 文件中，使用
<!DOCTYPE html>
<html>
<head>
<title>网页</title>
<script src="myScript.js"></script>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
3.行内 JavaScript 是将 JavaScript 代码写在 HTML 元素的 onclick 或其他事件属性中，例如：
<!DOCTYPE html>
<html>
<head>
<title>网页</title>
</head>
<body>
<button onclick="alert('Hello, world')">点我</button>
</body>
</html>
变量和运算符
1. JavaScript 中的变量使用 var、let 或 const 关键字来声明。
var 和 let 可以被重新赋值，而 const 声明的变量是常量，不可以被重新赋值。例如：
var x = 1 // 声明一个变量 x，赋值为 10
let y = 2 // 声明一个变量 y，赋值为 20
const z = 3 // 声明一个常量 z，赋值为 30
x = 5 // 重新赋值变量 x
y = 1 // 重新赋值变量 y
// z = 2 // 报错，常量不能被重新赋值
var声明的变量还会提升，即声明可以在赋值后，let则不行。
2.JavaScript 中的运算符包括算术运算符、比较运算符、逻辑运算符等等。例如：
var x = 3
var y = 2
console.log(x + y) // 输出 5
console.log(x - y) // 输出 1
console.log(x * y) // 输出 6
console.log(x / y) // 输出 1.5
console.log(x > y) // 输出 true
console.log(x < y) // 输出 false
console.log(x == y) // 输出 false
console.log(x != y) // 输出 true
console.log(x && y) // 输出 2
console.log(x ||y) // 输出 3
console.log(!x) // 输出 false
数据类型
JavaScript 中的数据类型包括数字、字符串、布尔值、对象、数组、空值(null)和未定义值(undefined)等等。JavaScript 是一种弱类型语言，意味着变量的数据类型可以随时改变。例如：
var x = 10 // 声明一个数字变量
var y = "Hello, world" // 声明一个字符串变量
var z = true // 声明一个布尔值变量
console.log(typeof x) // 输出 "number"
console.log(typeof y) // 输出 "string"
console.log(typeof z) // 输出 "boolean"
x = "Hello, world" // 将数字变量改为字符串变量
console.log(typeof x) // 输出 "string"
JavaScript 中的对象、数组和字符串是比较常用的数据类型。
- 对象 可以包含多个属性和方法，可以通过点号或方括号来访问。例如：
var ren = {
name: "x",
age: 10,
dzh: function() {
console.log("Hello, my name is " + this.name + ".")
}
}
console.log(person.name) // 输出 "x"
console.log(person["age"]) // 输出 10
person.dzh() // 输出 "Hello, my name is x."
- 数组是一组有序的值，可以通过索引来访问。例如：
var fruits = ["Apple", "Banana", "Orange"]
console.log(fruits[0]) // 输出 "Apple"
console.log(fruits[1]) // 输出 "Banana"
console.log(fruits[2]) // 输出 "Orange"
- 字符串是一组字符序列，可以通过索引来访问。字符串有很多方法，例如 toUpperCase()、toLowerCase()、charAt()、indexOf()、slice() 等等。例如：
var str = "Hello, world!"
console.log(str.toUpperCase()) // 输出 "HELLO, WORLD!"
console.log(str.toLowerCase()) // 输出 "hello, world!"
console.log(str.charAt(0)) // 输出 "H"
console.log(str.indexOf("world")) // 输出 7
console.log(str.slice(0, 5)) // 输出 "Hello"
函数
最后，我们来谈谈 JavaScript 中的函数。函数是一段可重复使用的代码块，可以接受参数，可以返回值。函数的声明和调用可以使用函数名来完成。JavaScript 中的函数也可以是异步的，可以通过回调函数、Promise、async/await 等方式来处理异步操作。例如：
1.函数的使用
// 声明一个函数
function add(x, y) {
return x + y
}
// 调用一个函数
console.log(add(2, 3)) // 输出 5
// 使用 this 关键字
var ren = {
name: "x",
age: 10,
dzh: function() {
console.log("Hello, my name is " + this.name + ".");
}
}
person.dzh() // 输出 "Hello, my name is John."
this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” dzh 函数的 ren 对象。this.name 的意思是 this 对象的 name 属性.
2.异步函数
- 回调函数
回调 (callback) 是作为参数传递给另一个函数的函数，这种技术允许函数调用另一个函数，回调函数可以在另一个函数完成后运行。
setTimeout() 可以指定一段时间后执行的回调函数
setInterval() 可以指定每个间隔执行的回调函数
setTimeout(speak, 3000)/*speak 被用作回调。函数（函数名）作为参数传递给 setTimeout()。
3000 是毫秒数，所以 3 秒后会调用 speak()*/
setInterval(x, 1000)/*x用作回调。函数（函数名）作为参数传递给setInterval()。
1000 是间隔之间的毫秒数，因此x()将每秒调用一次。*/
function speak() {
document.getElementById("demo").innerHTML = "hello";
}
function x(){
console.log('hbsajhdbsjhb')
}
这部分没怎么搞懂：
-
Promise
promise对象 将会在未来某个时候返回数据，然后就需要调用以下方法。
then() 如果promise成功返回数据，返回的数据就会作为then方法里函数的参数，若要完成多个异步操作，也可以在当前的then之后再调用then方法，当前的then方法里的回调函数会返回数据作为下一个then方法的参数。
catch() 如果promise发生错误，就在catch里的函数中做出相应措施。
finally() 在一系列异步操作之后执行，主要做一些清除工作。 -
async/await
async 写在函数前使之成为异步函数(不会阻塞)，返回值为promise。
await 会在promise完成后返回最终结果
总结：
培训后我注意到的几个要点：
1.javascript中的‘1’在电脑中不是ascii码，并且在比较运算中会转化为数字1。
2.预编译过程检查： 变量 声明提升 函数声明整体提升。
预编译前的语法分析检查：语法错误,比如小括号（），花括号{}的缺失，或者是标点符号在中英文的状态下不对。
3.异步练习
下面是本节课最难也是最全面的一道题，包含变量作用域，定时器，异步，回传参数
function fn1() {
for (var i = 0; i < 4; i++) {
var tc = setTimeout(function (i) {
console.log(i);
clearTimeout(tc);
},10, i)
//i为回传参数
}
}
fn1();//输出结果0，1，2
提前看了博客的同学可以思考为什么结果是这个，如果我们要输出原本以为的
0，1，2，3的结果该如何修改？
只输出了0，1，2是因为经过4次循环后,tc里的id只是第四个计时器的id，第四个定时器被前面执行的定时器里的clearTimeout所取消，所以只清除了第四个计时器。
改法1.
function fn1() {
for (var i = 0; i < 4; i++) {
var/*将此处的var改为let，这样tc就不再是一个全局变量，而是即时的定时器id，第四个定时器就不会被误删了*/ tc = setTimeout(function (i) {
console.log(i);
clearTimeout(tc);
},10, i)
//i为回传参数
}
}
fn1();
改法2.
function fn1() {
for (var i = 0; i < 4; i++) {
var tc = setTimeout(function (i,tc) {
console.log(i);
clearTimeout(tc);
},10, i,tc)
//i为回传参数
}
}
fn1();//将tc作为参数的话，每次都只是传即时的id值，第四个定时器就不会被误删了。
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
