JavaScript练习笔记(5)

目录

六、对象-2

7.Number 对象

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

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

7.3.默认情况下,JavaScript 数字为十进制显示。

7.4.无穷大(Infinity)

7.5.NaN - 非数字值

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

7.7.数字可以是数字或者对象

8.字符串(String) 对象

8.1.JavaScript 字符串

8.2.字符串(String)使用长度属性length来计算字符串的长度:

8.3.在字符串中查找字符串

8.4.内容匹配  match()函数用来查找字符串中特定的字符,找到的话,返回这个字符。

8.5.替换内容 replace() 方法在字符串中用某些字符替换另一些字符。

8.6.字符串大小写转换 使用函数 toUpperCase() / toLowerCase():

8.7.字符串转为数组 字符串使用split()函数转为数组:

9.Array(数组) 对象

9.1.合并数组concat()

9.2.用数组的元素组成字符串join()

9.3.删除数组的最后一个元素pop()

9.4.数组的末尾添加新的元素push()

9.5.将一个数组中的元素的顺序反转排序reverse()

9.6.删除数组的第一个元素shift()

9.7.从一个数组中选择元素slice()

9.8.数组排序,按字母顺序升序sort()

9.9.数组排序,按数字顺序升序sort()

9.10.数组排序,按数字顺序降序sort()

9.11.在数组的第二位置添加一个元素splice()

9.12.转换数组到字符串toString()

9.13.在数组的开头添加新元素unshift()

10. Boolean(布尔) 对象

11.Math(算数) 对象

11.1.四舍五入函数round()

11.2.返回0到1之间的随机数random()

12.RegExp 对象

12.1.RegExp 修饰符

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

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

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


六、对象-2

7.Number 对象

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

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

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

<button onclick="myFunction()">整数最多为15位</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x = 999999999999999;
        var y = 9999999999999999;
        document.getElementById("demo").innerHTML = x + "<br>" + y;
    }
</script>

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

<script>
    var x=12345678901234567890;
    document.write("<p>仅显示17位: " + x + "<br>");
    x=0.2+0.1;
    document.write("<p>0.2+0.1=" + x + "</p>");
    x=(0.2*10+0.1*10)/10;
    document.write("<p>可以通过乘以10或除以10来计算: " + "<p>(0.2*10+0.1*10)/10=" + x + "</p>");
</script>

7.3.默认情况下,JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

<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>

7.4.无穷大(Infinity)

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

执行结果:

4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity

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

执行结果:

Infinity
-Infinity

7.5.NaN - 非数字值

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

<p>一个数字除以一个字符串结果不是一个数字</p>
<p>一个数字除以一个字符串数字结果是一个数字</p>
<p id="demo"></p>
<script>
    var x = 1000 / "Apple";
    var y = 1000 / "1000";
    document.getElementById("demo").innerHTML = isNaN(x) + "<br>" + isNaN(y);
</script>

执行结果:

一个数字除以一个字符串结果不是一个数字

一个数字除以一个字符串数字结果是一个数字

true
false

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

<p id="demo"></p>
<script>
    var y = 1000 / 0;
    document.getElementById("demo").innerHTML = isNaN(y);
</script>

执行结果:

false

7.7.数字可以是数字或者对象

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

返回结果:

number 
object

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

执行结果:

false

8.字符串(String) 对象

8.1.JavaScript 字符串

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

  • 一个字符串可以使用单引号或双引号:
var carname="Volvo XC60";
var carname='Volvo XC60';
  • 你使用位置(索引)可以访问字符串中任何的字符:
var character=carname[7];

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

  • 你可以在字符串中使用引号,如下实例:
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\"";
<script>
    var carname1="Volvo XC60";
    var carname2='Volvo XC60';
    var answer1='It\'s alright';
    var answer2="He is called \"Cathy\"";
    var answer3='She is called "Cathy"';
    document.write(carname1 + "<br>")
    document.write(carname2 + "<br>")
    document.write(answer1 + "<br>")
    document.write(answer2 + "<br>")
    document.write(answer3 + "<br>")
</script>

执行结果:

Volvo XC60
Volvo XC60
It's alright
He is called "Cathy"
She is called "Cathy"

8.2.字符串(String)使用长度属性length来计算字符串的长度:

<script>
    var txt = "Hello World!";
    document.write("<p>" + txt.length + "</p>");
    var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txt.length + "</p>");
</script>

执行结果:

12

26

8.3.在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置

如果没找到对应的字符函数返回-1,lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

<p id="p1">Click the button to locate where "locate" first occurs.</p>
<p id="p2">0</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction(){
	    var str=document.getElementById("p1").innerHTML;
	    var n=str.indexOf("locate");
	    document.getElementById("p2").innerHTML="locate出现的位置是: " + (n+1);
    }
