JavaScript | 对象

 

 

一、JavaScript 对象

  JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

 

所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

 

 

访问对象的属性

  属性是对象相关的值。访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度: 

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:12

 

访问对象的方法 

方法是能够在对象上执行的动作。可以通过以下语法来调用方法: 

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:HELLO WORLD!


创建 JavaScript 对象

通过 JavaScript,可以定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 定义并创建对象的实例 ;
  • 使用函数来定义对象,然后创建新的对象实例 ; 

 

1. 创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

替代语法(使用对象 literals):

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

 

2. 使用对象构造器

本例使用函数来构造对象:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

 

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

 

把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性

假设 person 对象已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:John


把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

 

可以试一下:

myMother.changeName("Doe");

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;
    function changeName(name){
        this.lastname=name;
    }
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

</body>
</html>

 

for...in 循环

for...in 语句循环遍历对象的属性。

for (variable in object)
{
    执行的代码……
}

注意: for...in 循环中的代码块将针对每个属性执行一次。

 

循环遍历对象的属性:

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)
{
    txt=txt + person[x];
}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        txt=txt + person[x];
    }
    document.getElementById("demo").innerHTML=txt;
}
</script>
    
</body>
</html>

 

二、prototype(原型对象)

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。JavaScript 基于 prototype,而不是基于类的。

 

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

在前面我们学会了如何使用对象的构造器(constructor):

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

我们也知道在一个已存在的对象构造器中是不能添加新的属性的:

Person.nationality = "English";

要添加一个新的属性需要在构造器函数中添加:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

 

prototype 继承

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法:

  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。

 

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

 

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

 

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

 

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。另外,有时候我们想要在对象的构造函数中添加属性或方法。

 

使用 prototype 属性就可以给对象的构造函数添加新的属性:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

 

 

三、Number 对象

JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学(指数)计数法来写:

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

 

所有 JavaScript 数字均为 64 位

  JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

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

值 (aka Fraction/Mantissa)指数Sign
52 bits (0 - 51)  11 bits (50 - 62) 1 bit (63)

 

精度

整数(不使用小数点或指数计数法)最多为 15 位。

var x = 999999999999999;   // x 为 999999999999999
var y = 9999999999999999;  // y 为 10000000000000000

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>整数最多为 15 位。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = 999999999999999;
    var y = 9999999999999999;
    document.getElementById("demo").innerHTML = x + "<br>" + y;
}
</script>

</body>
</html>

 

小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

var x = 0.2+0.1; // 输出结果为 0.30000000000000004

 

八进制和十六进制

  • 如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数
  • 如果前缀为 0 x,则解释为十六进制数
var y = 0377;
var z = 0xFF;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var y = 0377;
var z = 0xFF; 
document.write(y + "<br>");
document.write(z + "<br>");
</script>

</body>
</html>

 绝不要在数字前面写零,除非您需要进行八进制转换。

 

默认情况下,JavaScript 数字为十进制显示。但可以使用 toString() 方法 输出16进制、8进制、2进制。 

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

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var myNumber = 128;
document.write(myNumber + ' 十进制<br>');
document.write(myNumber.toString(16) + ' 十六进制<br>');
document.write(myNumber.toString(8) + ' 八进制<br>');
document.write(myNumber.toString(2) + ' 二进制<br>');
</script>

</body>
</html>

 

无穷大(Infinity)

当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。 

