共计 12598 个字符,预计需要花费 32 分钟才能阅读完成。
自己无心看到的一篇文章,感觉写的很全面,简略概括了 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}