Javascript基础

最新推荐文章于 2023-03-30 11:52:49 发布

尘世烟雨客

最新推荐文章于 2023-03-30 11:52:49 发布

阅读量804

点赞数

文章标签： javascript node.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_60406293/article/details/128743181

版权

本文详细介绍了JavaScript的基础知识，包括变量的声明（var、let、const）、正则表达式的使用、数据类型（Number、String、Boolean、undefined、null、Array、Object、Function）以及运算符和控制流程（条件判断、循环）。此外，还讲解了如何在HTML中插入JavaScript代码。

摘要由CSDN通过智能技术生成

JavaScript基本语法

定义变量

使用var 关键字来声明变量，如果省略 var关键字，那么该变量默认成为全局变量

var x = 1;
console.log(x)

一条语句的结束以分号结束.

var x = 2; 
var y = 1;
if(x > y){
            x = 3;
            y = 2;
}
console.log("x=" + x);
console.log("y=" + y);

语句块是一组语句的集合,使用{...}形成一个块 block。例如，下面的代码先做了一个判断,如果判断成立，将执行{….}中的所有语句.

JavaScript是弱类型的编程语言，声明变量的时候都是使用关键字var，没有int、char之说，为变量赋值时会自动判断类型并进行转换。变量名是大小写英文、数字、“$”和“_”的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如 if、while等。申明一个变量用var语句，比如: var s_007 = '007'。

关键字

break	delete	if	this	while
case	do	in	throw	with
catch	else	instanceof	try
continue	finally	new	typeof
debugger（ECMAScript 5 新增）	for	return	var
default	function	switch	void

let 和 const 关键字

使用 let 关键字声明的变量只在其所在的代码块中有效（类似于局部变量），并且在这个代码块中，同名的变量不能重复声明；

const 关键字的功能和 let 相同，但使用 const 关键字声明的变量还具备另外一个特点，那就是 const 关键字定义的变量，一旦定义，就不能修改（即使用 const 关键字定义的为常量）。

let organization = "青年志愿者协会"; //声明一个变量,赋值青年志愿者协会
//let organization = "学生会"; //报错,变量名重复
console.log(organization)
const PI = 3.14; //声明一个确定,常量
//PI = 1.2; //Assignment to constant variable. 常量变量赋值。
console.log(PI)

正则表达式

在线生成正则表达式

使用正则表达式

JavaScript RegExp 对象中提供了一些列方法来执行正则表达式，如下表

方法	描述
compile()	在 1.5 版本中已废弃，编译正则表达式
exec()	在字符串搜索匹配项，并返回一个数组，若没有匹配项则返回 null
test()	测试字符串是否与正则表达式匹配，匹配则返回 true，不匹配则返回 false
toString()	返回表示指定对象的字符串

此外 String 对象中也提供了一些方法来执行正则表达式，如下表所示：

方法	描述
search()	在字符串中搜索匹配项，并返回第一个匹配的结果，若没有找到匹配项则返回 -1
match()	在字符串搜索匹配项，并返回一个数组，若没有匹配项则返回 null
matchAll()	在字符串搜索所有匹配项，并返回一个迭代器（iterator）
replace()	替换字符串中与正则表达式相匹配的部分
split()	按照正则表达式将字符串拆分为一个字符串数组

使用 test() 方法

var myString = "Hello, World!";
var reg= /Hello/;
var result = reg.test(myString);

匹配多种可能性的文字字符串

var petString = "Loen has a pet cat.";
var reg= /dog|cat|bird|fish/; 
var result = reg.test(petString);

3. 全局匹配和忽略大小写

var twinkleStar = "Twinkle, twinkle, little star";
var reg = /Twinkle/gi;
var result = twinkleStar.match(reg);

使用 match() 方法提取匹配项

var extractStr = "hello world test yes yes";
var reg= /test/; 
var result = extractStr.match(reg);

匹配字母表中的字母

var quoteSample = "just do it";
var reg= /[a-z]/gi; 
var result = quoteSample.match(reg);

匹配字母表中的字母和数字

var quoteSample = "I am 18 years old";
var reg= /[h-s2-6]/gi; 
var result = quoteSample.match(reg);

匹配出现一次或多次的字符

var difficultSpelling = "miss";
var reg= /s+/g;
var result = difficultSpelling.match(reg);

8. 匹配出现零次或多次的字符