myNumber=2;
while (myNumber!=Infinity)
{
    myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
myNumber=2;
while (myNumber!=Infinity){
    myNumber=myNumber*myNumber;
    document.write(myNumber +'<BR>');
}
</script>

</body>
</html>

 

除以0也产生了无限:

var x = 2/0;
var y = -2/0;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var x = 2/0;
var y = -2/0;
document.write(x + "<br>");
document.write(y + "<br>");
</script>

</body>
</html>

 

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

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

var x = 1000 / "Apple";
isNaN(x);                         // 返回 true
var y = 100 / "1000";
isNaN(y);                        // 返回 false

除以0是无穷大,无穷大是一个数字:

var x = 1000 / 0;
isNaN(x); // 返回 false

 

数字可以是数字或者对象

数字可以私有数据进行初始化,就像 x = 123;

JavaScript 数字对象初始化数据, var y = new Number(123);

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

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>

<script>
var x = 123;              // x 是一个数字
var y = new Number(123);  // y 是一个对象
var txt = typeof(x) + " " + typeof(y);
document.getElementById("demo").innerHTML=txt;
</script>

</body>
</html>

number object

 

var x = 123;             
var y = new Number(123);
(x === y)                            // 为 false,因为 x 是一个数字,y 是一个对象

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>

<script>
var x = 123;              // x 是一个数字
var y = new Number(123);  // y 是一个对象
document.getElementById("demo").innerHTML = x===y;
</script>

</body>
</html>

false

 

Number 对象属性

属性描述
constructor 返回对创建此对象的 Number 函数的引用。
MAX_VALUE 可表示的最大的数。
MIN_VALUE 可表示的最小的数。
NEGATIVE_INFINITY 负无穷大,溢出时返回该值。
NaN 非数字值。
POSITIVE_INFINITY 正无穷大,溢出时返回该值。
prototype 允许您可以向对象添加属性和方法。


 

MAX_VALUE 属性

由于 MAX_VALUE 为 Number 对象的属性,所以可以使用 Number.MAX_VALUE 调用。返回Javascript中的最大数:

Number.MAX_VALUE;                  //1.7976931348623157e+308

MAX_VALUE 属性是 JavaScript 中可表示的最大的数。它的近似值为 1.7976931348623157 x 10308注意:大于MAX_VALUE的数表示无穷大。

 

使用自定义的Number x(x.MAX_VALUE ) 将无法获取 MAX_VALUE 属性:

var x = 100;
x.MAX_VALUE;                      // 输出结果:undefined

 

NEGATIVE_INFINITY 属性

NEGATIVE_INFINITY 属性表示负无穷大。返回负无穷大:

Number.NEGATIVE_INFINITY;       //-Infinity

创建一个负无穷大的数:

var n=(-Number.MAX_VALUE)*2;                   //输出结果:-Infinity
  • NEGATIVE_INFINITY 属性表示小于 Number.MIN_VALUE 的值。
  • 使用 自定义 Number对象 x 调用该属性(x.NEGATIVE_INFINITY)将返回 undefined

 

NaN 属性

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。

可以把 Number 对象设置为该值,来指示其不是数字值。

Number.NaN

提示: 请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

 

prototype 属性

创建一个方法,给出了数字对象的属性,返回数字的一半值:

Number.prototype.myMet=function()
{
    this.myProp=this.valueOf()/2;
}

创造一个 Number 对象, 调用 myMet 方法:

var n = new Number(55);
n.myMet();
var x = n.myProp;                                     //  输出结果:27.5

prototype 属性允许您向对象添加属性和方法。

当构造一个属性, 所有的 Number 对象将被添加上该属性及值。

当构造一个方法时,所有的 Number 对象都会有这个方法。

注意: Number.prototype 不允许引用一个单独的 Number 对象,但是可以使用 Number() 对象。

注意:prototype 型是一个全局对象的构造函数,可用于所有的JavaScript对象

 

Number 对象方法

方法描述
isFinite 检测指定参数是否为无穷大。
toExponential(x) 把对象的值转换为指数计数法。
toFixed(x) 把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision(x) 把数字格式化为指定的长度。
toString() 把数字转换为字符串,使用指定的基数。
valueOf() 返回一个 Number 对象的基本数字值。

 

Number.isFinite() 方法

isFinite() 函数用于检测指定参数是否为无穷大。

提示: 如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

Number.isFinite() 与全局的 isFinite() 函数不同

  • 全局的 isFinite() 会先把检测值转换为 Number ,然后在检测。
  • Number.isFinite() 不会将检测值转换为 Number对象,如果检测值不是 Number 类型,则返回 false。
Number.isFinite(123)              //true
Number.isFinite(-1.23)            //true
Number.isFinite(5-2)              //true
Number.isFinite(0)                //true
Number.isFinite('123')            //false
Number.isFinite('Hello')          //false
Number.isFinite('2005/12/12')     //false
Number.isFinite(Infinity)         //false
Number.isFinite(-Infinity)        //false
Number.isFinite(0 / 0)            //false

 

toExponential() 方法

  把对象的值转换成指数计数法。

//把对象的值转换为指数计数法:
var num = 5.56789;
var n=num.toExponential()                            //输出结果:5.56789e+0


var num = 5.56789;
var n=num.toExponential(3)                           //输出结果:5.568e+0

 

toFixed() 方法  

  把 Number 四舍五入为指定小数位数的数字。

//将一个数字,不留任何小数:
var num = 5.56789;
var n=num.toFixed();                              //输出结果:6


//把数字转换为字符串,结果的小数点后有指定位数的数字:
var num = 5.56789;
var n=num.toFixed(2);                             //输出结果:5.57


var num = 5.56789;
var n=num.toFixed(10);                            //输出结果:5.5678900000

 

toPrecision() 方法

  在对象的值超出指定位数时将其转换为指数计数法。

// 使用不同进制把数字格式化为指定的长度:
var num = new Number(13.3714);
var a = num.toPrecision();                    //13.3714
var b = num.toPrecision(2);                   //13
var c = num.toPrecision(3);                   //13.4
var d = num.toPrecision(10);                  //13.37140000

 

toString() 方法

数字的字符串表示。例如,当 radix 为 2 时,NumberObject 会被转换为二进制值表示的字符串。把数字转换为字符串

// 在本例中,我们使用不同进制把一个数字转换为字符串:
var num = 15;
var a = num.toString();        //15
var b = num.toString(2);      //1111
var c = num.toString(8);      //17
var d = num.toString(16);    //f

 

valueOf() 方法

返回一个 Number 对象的基本数字值:

var num = 15;
var n = num.valueOf();                   //输出结果:15

 

 

四、字符串(String) 对象 

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号:

var carname="Volvo XC60";
var carname='Volvo XC60';

你使用位置(索引)可以访问字符串中任何的字符。字符串的索引从0开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

var character=carname[7];

你可以在字符串中使用引号,如下实例:

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

或者你可以在字符串中使用转义字符(\)使用引号:

var answer='It\'s alright';
var answer="He is called \"Johnny\"";

 

字符串属性和方法

1. 字符串属性

属性描述
constructor 对创建该对象的函数的引用
length 字符串的长度
prototype 允许您向对象添加属性和方法

 

constructor 属性返回对 String 对象属性创建的函数。

var txt = "Hello World!";
document.write(txt.constructor);

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var txt = "Hello World!";
document.write(txt.constructor);
</script>

</body>
</html>

输出:function String() { [native code] }

 

length 属性返回字符串的长度(字符数)。

var txt="Hello World!";
document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);

 

