本文共 12625 字,大约阅读时间需要 42 分钟。
目录
javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互。
javascript是由三部分组成:ECMAScript、DOM、BOM
JavaScript中代码注释:
注意:此注释仅在Script块中生效。
1. 引入外部文件
2. 存放在HTML的<head>或<body>中
3. 为什么要放在<body>代码块底部?
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。
JavaScript 中的数据类型分为原始类型和对象类型:
特别的,数字、布尔值、null、undefined、字符串是不可变。
// null、undefinednull是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。undefined是一个特殊值,表示变量未定义。
JavaScript中不区分整数和浮点数,所有数字均用浮点数值表示。
转换:
特殊值:
Number | 对数字的支持 |
Number.MAX_VALUE | 最大数值 |
Number.MIN_VALUE | 最小数值 |
Number.NaN | 非数字 |
Number.NEGATIVE_INFINITY | 负无穷大 |
Number.POSITIVE_INFINITY | 正无穷大 |
Number.toExponential( ) | 返回四舍五入的科学计数法,加参数为保留几位 |
Number.toFixed( ) | 小数点后面的数字四舍五入,加参数为保留几位 |
Number.toPrecision( ) | 四舍五入,自动调用toFixed()或toExponential() |
Number.toLocaleString( ) | 把数字转换成本地格式的字符串 |
Number.toString( ) | 将数字转换成字符串 |
Number.valueOf( ) | 返回原始数值 |
字符串是由字符组成的数组,但在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则替换所有,否则只替换第一个匹配项;
|
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( ) | 返回原始字符串值 |
//创建字符串对象两种方式 var str1="hello"; var str2=new String("hello2");
//查询字符串索引 var str="welcome to the world of JS!"; var str2=str.indexOf("l"); var str3=str.lastIndexOf("l"); alert(str2); //结果为2 alert(str3); //结果为18// substr substring console.log(str1.substr(1,3));//ell console.log(str1.substring(1,3));//el console.log(str1.slice(1,4));//ell console.log(str1.slice(-3,-1))//el
var num1 = new Number(123); //创建了一个数字类型的对象 var num3 = Number(456); // 456 var num2 = 666; var s1 = 's123'; var num4 = parseInt(s1); console.log(num1.valueOf(),num2,num3); console.log(num4); // NaN if(isNaN(num4)){ console.log('not a number'); // not a number } else { console.log('a number'); } console.log(isFinite(num3)); // 是否是有限值 true Infinity表示无穷大。 console.log(typeof num3); // 'number' 返回的是字符串 var a = 1222.4444444; console.log(a.toFixed(2)); // 1222.44 console.log(a.toExponential(3)); // 1.222e+3
布尔类型仅包含真假,与Python不同的是其首字母小写。
true(真)和false(假)
var a = 123;var s = '123';console.log(a==s); // trueconsole.log(a===s); // false 判断值和类型一样
4、数组
JavaScript中的数组类似于Python中的列表
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, ...) | 插入、删除或替换数组的元素
|
Array.toLocaleString( ) | 把数组转换成局部字符串 |
Array.toString( ) | 将数组转换成一个字符串 |
// //创建方式 var arr1=[1,"hello",[11,2],{"name":"Yuan"}]; var arr2=new Array(3); var arr3=new Array(1,"world",true,[1,2,3]); console.log(typeof arr1); console.log(typeof arr2); console.log(typeof arr3); // 注意: var arr4=new Array(10) 10是size console.log(arr1.length);// Array对象的方法// join方法 拼接字符串 var arr5=[1,2,3,4,"1234"]; var ret=arr5.join("**"); console.log(ret); console.log(typeof ret) //toString() var ret2=arr1.toString(); console.log(ret2); console.log(typeof ret2);// concat() 连接字符串 var arr5=[1,2,3];// var ret3=arr5.concat([5,66]); var ret3 = arr5.concat([5,66]) console.log(ret3); console.log(typeof ret3); console.log(typeof arr5);// reverse 反转字符串// var arr6=[23,45,37,88]; var arr6=[10,45,100,88]; console.log(arr6.reverse()); console.log(arr6.sort()) ; //10,100,45,88 //对arr6数组进行排序// function f(a,b) {//// if(a>b){// return 4// }// else if(a
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( )计算正切值。
// 转义 其中escape() unescape()主要是对cookies使用 var a = 'http://www.baidu.com?name=Aaron'; console.log(encodeURI(a)); //http://www.baidu.comname=%E6%9D%8E%E6%9D%B0 console.log(decodeURI(encodeURI(a))); // http://www.baidu.com?name=Aaron console.log(encodeURIComponent(a)); // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0 console.log(decodeURIComponent(encodeURIComponent(a))); // http://www.baidu.com?name=Aaron
JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。
console.log(eval('1+2*5-5')); // 6console.log(eval(a = 1)); // 1 声明了一个局部变量a值为1
4、正则表达式
1、定义正则表达式
注:定义正则表达式也可以 reg= new RegExp()
var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text) console.log(result) result = pattern.exec(text) console.log(result) result = pattern.exec(text) console.log(result)
2、匹配
JavaScript中支持正则表达式,其主要提供了两个功能:
n = 'uui99sdf'reg = /\d+/reg.test(n) ---> true # 只要正则在字符串中存在就匹配,如果想要开头和结尾匹配的话,就需要在正则前后加 ^和$
获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。 非全局模式 获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配) var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) 全局模式 需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
3、字符串中相关方法
obj.search(regexp) 获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效)obj.match(regexp) 获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部obj.replace(regexp, replacement) 替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项, $数字:匹配的第n个组内容; $&:当前匹配的内容; $`:位于匹配子串左侧的文本; $':位于匹配子串右侧的文本 $$:直接量$符号
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
var current_time=new Date().toLocaleString();//得到当前时间
JavaScript中支持两个中条件语句,分别是:if 和 switch。
if 语句:
//if语句 if(条件){ }else if(条件){ }else{ }
Switch 语句:
// ----- switch var week="Monday"; var week=3; switch (week){ case "Monday" :alert("星期一");break; case "Tuesday":alert("星期二");break; case 3:alert("星期三");break; case 4:alert("星期四");break; case 5:alert("星期五");break; case 6:alert("星期六");break; case 7:alert("星期日");break; default:alert("nothing"); }
JavaScript中支持四种循环语句,分别是:for、for in、while、do-while
for 循环:
for(var i=0; i<10; i++){ document.write("welcome"+i+"") document.write("welcome"+i+"") }
for in 循环:
var attr=[111,222,333]; for (var i=0;i
while 循环:
while(条件){ // break; // continue;}
do-while 循环:
//循环的代码至少执行一次,结果为1 var num = 0; do { num++; }while (num>10);
label 语句可以理解为跳出任意循环
未加label语句实例:
//输出结果为95
加label语句实例:
//输出结果为55//i和j都循环为到5时,跳出了两层循环
主动跑出异常 throw Error('xxxx')
try { //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行}catch (e) { // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 //e是一个局部变量,用来指向Error对象或者其他抛出的对象}finally { //无论上述代码怎么,finally代码块始终会执行}
JavaScript中函数基本上可以分为一下三类:
// 普通函数 function func(arg){ return true; } // 匿名函数 var func = function(arg){ return "tony"; } // 自执行函数 (function(arg){ console.log(arg); })('123')
注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。
function f() { console.log(arguments); } f(1,2,45,6,7,78); function ADD() { var sum=0; for (var i=0;i
JavaScript中没有块级作用域
var name = 'Aaron'; (function Main(){ console.log(name);//undefined if(1){ var name = 'peng'; } console.log(name);//peng })(); console.log(name);//Aaron //输出结果第一个为undefined//声明需提前(Hoisting),在JavaScript引擎“预编译”时进行,函数在被执行之前,会将其中的变量全部声明,而不赋值
作用域链
每个构造函数都有一个内部对象指针,指向原型对象,而原型对象也包含一个指向构造函数的指针。如此层层递进,形成作用域链条
var name = 'Aaron'; function Main() { function F1(){ var name = 'peng'; console.log(name);//peng } function F2() { console.log(name);//Aaron } F1(); F2(); } Main(); // 从内到外的优先级寻找// F2() 的作用域链为 F2()-->Main()
闭包是指可以包含自由(未绑定到特定对象)变量的代码块。
「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。
function f1(){ var n=1; Add=function(){ n++; }; function f2(){ console.log(n); } return f2; } var result=f1(); result(); //1 Add(); result(); //2 //result就是闭包f2函数//函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除
闭包使函数中的变量都被保存在内存中,内存消耗大,所以少用闭包,否则会造成网页的性能低,在IE中可能导致内存泄露。
所以在退出函数之前,将不使用的局部变量全部删除。
面向对象的三大特性:
封装:隐藏代码实现的细节,实现代码的模块化 继承:扩展已经存在的代码模块,实现代码重用 多态:接口的不同实现方式,实现接口重用关键字:
this 代指此时的对象
new 创建对象时必须使用
构造函数模式:
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; }} var obj = new Foo('alex', 18);var ret = obj.Func("sb");console.log(ret);
对于上述代码需要注意:
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:
function Foo (name,age) { this.Name = name; this.Age = age;}Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; }}
用来判断一个对象是否存在于另一个对象的原型链中
Foo.prototype.isPrototypeOf(obj)trueFoo.prototype.isPrototypeOf(obj2)true
用来判断某一个对象(不包括原型链)是否具有指定属性。
obj.hasOwnProperty('Name')trueobj.hasOwnProperty('Age')true
判断某个实例是否具有某个属性
'Name' in objtrue'Age' in objtrue
转载地址:http://kezwi.baihongyu.com/