ECMAScript总结

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

*/