prototype 属性允许您向对象添加属性和方法。注意: prototype 是全局属性,适用于所有的 Javascript 对象。

function employee(name,jobtitle,born){
    this.name=name;
    this.jobtitle=jobtitle;
    this.born=born;
}
var fred=new employee("Fred Flintstone","Caveman",1970);
employee.prototype.salary=null;
fred.salary=20000;
document.write(fred.salary);

输出结果:20000

 

2. 字符串方法

方法描述
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接两个或更多字符串,并返回新的字符串。
fromCharCode() 将 Unicode 编码转为字符。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
includes() 查找字符串中是否包含指定的子字符串。
lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
match() 查找找到一个或多个正则表达式的匹配。
repeat() 复制字符串指定次数,并将它们连接在一起返回。
replace() 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。
search() 查找与正则表达式相匹配的值。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
startsWith() 查看字符串是否以指定的子字符串开头。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去除字符串两边的空白
toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
toString() 返回一个字符串。

 

chartAt() 返回指定索引的位置的字符

var str = 'alex';
var charset = str.charAt(1);
console.log(charset);

查看结果:1

 

返回字符串中的最后一个字符 

var str = "HELLO WORLD";
var n = str.charAt(str.length-1);

返回值:D

 

concat 返回字符串值,表示两个或多个字符串的拼接

// 连接3个字符串:
var str1="Hello ";
var str2="world!";
var str3=" Have a nice day!";
var n = str1.concat(str2,str3);

输出结果:Hello world! Have a nice day!

 

