笔记五、Javascript入门

m0_69224248

已于 2023-10-12 09:47:17 修改

阅读量31

点赞数

文章标签：笔记 javascript 开发语言

于 2023-10-07 10:55:31 首次发布

本文链接：https://blog.csdn.net/m0_69224248/article/details/133631727

版权

一、前言

JavaScript 是一种脚本语言，一般是在客户端（浏览器）上执行的脚本语言，进行实时的内容更新，交互式的内容。通过它来实现静态HTML页面的交互性。

JavaScript 是专为与页面交互而设计的一种脚本语言，主要由以下3个部分组成：

ECMAScript ，由 ECMA-262 定义，提供核心语言功能；
文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
浏览器对象模型（BOM），提供与浏览器进行交互的方法和接口。

ECMAScript 总的来说可以分为两大类：

“ECMAScript 6 之前的版本”（我们现阶段学习的版本）
“ECMAScript 6 及之后的版本”。（我们下一个阶段学习的版本）

ECMAScript 6（也被称为 ES6 或 ECMAScript 2015）是一个非常重要的里程碑。

二、使用步骤

HTML 中的脚本通常位于 <script> 与 </script> 标签之间，脚本可被放置在 HTML 页面的 <head> 和 <body> 部分中。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

脚本可以放在HTML页面的 head、 body、外部js文件中

三、常用语法

（一）输出语句

JavaScript 自身没有任何用来打印或者输出的函数，那么如果要输出数据，则可以通过以下几种方式：

1、使用 window.alert() 方法以弹出警告框形式输出相应信息，如下：

window.alert('debug');
alert('debug'); // 可以省略前面的window对象，直接使用 alert()

2、使用 document.write() 方法将内容写到 HTML 文档中，即会显示在页面上。

注意：的是此函数是仅仅向文档输出写内容。如果在该文档已经完成加载后执行了 document.write( )函数，那么整个 HTML 页面将会被document.write( )函数输出的内容所覆盖掉，一般不建议用此方式进行输出，除非你的页面本身就是空白的。

3、使用 innerHTML 属性写入到 HTML 元素。

4、使用 console.log() 写入到浏览器的控制台。

四、变量与数据类型

（一）变量

在JavaScript中，变量属于松散类型的，可以在声明一个变量时，在不需要声明类型的情况下就可以直接使用，并且可以保存任意类型的值。在JavaScript中，变量所保存值的类型也可以改变。

1.变量类型

基本类型（指简单的值类型或数据段）：number、string、boolean、null、undefined等。
引用类型（可能包含多个值的对象）：array、object、function等。

（1）基本类型特征

基本类型的数据是存放在栈内存中的，对于基本类型的赋值方式是 值拷贝 的方式，在栈内存中开辟出了一个新的存储区域用来存储新的变量的值，这个变量本身是独立的，只不过和所复制的变量的值一样，所以如果其中一个的值发生了改变，是不会影响到另一个的 。

（2）引用类型特征

引用类型的数据是存放在堆内存中的，定义了一个对象其实是在栈内存中存储了一个指针，这个指针指向堆内存中该对象的存储地址。

引用类型在赋值给另一个对象的过程其实是把该对象的地址复制给了另一个对象变量，两个变量保存的地址都指向同一个对象，所以如果其中一个变量对所引用的对象进行了修改，那么所做的修改会影响到另一个变量。

2.变量使用

JavaScript中可以使用 var 操作符来声明变量，在全局声明的变量就成为全局变量，如果在函数内声明的变量就是以该函数为作用域的局部变量，局部变量会在函数执行完毕后被销毁，也可以一次声明多个变量：

var name = 'susan',
    age = 27,
    sex = 'male';

也可以省略操作符var直接声明变量：

name = 'susan';
age = 27;
sex = 'male';

可以通过 typeof 操作符来进行判断，它会以字符串的形式返回数据类型.

（二）基本类型

1.number（数字）

JavaScript中的 number 类型支持十进制、八进制以及十六进制的数值。

关于浮点型的数值需要注意的是：

