本人无意看到的一篇文章,觉得写的很全面,简单概括了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. 正则规则
正则表达式主要有三大规则:
- 数字和字母表示它本身,没有特殊含义。
- 绝大多数标点符号都有特殊含义,如果想要表示标点符号本身,需要加 \
- 很多字母前面加 \ 会有特殊含义。
标点符号的特殊含义
字母前面加\的特殊含义
十三、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); // 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}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。