526互联

想了解JavaScript基础？这篇文章足够了！

发布时间 2023-05-04 17:36:36作者: 前端老兵

本人无意看到的一篇文章，觉得写的很全面，简单概括了Javascript的一些知识，现分享如下：

原文地址：http://www.ppmy.cn/news/7295.html

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

一、JavaScript的介绍

JavaScript 是一种运行在 客户端的脚本语言，作为web标准的行为层，最初出现时只是 为了实现网页端和用户之间的交互 。

在正式学习JavaScript之前，我们首先需要对JavaScript的产生和发展历史有一定的了解。

1. JavaScript发展历史

起源阶段：

  • 1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（ 表单校验 ）

  • 后来Netscape在与Sun合作之后将其改名为JavaScript,目的是为了利用 Java 这个因特网时髦词汇。

  • 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JavaScriptcript（这样命名是为了避免与 Netscape 潜在的许可纠纷）

三足鼎立阶段：

  • CEnvi的ScriptEase

  • Netscape的JavaScript

  • IE的JavaScriptcript

标准化阶段：

1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。

2. JavaScript的组成

  • ECMAScript : - JavaScript的核心，ECMAScript是一套标准，规范了语言的基本语法和数据类型，定义了一种语言的标准,与具体实现无关

  • DOM ：(Document Object Model)一套操作网页元素的API (方法)

  • BOM ：(Browser Object Model)一套操作浏览器功能的API

二、 JavaScript的使用方式

JavaScript的三种使用方式：和CSS的使用方式类似，JavaScript也可以使用:

  • 行内JavaScript、
  • 内部JavaScript
  • 外部JavaScript

三种方式。

1. 行内JavaScript

给标签添加事件属性，在事件的处理函数里，直接写JavaScript代码。

<!-- 给标签添加事件属性，使用JavaScript代码处理标签的事件 -->
<p onclick="javascript:alert('ok')">我是一个p</p>

2. 内部JavaScript

在HTML的head标签里添加script,再在script标签里些JavaScript代码。

<head><!-- 在head标签里添加script标签，再在script标签里编写JavaScript代码 --><script>console.log("hello world");</script>
</head>

3. 外部JavaScript

单出编写一个JavaScript文件，在HTML文档的head标签里使用script标签，设置script标签的src属性，引入这个外部的JavaScript文件。

test.JavaScript

console.log("hello world");

test.html

<head><!-- 在head标签里添加script标签，给script标签设置src属性，引入一个外部JavaScript文件 --><script src="test.JavaScript"></script>
</head>

注意:给script标签设置了src属性以后，如果再在script标签里编写JavaScript代码，script标签里的JavaScript代码不会被执行。

三、JavaScript基本语句

1. JavaScript里的注释

JavaScript里的注释也分为当行注释和多行注释两种:

  • 单行注释使用//表示；
  • 多行注释以/* 开始，以*/结束。
<script>// 我是一个单行注释/*我是一个多行注释*/
</script>

2. JavaScript常见的输入输出语句

alert:警告框

alert("hello world");

prompt:文本输入框

prompt("请输入您的银行卡密码:")

confirm:确认弹窗

confirm("您确定要退出吗？")

document.write:往页面里写入内容

document.write("你好世界");

console.log:在控制台里输出内容

console.log("hello world");

四、变量

1. 变量

和其他常见的编程语言一样，JavaScript里也可以定义变量。

不同于Java语言，JavaScript里在定义变量时，推荐使用 var 来对变量进行声明。

// 使用 var 声明一个变量 name,并同时给 name 变量赋值
var name ="zhangsan";// 使用 var 声明一个变量，但是声明的时候不赋值，声明以后单独赋值
var age;
age = 18;// 不使用var关键字，直接对一个变量赋值(不推荐)
height = 178;// 使用一个var关键字，同时声明多个变量并赋值
var a = 12,b = 23;

2. 变量的命名规则与规范

规则：

  • 由数字、字母、下划线和$组成

  • 不能以数字开头

  • 严格区分大小写

var x = 3 - 'hello';
console.log(x); // NaN
console.log(typeof(x));  // number
  • 不能使用关键字和保留字

关键字:在JavaScript里有特殊含义的单词。

保留字:可能在当前版本的JavaScript中还不是关键字，在以后的发展中，可能会变成关键字的单词

规范:

  • 变量名做到顾名思义

  • 使用驼峰命名法

关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