replace(a,b) 将字符串a替换成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);      //123****755

 

indexof()

查找字符的下标,如果找到返回字符串的下标,找不到则返回-1 。跟seach()方法用法一样

// 查找字符串 "welcome":
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");                                // 输出结果:13

// 在字符串查找字符 "e" 第一次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");                                      // 输出结果:1


// 在字符串第五个位置开始查找字符 "e" 第一次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5);                                   // 输出结果:14

 

slice(start,end) 左闭右开 分割字符串

var str = '小马哥';
console.log(str.slice(1,2));     //马

第一个参数start是必须的,第二个参数可选。只有一个参数的情况是从start到结尾

// 提取所有字符串:
var str="Hello world!";
var n=str.slice(0);                               // 例输出结果:Hello world!


// 从字符串的第3个位置提取字符串片段:
var str="Hello world!";
var n=str.slice(3);                               // 输出结果:lo world!

 

split('a',1)

以字符串a分割字符串,并返回新的数组。第二个参数没写,表示返回整个数组,如果定义了个数,则返回数组的最大长度

提示: 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

//省略分割参数:
var str="How are you doing today?";
var n=str.split();                                      // 输出数组结果:How are you doing today?


// 分割每个字符,包括空格:
var str="How are you doing today?";
var n=str.split("");                                   // 输出数组结果:H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?


// 使用 limit 参数:
var str="How are you doing today?";
var n=str.split(" ",3);                               //将输出3个数组的值:How,are,you


// 使用一个字符作为分隔符:
var str="How are you doing today?";
var n=str.split("o");                               // 输出数组值得结果:H,w are y,u d,ing t,day?
var  str =  '我的天呢,a是嘛,你在说什么呢a哈哈哈';
console.log(str.split('a'));

查看结果:

 

subStr(statr,end) 左闭右开

substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。

var  str =  '我的天呢,a是嘛,你在说什么呢a哈哈哈';
console.log(str.substr(0,4));       //我的天呢
// 从字符串第二个位置中提取一些字符:
var str="Hello world!";
var n=str.substr(2)                             // 输出结果:llo world!

 

toLowerCase()转小写

var str = 'XIAOMAGE';
console.log(str.toLowerCase());   //xiaomage

 

toUpperCase()转大写

var str = 'xiaomage';
console.log(str.toUpperCase());

 

trim() 方法用于删除字符串的头尾空格。

var str = "       Runoob        ";
alert(str.trim());                             //输出结果:Runoob

 

特别:

将number类型转换成字符串类型

//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString();
console.log(typeof numStr);

查看结果:

四舍五入

var num = 132.32522;
//四舍五入,2表示保留2位
var newNum = num.toFixed(2);
console.log(newNum);

查看结果:

 

 

五、Boolean(布尔) 对象

  Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。

 

1. 创建 Boolean 对象

Boolean 对象代表两个值:"true" 或者 "false"

下面的代码定义了一个名为 myBoolean 的布尔对象:

var myBoolean=new Boolean();
 

如果布尔对象无初始值或者其值为:

  • 0
  • -0
  • null
  • ""
  • false
  • undefined
  • NaN

那么对象的值为 false。否则,其值为 true(即使当变量值为字符串 "false" 时)!

 

检查布尔对象是 true 还是 false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 为布尔值 "+ b1 +"<br>");
document.write("1 为布尔值 "+ b2 +"<br>");
document.write("空字符串是布尔值 "+ b3 + "<br>");
document.write("null 是布尔值 "+ b4+ "<br>");
document.write("NaN 是布尔值 "+ b5 +"<br>");
document.write("字符串'false' 是布尔值"+ b6 +"<br>");
</script>

</body>
</html>

0 为布尔值 false
1 为布尔值 true
空字符串是布尔值 false
null 是布尔值 false
NaN 是布尔值 false
字符串'false' 是布尔值true

 

2. Boolean 对象属性

属性描述
constructor 返回对创建此对象的 Boolean 函数的引用
prototype 使您有能力向对象添加属性和方法。

 

3. Boolean 对象方法

方法描述
toString() 把布尔值转换为字符串,并返回结果。
valueOf() 返回 Boolean 对象的原始值。

 

 

