JavaScript快速入门不废话
最后更新：2023/11/09/01:15:31
第一章、Javascript入门准备
1、工具：
1、浏览器的F12 Console
2、VSCode 的Live Server 轻量级web服务器插件，可用于服务web APP。
3、Live perviews 插件可用于实时预览。
2、文件介绍：
index.html 用于前端HTML代码文件。
index.js 用于剥离HTML代码文件中的JavaScript代码。
javascript 可以插在head 后面也可以插在body中间。好的操作是建议插在每一个标签的末端。1、因为浏览器解析是自上向下，先加载内容后解析Script有比较高的用户体验。2、script代码有与页面控件交互的必要。3、特殊情况的第三方库可能要求在head标签末尾用，但是自己编写建议写在body 标签末尾。
3、更进一步学习
查看JavaScript 文档。
第二章、初识JavaScript
console.log('在Console中打印');
alert('弹出警告提示');
javascript 代码是内嵌于html代码的，用JS标签 <script> </script> 表示。JavaScript关心的是页面的行为，HTML代码关心的是页面的内容。
<body>
<script>
/*编写在console的代码语句*/
</script>
</body>
但是我们不希望html代码太过冗长，因此建议把JavaScript代码从html中剥离出来。因此有index.js文件，内容是将HTML文件中的所有JavaScript代码剪切过来，并且贴上代码文件来源。
<body>
<script src="index.js"> /*表明js代码来源于index.js文件*/
</script>
</body>
JS 可不使用;结尾也不会报错，但是建议加上。
1. 变量
var、let、const
1.1. var全局变量
JavaScript诞生之初就有了，现在少用，因为容易有全局冲突。
1.2. let可修改变量
ES6新加入的变量，可不在声明时改变变量。
let age = 30;
age = 40;
1.3. const不可修改变量
ES6新加入的变量，是常量，不能被改变，只能在声明时就初始化数值。但是当声明的是数组或对象时，内部的元素是可以被改变，只是不能将整个数组或者变量完全更改。
2. 数据类型
string、number、boolean、null、undefined
声明时不需要写数据类型就可以直接赋值，类型是由赋值的数据提供。
2.1. string
字符串类型，用“”或‘’表示。{}
const username = "John";
链接字符串与模板字符串：
console.log("My name is" + username + "and i am" + age + "years old");
console.log(`My name is ${username} and i am ${age} years old`);/*模板字符串*/
const hello = `My name is ${username} and i am ${age} years old`;
console.log(hello);
字符串内置属性和方法：
属性：
length 获取字符串长度。
const string = "helloworld";
console.log(string.length);
方法：
toUpperCase() 全部大写。
toLowerCase() 全部小写。
substring( 起始索引 , 终止索引 ) 获取子字符串，获取第一个索引至第二个索引的前一个位置。
split(“分割的字符”) 分割字符串为数组。
console.log(string.split(","));
方法可以连续调用，如：
const string = "helloworld";
console.log(string.substring(0,5).toUpperCase());
2.2. number
在JS中无浮点型或者整型概念，统称为number类型。
const age = 30;
const x = null
2.3. boolean
const isMale = true;
2.4. null
表示内容为空，和undefined要区分。
const x = null;
2.5. undefined
表示内容没被定义过，和null要区分。
const y = undefined;/*显式声明undefined*/
let z;/*隐藏式声明undefined*/
查看一个量的数据类型可用console.log(typeof username)
console.log(typeof x) 会输出Object，因为javascript的第一个实现中，javascript的值被表示为一个类型标记和一个值，对象的类型被标记为0，null 表示null 指针，在大多数平台中为0x00，因此null的类型标记为0，因此返回值类型为object。是js的一个小错误。
2.6. 数组
数组可以包含很多不同类型。
创建数组
const number = new Array();
const fruits = ["apple","orange","pear",10,true];/*2、直接声明创建数组。*/
赋值与引用
const 声明的数组是不能改变其指向的数组，但是成员可以改变，因此不能对整个数组重新赋值，但是可以对其元素重新赋值。
fruits[3] = "grapes";
console.log(fruits[1]);
方法：
push() 在数组末尾添加元素。
unshift() 在数组头部添加元素。
pop() 删除数组末尾元素。
indexOf(元素) 得到特定元素的索引号。
Array.isArray(变量名) 判断该变量是不是数组。
第三章、对象
对象是拥有属性和方法的数据
/*对象*/
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
hobbies:["music", "movies", "sports"],
address:{
street: "50 main st",
city: "Boston",
state: "AM"
},
}
/*解包对象*/
const{
firstName,
lastName,
address: { city },
} = person;
console.log(city);
/*添加新属性*/
person.email = "jone@gmail.com";
console.log(person);
第四章、对象数组和JSON
1. 对象数组
/*对象数组*/
const todos = [
{
id: 1,
text: "Take out trash",
isCompleted: true,
},
{
id: 2,
text: "Meeting with boss",
isCompleted: true,
},
{
id: 3,
text: "Dentist appt",
isCompleted: true,
}
];
2. JSON
JSON是一种数据格式，常用于API服务器与客户端传输的一种格式。JSON 和对象数组非常类似。
但是每个属性的key都会被打上双引号。把JS数组转变为JSON格式 - FreeFormatter.com
JASON的特性就是古板，要精确到每一个标点符号，也不能多打一个，。
Javascript 转换为JSON字符串
JSON.stringify(对象数组)
/*对象数组*/
const todos = [
{
id: 1,
text: "Take out trash",
isCompleted: true,
},
{
id: 2,
text: "Meeting with boss",
isCompleted: true,
},
{
id: 3,
text: "Dentist appt",
isCompleted: true,
}
];
/*Javascript 转换为JSON*/
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
第五章、条件语句
1. if 语句
大部分同C，但是分不判断类型的==、判断类型的===
/*条件语句*/
/*双等号，不判断数据类型；三等号，判断数据类型，等号两边数据类型不同则为false*/
const x = "10";
if (x === "10"){
console.log("x is \"10\" not a number 10");
} else if (x == 10){
console.log("x is 10");
} else if (x > 5){
console.log("x is more then 5");
} else {
console.log("重新输入");
}
2. 三目运算符
x > 10 ? "red" : "blue" 同C。
3. switch语句
同C
switch(color){
case "red":
console.log("color is red");
break;
case "blue":
console.log("color is blue");
break;
default:
console.log("no found color");
}
第六章、循环语句
1. for语句
同C
for (let i = 0; i <= 10; i ++){
console.log(i);
}
C拓展同foreach，C++的是: Python 是in
for (let todo of todos){
console.log(todo.text);/*循环打印数组todos内容*/
}
2. while语句
同C
关于作者：赤诚Xie
版权声明：本博客所有文章仅用于学习、交流和研究目的，欢迎转载，但请注明原文作者及出处。
奥里给！：若您觉得文章对您有帮助，请点赞、关注支持我吧😊。
药药切克闹，👇👇👇下面三连来一套(●'◡'●)
——励志作一个用单片机梳头的乖宝宝
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