五、数据类型

Javascript中的数据类型可以分为简单数据类型和复杂数据类型。简单数据类型一共有以下五个:

  • number:数字类型

  • string:字符串类型

  • boolean:布尔类型

  • undefined:未定义类型

  • null:空类型

1. number类型

不同于Java语言，JavaScript里无论是整数还是浮点数，都是number类型。

var a = 12;  //十进制的数字a
var b = 017; //八进制的数字17,转换成为十进制是15
var c = 0x1A; // 十六进制的数字1A,转换成为十进制是26
var d = 12.34; // 浮点数在JavaScript里也是number类型

在number类型里有一个特殊值NaN(Not a Number),他用来表示执行的结果不是一个数字。

var x = 3 - 'hello';
console.log(x); // NaN
console.log(typeof(x));  // number

2. string类型

JavaScript里的字符串类型使用单引号或者双引号包裹，引号内部显示任意文字。

var x = 'hello world';
var y = "hello world";
console.log(x.length)  //字符串的length属性可以获取到字符串的长度// 可以使用转义字符 \ 对字符串里的内容进行转义
var a = "tom said \\"I'm tom\\"" 
var b = "hello \\nworld"

3. boolean类型

布尔类型只有两个值，true表示成立正确，false错误不成立。

注意：这里的ture和false全部都是小写

console.log(1 > 2);  // false
console.log(2 > 1);  // true

4. undefined和null类型

undefined类型里就只有一个值undefined;null类型里也只有一个值null,这两个类型的数据都表示的是非正常值。

当一个对象为空时，我们可以使用null来表示，例如DOM查找元素失败的话，结果就是null.

<body><p id="one">我是一个p标签</p><script>var x = document.getElementById('two');console.log(x); // null</script>
</body>

undefined常见的出现情况:

  • 当一个变量只声明但是未赋值时，这个变量的值为undefined.
var a;
console.log(a);  // undefined
  • 如果一个函数没有返回值，那么这个函数的执行就是undefined.
// 定义了一个函数，这个函数没有返回值
function test(){console.log('haha');
}
x = test();
console.log(x);  //执行函数并打印结果，是undefined

5. typeof函数的使用

使用typeof函数可以查看一个变量对应的数据类型。

typeof(12);  //number
typeof("hello");  //string
typeof(true);   //boolean
typeof(undefined);  //undefined
typeof(null);   // object

六、运算符

JavaScript里同样支持各种运算符，但是运算的规则和Java里稍微会有些差异。

1. 算数运算符

console.log(12 + 2);  // 14
console.log(12 - 2);  // 10
console.log(12 * 3);  // 36
console.log(12 / 2);  // 6
console.log(12 % 5);  // 2

不仅数字之间可以使用算数运算，数字和字符串，甚至字符串和字符串之间也支持部分算数运算。

console.log(12 + '34');  // '1234'  数字和字符串做加法运算，会把数字转换成为字符串进行拼接// 数字和字符串之间做除了加法以外的其他算数运算，会先尝试把字符串转换成为数字进行算数运算
// 如果字符串不能转换成为数字，结果会是NaN
console.log(12 - '2');   // 10  
console.log(12 - 'ab');  // NaN
console.log(12 * '2');   //24
console.log(12 * 'ab');  //NaN
console.log(12 / '2');   //6
console.log(12 / 'ab');   //NaN

2. 赋值运算符

// 等号在编程里被称为赋值运算符，是将等号右边的值赋值给等号左边
// 等号的左边一定不能是常量或者表达式
var a = 2;
a+=3;   // 5
a-=3;   // 2
a*=4;   //8
a/=2;   //4
a%=2;   //0

3. 一元运算符

我们常见的运算符一般都是二元运算符，即两个数字参与运算，例如 1+2.除了这种运算符以外，还有一种运算符，它只需要一个数字就可以运算，我们称它为一元运算符，最常见的是自增自减运算符。

自增/自减运算符分为 先自增/自减 和 后自增/自减 两种运算符。

var a = 1;
console.log(a++);  //1
console.log(a);   // 2var b = 1;
console.log(++b);  //2
console.log(b);   //2

4. 逻辑运算符

5. 比较运算符

var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于console.log(a == b); //相等，只比较值，不比较类型
console.log(a === b); //全等，比较类型和值
console.log(a != b); // 不等， 只判断值，不判断类型
console.log(a !== b); // 不全等 判断值，且判断类型