六、数组Array

数组对象的作用是:使用单独的变量名来存储一系列的值。

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!最好的方法就是用数组。

  • 数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
  • 数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。

 

1. 数组的创建方式

常规方式

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

字面量方式创建(推荐大家使用这种方式,简单粗暴)

var colors = ['red','color','yellow'];  # 就像列表一样
console.log(colors);

查看结果:

使用构造函数(后面会讲)的方式创建 使用new关键词对构造函数进行创建对象

var myCars=new Array("Saab","Volvo","BMW");   //注意,里面的内容没有用[]包裹

2. 数组的赋值 

通过下标进行一一赋值 

var arr = [];

arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
console.log(arr)

查看结果:

 

3. 访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

访问myCars数组的第一个值:

var name=myCars[0];

修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

 

4. 数组的属性

属性描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。

 

一个新的数组的方法,将数组值转为大写:

Array.prototype.myUcase=function()
{
    for (i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();
    }
}

创建一个数组,然后调用 myUcase 方法:

var fruits=["Banana","Orange","Apple","Mango"];
fruits.myUcase();

 

fruits 数组现在的值为:BANANA,ORANGE,APPLE,MANGO

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<p id="demo">点击按钮创建数组,并调用新建的 ucase() 方法, 最后显示结果。</p>

<button onclick="myFunction()">点我</button>

<script>
Array.prototype.myUcase=function()
{
    for (i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();
    }
}

function myFunction()
{
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

</body>
</html>

 点击后

 

5. Array 对象方法

方法描述
concat() 连接两个或更多的数组,并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries() 返回数组的可迭代对象。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素,并返回符合条件所有元素的数组。
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素,并返回它所在的位置。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
keys() 返回数组的可迭代对象,包含原始数组的键(key)。
lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reduce() 将数组元素计算为一个值(从左到右)。
reduceRight() 将数组元素计算为一个值(从右到左)。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分,并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值。

 

都是通过array.方法的方式进行操作

数组的合并 concat() 

var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
         
var newCity = north.concat(south);
console.log(newCity)

查看结果:

 

join() 

将数组中的元素使用指定的字符串连接起来,它会形成一个新的字符串 

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);          //98|78|76|100|0

 

toString()将数组转换成字符串  

var score = [98,78,76,100,0];
//toString() 直接转换为字符串  每个元素之间使用逗号隔开
            
var str = score.toString();
console.log(str);                  //98,78,76,100,0

 

slice(start,end); 返回数组的一段,前开后闭

var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.slice(1,3);
console.log(newArr);                  //["李四", "王文"]

 

pop 移除数组的最后一个元素

var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.pop();
console.log(newArr);            // ["张三", "李四","王文"]

查看结果:

 

push() 向数组最后添加一个元素 

var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.push('小马哥');
console.log(newArr);                //["张三", "李四","王文","赵六","小马哥"]

 

reverse() 翻转数组

var names = ['alex','xiaoma','tanhuang','angle'];
        
//反转数组
names.reverse();
console.log(names);

查看结果:

  

sort对数组排序

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names);                          // ["alex", "angle", "tanhuang", "xiaoma"]

 

reduce()

接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

//计算数组元素相加后的总和:

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

输出结果:125

 

//四舍五入后计算数组元素的总和:

<button onclick="myFunction()">点我</button>
 
<p>数组元素之和: <span id="demo"></span></p>
 
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
 
function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

 

isArray()判断是否为数组

isArray是最新html5的方法 

布尔类型值 = Array.isArray(被检测的对象) 

举例:

var colors = ['red','color','yellow'];
console.log(Array.isArray(colors));

查看结果: 

 

数组没有去重的内置函数,需要自己写代码,来实现去重功能。不能根据索引值插入!

 

 

 

在一个数组中,可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

 

 

 

 

七、Date日期对象

  日期对象用于处理日期和时间。

 

1. 创建日期

创建日期对象只有构造函数一种方式,使用new关键字

//创建了一个date对象
var myDate = new Date();

有四种方式初始化日期:

new Date()                         // 当前日期和时间
new Date(milliseconds)             //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。

 

