JavaScript基础语法与数据类型全解析

在Web开发中，JavaScript脚本可以通过多种方式嵌入到HTML页面中，以实现交互功能。

开发者可以直接在HTML文档中使用<script>标签将JavaScript代码嵌入页面内部。这种方式适用于简单的脚本逻辑，例如通过alert方法弹出提示框显示“hello world”。

<script>
	alert("hello world");
</script>

对于更复杂的逻辑或需要复用的代码，推荐采用外部引入的方式。通过<script>标签的src属性指定外部.js文件的路径，例如引用名为abc.js的文件，有助于保持HTML结构的清晰与代码的模块化。

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

掌握JavaScript的基本语法是编写程序的前提，涉及变量声明、逻辑判断及循环控制等核心概念。

在JavaScript中，可以使用var关键字来定义变量。例如，定义一个名为num的变量并赋值为1，随后可以通过alert函数将其值弹出显示。这是最基础的变量赋值与输出操作。

<script>
    var num = 1;
    alert(num);
</script>

条件控制语句用于根据特定条件执行不同的代码块。以if语句为例，当判断条件2大于1成立时，程序会执行大括号内的代码，弹出“true”提示。这是逻辑判断的基本形式。

if (2>1)
{
    alert("true");
}

<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

在实际调试中，开发者常使用console.log("hello world");在浏览器控制台输出信息，以便查看变量状态或程序执行流程，这是前端调试的重要手段。

JavaScript包含多种数据类型，理解这些类型及其特性对于正确编写代码至关重要。

Number类型用于表示数值，包括整数、浮点数、科学计数法表示的数，以及特殊值NaN（非数字）和Infinity（无穷大）。

与某些强类型语言不同，JavaScript在Number类型中不区分整数和小数，所有数值均统一处理。例如，123被视为整数，123.1被视为浮点数，而1.122e3则是科学计数法表示的数值。

123  //整数123
123.1   //浮点数123.1
1.122e3   //科学计数法
NaN  //not a number
Infinity  //无限大

字符串是JavaScript中用于表示文本数据的基本类型，可以通过单引号或双引号包裹字符来创建。

'a' "abc"

在定义字符串时，通常使用单引号或双引号包裹内容。需要注意的是，如果字符串内部包含相同的引号，必须使用反斜杠\进行转义处理，例如\'或\n（换行）、\t（制表符）、\u4e2d（Unicode编码）等转义序列。

\'
\n   //换行
\t   //空格
\u4e2d   //unicode编码
\x41    //ascii