字符串的比较：

// 数字和字符串做比较运算，会尝试将字符串转换成为数字
// 如果字符串不能被转换成为数字，做除了 != 和 !== 以外的比较运算外，结果都是false
console.log(5 > '3');  //true
console.log(5 > 'hello');  //false
console.log(5 < 'hello');  //false
console.log(5 != 'hello');  //true
console.log(5 !== 'hello');  //true// 如果是两个字符串做比较运算符，会按照字符串的编码顺序进行比较
console.log('23' > '120'); //true

七、数据类型转换

不同的数据类型进行运算的规则不同，为了满足不同的需求，在开发中经常需要让数据在不同的类型之间进行转化。

1. 转换成为数字

（1）Number()

console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN

（2）parseInt和parseFloat

- parseInt()  把整数或者小数都转化为整数;
- parseFloat() 把整数转化整数,把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3var width = '100px';
parseInt(width) => 100

（3）正负号(常用)

var str = '500';
console.log(+str);        // 取正
console.log(-str);        // 取负
console.log(str - 0);  +0呢???拼接

2. 判断是否是数字

在JavaScript中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，JavaScript不会报错，而是会返回一个NaN

NaN的注意事项：

  • NaN不是一种独立的数据类型，它是Number类型的一个特殊值！
typeof(NaN);  //number
  • NaN不等于任何值，包括它本身。
console.log(NaN == NaN);  // false
  • 查看一个变量是否是一个数字，可以使用isNaN内置函数来判断。
isNaN(123);     // false
isNaN('123');   //false
isNaN('hello');  //true

3. 转换成为字符串

（1）String()

var num = 5;
num = String(num);
console.log(num);

（2）toString()

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//除了null和undefined,其他类型都有toString()方法

（3）拼串，(最常用)

var num = 5;
num = num + "";
console.log(num);

4. 转换成布尔类型

所有的值都可以转换成布尔类型，其中 0, "", undefined，null，false, NaN这几个值会转换成false，其他值都会转换成true

（1）Boolean()

console.log(Boolean(1));
console.log(Boolean(0));

（2）!!

var a = "abc";
console.log(!!a);

八、流程控制语句

JavaScript里的流程控制语句也包含条件判断语句和循环语句两种：

  • 条件判断语句(if/if...else/if...else if.../switch...case)

  • 循环语句(while/do...while/for)

1. 条件判断语句

JavaScript里的条件判断语句主要包含if语句，if...else语句，if...else if...else if...else语句和switch...case语句。

  • if语句
var age = parseInt(prompt('请输入您的年龄:'))
if(age > 18) {alert("欢迎来到我的网站");
}
  • if...else语句
var age = parseInt(prompt('请输入您的年龄:'))
if(age > 18) {alert("欢迎来到我的网站");
}else{alert("未成年禁止访问");
}
  • if...else if...else if...else语句
var score = parseInt(prompt('请输入你的成绩:'))if (score < 60 && score >= 0) {alert('你个垃圾!')
} else if (60 <= score && score < 80) {alert('一般般')
} else if (80 <= score && score <= 100) {alert('真棒！')
} else {alert('输入的数字不合法')
}
  • switch...case语句
var operation = prompt('请输入你的操作序号:')
switch(operation){case '1':console.log('添加用户');break;case '2':console.log('查询用户');break;case '3':console.log('删除用户');break;case '4':console.log('修改用户')break;case '5':console.console.log('退出');break;default:console.log('输入的不合法');break;
}
  • 三元表达式
var num1 = parseFloat(prompt('请输入一个数字:'))
var num2 = parseFloat(prompt('请再输入一个数字:'))
var max = num1 > num2 ? num1:num2;
console.log(max);

注意事项:

JavaScript里判断区间不允许类似于 12<a<20 这样的书写方式，如果想要实现这种功能，请使用逻辑与运算符 && 连接。例如 12 < a < 20应该写成12 < a && a < 20.

2. 循环语句

JavaScript里循环语句包括while循环,do...while循环和for循环。

  • while循环
var i = 0;
while(i < 10){console.log(i);i++;
}
  • do...while循环
do{console.log('你好'); //先执行一次do里的代码，然后再判断条件
}while(1 > 2);
  • for循环
for(i = 0;i <10;i++) {console.log(i);
}
  • for...in语句的使用
nums = \[1,2,3,4,5\]
for(var i in nums){console.log(i);
}
  • break和continue的使用