var chewieQuote = "Aaaaaaaaaaaaaaaa";
var reg= /Aa*/;
var result = chewieQuote.match(reg);

使用正则表达式里的括号来检查字符组

var myString = "you are teh best.";
var reg= /(you|we).*best/;
var result = reg.test(myString);

删除开头和结尾的空白

var hello = "   Hello, World!  ";
var wsRegex = /^(\s+)(.+[^\s])(\s+)$/; 
var result = hello.replace(wsRegex,"$2");

数据类型

Number类型（number）

包含整数和浮点数

var num1 = 123;     // 整数
var num2 = 3.14;    // 浮点数
console.log("num1数据类型:"+typeof num1 +" "+"num1打印值:"+num1);
console.log("num2数据类型:"+typeof num2 +" "+"num1打印值:"+num2);

Number 类型所能定义的数值并不是无限的，JavaScript 中的 Number 类型只能表示 -(253 - 1) 到 (253 -1) 之间的数值

对于一些极大或者极小的数，也可以通过科学（指数）计数法来表示，如下例所示：

var y=123e5;      // 123 乘以 10 的 5 次方，即 12300000
var z=123e-5;     // 123 乘以 10 的 -5 次方，即 0.00123
console.log(y,z)

另外，Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中

Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数

-Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数

NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。

如果某次计算的结果超出了 JavaScript 中 Number 类型的取值范围，那么这个数就会自动转化为无穷大，正数为 Infinity，负数为 -Infinity。

字符串类型（string）

字符串是以单引号或双引号括起来的任意文本，比如'abc',"xyz"等。

定义字符串时，如果字符串中包含引号，可以使用反斜杠 \ 来转义字符串中的引号，或者选择与字符串中不同的引号来定义字符串，

var str = "Let's have a cup of coffee.";  // 双引号中包含单引号
console.log(str);
var str = 'He said "Hello" and left.';    // 单引号中包含双引号
console.log(str);
var str = 'We\'ll never give up.';        // 使用反斜杠转义字符串中的单引号
console.log(str);

布尔值类型（boolean）

布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值，例如：

var a = true;   // 定义一个布尔值 true
var b = false;  // 定义一个布尔值 false
var c = 2 > 1;  // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1;  // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false
console.log(a,b,c,d)

undefined类型（undefined）

只有一个取值，就是undefined，表示没有值的意思,当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined

var num;
console.log(num);  // 输出 undefined

null类型（null）

Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。

使用 typeof 操作符来查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

var a = null;
console.log(a);
console.log(typeof a)

数组类型(Array类型)

数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript 的数组可以包括任意数据类型，示例如下: var array = [1,2,3.14, 'Hello', null, true]。上述数组包含6个元素。数组用[]表示，元素之间用“,”分隔。另一种创建数组的方法是通过Array()函数实现，示例如下: var array = new Array(1,2,3)。数组的元素可以通过索引来访问,索引的起始值为0。

var array = [1,2,3,4];
console.log(array)

var array = new Array(1,2,3,4);
console.log(array)

数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，

var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]);  // 输出索引为 0 的元素，即 1
console.log(arr[5]);  // 输出索引为 5 的元素，即 true
console.log(arr[6]);  // 索引超出了范围，返回 undefined

对象类型（object）

javaScript的对象是一组由键-值组成的无序集合，类似Python中的字典。示例如下:var person = {name: 'qiye',age: 24,tags: ['python', 'web' , 'hacker'J.city: 'Beijing',man:true} 。JavaScript 对象的键都是字符串类型，值可以是任意数据类型。要获取一个对象的属性，我们用“对象变量.属性名”的方式，如person. name.

var student = {
    name:"aa",
    age:18
}
console.log(student.name+" "+student.age)

Function 类型

函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行，如下例所示：

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);  // 输出 Hello, Peter

1.function关键词定义

function fn(a,b) {
    return a + b;
}

在函数中可以使用 return 语句将一个值（函数的运行结果）返回给调用函数的程序，这个值可以是任何类型，例如数组、对象、字符串等。对于有返回值的函数，我们可以会使用一个变量来接收这个函数的返回值

>return 语句通常在函数的末尾定义，当函数运行到 return 语句时会立即停止运行，并返回到调用函数的地方继续执行。

>一个函数只能有一个返回值，若要返回多个值则，则可以将值放入一个数组中，然后返回这个数组即可