1、在JavaScript中，由于保存浮点型所需的内存是整型的两倍，所以JavaScript会在适当的时候将不必要的浮点型转换为整型，比如浮点型的7.0会自动保存为整型的7。
2、浮点型运算精度远不如整型。

特殊值

1、Infinity:当大于或小于某个界限时，该值会被自动转换为特殊值

可以通过 isFinite( ) 函数来检测一个数值是否为Infinity。
函数原型：isFinite(number)

参数number是有限数字（或可转换为有限数字），那么返回 true。
如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

2、NaN（Not a Number），即非数值。为了避免在某些需要返回数值时因为运算问题未返回数值报错，影响程序运行。

NaN有两个特点：

任何涉及NaN的操作均会返回NaN；
NaN不与任何值相等，包括它自己.

可以用 isNaN() 函数来检测一个值是否为NaN，它会尝试将接收的参数转换为数值，转换失败则返回true，转换成功返回false。

数值转换

1、parseInt( )：在转换字符串时，会 忽略前面的空格，直到找到第一个非空字符。

如果第一个非空字符不是数字字符或者负号则返回 NaN。
如果第一个字符是数值字符会继续解析第二个，直到解析完整个字符串或者遇到了一个非数值字符。

2、parseFloat( ) :与parseInt( )函数类似，从第一个字符开始解析，直到字符串末尾或者遇到一个无效的浮点数字字符为止。它始终会忽略开头的0，且不具备传入基数的能力，即只能解析十进制数值。

2.string（字符串）

在JavaScript中，字符串可以使用单引号或双引号来进行表示，两者无区别，可以通过 length 属性来获取字符串长度。

var str = 'Hello JavaScript';
alert(str.length); //16

字符串转化有两个方式：toString() 方法和 String() 转型函数

这两个方法的区别就是null、undefined值没有toString()方法，而任何类型值都可以使用String()函数。

var num = 123;
num.toString(); //"123"
String(num); //"123"

var boo = false;
boo.toString(); //"false"
String(boo); //"false"

在多数情况下，调用toString()方法不必传递参数。不过当要确定输出数值的不同进制时，可以传入一个基数，如下：

var num = 10;
num.toString(); //"10"
num.toString(2); //"1010"
num.toString(8); //"12"
num.toString(10); //"10"
num.toString(16); //"a"

Tips:
在不知道要转换的值是不是 null 或 undefined 时，建议使用 String()方法。如果该值有toString( )方法则调用该方法，如果是 null 或 undefined 则返回其字符串表示，所以，使用toString( )可能会出错，但是String( )函数来转化字符串就不会出错。

3.boolean(布尔)

仅包括两个值：true和false。通过Boolean( )转型函数可实现类型转化，它可以对任意类型的值使用，将其转换为布尔型。转换规则主要如下：

string型：对于字符串，非空字符串则转化为：true；空字符串""转化为：false
number型：对于任何非0数转化为：true；0 与 NaN 则转化为：false
object型：对于任何对象则转化为：true；对于 null则转化为：false
undefined型：直接转化为false

4.null(空指针对象)

只包含一个值：null，表示缺少的标识，指示变量未指向任何对象，所以当使用typeof操作符检测null值会返回“object”，如果你定义某个对象时不确定当前赋何值，但未来需要赋某个object类型值时，那就可以将该变量初始化为null。需要注意的是，当 null 与 undefined 进行比较时，会返回true。

5.undefined(未定义)

undefined类型也只有一个值：undefiend。所有 未初始化的变量 均会保存该值。

6.array(数组)

1、数组的定义，可以使用数组的字面量语法或数组的初始化方法。

var arr1 = new Array('a', 'b', 'c');
var arr2 = ['a','b','c'];
// 空数组
var arr3 = new Array( );
var arr4 = [ ];

2、数组的访问，可以通过下标语法来访问数组元素。

var arr = ['a','b','c'];
console.log(arr[1]);
// b

3、数组的遍历。可以通过for-in来遍历数组。

var leters = ["a", "b", "c", "d", "e"]
for (index in leters) {
console.log(leters[index] + ",")
}
// a,b,c,d,e