九、数组和对象

和Java类似，在JavaScript里也有可以存储多个数据的结构。用来存储单个数据的结构在JavaScript里称为数组，和Java里的数组有点儿相像，但同时又有区别。

1. 数组

var nums = \[1,2,3,4,5\]  // 定义一个数组
nums.push(6);  // 在数组的最后添加元素
nums.unshift(100);  // 在数组的开头添加元素
console.log(nums);  // \[100, 1, 2, 3, 4, 5, 6\]
nums.pop();
console.log(nums);  // \[100, 1, 2, 3, 4, 5\]
console.log(nums.length);  //6
console.log(nums\[0\]);  // 100var nums = \[6,5,3,1,8,7,2,4\];
nums.sort();

2. 对象

Java里用来保存无序键值对的数据结构是Map，对应到JavaScript里就是JavaScript的对象。在JavaScript里，对象就是一组无序的键值对组成的集合。对象可以用来存放一组无序的键值对，键对应的值可以是属性，也可以是一个行为(函数)。

var p = {'name':'zhangsan',  //对应的value可以是字符串或者数字等'age':18,'addr':'shanghai','sleep':function(){   //value也可以是一个函数console.log(this.name+'正在睡觉');},
}
p.sleep();//zhangsan正在睡觉。  可以直接调用一个对象的函数console.log(p.age);   //18  可以使用点语法获取一个对象的属性
console.log(p\['name'\]);  //zhangsan  还可以使用中括号语法来获取一个对象的属性。var x = 'addr';
console.log(p.x);  // undefined  对象没有x属性，这里的x不会被当做一个变量，会被当做一个属性名
console.log(p\[x\]);  //shanghai

十、函数

1. 声明调用函数

JavaScript里的函数作用和Java里的方法作用一致，都是为了提高代码的重用率，提高代码的维护性。区别在于，JavaScript里的函数使用function关键字来声明。

  • 无参数无返回值的函数
function test(){  //使用 function定义函数console.log('hello');
}
test();  //使用函数名()来调用函数
  • 有参数无返回值的函数
function test(a,b){  // 括号内定义函数的形式参数console.log(a + b);
}
test(1,2);  // 调用函数时传入实参
  • 有参数有返回值的函数
function test(a,b){return a + b;
}
var result = test(1,2);  //定义变量用来保存函数的执行结果
console.log(result);

2. 函数参数详解

在JavaScript里，调用函数时，实参的个数可以多于函数声明时定义的形参个数。但是，所有的参数都会被保存到函数的内置变量arguments这个伪数组里。

function test(a){  // 函数在声明时，只需要一个形参console.log(a);  // 1console.log(arguments);for(var i = 0; i < arguments.length;i++){console.log(arguments\[i\]);}
}
test(1,2,3,4,5,6,7);  // 调用时，可以传入多个实参

JavaScript里函数名也不允许重复，如果存在重名的函数，后一个出现的函数会覆盖前一个函数。

function test(a,b) {console.log('我是有两个参数的函数');
}
function test(a){console.log('我是只要一个参数的函数');
}
test(1,2);  // 我是只要一个参数的函数

十一、再议对象

1. 构造函数

JavaScript里一个无序的键值对就是一个对象，这个值可以是一个字符串、数字等基本数据类型，同时也可以是一个函数。

var p = {"name":"zhangsan","age":18,"sleep":function(){console.log(this.name+"正在睡觉");}
}

上述代码能够创建一个对象，但是存在一个问题，就是一次只能创建一个对象，如果想使用模板来创建多个具有共同属性和行为的对象，需要用到构造函数。

function Person(name,age){  // 构造函数其实就是一个普通的函数this.name = name;this.age = age;this.sleep = function(){console.log(this.name+'正在睡觉');}
}
var p = new Person('zhangsan',18);  //构造函数必须要配合关键字 new 使用才能创建对象
console.log(p.name);
p.sleep();

2. 内置对象

JavaScript提供了有很多的内置对象，可以方便我们完成某些操作。

  • Math对象:提供了很多与数学相关的方法和属性。
Math.PI;   // π
Math.max(1,2,3);  //3. 求最大数
Math.min(1,2,4);  //1. 求最小数
Math.ceil(12.3);  //13. 向上取整
Math.floor(12.9);  //12. 向下取整
Math.round(12.4);   //12. 四舍五入取到整数位
Math.random();  //生成\[0,1)的随机数
Math.abs(-10);  //10. 取绝对值
Math.pow(2,3);  //8. 求2的3次方
Math.sqrt(9);  //3. 9开根号项