2.通过Function构造函数来创建一个函数

var fn = new Function("a","b","return a + b;");

3.通过一个表达式定义，通过创建匿名函数，然后把匿名函数赋值给一个变量。

//第一种
var fn = function(a,b){
	return a + b;
};

//第二种
var fn = (a,b) => {
	return a + b;
};

函数还可以存储在变量、对象、数组中，而且函数还可以作为参数传递给其它函数，或者从其它函数返回，如下例所示：

var fun = function(a,b){
    console.log("www.wangqianlong.com");
    retrun a+b;
}
function createGreeting(name){
    return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result);  // 输出 Hello, Peter

函数内部

this

this是JavaScript中的一个关键字，当一个函数被调用时，除了传入函数的显式参数以外，名为this的隐式参数也被传入了函数。
this参数指向了一个自动生成的内部对象，这个内部对象被称为函数上下文。
JavaScript中的this依赖于函数的调用方式。
this的指向是在函数执行时确定的，即：调用函数的那个对象。

1.函数直接调用时(全局的时候)

//this 指向 window
var name = "xiaofeifei"
var fn = function(){
	console.log(this.name)
};
fn();

2.函数被一个对象调用

// this 指向这个对象

var obj = {
	name: "xiaofeifei",
	say: function (){
		console.log(this.name);
	}
};
obj.say(); //xiaofeifei

3.构造函数的实例对象

// this指向这个构造函数的实例

 function Person(name){
 	this.name=name;
 	this.say=function (){
	 	console.log("我喜欢"+name);
 	}
 }
 
 var p = new Person('xiaofeifei');
 console.log(typeof p);
 console.log(p.name);
 p.say();

new 关键字实例化一个对象的过程：
创建一个空对象，this指向这个空对象；
将新对象的隐式原型（obj. proto）指向构造函数的原型对象（Stu.prototype）；
执行构造函数（为新对象增添属性）；
隐式返回这个新对象。

运算符和操作符

算术运算符

+加法运算

只有符号两边都是数字的时候，才会进行加法运算

只要符号任意一边是字符串，就会进行字符串的拼接

-减法

会执行减法运算

会自动把两边都转换成数字进行运算

*乘法

会执行乘法运算

会自动把两边都转换成数字进行运算

/ 除法

会执行除法运算

会自动的两边都转换成数字进行运算

% 求余

会执行取余运算

会自动把两边都转换成数字进行运算

赋值运算

=

就是把 = 右边的值赋值给 = 左边的变量名

var num = 100；

+=

    var age = 18;
    a += 10;
    console.log(a) // 28

a += 10 等价于 a = a + 10

-=

    var a = 10;
    a -= 10;
    console.log(a); //=> 0

a -= 10等价于a = a - 10

*=

    var a = 10;
    a *= 10;
    console.log(a); //=> 100

a /= 10 等价于 a = a / 10

%=

    var a = 10;
    a %= 10;
    console.log(a); //=> 0

a %= 10 等价于 a = a % 10

关系运算符

==

比较符号两边的值是否相等，不管数据类型

1 == '1'

两个值是一样的，所以得到true

=== 全等

比较符号两边的值和数据类型是否相等

1 ===  '1'

两个值虽然一样，但是因为因为值得数据类型不一样，所以为false

!=

比较符号两边的值是否不等

1 != '1'

因为两边的值是相等的，所以在比较的他们不等的时候得到false

!== 不全等

比较符号两边的值和类型是否不等

1 != '1' true

因为量的数据类型不一样，所以得到true

>=

比较左边的值是否大于或等于右边的值

1 >= 1 true
1 >= 0 true
1 >= 2 false

<=

比较左边的值是否小于或等于右边的值

1 <= 2 true
1 <= 1 true
1 <= 0 false

>

比较左边的值是否大于右边的值

1 > 0 true
1 > 1 false
1 > 2 false

<

比较左边的值是否小于右边的值

1 < 2 true
1 < 1 false
1 < 0 false

逻辑运算符

&&

进行且的运算

符号左边必须为 true 并且右边也是 true，才会返回 true

只要有一边不是 true，那么就会返回 false

true && true true
true && false false
false && true false
false && false false

||

进行或的运算

符号的左边为 true 或者右边为 true，都会返回 true

只有两边都是 false 的时候才会返回 false

true || true true
true || false true
false || true true
false || false false