实例化一个日期的一些例子:

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

 

2. 设置日期

通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。

在下面的例子中,我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日):

var myDate=new Date();
myDate.setFullYear(2010,0,14);
 

在下面的例子中,我们将日期对象设置为 5 天后的日期:

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。

 

3. Date 对象属性

属性描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。

prototype 属性

创建一个新的日期对象方法:

Date.prototype.myMet=function()
{
if (this.getMonth()==0){this.myProp="January"};
if (this.getMonth()==1){this.myProp="February"};
if (this.getMonth()==2){this.myProp="March"};
if (this.getMonth()==3){this.myProp="April"};
if (this.getMonth()==4){this.myProp="May"};
if (this.getMonth()==5){this.myProp="June"};
if (this.getMonth()==6){this.myProp="July"};
if (this.getMonth()==7){this.myProp="August"};
if (this.getMonth()==8){this.myProp="Spetember"};
if (this.getMonth()==9){this.myProp="October"};
if (this.getMonth()==10){this.myProp="November"};
if (this.getMonth()==11){this.myProp="December"};
}

创建一个 Date 对象,调用对象的 myMet 方法:

var d = new Date();
d.myMet();
var monthname = d.myProp;

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮来调用新的myMet()方法,并显示这个月的月份,,使用新的myProp方法</p>
<button onclick="myFunction()">点我</button>
<script>
Date.prototype.myMet=function(){
    if (this.getMonth()==0){this.myProp="一月"};
    if (this.getMonth()==1){this.myProp="二月"};
    if (this.getMonth()==2){this.myProp="三月"};
    if (this.getMonth()==3){this.myProp="四月"};
    if (this.getMonth()==4){this.myProp="五月"};
    if (this.getMonth()==5){this.myProp="六月"};
    if (this.getMonth()==6){this.myProp="七月"};
    if (this.getMonth()==7){this.myProp="八月"};
    if (this.getMonth()==8){this.myProp="九月"};
    if (this.getMonth()==9){this.myProp="十月"};
    if (this.getMonth()==10){this.myProp="十一月"};
    if (this.getMonth()==11){this.myProp="十二月"};
}
function myFunction(){
    var d = new Date();
    d.myMet();
    var x=document.getElementById("demo");
    x.innerHTML=d.myProp;
}
</script>

</body>
</html>

 

4. Date 对象方法

方法描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式,把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString()

根据世界时,把 Date 对象转换为字符串。

实例:

var today = new Date();
var UTCstring = today.toUTCString();
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。

 

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

//返回距 1970 年 1 月 1 日之间的毫秒数:
var d = new Date();
var n = d.getTime();                           //输出结果:1578480670122

 

//计算出从 1970/01/01 至今有多少年:

var minutes=1000*60;
var hours=minutes*60;
var days=hours*24;
var years=days*365;
var d=new Date();
var t=d.getTime();

var y=Math.round(t/years);                             //输出结果:50

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="demo">单击按钮计算从1970年1月到现在有多少年?</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var minutes=1000*60;
    var hours=minutes*60;
    var days=hours*24;
    var years=days*365;
    var d=new Date();
    var t=d.getTime();
    var y=Math.round(t/years);
    var x = document.getElementById("demo");
    x.innerHTML=y;
}
</script>

</body>
</html>

 点击后

 

 

如何使用 Date() 方法获得当日的日期。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var d=new Date();
document.write(d);
</script>

</body>
</html>

Wed Jan 08 2020 19:00:21 GMT+0800 (中国标准时间)

 

注意:getMonth得到的是0-11,要加1。getDay 0表示周天

获取标准时间 

<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>

<body>
    <script type="text/javascript">
        function getNowFormatDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;            //月
            var day = date.getDate();                   //日
            var hours = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();

            if (month >= 1 && month <= 9)
            {
                month = "0" + month;
            }

            if (day >= 0 && day <= 9)
            {
                day = "0" + day;
            }
            var currentdate = `${year}-${month}-${day} ${hours}:${min}:${sec}`;
            return currentdate;
        }
        console.log(getNowFormatDate());
    </script>
</body>
</html>

 

在网页上显示一个钟表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();                          // 在小于10的数字前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
</script>
</head>
<body onload="startTime()">
    
