JavaScript总结

Peaches️

已于 2022-06-22 20:27:24 修改

阅读量235

点赞数

分类专栏： web 文章标签： javascript 前端开发语言

于 2022-06-19 18:06:00 首次发布

本文链接：https://blog.csdn.net/m0_52823920/article/details/125360487

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript总结

特点

语法结构与C和Java相似，但是JavaScript是一门动态语言。
严格区分大小写。

标签引用

可以在HTML中用

输出

页面输出

控制台输出

例如：

基本语法

大小写敏感

标识符

标识符:就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；其他字符可以是字母、下划线、美元符号或数字。
标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById。

注释：

同Java：
单行注释：// 注释内容
多行注释：/* 注释内容 */

语句

语句后的分号建议添加，但不必须。

变量

一般用var声明
ECMAScript 的变量是松散类型的（坑！），所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
定义变量时要使用 var 操作符（坑！），后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值

代码示例：

var message = ‘Hi, JavaScript’;

console.log(message);

message = 100;

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

数据类型

1.字符串类型（String）
2.布尔类型（Boolean）
3.数值类型（Number）
4.null类型（Null）
5.undefined类型（Undefined）

操作符

一元操作符 ++ --：

布尔操作符 && || ！：

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

算术操作符 + - * / %：

var result = 5 + ‘5’; // 一个数值和一个字符串相加
console.log(result); // ‘55’
//============================================
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;// (num1 + num2)，还可使用模板字符串``
console.log(message); // “The sum of 5 and 10 is 510”

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

注意: ===称为全等（值和类型）。
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;

语句：

if do-while while for for-in for-of break continue switch

注意，请为语句块添加 {}，不要吝啬
另外， for-of、forEach能简洁的遍历集合中的元素：

函数：

1.函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。
2.ECMAScript 中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。3.ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。

也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言（坑！）。

之所以会这样，原因是 ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。

如果在 ECMAScript中定义了两个名字相同的函数，则该名字只属于后定义的函数。

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

函数对象

call()和apply()

对象(Object)

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。

创建对象有如下两种方式，我们常用第二种：

//方式一new
var person = new Object();//生成空对象
person.name = ‘Elon Musk’;//设置对象的属性
person.age = 46;
person.job = ‘SpaceX Rocket’;
person.sayName = function(){ //设置对象的方法/函数，注意此处
console.log(this.name);
};
//方式二字面量
var person = {
name: ‘Lary Page’,
age: 47,
job: ‘Software Engineer’,
sayName: function(){ //注意此处
console.log(this.name);
}
};
console.log(person.job);
person.sayName();

数组Array:

除了 Object 之外， Array 类型恐怕是 ECMAScript 中最常用的类型了。

1.ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别。虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript 数组的每一项可以保存任何类型的数据；
2.ECMAScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

//方式一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);

常用数组方法：

1.元素联合：

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

2.堆栈方法：

栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

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

2.队列方法：

栈数据结构的访问规则是 LIFO（后进先出），而队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。

ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。

反转数组项：

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返回一个新数组，原数组没改变

分片方法：

slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。

在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

注意， slice() 方法不会影响原始数组。

splice方法：

可以更改原始数组

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2) 会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,‘red’,‘green’) 会从当前数组的位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,‘red’,‘green’) 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 ‘red’ 和 ‘green’ 。