!

进行取反运算

本身是 true 的，会变成 false

本身是 false 的，会变成 true

!true false
!false true

var year = 2023;
// 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
    console.log(year + " 年是闰年。");
} else{
    console.log(year + " 年是平年。");
}

三元运算符

三元运算符（也被称为条件运算符），由一个问号和一个冒号组成，语法格式如下：

条件表达式 ? 表达式1 : 表达式2 ;

如果“条件表达式”的结果为真（true），则执行“表达式1”中的代码，否则就执行“表达式2”中的代码。

var x = 11,
    y = 20;
x > y ? console.log("x 大于 y") : console.log("x 小于 y");  // 输出：x 小于 y

条件运算符是唯一的三元运算符，其语法格式如下：

b ? x : y

b 操作数必须是一个布尔型的表达式，x 和 y 是任意类型的值。

如果操作数 b 的返回值为 true，则执行 x 操作数，并返回该表达式的值。

如果操作数 b 的返回值为 false，则执行 y 操作数，并返回该表达式的值。

定义变量 a，然后检测 a 是否被赋值，如果赋值则使用该值；否则设置默认值。

var a = null;  //定义变量a
typeof a != "undefined" ? a = a : a = 0;  //检测变量a是否赋值，否则设置默认值
console.log(a);  //显示变量a的值，返回null

条件运算符可以转换为条件结构：

if(typeof a != "undefined"){  //赋值
    a = a;
}else{  //没有赋值
    a = 0;
}
console.log(a);

也可以转换为逻辑表达式：

(typeof a != "undefined") && (a =a) || (a = 0);  //逻辑表达式
console.log(a);

在上面表达式中，如果 a 已赋值，则执行 (a = a) 表达式，执行完毕就不再执行逻辑或运算符后面的 (a = 0) 表达式；如果 a 未赋值，则不再执行逻辑与运算符后面的 (a = a) 表达式，转而执行逻辑或运算符后面的表达式 (a = 0)。

注意：

在实战中需要考虑假值的干扰。使用 typeof a != “undefined” 进行检测，可以避开变量赋值为 false、null、“”、NaN等假值时，也被误认为没有赋值。

自增自减运算（一元运算符）

++

进行自增运算

分成两种，前置++ 和后置++

前置++，会先把值自动 +1，在返回

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

var num = 10;
num++
console.log(num)
// 会返回 11，并且把 a 的值变成 11

后置++，会先把值返回，在自动+1

var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

-

进行自减运算

分成两种，前置– 和后置–

和 ++ 运算符道理一样

条件判断

if(){...}else{...}进行判断,例如

var role = 20;
if(age >= 18){
    alert('adult') ;
    } 
else {
    alert('teenager');
}

JS switch case 语句与 if else 语句的多分支结构类似，都可以根据不同的条件来执行不同的代码；但是与 if else 多分支结构相比，switch case 语句更加简洁和紧凑，执行效率更高。

JavaScript switch case 语句的语法格式如下：

switch (表达式){
    case value1:
        statements1  // 当表达式的结果等于 value1 时，则执行该代码
        break;
    case value2:
        statements2  // 当表达式的结果等于 value2 时，则执行该代码
        break;
    ......
    case valueN:
        statementsN  // 当表达式的结果等于 valueN 时，则执行该代码
        break;
    default :
        statements  // 如果没有与表达式相同的值，则执行该代码
}

switch 语句根据表达式的值，依次与 case 子句中的值进行比较：

如果两者相等，则执行其后的语句段，当遇到 break 关键字时则跳出整个 switch 语句。

如果不相等，则继续匹配下一个 case。

switch 语句包含一个可选的 default 关键字，如果在前面的 case 中没有找到相等的条件，则执行 default 后面的语句段。

break 关键字

switch 语句是逐行执行的，当 switch 语句找到一个与之匹配的 case 子句时，不仅会执行该子句对应的代码，还会继续向后执行，直至 switch 语句结束。为了防止这种情况产生，需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。

break 除了可以用来跳出 switch 语句外，还可以用来跳出循环语句（for、for in、while、do while 等）

var id = 1;
switch (id) {
    case 1 :
        console.log("普通会员");
        break;  //停止执行，跳出switch
    case 2 :
        console.log("VIP会员");
        break;  //停止执行，跳出switch
    case 3 :
        console.log("管理员");
        break;  //停止执行，跳出switch
    default :  //上述条件都不满足时，默认执行的代码
        console.log("游客");
}

