JavaScript 高级教程

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sy1084462993/article/details/81381387

对象

• JavaScript 中，对象只是带有属性和方法的特殊数据类型。另外，所有事物都是对象，包括布尔型、数字型、字符串、日期、数组、函数

• 访问对象的属性，语法：objectName.propertyName

• 访问对象的方法，语法：objectName.methodName()

• 创建对象的方式

  //例一
  person=new Object();
  person.firstname="John";
  person.lastname="Doe";
  //例二
  person={firstname:"John",lastname:"Doe"};
  //例三，使用函数来构造对象
  function person(firstname,lastname,age,eyecolor)
  {
      this.firstname=firstname;
      this.lastname=lastname;
      //并在其中定义一个方法
      this.changeName=changeName;
       function changeName(name)
       {
             this.lastname=name;
       }
  }
  var myFather=new person("John","Doe");//通过构造器创建对象实例
  myFather.changeName("Bob");//使用方法
  

Number 对象

• 在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324

• 整数（不使用小数点或指数计数法）最多为 16 位，16位以上就不准确了。小数的最大位数是17位（包括小数点）。

• 浮点运算并不总是 100% 准确，如0.2+0.1，结果为0.30000000000000004，可以通过乘以10再除以10来解决问题，如(0.2*10+0.1*10)/10

• 进制之间的转换

  var myNumber=128; 
  myNumber.toString(16);   // returns 80 
  myNumber.toString(8);    // returns 200 
  myNumber.toString(2);    // returns 10000000
  

• 无穷大（Infinity），负无穷大（-Infinity）

  基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。
  无穷大*0，结果为NaN
  除以0也是无穷大
  无穷大是一个数字

• NaN - 非数字值

  可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值

• 数字可以是数字或者对象

  var x = 123; 
  var y = new Number(123); 
  typeof(x) // returns Number 
  typeof(y) // returns Object
  

字符串对象

• 一个字符串是使用单引号或双引号包起来的一串字符，可以使用位置（索引）访问字符串中任何的字符，下标从0开始
• 在字符串中遇到特殊字符，可以使用转义字符（\）来处理
• 字符串使用length属性获取其长度

• 字符串的一些方法

  //查找字符串
  "这是一个字符串语句".indexOf("字符串");//结果：4
  
  //match()函数用来查找字符串中特定的字符。如果找到的话，则返回这个字符，如果未找到，则返回null
  "这是一个字符串语句".match("字符串");//结果：字符串
  
  //内容替换
  "Please visit Microsoft!".replace("Microsoft","w3cschool");//结果：Please visit w3cschool!
  
  //字符串大小写转换
  "Hello".toUpperCase();//结果：HELLO
  "Hello".toLowerCase();//结果：hello
  
  //字符串转为数组
  "a,b,c,d,e".split(",");//结果：['a','b','c','d','e']
  
  //字符串截取slice()，参数一为起始下标，参数二为结束下标+1
  var str="Hello world!"; 
  var n=str.slice(2,5);//结果：llo
  str.slice(6);//结果：world!    参数二省略，表示从起始位置到字符串结束
  str.slice(-5);//结果：orld!    参数一为负数，则表示从尾巴开始倒数的位置
  str.slice(-5,-3);//结果：or    将参数转换成正数后，参数二的下标不能小于等于参数一，否则结果为空""
  
  //字符串截取substr()，参数一为起始下标，参数二为需要截取的长度
  //ECMAscript 没有对该方法进行标准化，因此反对使用它
  str.substr(2);//结果：llo world!
  str.substr(2,3);//结果：llo
  str.substr(-5);//结果：orld!
  str.substr(-5,-1);//结果：""，空
  
  //字符串截取substring()，参数一为起始下标，参数二为结束下标+1，参数一、参数二都为非负整数
  str.substring(3);//结果：lo world!
  str.substring(3,5);//结果：lo
  str.substring(3,-5);//结果：Hel 当参数为负数，会把负数转变为0，并把值小的作为起始位，值大的作为结束位+1
  str.substring(-3,5);//结果：Hello
  