对于包含换行或多行文本的字符串，JavaScript提供了反引号（`）作为多行字符串的编写方式。使用反引号包裹的内容可以自然保留换行格式，无需使用转义字符。

var str = `haha
        nihao
        666`

模板字符串是反引号字符串的高级用法，允许在字符串中嵌入变量或表达式。例如，定义变量name后，可以通过${name}语法将变量值插入到字符串“你好，${name}”中，实现动态内容拼接。

let name='xay';
let words=`你好，${name}`;

获取字符串长度是常见操作，可以通过字符串对象的length属性直接获取。例如，word.length可以返回字符串word的字符数量。

word.length

JavaScript中的字符串具有不可变性，这意味着一旦字符串被创建，其内容就不能被修改。任何对字符串的操作都会返回一个新的字符串，而不会改变原字符串。

字符串对象提供了大小写转换的方法，包括toUpperCase()将字符串转换为大写，以及toLowerCase()将字符串转换为小写。

word.toUpperCase()
word.toLowerCase()

是用于截取字符串部分内容的函数。它接受起始索引和可选的结束索引作为参数，返回从起始位置到结束位置（不包含结束位置）的子字符串。

substring(1)  //从第一个字符串截取到最后一个
substring(1,3)  //[1,3)

布尔类型用于表示逻辑真或假，只有true和false两个值，常用于条件判断。

true false

JavaScript支持标准的逻辑运算符，包括&&（与）、|（或）和!（非），用于组合多个布尔条件。

&& //与
|  //或
!  //非

比较运算符用于比较两个值，包括=（赋值）、==（宽松等于，仅比较值）和===（严格等于，同时比较值和类型）。

=
==  //类型不一样，值一样也是真
===  //绝对等于，类型和值都必须一样

需要注意的是，NaN与任何值（包括其自身）进行比较时，使用===运算符返回的都是false。因此，判断一个值是否为NaN，必须使用isNaN(NaN)函数。

数组是JavaScript中用于存储有序数据集合的对象，可以包含不同类型的元素。

<script>
    var arr = [1,2,3,4,5,'hello']
</script>

在访问数组元素时，如果指定的下标超出了数组的实际长度（越界），JavaScript会返回undefined，而不是抛出错误。

数组的length属性是可写的。如果给arr.length赋值一个比当前长度更小的值，数组末尾的元素会被截断丢失；如果赋更大的值，数组长度会扩展，但新位置为empty。

indexOf方法用于查找指定元素在数组中第一次出现的下标索引。如果元素不存在，则返回-1。

slice() 方法可以截取数组的一部分，返回一个新数组，其功能类似于字符串中的substring，但操作对象是数组元素。

push() pop()方法分别用于向数组尾部添加元素（push）和从尾部移除元素（pop），是操作数组末尾数据的常用手段。

unshift() shift()方法分别用于向数组头部添加元素（unshift）和从头部移除元素（shift），适用于需要频繁操作数组前端的场景。

sort() 方法用于对数组元素进行排序。默认情况下，它按照ASCII码值将元素转换为字符串后进行排序，这可能不适用于数字排序，需传入比较函数。

reverse()方法用于反转数组中元素的顺序，将最后一个元素变为第一个，依此类推。

concat() 方法用于拼接两个或多个数组，返回一个新数组，原数组保持不变。

join() 方法使用指定的分隔符将数组中的所有元素连接成一个字符串，常用于生成CSV格式或特定格式的文本。

对象是JavaScript中用于存储键值对集合的数据结构，用于描述现实世界中的实体或抽象概念。

在JavaScript中，{…}语法用于定义一个对象。对象由多个键值对组成，键和值之间使用冒号分隔，多个属性之间使用逗号隔开。注意，最后一个属性后不需要添加逗号。

var person = {
    name: 'xay',
    age: 18,
    tags: ['js','java','python']
}

对象属性的赋值可以通过直接指定键名并赋予新值来实现。例如，修改person对象的name属性，可以直接通过person.name = 'newName'完成。

可以使用delete关键字动态删除对象的属性。例如，执行delete person.name将从person对象中移除name属性及其对应的值。

向对象添加新属性非常简单，只需直接对不存在的键进行赋值即可。例如，person.age = 18会向person对象添加一个age属性。

判断某个属性是否存在于对象中，可以使用in运算符或对象的hasOwnProperty()方法。例如，'name' in person可以检查person对象是否包含name属性。

流程控制语句决定了代码执行的顺序，包括条件判断和循环结构。

if语句用于执行基于条件的代码块。如果条件表达式为真，则执行大括号内的代码；否则，可以执行else分支的代码。

if (2>1)
{
    alert("true");
}

<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

while循环用于在条件为真时重复执行代码块。例如，初始化age为0，当age小于100时，每次循环age加1并输出，直到age达到100停止。

age=0;
while (age<100)
{
    age+=1;
    console.log(age);
}

for循环是另一种常用的循环结构，包含初始化、条件判断和更新表达式。例如，for (let i = 0; i < 5; i++)会执行5次循环，每次输出i的值。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

可以使用for循环遍历数组中的所有元素。例如，通过var num in arr可以遍历数组arr的索引，并输出每个索引值。

var arr=[1,2,3,4,5,6,7,8,9,10];
for (var num in arr)
{
    console.log(num)
}

Map和Set是JavaScript ES6引入的两种新的集合数据结构，提供了比传统对象和数组更高效的键值存储和去重功能。

Map对象用于存储键值对，类似于Python中的字典。可以通过new Map()创建，并使用set()方法添加数据，get()方法获取值。

var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');  //通过key获得value
console.log(name)

向Map中添加数据可以使用set(key, value)方法，删除数据可以使用delete(key)方法。例如，map.set('admin', 10)添加键值对，map.delete('tom')删除指定键。

map.set('admin',10);
map.delete('tom')  //map中的删除

Set对象用于存储唯一值的集合，不允许重复元素。

Set的主要用途之一是去重。例如，var set=new Set([3,1,1,1,1])会创建一个包含3和1的Set，自动去除重复的1。

var set=new Set([3,1,1,1,1]);

set.add(2)  //添加
set.delete(1)  //删除
console.log(set.has(3));  //是否存在3

Iterator（迭代器）是遍历Map和Set等集合对象的标准方式，允许按顺序访问集合中的每个元素。

遍历Map可以使用for...of循环结合entries()或直接迭代Map对象。例如，for (let x of map)会输出每个键值对数组。

var map=new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map)
{
    console.log(x);
}

遍历Set同样可以使用for...of循环。例如，for (let x of set)会依次输出Set中的每个唯一值。

var set=new Set([3,1,1,1,1]);
for (let x of set)
{
    console.log(x);
}

本文简要介绍了JavaScript的基础语法和主要数据类型，涵盖了从基本变量到复杂集合的使用。

以上就是本文的全部内容，希望能为读者提供有价值的参考。如果您喜欢这篇文章，欢迎继续关注本站获取更多技术分享！