case 子句可以省略语句，这样当匹配时，不管下一个 case 条件是否满足，都会继续执行下一个 case 子句的语句。

var day = 1;
switch (day) {
    case 1 :
    case 2 :
    case 3 :
    case 4 :
    case 5 :
        console.log("工作日");
        break;
    case 6 :
    case 7 :
        console.log("休息日");

循环

分for循环和while循环

for循环---计算1到100相加之和

var x = 0;
var i;
for (i=1; i<=10 ; i++){
x = x + i;
}
console.log(x);

for循环用来遍历数组, for循环还有一个变体是for...in循环，它可以把一个对象的所有属性依次循环出来,示例如下:

var person = {
name: 'aiye',
age: 20，
city : 'Beijing'
} ;
for ( var key in person ) {
    alert (key) ; //'name ' , 'age ' , 'city '
}

JS while 循环的语法格式如下：

while (条件表达式) {
    // 要执行的代码
}

var i = 1;
while( i <= 5) {
    document.write(i+", ");
    i++;
}

//找出 1900 年到 2020 年之间所有的闰年，并以每行 6 个进行输出：
var i = 1900;
var count = 0; //计数闰年的个数
while (i <= 2020) {
    //判断是否是闰年
    if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
        document.write(i + "&nbsp;&nbsp;");
        count++;
        if (count % 6 == 0) {
            document.write("<br/>");
        }
    }
    i++;
}

do while 循环与 while 循环非常相似，不同之处在于，do while 循环会先执行循环中的代码，然后再对条件表达式进行判断。因此，无论条件表达式是真还是假，do while 循环都能至少执行一次，而 while 循环就不行了，如果条件表达式为假会直接退出 while 循环。

do while 循环的语法格式如下：

do {
    // 需要执行的代码
} while (条件表达式);

//使用 do while 循环计算 1~100 之间所有整数的和：
var i=1;
var sum=0;
do {
    sum += i;
    i++;
} while (i <= 100);
document.write("1 + 2 + 3 + ... + 98 + 99 + 100 = " + sum)

JS break 语句

使用 break 语句跳出 for 循环：

