ECMAScript总结
JavaScript简介
概念:JavaScript是一门编程语言,是一门弱类型的解释型的脚本语言。
编程语言具有逻辑处理能力的语言。
编程语言可分为两种类型,编译型 和 解释型;
编译型:简单理解为,先翻译好,再执行;
解释型:简单理解为,一边翻译,一边执行。就是翻译一句,执行一句。
所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大 型应用程序的“脚本”。
html:超文本标记语言,用来组织网页结构,使我们的网页内容语义化;
css:层叠样式表,用来搭建网页布局,修饰我们的网页内容。
Javascript:交互性,使用户可以和网页互动起来,增强体验性!
javascript组成部分:ECMAScript(标准语法)、BOM(浏览器对象模型)、DOM(文档对象模型)
Javascript中注释:单行注释(//)、多行注释()
变量:直接量、var声明变量
JS的标识符:标识符是指JS中定义的符号,例如:变量名、函数名等。
标识符可以由任意的大小写字母、数字、下划线(_)和美元符($)组成,但是不能以数字开头,不能是js中的保留关键字。
数据类型
基本数据类型:number、string、boolean(两种值:true和false)、undefined(这个值表示变量不含有值)、null(可以通过将变量的值设置为null来清空变量)
引用数据类型:Function、Object、Array
检测数据类型typeof 例:var str="1";document.write(typeof str);//输出string
数据类型转换:
A.自动数据类型转换:
①两个数字做运算,+就表示数学意义上的加号;例:var sum=1+2; //3
②任何数据和字符串数据拼接时候,+就表示连接符;例:var sum="abc"+1; //abc1
③任何数据和字符串 拼接的 时候,其他数据类型都会自动转换为[字符串类型],例:varsum="1"+1; //11
④字符串[数字]和数字类型的数据进行非加号运算的时候,字符串的数字会自动转换成number类型。例:var sum="1"-1; //0
⑤当一个字符串(除数字)的数据类型的数据 和 一个数字类型的数据 进行 -、*、/、%运算的时候,返回NaN
例:var sum="你"*1; //NaN
例:var sum="你"-1; //NaN (Not a Number) 不是一个数字,但是它却贱贱的是属于 number 类型;
B.强制数据类型转换:
parseInt(要转换的数据); 整数
parseFloat(要转换的数据);小数
parseInt(要转换的数据) 和 parseFloat(要转换的数据)的特性是一样的.
parseInt这个工具有一个特性:可以把我们要转换的数据并且这个数据是以 数字开头。那么这个工具就会把这个数字给提取出来进行运算。若要转换的数据的首字符是数字,并且首字符后面的字符非数字,即便后面的其他字符含有数字,也不会被提取!
varsum=parseInt/parseFloat(null); //输出sum为NaN
Number(要转换的数据);
varsum=Number(null); //输出sum为0
Boolen(要转换的数据);
Number转boolean,非0都为true,string转boolean,非空都为true,其他都为false
String(要转换的数据); 将任何数据转换成一个字符串形式
运算符:赋值运算符、算术运算符、关系运算符、逻辑运算符
赋值运算符:= 赋值
算术运算符:+、- * / % ++ -- += -= %= *= /=
关系运算符:> < == ===>= <= != !==
(关系运算符所操作的数据,最终返回一个布尔类型的值)
逻辑运算符:&& || !
①&& 【且】
如果 && 两边的值都是 true; 返回的结果是 true;
如果 && 两边的值一个是true,一个是false; 返回的结果false;
如果 && 两边的值都是 false, 返回的结果是 false;
两边都为 true(真)时,才返回 true(真)。其他情况返回的结果都是 false(假);
&& 运算在操作 两个【非】boolean类型的值时,
如果第一个值转换为boolean类型的值为true,那么就会返回第二个值。
如果第一个值转换为boolean类型的值为false,那么就会返回第一个值。
②|| 【或】
如果 || 两边的值都是 true; 返回的结果是 true;
如果 || 两边的值都是 false; 返回的结果是 false;
如果 || 两边的值一个是 false,一个是true; 返回的结果是true;
两边都为 false(假)时,才返回 false(假)。其他情况返回的结果都是 true(真);
|| 操作【非】boolean类型的值
如果第一个值在转换为boolean类型的值时是true,返回的是第一个值;否则返回:第二个值。
③!非,取反
三大语句:顺序语句、选择语句、循环语句
//单选择语句
if(表达式(true或false)){// 返回true执行}
//双选择语句
if(表达式(true或false)){//代码块}else{//代码块}
//多选择语句
if(表达式(true或false){//代码块}else if(表达式(true或false){//代码块}elseif(表达式(true或false){//代码块}...else{//代码块}
//switch(表达式){case 值: //代码块 break;.... Default: //代码块 break;} 效率高
Case具有穿透性
Break终止循环
Continue终止本轮循环,并继续下轮循环
//循环语句
①while循环(循环次数不确定的时候用到)
var i = 1; 初始化值 while(表达式(true或false)){//代码块 i++;}
②for循环
for(初始化变量;条件表达式;改变初始化的值){//代码块}
③do-while循环(至少执行一次!先执行,再判断)
do{//代码块}while(表达式(true或false))
函数
函数就是一个工具,因为可以反复调用,所以可以减少代码的冗余,减少代码量。
有无参数分为有参函数、无参函数。
有无函数名分为匿名函数、非匿名函数。
定义的3种方式:
①函数声明 function 函数名(参数){//代码块}
②函数表达式 var 变量名=function(参数){//代码块};
③new 命令 var 变量名=new Function("参数","参数",..."函数体");
注意:若只有一个参数,则该参数就是函数体。
函数的调用(在函数调用时形参可传可不传)
①函数声明 函数名();
②函数表达式 表达式赋值运算符左侧的变量名();
注意:函数声明提升,仅仅是变量名提升。
③new 命令 调用和第二种调用方式一样
变量声明提升
If选择语句中
~if (true){
var a=123;
}
document.write(a);//123
For循环语句中
vari=4;
for(i;i<3;i++){
varb=9;
}
document.write(b+"<br/>");//undefined
document.write(i);//4
总结:选择结构和循环结构在内部所定义的量,在外面是可以调用的,在函数结构所定义的变量,在外部是无法调用的,函数具有独立的执行环境或者独立的作用域。
作用域:变量能够使用的范围或者理解为变量能够作用范围,根据变量能够作用的范围分为全局作用域、局部作用域。
全局变量:在全局作用域中定义的变量;
局部变量:在局部作用域中定义的变量;
函数的返回值:
关键字return:在函数里,return的作用就是把返回值返回的同事结束我们当前函数程序的运行。return后面没有值,返回undefined
递归:直接或间接调用函数本身的方式
例//阶乘: 1,2,6,24,120,720….第n个位置的数字的值是多少? 用递归方式实现!
function a(n){
if(n==1){
return 1;
}else{
return a(n-1)*n;
}
}
var b=a(8);
document.write(b);
数组
数组是一个特殊的对象,是一种数据结构,所为的数据结构,就是计算存储数据的一种方式,线性指的是有序排列。
数组作用:方便管理和操作数据。
语法:var 变量名 = [];
数组创建的另一种方法 var 变量名 = new Array();
获取数组的长度:变量名.length
获取数组里的数据项:变量名[index]=值 //index索引是从0开始的,0代表第一个数据项
添加数组数据项:变量名[index]=数据 //数组的长度与索引下标有关,与数组项里数据是什么无关
例:var arr[];
arr[8]=1600;
document.write(arr.length);//返回9
document.write(arr[6]);//返回undefined
document.write(arr[9]);//返回undefined 没有添加的数据项均为undefined
document.write(arr.length);//返回9 数组的长度与索引下标有关,与数组项里数据是什么无关
注意:数组里面的值,可以是【任何】数据类型。
数组的遍历:就是把数组数据一个个列出来
①for
for(var i=0;i<变量名.length;i++){
document.write(变量名[index]);
}
②for-in
for-in(var index in 变量名){
document.write(变量名[index]);
}
③forEach es5 兼容性问题
var fn=function(a,b,c){
Document.write(a+"<--->"+b+"<--->"+c+"<--->")
}
变量名.forEach(fn);//(a,b,c分别相当于当前元素,当前索引,当前数组)
对象
面向过程:“面向过程”(Procedure Oriented)是一种以过程为中心的编程思想。就是分析出解决问题的所有步骤,然后一步一步的去实现。
面向对象:“面向对象”(Object Oriented,简称OO)是一种以事物为中心的编程思想(用对象!)。是现在编程的主流范式(思想)。核心思想,就是将真实世界存在事物的复杂关系,抽取成一个个不同的对象,然后由这些对象之间的分工与协作,完成对真实世界的模拟。
语法:var 对象名 = {键名:值};
对象创建的另一种方法 var 对象名 = new Object();
键名:也叫属性名,也就是我们的工具名;
值:可以是任何类型的数据,比如数字、字符串、函数表达式、数组、对象等等
点“.”操作符:通过点操作符可以调用工具库里的工具
注意:点操作符后面的工具名必须在对象容器(工具库里)存在,并且键名不能写在引号里,以及不能是数字!
中括号 [“键名”或者变量],通过中括号的方式,并在中括号里传入键名,并且键名是为字符串类型或数字类型(数字类型会自动转换为字符串类型),调用工具库里的工具。
obj[zhangShuLei]; //会报错! 我们通过中括号的方式 使用工具库里的 工具时,一定要加双引号
在创建对象的时候,对于键名 双引号可加可不加
var result = obj.wuming; //对象一写对象中不存的键名,不会报错,返回undefined
遍历对象for-in
for-in(var jianin 变量名){
document.write(变量名[index]);
}
基本数据类型和引用数据类型的存储区别:
指针:引用,里面所存放的是数据在内存空间的地址;
基本数据类型:
【基本数据类型】是存放在内存里面的 【栈】 区
基本数据类型:实际上又在内从空间开辟了一块空间,存放数据 1,并把内存地址赋值给变量 b。实际上克隆一个副本。
例:var a = 1;
var b= a;
document.write(a);//1
document.write(b);//1
varb=2;
document.write(a);//1
document.write(b);//2
引用数据类型:
引用数据类型的数据是存放在内存中 【堆】 区;
引用数据类型在被赋值给其他变量的时候,实际上是克隆了一份【地址】。
例: var arr1= [1,"你好","Hello",true,false];
var arr2 = arr;
document.write(arr1[0]+"<br/>");//1
document.write(arr2[0]+"<br/>");//1
arr2[0] = 2;
document.write(arr1[0]+"<br/>");//2
document.write(arr2[0]+"<br/>");//2
构造函数
构造函数:
function 构造函数(){
this={}
this.age = 1 ; 静态属性
this.ku = function(){} 动态属性,方法,行为
}
var a = new 函数(有参或无参)
回调函数 :函数里执行所传入的函数
functionSayHi(a){
//var a = func;
a();
document.write(a);
}
//var func = function(a,b,c){};
//func();
SayHi(func);
数组常用的方法(工具)
push(数据):添加数据(一个或多个)到数组的尾部, 返回当前数组的长度。
例: vararr=["你好",123,undefined,"abc"]
document.write(arr.length);//4
varlen=arr.push("我们");
document.write(arr.length);//5
document.write(arr);//返回 你好 123 abc 我们。undefined只会在数组 【遍历 】才会出现
document.write(len);//5,因为push添加数据后返回当前数组的长度,这里只是用一个变量len接受
pop():删除数组最后一个数据,并把删除的数据返回
例:var arr=["你好",123,undefined,"abc"]
var result=arr.pop();//不用写哪一个,删掉的是最后一个
document.write(arr.length);//3
document.write(result);//abc
document.write(arr);//返回 你好 123
unshift(数据):添加数据(一个或多个)到数组的首部,返回当前数组的长度。
例:var arr=["你好",123,undefined,"abc"]
varlen=arr.unshift("哈哈");
document.write(arr);//返回 哈哈你好 123 abc 。undefined只会在数组 【遍历 】才会出现
document.write(len);//5,因为unshift添加数据后返回当前数组的长度,这里只是用一个变量len接受
shift():删除数组的第一个数据,并把删除的数据返回
例:var arr=["你好",123,undefined,"abc"]
var result=arr.shift();//不用写哪一个,删掉的是第一个
document.write(arr.length);//3
document.write(result);//你好
document.write(arr);//返回 123 abc//会自动的调用数组里的toStirng()工具
数据结构:
用数组所提供的功能模拟
栈(Last In First Out)LIFO:后进入先出 push pop
队列(First In FirstOut)FIFO:先进后出 push shift
例:var arr =["你好",true,123];
arr.push("Hi");
arr.pop();
document.write(arr);//返回你好,true,123 后进的先出
//先进的先出
例:var arr2 = [];
arr2.push("千峰");
arr2.push(1);
arr2.push(true);
arr2.shift();//千峰,1,true
document.write(arr2);//返回1,true 先进的先出
例:var arr =["你好",true,1,false,"hello"];
//slice(index):截取,返回一个副本,不该变原来的数组 默认从索引为2截到最后
/*
var fuben=arr.slice(2);
document.write(fuben+"<br/>"); //1,false,hello
document.write(arr); //你好,true,1,false,hello
*/
//slice(start,end):删除 前包后不包
/*
var fuben=arr.slice(2,4);
document.write(fuben+"<br/>"); //1,false
document.write(arr); //你好,true,1,false,hello
*/
//splice(index1,index2):删除 ,从index1删,删index2个
/*
var fuben=arr.splice(2,2);
document.write(arr); //你好,true,hello
*/
//splice(index1,0,数据):增加 splice不返回副本,改变原来的数组
/*
var fuben=arr.splice(2,0,"再见");
document.write(arr); //你好,true,再见,1,false,hello
*/
//sort(function(a,b){});按从小到大排序
/*
var arr1=[4,6,3,8,7];
arr1.sort(function(a,b){
if(a>b){
return 1;
}else if(a==b){
return 0;
}else{
return -1;
}
});
document.write(arr1); //返回3,4,6,7,8
*/
//reverse();反转
/*
var arr1=[4,6,3,8,7];
var r = arr1.reverse();
document.write(r); //返回7,8,3,6,4
*/
冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。
这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端,故名。
var arr = [2,3,1,4,5];
for(var i = 0;i<arr.length-1;i++){ //趟数
for(varj=0;j<arr.length-i-1;j++){
varfirst = arr[j];
varlast = arr[j+1];
if(first>last){
/*两个数据交换的方式*/
vartemp = arr[j];
arr[j]= arr[j+1];
arr[j+1]= temp;
}
}
}
document.write(arr);//返回1,2,3,4,5
选择排序(Selection sort)是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完。
for(var i=0;i<arr.length;i++){
var min = arr[i]; //最小数
var index=i; //最小数索引
for(var j=i+1;j<arr.length;j++){
if(arr[j]<min){
min = arr[j];
index=j;
}
}
var temp=arr[i];
arr[i]=arr[index];
arr[index]=temp;
}
document.write(arr);
字符串
4.1创建字符串
/*
varstr="sb";
document.write(typeofstr+"<br />"); //string
str.len2=342;
str.len3=444;
document.write(str.length+"<br/>"); //2 基本数据类型也能有.出来东西?
/*s会自动的转换成String类型的对象,当把对象所对应的键的值给返回后。然后对象被释放(null),GC(垃圾回收机制),在程序中不存在了!*/
document.write(str[0]+"<br/>"); //s 在读取的时候,可以像数组一样读取字符
document.write(str.len3+"<br/>"); //undefined 赋值不会改变原始字符的值。
*/
/*
var str=newString("ss");
document.write(typeofstr+"<br />"); //object
str.len2=342;
str.len3=444;
document.write(str.length+"<br/>"); //2
document.write(str[0]+"<br/>"); //s
document.write(str.len3); //444
*/
valueOf方法返回包装对象(临时对象)实例对应的原始类型的值。
toString方法返回该实例对应的原始类型值的字符串形式
例: /*
var str = "Hello"; //基本数据类型 string "" |''
var str2 = newString("Hello"); //引用数据类型 object {key:value}
document.write(str2); //Hello //string 默认调用了该对象中的valueOf方法
document.write(typeof str2.valueOf()); //string
*/
/*
var n = 123;
var num =new Number(123); //{}
//document.write(typeof num); //object
//document.write(typeof n); //number
document.write(num.valueOf()); //123
document.write(typeof num.valueOf()); //number
document.write(num.toString()); //123
document.write(typeof num.toString()); //string
*/
字符串常用属性(静态属性)和方法(动态属性)
length:获取字符串的字符数;可以像数组一样使用中括号索引的方式读取指定位置的字符
var str ="Hello,Girl!"
charAt(index):取一个字符串的指定位置的字符
例:/*
var s1 = str.charAt(0);
document.write(s1); //H
*/
charCodeAt(index):返回一个字符串中指定位置的字符编码
例:/*
var s2 =str.charCodeAt(0);
document.write(s2); //72
*/
String.fromCharCode(94) ://编码转换成字符
例:/*
var s3 = String.fromCharCode(72); //注意:暂时记住!
document.write(s3); //H
*/
indexOf("abc"):查找字符串第一次出现的位置 如果没找到 返回-1
例:/*
var index4 =str.indexOf("l");
document.write(index4); //2
*/
lastIndexOf("abc"): 查找字符串最后一次出现的位置 如果没找到 返回-1
例:/*
var index5 = str.lastIndexOf("l");
document.write(index5); //9
*/
search():正则匹配 (返回出现的位置)
例:/*
var str2 = "VisitW3School,hisdjfj,W3School!"
var index6 = str2.search(/w3school/i);
document.write(index6) //6 空格也算字符
*/
match:(将匹配的内容存入数组)stringObj.match(rgExp)
例:/*
var str2 = "VisitW3School,hisdjfj,W3School!"
var arr = str2.match(/l/gi);
document.write(arr[0]); //返回所有为l的数组中,索引为0的值l
*/
replace:替换字符串 stringObj.replace("tmd","*");这里的替换只能执行一次,不能够进行全局匹配;如果需要全局匹配,则应使用正则表达式str.replace(/tmd/gi,"*");g表示进行全局匹配,i表示匹配的时候忽略大小写
例:/*
var str3 = "老公,你真棒!你太给力了!棒棒哒!";
var str4 = str3.replace("棒","涩"); //注意,返回一个副本 老公,你真涩!你太给力了!棒棒哒!
var str4 = str3.replace(/棒/g,"涩") //注意,返回一个副本 老公,你真涩!你太给力了!涩涩哒!
document.write(str4);
*/
concat():将一个值或多个值连接
例:/*
var str5 = "咱们结婚吧";
var str6 = "欢乐颂!";
var str7 = str.concat(str5,str6);
document.write(str7); //Hello,Girl!咱们结婚吧欢乐颂!
*/
substring(3,5)字符串的截取,和slice类似
例:/*
var str8 = str.substring(0,2); //前包后不包
var str9 = str.substring(1); //包括当前索引到最后
document.write(str8+"<br/>"); //He
document.write(str9); //ello,Girl!
*/
split——根据分隔符、拆分成数组 重要!
例:/*
var str10 = "Hello,Girl!,Hi,Boy!"
var arr = str10.split(",");
document.write(arr.length); //4
*/
toLowerCase(转换小写)、toUpperCase(转换大写)
例:/*
var str11 = str.toLowerCase();
var str12 = str.toUpperCase();
document.write(str11+"<br/>"); //hello,girl!
document.write(str12); //HELLO,GIRL!
*/
Math对象
Math.round(3.6) //四舍五入
Math.random() //返回0-1之间的随机数
Math.max(num1, num2) //返回较大的数
Math.min(num1, num2) //返回较小的数
Math.abs(num) //绝对值
Math.ceil(19.3) //20 向上取整
Math.floor(11.8) //11 向下取整
Math.pow(x,y) //x的y次方 pow(2,3); //8 2*2*2
Math.sqrt(num) //开平方 //sqrt(9);
Date类型对象
Date对象,操作日期的一个工具库
Date对象是JavaScript提供的日期和时间的操作接口。它可以表示的时间范围 是,1970年1月1日00:00:00前后的各1亿天(单位为毫秒)
Date对象可以作为普通函数直接调用,返回一个代表当前时间的字符串。
"Wed May11 2016 00:31:12 GMT+0800 (中国标准时间)"
注意,即使带有参数,Date作为普通函数使用时,返回的还是当前时间。
document.write(Date("2016-5-1112:12:00")); //Sun May 15 201615:41:05 GMT+0800 (GST)
上面代码说明,无论有没有参数,直接调用Date总是返回当前时间。
Date对象的作用:代表日期
时间这样写也可以var date1 = new Date(2016,4,11,17,33,33);
下题不写时间返回的是早上八点。
如何创建对象
//日期的格式有1988-10-16 1988/10/16,没有参数,返回为当前时间
document.write(Date(''2018-12'')); //Sat Dec 01 2018 08:00:00 GMT+0800(GST)
获取年月日
getFullYear()/setFullYear(2014)
例:/*
varyear = d.getFullYear();
document.write(year); //2018
*/
/*
varyear=d.setFullYear(2014);
varyear = d.getFullYear();
document.write(year); //2014
*/
getMonth()/setMonth(8) 注意:获取月份是从0开始的
getDate()/setDate(25) //日
获取星期几
getDay() 0-6
获取时分秒
getHours() 时
getMinutes() 分
getSeconds() 秒
//时间转换为毫秒为单位的时间 1s == 1000ms
例:/*
vardate = new Date("1970-1-2");
var s= date.getTime();
document.write(s); // 1s == 1000ms
*/