【JavaScript总结】

最新推荐文章于 2024-07-22 15:13:59 发布

要变得优秀呀

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量98

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_66166205/article/details/125420046

版权

JavaScript简介

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

以上 JavaScript 语句（在 < scrip t> 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

将JavaScript直接写在HTML 文档中：
实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。
实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

JavaScript 语法

JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number) 字面量可以是整数或者是小数，或者是科学计数(e)。
字符串(String) 字面量可以使用单引号或双引号:“John Doe” 、‘John Doe’。
表达式字面量用于计算。
数组（Array） 字面量定义一个数组：[40, 100, 1, 5, 25, 10]。
对象（Object） 字面量定义一个对象{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function） 字面量定义一个函数：function myFunction(a, b) { return a * b;}

JavaScript 变量

在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length
x = 5
length = 6

ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
定义变量时要使用 var 操作符，后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

有一点必须注意，即用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁，例如：

function test(){
    var message = "hi"; // 局部变量，去掉var即为全局变量
}
test();
alert(message); // 错误！

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

// 我不会执行

多行注释以 /* 开始，以 */ 结尾。

JavaScript 操作符

一元操作符 ++ –
布尔操作符 && || ！

除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN
&&和||都属于短路操作！

算术操作符 + - * / %

JavaScript使用 算术运算符 来计算值:(5 + 6) * 10

关系操作符 <> <=>= == === != !==

注意: ===称为全等（值和类型）。

var x = 5;
console.log(x == 5);
console.log(x == '5');
console.log(x === 5);
console.log(x === '5');

条件（问号）操作符 ? :
能有效的简洁代码

var max = (num1 > num2) ? num1 : num2;

赋值操作符 = += -+ *= /= %=

JavaScript 数据类型

在这里插入图片描述

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。
为了可以操作变量，了解数据类型的概念非常重要。
如果没有使用数据类型，以下实例将无法执行：

16 + "Volvo"

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

ECMAScript 中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。请看下面的例子:

function sum(num1, num2) {
    return num1 + num2;
}
var result = sum(3, 2);
console.log(result);

ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。
如果在 ECMAScript中定义了两个名字相同的函数，则该名字只属于后定义的函数。请看下面的例子:

function addSomeNumber(num){
    return num + 100;
}
function addSomeNumber(num) {
    return num + 200;
}
console.log(addSomeNumber(100)); //300

JavaScript 字母大小写

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。

JavaScript 对象

在 JavaScript中，几乎所有的事物都是对象。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象属性

可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性。

访问对象属性

可以通过两种方式访问对象属性:

person.lastName;
person[“lastName”];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。like this:name = person.fullName();
如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回:
name = person.fullName;

访问对象方法

可以使用以下语法创建对象方法：

methodName : function() {
    // 代码 
}

也可以使用以下语法访问对象方法：

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
如果使用 fullName 属性，不添加 (), 它会返回函数的定义：

objectName.methodName

数组Array

JavaScript 数组的每一项可以保存任何类型的数据.
JavaScript 数组的大小是可以动态调整的
创建数组有以下两种方法，我们常用第二种:


//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);

常用的数组方法如下：

元素联合:

var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue

堆栈方法
ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。


var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2

队列方法
队列在列表的末端添加项，从列表的前端移除项。

var colors = new Array(); //创建一个数组
colors.push('red', 'green'); //推入两项
console.log(colors); //2
count = colors.push('black'); //推入另一项
console.log(colors); //3
var item = colors.shift(); // 前端弹出第一项
console.log(item); //'red'
console.log(colors);

总结:由上可知， push、pop操作在数组末，而 unshift、shift操作在数组头；push、unshift压入而pop、shift弹出。

反转数组项

var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1

链接方法

var colors1 = ['red', 'green', 'blue'];
var colors2 = ['yellow', 'black'];
console.log(colors1.concat(colors2));
console.log(colors2.concat(colors1));
console.log(colors2.concat('brown'));
console.log(color2)//注意：concat返回一个新数组，原数组没改变

splice方法(最强大的数组方法)
- 删除：可以删除任意数量的项，只需指定 2 个参数。
- 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。
- 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, 'yellow', 'orange'); // 从位置 1 开始插入两项
console.log(colors); // green,yellow,orange,blue
console.log(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, 'red', 'purple'); // 插入两项，删除一项
console.log(colors); // green,red,purple,orange,blue
console.log(removed); // yellow，返回的数组中只包含一项

JavaScript 闭包

JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
简而言之，闭包就是：
函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

全局变量

函数可以访问由函数内部定义的变量，如：

function myFunction() {
    var a = 4;
    return a * a;
}

JavaScript 内嵌函数

所有函数都能访问全局变量。
实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：
实例

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}