</script>

8.4.内容匹配  match()函数用来查找字符串中特定的字符,找到的话,返回这个字符。

<script>
    var str="Hello world!";
    document.write(str.match("world") + "<br>");
    document.write(str.match("World") + "<br>");
    document.write(str.match("world!"));
</script>

执行结果:

world
null
world!

8.5.替换内容 replace() 方法在字符串中用某些字符替换另一些字符。

<button onclick="myFunction()">替换 "Microsoft" 为 "Runoob" </button>
<p id="demo">请访问 Microsoft!</p>
<script>
    function myFunction() {
        var str = document.getElementById("demo").innerHTML; 
        var txt = str.replace("Microsoft","Runoob");
        document.getElementById("demo").innerHTML = txt;
    }
</script>

8.6.字符串大小写转换 使用函数 toUpperCase() / toLowerCase():

<script>
    var txt="Hello World!";
    document.write("<p>" + txt.toUpperCase() + "</p>"); //转换为大写
    document.write("<p>" + txt.toLowerCase() + "</p>"); //转换为小写
    document.write("<p>" + txt + "</p>");               //源字符
</script>
<p>该方法返回一个新的字符串,源字符串没有被改变。</p>

返回结果:

HELLO WORLD!

hello world!

Hello World!

该方法返回一个新的字符串,源字符串没有被改变。

8.7.字符串转为数组 字符串使用split()函数转为数组:

<p id="demo">单击按钮显示数组。</p>
<button onclick="myFunction()">显示数组</button>
<script>
    function myFunction(){
	    var str="a,b,c,d,e,f";
	    var n=str.split(",");
	    document.getElementById("demo").innerHTML=n[2]; //显示第一个数组
    }
</script>

9.Array(数组) 对象

创建一个数组,有三种方法。

下面的代码定义了一个名为 myCars的数组对象:

1: 常规方式:

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

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];
<script>
    var i;
    var mycars = new Array();
    mycars[0] = "Saab";
    mycars[1] = "Volvo";
    mycars[2] = "BMW";
    for (i=0;i<mycars.length;i++){
        document.write(mycars[i] + "<br />");
    }
</script>

 执行结果:

Saab
Volvo
BMW

9.1.合并数组concat()

<script>
    var parents = [" Cathy ", " Tom "];
    var brothers = [" Jessy ", " Lucy ", " Sam "];
    var children = [" Daisy ", " Lone "];
    var family = parents.concat(brothers, children);
    document.write(family);
</script>

执行结果:

Cathy , Tom , Jessy , Lucy , Sam , Daisy , Lone

9.2.用数组的元素组成字符串join()

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana香蕉", "Orange橙子", "Apple苹果", "Mango芒果"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

执行结果:

Banana香蕉,Orange橙子,Apple苹果,Mango芒果

9.3.删除数组的最后一个元素pop()

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
    var fruits = ["Banana香蕉", "Orange橙子", "Apple苹果", "Mango芒果"];
    function myFunction(){
	    fruits.pop();
	    var x=document.getElementById("demo");
	    x.innerHTML=fruits;
    }
</script>

执行结果:

Banana香蕉,Orange橙子,Apple苹果

9.4.数组的末尾添加新的元素push()

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
    var fruits = ["Banana香蕉", "Orange橙子", "Apple苹果", "Mango芒果"];
    function myFunction(){
    	fruits.push("Kiwi猕猴桃")
    	var x=document.getElementById("demo");
    	x.innerHTML=fruits;
    }
</script>

执行结果:

Banana香蕉,Orange橙子,Apple苹果,Mango芒果,Kiwi猕猴桃

9.5.将一个数组中的元素的顺序反转排序reverse()

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
    var fruits = ["Kiwi猕猴桃", "Orange橙子", "Apple苹果", "Mango芒果"];
    function myFunction(){
    	fruits.reverse();
    	var x=document.getElementById("demo");
    	x.innerHTML=fruits;
    }
</script>

执行结果:

Mango芒果,Apple苹果,Orange橙子,Kiwi猕猴桃

9.6.删除数组的第一个元素shift()

<p id="demo1">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
    var fruits = ["Kiwi猕猴桃", "Orange橙子", "Apple苹果", "Mango芒果"];
    function myFunction(){
	    var delell = fruits.shift();
	    document.getElementById("demo1").innerHTML= '删除后数组为:' +  fruits;
	    document.getElementById("demo2").innerHTML= '删除的元素是:' +  delell;
    }
</script>

执行结果:

删除后数组为:Orange橙子,Apple苹果,Mango芒果

删除的元素是:Kiwi猕猴桃

