1
本人无意看到的一篇文章,觉得写的很全面,简单概括了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, "", undefinednullfalse, 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对象的格式是:{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":"少林寺"}\]}';

注意事项:

  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}

前端爱好者


前端老兵
15 声望1 粉丝

你们说这是哪里?