关于前端:想了解JavaScript基础这篇文章足够了

自己无心看到的一篇文章，感觉写的很全面，简略概括了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); // NaNconsole.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;  //十进制的数字avar b = 017; //八进制的数字17,转换成为十进制是15var c = 0x1A; // 十六进制的数字1A,转换成为十进制是26var d = 12.34; // 浮点数在JavaScript里也是number类型

在number类型里有一个非凡值NaN(Not a Number),他用来示意执行的后果不是一个数字。

var x = 3 - 'hello';console.log(x); // NaNconsole.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);  // falseconsole.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);  //numbertypeof("hello");  //stringtypeof(true);   //booleantypeof(undefined);  //undefinedtypeof(null);   // object

六、运算符

JavaScript里同样反对各种运算符，然而运算的规定和Java里略微会有些差别。

1. 算数运算符

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

不仅数字之间能够应用算数运算，数字和字符串，甚至字符串和字符串之间也反对局部算数运算。

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

2. 赋值运算符

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

3. 一元运算符

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

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

var a = 1;console.log(a++);  //1console.log(a);   // 2var b = 1;console.log(++b);  //2console.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); // 不全等 判断值，且判断类型

字符串的比拟：

// 数字和字符串做比拟运算，会尝试将字符串转换成为数字// 如果字符串不能被转换成为数字，做除了 != 和 !== 以外的比拟运算外，后果都是falseconsole.log(5 > '3');  //trueconsole.log(5 > 'hello');  //falseconsole.log(5 < 'hello');  //falseconsole.log(5 != 'hello');  //trueconsole.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");  // 12var num1 = parseInt("12.3"); //12var num1 = parseFloat("12"); //12var 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);     // falseisNaN('123');   //falseisNaN('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);  //6console.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. 正则规定

正则表达式次要有三大规定:

数字和字母示意它自身，没有非凡含意。
绝大多数标点符号都有非凡含意，如果想要示意标点符号自身，须要加 \
很多字母后面加 \ 会有非凡含意。

标点符号的非凡含意

字母后面加\的非凡含意

十三、JSON字符串

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

JSON的格局

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

{}定义JSON对象
[]定义JSON数组
JSON对象的格局是：{key:value,key:value,...,key:value}
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":"少林寺"}\]}';

注意事项:

JSON和JavaScript对象十分的相像，然而却不齐全是同一个货色。JSON的实质是一个字符串!
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); // objectconsole.log(typeof str); // string

JSON字符串转JavaScript对象

var str = '{"stuName":"tom","stuAge":20}';var obj = JSON.parse(str);console.log(obj); // {stuName: "tom", stuAge: 20}