for (var i = 0; i < 10; i++) {
    if(i == 5) {
        break;
    }
    document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");

运行结果：

i = 0
i = 1
i = 2
i = 3
i = 4
循环之外的代码

JS continue 语句

continue 语句用来跳过本次循环，执行下次循环。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。

break 语句用来跳出整个循环，执行循环后面的代码；continue 语句用来跳过当次循环，继续执行下次循环。

使用 continue 语句跳出 for 循环：

for (var i = 0; i < 10; i++) {
    if(i % 2 == 0) {
        continue;
    }
    document.write(i + "&nbsp;");
}

运行结果：

1 3 5 7 9

在 JavaScript中，定义函数使用function关键字，使用方式如下

function add (x,y) {
    return x+y;
}

上述add()函数的定义如下:

·function指出这是一个函数定义;

·add是函数的名称。

·(x,y)括号内列出函数的参数，多个参数以“,”分隔。

·{...}之间的代码是函数体，可以包含若干语句,甚至可以没有任何语句。调用函数时，按顺序传入参数即可: add(10,9);//返回19。

由于JavaScript 允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数: add(10,9,'blablabla'); //返回19。

传入的参数比定义的少也没有问题:add();//返回 NaN。此时add(x,y)函数的参数x和y收到的值为undefined，计算结果为NaN。

控制输出

1. 输出到页面：document.write()

2. 弹窗框显示：alert()

3. 控制台输出：console.log()

记住控制台输出即可

判断数据类型的关键字

isNaN 关键字

isNAN可以判断一个变量是不是数

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

对象

创建对象

使用花括号 { } 来创建对象，{ } 中用来定义对象中的属性。属性是一个个键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型，例如字符串、数组、函数或其它对象等。不同的属性之间使用逗号进行分隔。

var person = {
    name: "hx",
    age: 18,
    gender: "女",
    displayName: function() {
        document.write(this.name);
    }
};

上面创建了一个名为 person 的对象，该对象中包含三个属性 name、age、gender 和一个方法 displayName()。displayName() 方法中的 this.name 表示访问当前对象中的 name 属性，会被 JavaScript 解析为 person.name。

访问对象属性

要访问或获取属性的值，使用对象名.属性名或者对象名["属性名"] 的形式

person.name;
person['name'];
person.displayName();

修改对象属性

使用对象名.属性名或者对象名["属性名"] 的形式除了可以获取对象的属性值外，也可以用来设置或修改对象的属性值

//增加
person.phone = "12345678910";
//改
person.age = 19;

删除对象属性

使用 delete 语句来删除对象中的属性

delete person.age;

String 字符串对象

JavaScript String 对象用于处理字符串，其中提供了大量操作字符串的方法，以及一些属性。

创建 String 对象的语法格式:

var val = new String(value);
var val = String(value);

其中参数 value 为要创建的字符串或字符串对象。

JavaScript 中，字符串和字符串对象之间能够自由转换，因此不论是创建字符串对象还是直接声明字符串类型的变量，都可以直接使用字符串对象中提供的方法和属性。

String 对象中的属性

属性	描述
constructor	获取创建此对象的 String() 函数的引用
length	获取字符串的长度
prototype	通过该属性您可以向对象中添加属性和方法

var str = new String('JavaScript');
String.prototype.name = null;
str.name = "Hello World!";
document.write(str.constructor + "<br>");       // 输出：function String() { [native code] }
document.write(str.length + "<br>");            // 输出：10
document.write(str.name);                       // 输出：Hello World!

String 对象中的方法

方法	描述
anchor()	创建一个 HTML 锚点，即生成一个标签，标签的 name 属性为 anchor() 方法中的参数
big()	用大号字体显示字符串
blink()	显示闪动的字符串
bold()	使用粗体显示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回指定字符的 Unicode 编码
concat()	拼接字符串
fixed()	以打字机文本显示字符串
fontcolor()	使用指定的颜色来显示字符串
fontsize()	使用指定的尺寸来显示字符串
fromCharCode()	将字符编码转换为一个字符串
indexOf()	检索字符串，获取给定字符串在字符串对象中首次出现的位置
italics()	使用斜体显示字符串
lastIndexOf()	获取给定字符串在字符串对象中最后出现的位置
link()	将字符串显示为链接
localeCompare()	返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串
match()	根据正则表达式匹配字符串中的字符
replace()	替换与正则表达式匹配的子字符串
search()	获取与正则表达式相匹配字符串首次出现的位置
slice()	截取字符串的片断，并将其返回
small()	使用小字号来显示字符串
split()	根据给定字符将字符串分割为字符串数组
strike()	使用删除线来显示字符串
sub()	把字符串显示为下标
substr()	从指定索引位置截取指定长度的字符串
substring()	截取字符串中两个指定的索引之间的字符
sup()	把字符串显示为上标
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toString()	返回字符串
valueOf()	返回某个字符串对象的原始值

特殊字符

使用反斜线 \ 来转义字符串中的引号

单引号\',双引号\",反斜线本身\,换行\n,空格\b,换页\f

Array（数组）对象

数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。

创建 Array 对象的语法格式如下

var arr = new Array(values);
var arr = Array(values);

其中，values 为数组中各个元素组成的列表，多个元素之间使用逗号分隔。

var fruits = new Array( "apple", "orange", "mango" );
console.log(fruits);  // 输出：["apple", "orange", "mango"]

在使用 new Array() 来定义数组时，如果只提供一个数值参数，那么这个数值将用来表示数组的初始长度，例如 new Array(5) 表示定义一个长度为 5 的数组。JavaScript 中，数组允许的最大长度为 2³²-1，即 4294967295。

除了可以使用 Array() 函数来定义数组外，您也可以直接使用方括号 [ ] 来定义数组，[ ] 中为数组中的各个元素，多个元素之间使用逗号, 进行分隔。

var fruits = [ "apple", "orange", "mango" ];
console.log(fruits);        // 输出：(3) ["apple", "orange", "mango"]

var fruits = [ "apple", "orange", "mango" ];
document.write(fruits[0] + "<br>");     // 输出：apple
document.write(fruits[1] + "<br>");     // 输出：orange
document.write(fruits[2] + "<br>");     // 输出：mango

Array 对象中的属性

属性	描述
constructor	返回创建数组对象的原型函数
length	设置或返回数组中元素的个数
prototype	通过该属性您可以向对象中添加属性和方法

var cars = new Array("Saab", "Volvo", "BMW");
Array.prototype.name = null;
cars.name = "JavaScript";
document.write(cars.constructor + "<br>");      // 输出：function Array() { [native code] }
document.write(cars.length + "<br>");           // 输出：3
document.write(cars.name + "<br>");             // 输出：JavaScript

Array 对象中的方法

方法	描述
concat()	拼接两个或更多的数组，并返回结果
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	返回数组的可迭代对象
every()	检测数值元素的每个元素是否都符合条件
fill()	使用一个固定值来填充数组
filter()	检测数值元素，并返回符合条件所有元素的数组
find()	返回符合传入函数条件的数组元素
findIndex()	返回符合传入函数条件的数组元素索引
forEach()	数组每个元素都执行一次回调函数
from()	通过给定的对象中创建一个数组
includes()	判断一个数组是否包含一个指定的值
indexOf()	搜索数组中的元素，并返回它所在的位置
isArray()	判断对象是否为数组
join()	把数组的所有元素放入一个字符串
keys()	返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	删除数组的最后一个元素并返回删除的元素
push()	向数组的末尾添加一个或更多元素，并返回数组的长度
reduce()	累加（从左到右）数组中的所有元素，并返回结果
reduceRight()	累加（从右到左）数组中的所有元素，并返回结果
reverse()	反转数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	截取数组的一部分，并返回这个新的数组
some()	检测数组元素中是否有元素符合指定条件
sort()	对数组的元素进行排序
splice()	从数组中添加或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf()	返回数组对象的原始值

Date（时间/日期）对象

Date 对象是 JavaScript 内置的对象，通过它您可以访问计算机系统的时间，此外，Date 对象中还提供了多种用于管理、操作和格式化时间/日期的方法。

创建 Date 对象

在开始处理时间和日期之前，我们需要先创建一个 Date 对象。与其他对象（数组对象、字符串对象等）不同，Date 对象不能直接声明，必须通过 Date() 函数定义。

JavaScript 中提供了四种不同的方法来创建 Date 对象，如下所示：

var time = new Date();
var time = new Date(milliseconds);
var time = new Date(datestring);
var time = new Date(year, month, date[, hour, minute, second, millisecond]);

参数说明：

不提供参数：若调用 Date() 函数时不提供参数，则创建一个包含当前时间和日期的 Date 对象；

milliseconds（毫秒）：若提供一个数值作为参数，则会将这个参数视为一个以毫秒为单位的时间值，并返回自 1970-01-01 00:00:00 起，经过指定毫秒数的时间，例如 new Date(5000) 会返回一个 1970-01-01 00:00:00 经过 5000 毫秒之后的时间；

datestring（日期字符串）：若提供一个字符串形式的日期作为参数，则会将其转换为具体的时间，日期的字符串形式有两种，如下所示：

YYYY/MM/dd HH:mm:ss（推荐）：若省略时间部分，则返回的 Date 对象的时间为 00:00:00；

YYYY-MM-dd HH:mm:ss：若省略时间部分，则返回的 Date 对象的时间为 08:00:00（加上本地时区），若不省略，在 IE 浏览器中会转换失败。

将具体的年月日、时分秒转换为 Date 对象，其中：

year：表示年，为了避免错误的产生，推荐使用四位的数字来表示年份；

month：表示月，0 代表 1 月，1 代表 2 月，以此类推；

date：表示月份中的某一天，1 代表 1 号，2 代表 2 号，以此类推；

hour：表示时，以 24 小时制表示，取值范围为 0 ~ 23；

minute：表示分，取值范围为 0 ~ 59；

second：表示秒，取值范围为 0 ~ 59；

millisecond：表示毫秒，取值范围为 0 ~ 999。

var time1 = new Date();
var time2 = new Date(1517356800000);
var time3 = new Date("2018/12/25 12:13:14");
var time4 = new Date(2020, 9, 12, 15, 16, 17);
document.write(time1 + "<br>");     // 输出：Fri Jul 23 2021 13:41:39 GMT+0800 (中国标准时间)
document.write(time2 + "<br>");     // 输出：Wed Jan 31 2018 08:00:00 GMT+0800 (中国标准时间)
document.write(time3 + "<br>");     // 输出：Tue Dec 25 2018 12:13:14 GMT+0800 (中国标准时间)
document.write(time4 + "<br>");     // 输出：Mon Oct 12 2020 15:16:17 GMT+0800 (中国标准时间)

Date 对象中的属性

属性	描述
constructor	返回创建 Date 对象的原型函数
prototype	通过该属性您可以向对象中添加属性和方法

var time = new Date();
Date.prototype.name = null;
time.name = "JavaScript";
document.write(time.constructor + "<br>");      // 输出：function Date() { [native code] }
document.write(time.name + "<br>");             // 输出：JavaScript

Date 对象中的方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getFullYear()	从 Date 对象返回四位数字的年份
getYear()	已废弃，请使用 getFullYear() 方法代替
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	根据通用时间从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	根据通用时间从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth()	根据通用时间从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear()	根据通用时间从 Date 对象返回四位数的年份
getUTCHours()	根据通用时间返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes()	根据通用时间返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds()	根据通用时间返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds()	根据通用时间返回 Date 对象的毫秒(0 ~ 999)
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()	设置 Date 对象中月份 (0 ~ 11)
setFullYear()	设置 Date 对象中的年份（四位数字）
setYear()	已废弃，请使用 setFullYear() 方法代替
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)
setTime()	以毫秒设置 Date 对象
setUTCDate()	根据通用时间设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth()	根据通用时间设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear()	根据通用时间设置 Date 对象中的年份（四位数字）
setUTCHours()	根据通用时间设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes()	根据通用时间设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds()	根据通用时间设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds()	根据通用时间设置 Date 对象中的毫秒 (0 ~ 999)
toSource()	返回该对象的源代码
toString()	把 Date 对象转换为字符串
toTimeString()	把 Date 对象的时间部分转换为字符串
toDateString()	把 Date 对象的日期部分转换为字符串
toGMTString()	已废弃，请使用 toUTCString() 方法代替
toUTCString()	根据通用时间，把 Date 对象转换为字符串
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC()	根据通用时间返回 1970 年 1 月 1 日到指定日期的毫秒数
valueOf()	返回 Date 对象的原始值