9.7.从一个数组中选择元素slice()

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction(){
	    var fruits = ["Kiwi猕猴桃", "Orange橙子", "Lemon柠檬", "Apple苹果", "Mango芒果"];
	    var citrus = fruits.slice(1,3);
	    var x=document.getElementById("demo");
	    x.innerHTML=citrus;
    }
</script>

执行结果:

Orange橙子,Lemon柠檬

9.8.数组排序,按字母顺序升序sort()

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
	function myFunction(){
		var fruits = ["Kiwi猕猴桃", "Orange橙子", "Apple苹果", "Mango芒果"];
		fruits.sort();
		var x=document.getElementById("demo");
		x.innerHTML=fruits;
	}
</script>

执行结果:

Apple苹果,Kiwi猕猴桃,Mango芒果,Orange橙子

9.9.数组排序,按数字顺序升序sort()

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
	function myFunction(){
		var points = [40,100,1,5,25,10];
		points.sort(function(a,b){return a-b});
		var x=document.getElementById("demo");
		x.innerHTML=points;
	}
</script>

执行结果:

1,5,10,25,40,100

9.10.数组排序,按数字顺序降序sort()

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction(){
	    var points = [40,100,1,5,25,10];
	    points.sort(function(a,b){return b-a});
	    var x=document.getElementById("demo");
	    x.innerHTML=points;
    }
</script>

执行结果:

100,40,25,10,5,1

9.11.在数组的第二位置添加一个元素splice()

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
	function myFunction(){
		var fruits = ["1-Kiwi猕猴桃", "2-Orange橙子", "3-Apple苹果", "4-Mango芒果"];
		fruits.splice(2,0,"A1-Lemon柠檬","A2-Banana香蕉");
		var x=document.getElementById("demo");
		x.innerHTML=fruits;
	}
</script>

执行结果:

1-Kiwi猕猴桃,2-Orange橙子,A1-Lemon柠檬,A2-Banana香蕉,3-Apple苹果,4-Mango芒果

9.12.转换数组到字符串toString()

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Kiwi猕猴桃", "Orange橙子", "Apple苹果", "Mango芒果"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

执行结果:

Kiwi猕猴桃,Orange橙子,Apple苹果,Mango芒果

9.13.在数组的开头添加新元素unshift()

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["1-Kiwi猕猴桃", "2-Orange橙子", "3-Apple苹果", "4-Mango芒果"];
	fruits.unshift("A1-Lemon柠檬","A2-Pineapple波罗");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本,插入的值将被返回成<em> undefined </em>。</p>

执行结果:

A1-Lemon柠檬,A2-Pineapple波罗,1-Kiwi猕猴桃,2-Orange橙子,3-Apple苹果,4-Mango芒果

10. Boolean(布尔) 对象

<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>

执行结果:

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

11.Math(算数) 对象

11.1.四舍五入函数round()

<p id="demo">单击按钮舍入与“2.5”最接近的整数</p>
<button onclick="myFunction()">点我</button>
<script>
	function myFunction(){
		document.getElementById("demo").innerHTML=Math.round(2.5);
	}
</script>

执行结果:

3

11.2.返回0到1之间的随机数random()

<p id="demo">点击按钮显示一个随机数</p>
<button onclick="myFunction()">点我</button>
<script>
	function myFunction(){
		document.getElementById("demo").innerHTML=Math.random();
	}
</script>

执行结果:

0.9003988974256281

12.RegExp 对象

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

12.1.RegExp 修饰符

  • i - 修饰符是用来执行不区分大小写的匹配。
<script>
	var str = "Visit RUnoob";
	var patt1 = /runoob/i;
	document.write(str.match(patt1));
</script>

执行结果:

RUnoob

  • g - 修饰符是用于执行全文的搜索,全文查找 "is"。

<script>
	var str="Is this all there is?";
	var patt1=/is/g;
	document.write(str.match(patt1));
</script>

执行结果:

is,is

  • gi - 全文查找和不区分大小写搜索 "is"
<script>
    var str="Is this all there is?";
    var patt1=/is/gi;
    document.write(str.match(patt1));
</script>

执行结果:

Is,is,is

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

<script>
    var patt1=new RegExp("e");  //搜索 e
    document.write(patt1.test("The best things in life are free"));
</script>

执行结果:

true

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

<script>
	var str = 'runoob';
	var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理
	var patt2 = new RegExp('\w', 'g');  // 无转义作为字符串处理
	var patt3 =/\w+/g;  				// 与 patt1 效果相同
	document.write(patt1.test(str) + "<br>") //输出 true
	document.write(patt2.test(str) + "<br>") //输出 false 
	document.write(patt3.test(str) + "<br>") //输出 true
</script>

返回结果:

true
false
true

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

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

返回结果:

e

猜你喜欢

转载自blog.csdn.net/qq_35831134/article/details/115412335