4、数组的拼接。通过concat(items: Object): Array方法来实现数组的拼接，该方法会产生一个新的拼接后的数组：

var leters = ["a", "b", "c", "d", "e"]
var nums = ["1", "2", "3", "4", "5"]

var newArr = leters.concat(nums)
for (index in newArr) {
console.log(newArr[index] + ",")
}
// a,b,c,d,e,1,2,3,4,5

5、通过join()可以将数组元素拼接成字符串，如下：

var leters = ["a", "b", "c", "d", "e"]
var str = leters.join()
console.log(str)
// a,b,c,d,e

6、可以通过sort(compareFunction: Function): Array来实现数组的排序，

如果sort()函数中未接收参数，则按照字母升序排序；
如果向sort()函数中传递参数，则按照参数规定的规则进行排序，并会将排序后的数组返回

function sortNums (a, b) {
return b - a
}
var nums = ["4", "2", "8", "5", "9"]
console.log(nums.sort(sortNums))
// 降序： [9, 8, 5, 4, 2]

通过reverse( )方法，可以数组进行反序排列

var values = [11, 7, 5, 10, 15];
values.reverse();
// [15, 10, 5, 7, 11]

7、通过 indexOf(searchElement: Object, fromIndex: Number): Number 方法可以获取指定元素的索引值：

注意：indexOf( ) 与 lastIndexOf( )都接收两个参数：要查找的项(可选的)和表示查找的起点位置。其中，indexOf( )方法从数组的开头开始向后查找，lastIndexOf( )方法则从数组的末尾开始向前查找。

var numbers = ["a", "b", "c", "d", "e", "f", "g"];
console.log(numbers.indexOf("d")); //3

console.log(numbers.lastIndexOf("g")); //6

8、通过push( )函数，可以在数组的末尾添加新元素。

9、通过unshift()函数，可以在数组的开头插入元素，若多个元素，之间用逗号隔开。

10、通过pop()函数，可以删除数组的最后一个元素。

11、通过shift()函数，可以将数组的第一个元素删除，该函数还会将删除的元素返回。

12、可以使用Array.isArray(value)来判断是否是数组

13、slice( ) :获取指定位置的元素（截取子数组），该方法会返回一个新数组。
slice( )方法可以接受一或两个参数，即要返回项的起始和结束位置。

一个参数时，slice( )方法返回从该参数 指定位置开始到数组末尾的所有项。
两个参数时，该方法返回起始和结束位置 之间的项（但不包括结束位置的项）。

14、splice( ) :主要用途是向数组中间插入项

删除：可以删除任意数量的元素，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数 ：起始位置、0(此参数时要删除的项数，0则表示不删除) 和要插入的项。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。

object(对象):对象属性的访问，我们可以使用 . 语法，也可以使用键值对的方式访问,通过for-in循环还可以遍历对象的属性名

五、函数

（一）函数的定义

1、函数声明

function functionname(parameters){
    //这里是要执行的代码
}

function：是声明的关键字，不能省略；
functionName：是函数名；
parameters：参数列表。

Tips:在Javascript中不需要声明返回值类型，只需要在函数体最后用 return 语句就即可。

2、函数表达式

var sum = function (a, b) {return a + b};

3、Function 构造函数

语法格式：new Function([arg1[, arg2[, ...argN]],] functionBody)
Function 构造函数可以接收任意数量的参数，每个参数必须使用引号包围，但最后一个参数始终都被看成是函数体

函数声明与函数表达式的区别：

函数声明：解析器在向执行环境中加载数据时会率先读取函数声明，函数声明会在任何代码被执行前先被解析，这意味着你可以在声明之前调用它们。
函数表达式：而对于函数表达式，则必须等到解析器执行到它所在的代码行时才会真正被解释执行。

作为值的函数

在ECMAScript中 没有函数重载 的概念，大家可以将函数名理解为指针，如下：

function addSomeNumber(num1, num2) {
    return num1 + num2;
}

function addSomeNumber(num) {
    return num * 0;
}
alert(addSomeNumber(100, 100)); // 输出的结果为: 0

在以上例子中声明了两个同名函数，而结果则是 后面声明的函数覆盖了前面的函数。