typeof 关键字

JavaScript有分数据类型，那么我们有时候需要知道我们存储的数据是什么类型的数据，

使用 typeof 关键字来进行判断

语法： typeof 变量

/* 多种类型的变量 */
var age = 18; 
var name=" "; 
var isFun = true; 
var a;

console.log(typeof age);    //number
console.log(typeof name);   //string
console.log(typeof a);      //undefined
console.log(typeof isFun);  //boolean

数据类型的转换

在JavaScript的基本数据类型中，字符串、数值以及其他类型之间是可以相互转换的，而这种转换又可以分为两种。一种是在进行算数是默认会执行的自动转换，其二就是强制转换

数据类型之间的强制转换：

1.Number（变量）

==将其他的数据类型转化为数值类型==

可以把一个变量强制转化为数值类型

可以转换成小数，胡保留小数

可以转换布尔值

遇到不可转换的都会返回NAN

2.parseInt（变量）

==将其他的数据类型转化为数值类型==

从第一位开始检查，是数字就转换，直到一个不是数字内容

开头不是数值，那么久直接转换为NAN

不认识小数点，只能保留小数点

3.parseFloat（变量）

==将其他的数据类型转化为数值类型==

从第一个开始检查，是数字就转换，直到一个不是数字的内容

开头就不是数字，那么直接返回NAN

认识一次小数点

4.变量.toString()

==将其他的数据类型转化为字符串类型==

有一些数据类型不能使用toString()方法，比如undefined 和null

5.String（变量）

==将其他的数据类型转化为字符串类型==

所有数据类型都可以

6.Boolean(变量)

==将其他数据类型转换为布尔类型==

在js中，只有’’,0,null,undefined,NaN，这些为false

JavaScript和Html联系

行内式js代码

直接在标签上写js代码，需要依靠事件（行为）来触发

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
<!-- 写在其他元素上 -->
<div οnclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 
	注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

内嵌式js代码

在HTML页面中创建script标签，并且在script标签中直接编写JavaScript代码即可（js代码会在页面打开的时候直接触发执行）

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!-- 
	注：script 标签可以放在 head 里面也可以放在 body 里面
-->

外链式js代码

在HTML页面中创建一个script标签，把JavaScript代码单独保存在 .js后缀的文件中，然后通过设置script标签的src属性来引入外部的js文件

// 我是 index.js 文件
alert('我是一个弹出层')

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>