十二、JavaScript里的正则表达式

1. 正则表达式的用途

所以正则表达式有三个主要用途：

  • 模式验证: 检测某个字符串是否符合规则，例如检测手机号、身份证号等等是否符合规范

  • 匹配读取: 将目标字符串中满足规则的部分读取出来，例如将整段文本中的邮箱地址读取出来

  • 匹配替换: 将目标字符串中满足标准的部分替换为其他字符串,例如将整段文本中的"hello"替换成"haha"

2. 正则表达式的使用方式

  • 对象形式：var reg = new RegExp("正则表达式")当正则表达式中有"/"那么就使用这种

  • 直接量形式：var reg = /正则表达式/一般使用这种声明方式

var reg1 = new RegExp("go{2}d");
var reg2 = /go{2}d/;var str = "hello".match(/e/);  // 返回匹配到的结果
var index = "hello494d".search(/\\d+/);  // 返回下标
var s = "g2353d".replace(/\\d/, 'x');  // 替换字符串var tested = reg.test("good");  // 方法用来判定字符串是否匹配正则规则,返回布尔类型的值

正则修饰符:配合正则表达式使用，用来对正则规则进行补充说明。

3. 正则规则

正则表达式主要有三大规则:

  1. 数字和字母表示它本身，没有特殊含义。

  2. 绝大多数标点符号都有特殊含义，如果想要表示标点符号本身，需要加 \

  3. 很多字母前面加 \ 会有特殊含义。

标点符号的特殊含义

字母前面加\的特殊含义

十三、JSON字符串

JSON(JavaScript Object Notation, JavaScript 对象简谱)是一种轻量级的数据交换格式，易于人阅读和编写，主要用来实现跨平台的数据传输。

JSON的格式

JSON数据两端要么是{}，要么是[]

  • {}定义JSON对象

  • []定义JSON数组

  • JSON对象的格式是：

  • JOSN数组的格式是：[value,value,...,value]

  • key的类型固定是字符串

  • value的类型可以是：

  • 基本数据类型

  • 引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

var p1 = '{"name":"张三疯","age":189,"address":"武当山"}';var p2 = '{"name":"张三疯","age":189,"address":"武当山","wife":{"name":"小花","age":18,"address":"武当山下的小村庄"}}';var p3 = '{"name":"张三疯","age":189,"address":"武当山","wife":{"name":"小花","age":18,"address":"武当山下的小村庄"},"sons":\[{"name":"奥巴马","age":1,"address":"武当山"},{"name":"奥拉夫","age":2,"address":"少林寺"}\]}';

注意事项:

  1. JSON和JavaScript对象非常的相像，但是却不完全是同一个东西。JSON的本质是一个字符串!

  2. JSON这个字符串非常的特殊，它里面有数据类型的区分，支持的数据类型和JavaScript数据类型一致。但是，需要注意的是，JSON里的字符串需要使用双引号!

var s1 = '{name:zhangsan}';  // 非法的JSON格式，name和zhangsan都是字符串类型，需要使用双引号
var s2 = "{'age':18}";  // 非法的JSON格式，age是字符串类型，必须要使用双引号
var s3 = "{"name":"jack"}";  // 报错，双引号有问题
var s4 = '{"city":"shanghai"}';  // 正确，外面使用单引号，JSON字符串内使用双引号
var s5 = "{\\"age\\":18}";  // 正确，外面使用双引号，JSON字符串内部使用的转义字符 \

JavaScript对象和JSON转换

很多人搞不清楚 JSON 和 JavaScript 对象的关系，甚至连谁是谁都不清楚。

其实，可以这么理解：JSON 是 JavaScript 对象的字符串表示法，它使用文本表示一个 JavaScript 对象的信息，JSON的本质是一个字符串。

  • JavaScript对象转JSON字符串
var obj = {"stuName":"tom","stuAge":20};  // JavaScript里的对象
var str = JSON.stringify(obj);console.log(typeof obj); // object
console.log(typeof str); // string
  • JSON字符串转JavaScript对象
var str = '{"stuName":"tom","stuAge":20}';
var obj = JSON.parse(str);
console.log(obj); // {stuName: "tom", stuAge: 20}

前端爱好者