日期对象

• 两个日期比较

  var x=new Date();        
  x.setFullYear(2100,0,14);        
  var today = new Date();                
  if (x>today){alert("Today is before 14th January 2100");}
  else{alert("Today is after 14th January 2100");}
  

数组对象

• 数组的创建

  方式一：var myCars=["Saab","Volvo","BMW"];
  方式二：var myCars=new Array("Saab","Volvo","BMW");
  方式三：
  var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

• 一个数组可以拥有不同的对象

  一个数组中可以包含对象元素、函数、数组，如
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

• 数组的方法

  //concat()，连接两个或更多的数组，并返回结果；返回的是新数组，不会改变原数组
  var arr1 = ['a'];
  var arr2 = ['b'];
  var arr3 = ['c'];
  arr1.concat(arr2,arr3);//结果：a,b,c
  
  //every()，检测数组元素的每个元素是否都符合条件，若检测到一个元素不满足，则直接返回false，
  //全部满足则返回true；不会改变原数组，不会对空数组进行检测（空数组返回true）
  var ages = [32, 33, 16, 40];
  function checkAges(age) {return age >= 18;}
  ages.every(checkAges);//结果：false
  
  //some，检测数组元素中是否有元素符合指定条件，如果有一个满足，则直接返回true，如果全部不满足，则返回false
  //该方法不改变原数组，不会对空数组进行检测（空数组返回false）；
  var ages = [32, 33, 16, 40];
  function checkAges(age) {return age >= 18;}
  ages.some(checkAges);//结果：true
  
  //filter()，检测数组元素，并返回符合条件所有元素的数组；返回的是新数组，不会改变原数组，
  //不会对空数组进行检测（空数组返回空""）
  var ages = [32, 33, 16, 40];
  function checkAges(age) {return age >= 18;}
  ages.filter(checkAges);//结果：32,33,40
  
  //indexOf()，搜索数组中的元素，并返回它第一次出现的位置；若没找到，则返回-1；IE8及更早版本不可用
  var fruits = ["香蕉", "橙子", "苹果", "甜瓜"];
  var a = fruits.indexOf("苹果");//结果：2
  var b = fruits.indexOf("苹果",3);//结果：-1    表示从位置3开始检索
  
  //lastIndexOf()，返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.lastIndexOf("Apple");//结果：2
  var a = fruits.lastIndexOf("Apple",3);//结果：2
  var a = fruits.lastIndexOf("Apple",1);//结果：-1
  
  //join()，把数组中的所有元素转换一个字符串，并使用 separator 进行分隔
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.join();//结果：Banana,Orange,Apple,Mango
  var b = fruits.join(",");//结果：Banana,Orange,Apple,Mango
  var c = fruits.join("#");//结果：Banana#Orange#Apple#Mango
  
  //map()，通过指定函数处理数组的每个元素，并返回处理后的数组；不会改变原始数组，
  //不会对空数组进行检测（空数组返回空""）
  var numbers = [4, 9, 16, 25];
  var a = numbers.map(Math.sqrt);//2,3,4,5
  
  //pop()，删除数组的最后一个元素并返回删除的元素；该方法会改变数组的长度
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.pop();//结果：Mango
  fruits;//结果：Banana,Orange,Apple
  
  //push()，向数组的末尾添加一个或更多元素，并返回新的长度；该方法改变数组的长度
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.push("Kiwi","Watermelon");//结果：6
  fruits;//结果：Banana,Orange,Apple,Mango,Kiwi,watermelon
  
  //reverse()，反转数组的元素顺序，并返回颠倒顺序后的数组
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.reverse();//结果：Mango,Apple,Orange,Banana
  fruits;//结果：Mango,Apple,Orange,Banana
  
  //shift()，删除数组的第一个元素，并返回第一个元素值；该方法改变数组的长度；若数组为空，则返回undefined
  //之后省略的fruits初始值，均为 ["Banana", "Orange", "Apple", "Mango"]
  var a = fruits.shift();//结果：Banana
  fruits();//结果：Orange,Apple,Mango
  
  //unshift()，向数组的开头添加一个或更多元素，并返回新的长度
  var a = fruits.unshift("Lemon","Pineapple");//结果：6
  fruits;//结果：Lemon,Pineapple,Banana,Orange,Apple,Mango
  
  //slice()，选取数组的的一部分，并返回一个新数组，参数一起始位置，参数二结束位置；该方法不会改变原始数组
  var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  var a = fruits.slice(1,3);//结果：Orange,Lemon
  var b = fruits.slice(1);//结果：Orange,Lemon,Apple,Mango
  var c = fruits.slice(-3,-1);//结果：Lemon,Apple
  
  //splice()，从数组中添加，删除或替换元素；该方法会改变原数组
  //语法：array.splice(index,howmany,item1,.....,itemX)，index：起始位置；howmany：需删除元素的个数；
  //itemN，添加的新元素
  fruits.splice(2,0,"Lemon","Kiwi");//结果：Banana,Orange,Lemon,Kiwi,Apple,Mango
  fruits.splice(2,1,"Lemon","Kiwi");//结果：Banana,Orange,Lemon,Kiwi,Mango
  fruits.splice(2,2);//结果：Banana,Orange       
  
  //toString()，把数组转换为字符串（元素之间用逗号分隔），并返回结果
  fruits.toString();//结果：Banana,Orange,Apple,Mango
  
  //valueOf()，返回数组对象的原始值，该方法不会改变原数组
  fruits.valueOf();//结果：Banana,Orange,Apple,Mango
  var obj1 = {"name":"Banana"};
  var obj2 = {"name":"Orange"};
  var fruits = [obj1,obj2];
  fruits.valueOf();//结果：[object Object],[object Object]
  
  //sort()，对数组的元素进行排序，并返回排序结果，会改变原数组
  var a = fruits.sort();//结果：Apple,Banana,Mango,Orange
  fruits();//结果：Apple,Banana,Mango,Orange
  var points = [40,100,1,5,25,10];
  //排序原理，下标 i 的当前元素b与前一个元素a对比，若结果大于0，则交换，继续与前一元素比对
  //若结果小于0，则此元素结束比对，下标 i+1 的元素开始比对
  var a = points.sort(function(a,b){return a-b});//结果：1,5,10,25,40,100
  var points = [40,100,1,5,25,10];
  points.sort(function(a,b){return b-a});//结果：100,40,25,10,5,1
  var fruits = ["你", "还", "好", "吗"];
  fruits.sort();//结果：你,吗,好,还
  

算术对象

• Math对象的方法

  //abs(x)，返回x的绝对值
  
  //ceil(x)，对一个数进行向上取整
  Math.ceil(1.4);//结果：2
  Math.ceil(-1.4);//结果：-1
  
  //floor(x)，对一个数进行向下取整
  Math.floor(1.4);//结果：1
  Math.floor(-1.4);//结果：-2
  
  //max(x,y,z,...,n)，返回x,y,z,...,n中的最高值
  Math.max(5,10);//结果：10，在 ECMASCript v3 之前，该方法只有两个参数
  
  //min(x,y,z,...,n)，返回x,y,z,...,n中的最低值
  Math.min(5,10);//结果：5，在 ECMASCript v3 之前，该方法只有两个参数
  
  //pow(x,y)，返回x的y次幂
  Math.pow(4,3);//结果：64
  
  //random()，返回0~1（左闭有开）之间的随机数
  Math.random();//结果：0.058332579455717015
  
  //round(x)，将一个数四舍五入
  Math.round(2.5);//结果：3
  Math.round(-2.5);//结果：-2
  
  //sqrt(x)，返回x的平方根，x必须大于等于0
  Math.sqrt(9);//结果：3