<div id="txt"></div>
    
</body>
</html>

每秒钟都在变化

 

 

 

两个日期比较

日期对象也可用于比较两个日期。下面的代码将当前日期与 2100 年 1 月 14 日做了比较:

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

 

日期格式化为指定格式

Date.prototype.format = function(fmt){
  var o = {
    "M+" : this.getMonth()+1,                 //月份
    "d+" : this.getDate(),                    //日
    "h+" : this.getHours(),                   //小时
    "m+" : this.getMinutes(),                 //分
    "s+" : this.getSeconds(),                 //秒
    "q+" : Math.floor((this.getMonth()+3)/3), //季度
    "S"  : this.getMilliseconds()             //毫秒
  };

  if(/(y+)/.test(fmt)){
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  }
        
  for(var k in o){
    if(new RegExp("("+ k +")").test(fmt)){
      fmt = fmt.replace(
        RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
    }       
  }

  return fmt;
}

document.getElementById("demo1").innerHTML=new Date(79,5,24,11,33,0).format("MM月dd日"); 

var now = new Date();
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo2").innerHTML=new Date().format("yyyy年MM月dd日");
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo3").innerHTML=new Date().format("yyyy年MM月dd日hh小时mm分ss秒");

其他格式实例:

alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

 

八、Math对象

  Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。

 

注意: Math对象无需在使用这个对象之前对它进行定义。

 

1. Math 对象属性

属性描述
E 返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2 返回 2 的自然对数(约等于0.693)。
LN10 返回 10 的自然对数(约等于2.302)。
LOG2E 返回以 2 为底的 e 的对数(约等于 1.4426950408889634)。
LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。
PI 返回圆周率(约等于3.14159)。
SQRT1_2 返回 2 的平方根的倒数(约等于 0.707)。
SQRT2 返回 2 的平方根(约等于 1.414)。

 

E 属性

//返回 Euler 数:
Math.E;                   //输出结果:2.718281828459045

 

LN2 属性

  LN2 属性就是 loge2,即 2 的自然对数,其值近似于 0.69314718055994528623。

//返回 2 的自然对数:

Math.LN2;                //输出结果:0.6931471805599453

 

LN10 属性

  LN10 属性就是 loge10,即 10 的自然对数,其值近似于 2.3025850929940459011。

//返回 10 的自然对数:

Math.LN10;               //输出结果:2.302585092994046

 

 LOG2E 属性

  LOG2E 属性就是 log2e,即以 2 为底 e 的对数,其值近似于 1.442695040888963387。

//返回以 2 为底的 e 的对数:

Math.LOG2E;              //输出结果:1.4426950408889634

 

LOG10E 属性

  LOG10E 属性就是 log10e,即以 10 为底 e 的对数,其值近似于 0.43429448190325181667。

//返回以 10 为底的 e 的对数:

Math.LOG10E;            //输出结果:0.4342944819032518

 

PI 属性

  PI 属性就是 π,即圆的周长和它的直径之比。这个值近似为 3.14。

//返回 PI:

Math.PI;               //输出结果:3.141592653589793

 

SQRT1_2 属性

  SQRT1_2 属性返回 2 的平方根的倒数。这个值近似为 0.7071067811865476。

//返回 1/2 的平方根:

Math.SQRT1_2;          //输出结果:0.7071067811865476

 

SQRT2 属性

  SQRT2 属性返回 2 的平方根。这个值近似为 1.4142135623730951。

//返回 2 的平方根:

Math.SQRT2;            //输出结果:1.4142135623730951

 

 

2. Math 对象方法

方法描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。

 

round() 四舍五入

round() 方法可把一个数字舍入为最接近的整数:

Math.round(2.49);   //2
Math.round(2.5);     //3

 

Math.ceil() 向上取整,'天花板函数'

var x = 1.234;
//天花板函数  表示大于等于 x,并且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a);//2

查看结果:

 

求两个数的最大值和最小值

//求 两个数的最大值 最小值
console.log(Math.max(2,5));   //5
console.log(Math.min(2,5));   //2

查看结果:

 

随机数 Math.random() 

返回0~1之间的小数1是永远取不到的,0是有可能取到的。这个是很常用的,上面的不常用

var ran = Math.random();
console.log(ran);

 查看结果:

如果让你取100-200之间的随机数,怎么做?

背过公式:min - max之间的随机数: 

min+Math.random()*(max-min)

// min - max之间的随机数: min+Math.random()*(max-min)
num = (100+Math.random()*(300-100));
console.log(num);

查看结果:

 

acos() 方法

acos() 方法可返回一个数的反余弦。返回的值是 0 到 PI 之间的弧度值。

注意:如果参数 x 超过了 -1.0 ~ 1.0 的范围,那么浏览器将返回 NaN。如果参数 x 取值 -1,那么将返回 PI。

//返回一个数的反余弦:

Math.acos(0.5);                      //输出结果:1.0471975511965979

 

九、RegExp 对象

  RegExp:是正则表达式(regular expression)的简写。

什么是 RegExp?

  正则表达式描述了字符的模式对象。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。可以规定字符串中的检索位置,以及要检索的字符类型,等等。

语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;
  • pattern(模式)描述了一个表达式模型。
  • modifiers(修饰符)描述了检索是否是全局,区分大小写等。

注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:

var re = new RegExp("\\w+");
var re = /\w+/;

 

修饰符

修饰符用于执行不区分大小写和全文的搜索。

修饰符描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

 

g 修饰符

  g 修饰符用于执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。

语法

new RegExp("regexp","g")

或者更简单方式:

/regexp/g

 

实例 1

对 "is" 进行全局搜索:
var str="Is this all there is?";
var patt1=/is/g;
下面被标记的文本显示了表达式获得匹配的位置:
Is this all there is?

 

实例 2

对 "is" 进行全局且大小写不敏感的搜索:

var str="Is this all there is?";
var patt1=/is/gi;

下面被标记的文本显示了表达式获得匹配的位置:

Is this all there is?

 

方括号

方括号用于查找某个范围内的字符:

 

表达式描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

 

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符描述
. 查找单个字符,除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

 

量词

量词描述
n+

匹配任何包含至少一个 n 的字符串。

例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。

n*

匹配任何包含零个或多个 n 的字符串。

例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。

n?

匹配任何包含零个或一个 n 的字符串。

例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。

n{X}

匹配包含 X 个 n 的序列的字符串。

例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。

n{X,}

X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。

例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。

n{X,Y}

X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。

例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。

n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

 

支持正则表达式的 String 对象的方法

方法描述FFIE
search 检索与正则表达式相匹配的值。 1 4
match 找到一个或多个正则表达式的匹配。 1 4
replace 替换与正则表达式匹配的子串。 1 4
split 把字符串分割为字符串数组。 1 4

 

RegExp 对象属性

属性描述
constructor 返回一个函数,该函数是一个创建 RegExp 对象的原型。
global 判断是否设置了 "g" 修饰符
ignoreCase 判断是否设置了 "i" 修饰符
lastIndex 用于规定下次匹配的起始位置
multiline 判断是否设置了 "m" 修饰符
source 返回正则表达式的匹配模式

 

RegExp 对象方法

方法描述
compile 在 1.5 版本中已废弃。 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值,并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
toString 返回正则表达式的字符串。

 

test()

test()方法搜索字符串指定的值,根据结果并返回真或假。

//从字符串中搜索字符 "e" :

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));             //true

当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)

var re = new RegExp("\\w+");

 

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

//从字符串中搜索字符 "e" :

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));   //e

 

十、Error(错误) 对象

  Error 对象在错误发生时提供了错误的提示信息。

 

try {
    adddlert("Welcome");
}
catch(err) {
    document.getElementById("demo").innerHTML = 
    err.name + "<br>" + err.message;
}

 

 

 

Error 对象属性

属性描述
name 设置或返回一个错误名
message 设置或返回一个错误信息(字符串)

 

非标准 Error 对象属性

Mozilla 和 Microsoft定义了以下非标准 Error 对象属性:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

不建议使用以上属性,因为不是所有浏览器都支持。

 

posted @ 2019-08-24 20:26  PythonGirl  阅读(251)  评论(0)    收藏  举报