本章内容:
- 定义
- 注释
- 引入文件
- 数字
- 字符串
- 布尔类型
- 数组
- Math
- 条件语句(if、switch)
- 循环语句(for、for in、while)
简介
定义
javascript是一门动态的、弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时、动态交互。
javascript由三部分组成:ECMAScript、DOM和BOM
- ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)
- DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口
- BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口
注释
JavaScript中代码注释:
引入文件
1. 引入外部文件
<script type"text/javascript" src='/images/loading.gif' data-original="JS文件"></script>
2. 存放在HTML的<head>或<body>中
<script type"text/javascript"> Js代码内容</script>
- HTML的head中
- HTML的body代码块底部(推荐)
3. 为什么要放在<body>代码块底部?
- HTML代码从上到下执行,先加载CSS,避免html出现无样式状态;
- 将JavaScript代码块放在<body>最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为JS代码块阻塞网页的呈现。
变量
需要注意的是:局部变量必须以 var 开头申明,如果不写 var 则为全局变量
<script type="text/javascript"> // 全局变量 name = 'nick'; function func(){ // 局部变量 var age = 18; // 全局变量 gender = "man" }</script>
运算符
1. 算术运算符
一元算术 |
+ 一元加,数值不会产生影响 | 对非数值应用一元加运算时,会调用Number()转型函数对这个值进行转换 |
- 一元减,转换为负数 | ~ |
++ 递增1 | 通过Number()转型为数字,再加1,再重新赋值给操作数值 |
-- 递减1 | ~ |
二元算术 |
+ 加法 | |
- 减法 | |
* 乘法 | |
/ 除法 | |
% 除法 | |
1> 如果其中一个操作数是对象,则对象会转换为原始值:日期对象通过toString()方法执行转换,其他对象通过valueOf()方法执行转换。如果结果还不是原始值,则再使用toString()方法转换2> 在进行了对象到原始值的转换后,如果其中一个操作数是字符串的话,另一个操作数也会转换成字符串,进行字符串拼接3> 两个操作数都将转换成数字或NaN,进行加法操作
二元运算过程
2. 比较运算符
=== 严格运算符 | 比较过程没有任何类型转换 |
!== 严格运算符 | ===的结果取反 |
== 相等运算符 | 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较 |
!= 不相等运算符 | ==的结果取反 |
> 大于运算符 | |
>= 大于等于运算符 | |
< 小于运算符 | |
<= 小于等于运算符 | |
1> 如果两个值类型不同则返回false2> 如果两个值类型相同,值相同,则返回true,否则返回false3> 如果两个值引用同一个对象,则返回true,否则,返回falseconsole.log([] === []);//falseconsole.log({} === {});//falsevar a = {};b = a;console.log(a === b);//true
严格运算符比较过程
对象类型和原始类型比较:1> 对象类型会先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换,再进行比较(日期类只允许使用toString()方法转换为字符串)2> 在对象转换为原始值之后,如果两个操作数都是字符串,则进行字符串的比较3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都将通过Number()转型函数转换成数字进行数值比较注:如果一个值是null,另一个值是undefined,则返回true;console.log(null == undefined);//true如果一个值是null,另一个值是0,则返回tfalse;console.log(null == 0);//false空字符串或空格字符串会转成0console.log(null == []);//falseconsole.log(null == '');//falseconsole.log([] == ' ');//false,相当于'' == ' 'console.log([] == '');//true,相当于'' == ''console.log(0 == '');//true
相等运算符比较过程
数字和字符串比较:1> 如果操作值是对象,则这个对象将先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换2> 在对象转换为原始值之后,如果两个操作数都是字符串,则按照unicode字符的索引顺序对两个字符串进行比较3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都转换成数字进行比较console.log('B' > 'a');//falseconsole.log('b' > 'a');//trueconsole.log(9 > '2');//true
大于小于运算符比较过程
3. 逻辑运算符
! 非(两个!!表示Boolean()转型函数) | 返回一个布尔值 |
&& 与 | 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..) |
|| 或 | 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..) |
//七个假值:console.log(!!undefined);//falseconsole.log(!!null);//falseconsole.log(!!0);//falseconsole.log(!!-0);//falseconsole.log(!!NaN);//falseconsole.log(!!'');//falseconsole.log(!!false);//falseconsole.log(!!{});//trueconsole.log(!![]);//true
1> 取代if语句//前面条件成立则运行后面操作(a == b) && dosomething();2> 用于回调函数//若没有给参数a传值,则a默认为undefined假值,所以不执行a()。function fn(a){ a && a();}
&& 常用操作
1> 变量设置为默认值//如果没有向参数a传入任何参数,则将该参数设置为空对象function func(a){ a = a || {};}
|| 常用操作
数据类型
JavaScript 中的数据类型分为原始类型和对象类型:
特殊值:
- null 表示一个空对象指针,常用来描述"空值";
- undefined 表示变量未定义。
1、数字(Number)
JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
转换:
- parseInt(..) 将某值转换成数字,不成功则NaN
- parseFloat(..) 将某值转换成浮点数,不成功则NaN
特殊值:
- NaN,非数字。可使用 isNaN(num) 来判断。
- Infinity,无穷大。可使用 isFinite(num) 来判断。
Number | 对数字的支持 |
Number.MAX_VALUE | 最大数值 |
Number.MIN_VALUE | 最小数值 |
Number.NaN | 特殊的非数字值 |
Number.NEGATIVE_INFINITY | 负无穷大 |
Number.POSITIVE_INFINITY | 正无穷大 |
Number.toExponential( ) | 用指数计数法格式化数字 |
Number.toFixed( ) | 采用定点计数法格式化数字 |
Number.toLocaleString( ) | 把数字转换成本地格式的字符串 |
Number.toPrecision( ) | 格式化数字的有效位 |
Number.toString( ) | 将—个数字转换成字符串 |
Number.valueOf( ) | 返回原始数值 |
2、字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
String.length | 字符串的长度 |
String.trim() | 移除空白 |
String.trimLeft() | 移除左侧空白 |
String.trimRight() | 移除右侧空白 |
String.concat(value, ...) | 拼接 |
String.slice(start, end) | 切片 |
String.split( ) | 分割 |
String.search( ) | 从头开始匹配,返回匹配成功的第一个位置(g无效) |
String.match( ) | 全局搜索,如果正则中有g表示找到全部,否则只找到第一个 |
String.replace( ) | 替换,正则中有g则替换所有,否则只替换第一个匹配项;
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
|
String.charAt( ) | 返回字符串中的第n个字符 |
String.charCodeAt( ) | 返回字符串中的第n个字符的代码 |
String.fromCharCode( ) | 从字符编码创建—个字符串 |
String.indexOf( ) | 查找子字符串位置 |
String.lastIndexOf( ) | 查找子字符串位置 |
String.localeCompare( ) | 用本地特定的顺序来比较两个字符串 |
String.substr( ) | 抽取一个子串 |
String.substring( ) | 返回字符串的一个子串 |
String.toLocaleLowerCase( ) | 把字符串转换小写(针对地区,在不知道程序在哪个语言环境中运行时用) |
String.toLocaleUpperCase( ) | 将字符串转换成大写(针对地区) |
String.toLowerCase( ) | 小写 |
String.toUpperCase( ) | 大写 |
String.toString( ) | 返回原始字符串值 |
String.toString() | 返回原始字符串值 |
String.valueOf( ) | 返回原始字符串值 |
3、布尔类型(Boolean)
true(真)和false(假)
toString() | 返回Boolean的字符串值('true'或'false') |
toLocaleString() | 返回Boolean的字符串值('true'或'false') |
valueOf() | 返回Boolean的原始布尔值(true或false) |
4、数组(Array)
Array.length | 数组的大小 |
Array.push() | 尾部添加元素 |
Array.pop() | 删除并返回数组的最后一个元素 |
Array.unshift() | 在数组头部插入一个元素 |
Array.shift( ) | 在数组头部移除一个元素 |
Array.slice( ) | 切片 |
Array.reverse( ) | 反转 |
Array.join( ) | 将数组元素连接起来以构建一个字符串 |
Array.concat( ) | 拼接 |
Array.sort( ) | 排序 |
Array | 对数组的内部支持 |
Array.splice( start, deleteCount, value, ...) | 插入、删除或替换数组的元素 obj.splice(n, 0 ,val) 指定位置插入元素
obj.splice(n, 1 ,val) 指定位置替换元素
obj.splice(n, 1 ) 指定位置删除元素
|
Array.toLocaleString( ) | 把数组转换成局部字符串 |
Array.toString( ) | 将数组转换成一个字符串 |
5. Math
和其他对象不同,Math对象是一个静态对象,而不是构造函数。实际上,Math只是一个由Javascript设置的对象命名空间,用于存储数学函数
常量Math.E常量e,自然对数的底数。Math.LN1010的自然对数。Math.LN22的自然对数。Math.LOG10E以10为底的e的对数。Math.LOG2E以2为底的e的对数。Math.PI常量figs/U03C0.gif。Math.SQRT1_22的平方根除以1。Math.SQRT22的平方根。静态函数Math.abs( )计算绝对值。Math.acos( )计算反余弦值。Math.asin( )计算反正弦值。Math.atan( )计算反正切值。Math.atan2( )计算从X轴到一个点的角度。Math.ceil( )对一个数上舍入。Math.cos( )计算余弦值。Math.exp( )计算e的指数。Math.floor( )对一个数下舍人。Math.log( )计算自然对数。Math.max( )返回两个数中较大的一个。Math.min( )返回两个数中较小的一个。Math.pow( )计算xy。Math.random( )计算一个随机数。Math.round( )舍入为最接近的整数。Math.sin( )计算正弦值。Math.sqrt( )计算平方根。Math.tan( )计算正切值。
Math 方法
语句
1、条件语句
JavaScript中支持两个条件语句,分别是:if 和 switch。
if 语句:
//if语句if(条件){ }else if(条件){ }else{ }
Switch 语句:
//switch语句switch(name){ case 'nick': age = 18; break; case 'jenny': age = 21; break; default : age = 0; }
2、循环语句
JavaScript中支持三种循环语句,分别是:for、for in、while
for 循环:
var names = ["nick", "jenny"]; for(var i=0;i<names.length;i++){ console.log(i); //索引 console.log(names[i]);}
for in 循环:
var names = ["nick", "jenny"];for(var index in names){ console.log(index); console.log(names[index]);}
while 循环:
while(条件){ // break; // continue;}
原标题:史上最全、JavaScript基础篇
关键词:JavaScript