JavaScript对象

最新推荐文章于 2021-01-27 14:04:26 发布
最新推荐文章于 2021-01-27 14:04:26 发布
阅读量112 收藏
点赞数
文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1205263469/article/details/103457683
版权

数字对象

JavaScript中的对象是有着属性和方法的一种特殊的数据类型
常见的对象有数字Number，字符串String，日期Date，数组Array等
注：这里讲的Number是对象Number，和基本数据类型中的基本类型Number是不一样的

示例一：创建一个数字对象 new Number(数字);
可以通过new Number创建一个数字对象

与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法

<script>
var x = new Number(123);
document.write("数字对象x的值："+x);
document.write("<br/>");
document.write("数字对象x的类型："+typeof x); //通过typeof 货值这是一个object
document.write("<br/>");
var y = 123;
document.write("基本类型y的值："+y);
document.write("<br/>");
document.write("基本类型y的类型："+typeof y);  //通过typeof 获知这是一个number
</script>

运行效果：

在这里插入图片描述
示例二：最大值 最小值Number.MIN_VALUE Number.MAX_VALUE
Number 对象能够取到的最大和最小边界

例：

<script>
document.write("Number对象的最小值："+Number.MIN_VALUE);
document.write("<br/>");
document.write("Number对象的最大值："+Number.MAX_VALUE);
</script>

示例三：表示不是数字isNaN(变量);
NaN，表示不是一个数字
当通过非数字创建Number时，就会得到NaN
注意：不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”，应该使用函数 isNaN()
例：

<script>
function p(s){
document.write(s);
document.write("<br/>");
}
var a = new Number("123abc");  //通过非数字创建Number对象，得到的是一个NaN
p("通过非数字字符串'123abc'创建出来的Number对象 a的值是："+a);
p("但是, a==Number.NaN会返回:"+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN
p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断
 
</script>

在这里插入图片描述

示例四：返回一个数字的小数表达 toFixed(“保留小数位数”);
toFixed返回一个数字小数表达
例：

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var a = new Number("123");
 
p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点
 
var b = new Number("3.1415926");
 
p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点
 
</script>

在这里插入图片描述

示例五：返回一个数字的科学计数法表达 a.toExponential();

返回一个Number对象的科学计数法表达

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var a = new Number("123");
  
p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());
  
var b = new Number("3.1415926");
  
p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());
  
</script>

在这里插入图片描述

示例六：返回一个数字对象的基本数字类型 valueOf();
方法valueOf()返回一个基本类型的数字
通过typeof 判断数据类型发现，一种是object，一种是number

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var a = new Number("123");
 
var b = a.valueOf();
 
p('数字对象a的类型是: '+typeof a); //返回object
p('通过valueOf()返回的值的类型是'+typeof b); //返回number
 
</script>

在这里插入图片描述

练习：乘法运算，得出科学计数法
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法练习</title>
</head>
<body>
<script>
function calc(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var result = new Number();
result = a * b;
document.getElementById("result").value = result.toExponential();
}
</script>
<input type="text" id="a" maxlength="10" > *
<input type="text" id="b" maxlength="10" > =
<input type="text" id="result" disabled="disabled">
<input type="button" value="运算" onclick="calc()">
</body>
</html>

在这里插入图片描述

字符串对象

与数字类似，基本类型String也有一个对应的String对象，并且提供了很多有用的方法

一：创建字符串长度
与Number类似的，可以通过new String()创建一个String()对象
代码：

<script>
 
var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>

在这里插入图片描述

二：字符串长度
属性length返回字符串的长度
例：

<script>
 
var y = new String("Hello JavaScript");
 
document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length);
 
</script>

三：返回指定位置的字符 charAt 返回指定位置的字符 charCodeAt(0)返回指定位置的字符对应的Unicode码

<script>
  
var y = new String("Hello JavaScrpt");
document.write("字符串y的值:"+y);
document.write("<br>");
document.write('通过 charAt(0)获取位置0的字符串： '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 ：'+y.charCodeAt(0)); //返回对应的Unicode码 72
 
</script>

四：字符串拼接

concat用于进行字符串拼接

<script>
 
var x = new String("Hello ");
var y = new String("Javascript");
 
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' +  x.concat(y) );
 
</script>

五：子字符串出现的位置
indexOf返回子字符串第一次出现的位置
lastIndexOf返回子字符串最后一次出现的位置

例：

<script>
var y = new String("Hello JavaScript");
document.write("字符串y的值是："+y);
document.write("<br/>");
document.write("通过 indexOf ("a")获取子字符"a" 第一次出现的位置："+y.indexOf("a"));
document.write("<br/>");
document.write("通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 "+y.lastIndexOf("a"));
</script>

六：比较两段字符串是否相同

localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

例：

<script>
   
var x = new String("Hello");
var y = new String("Hello");
var z = new String("aloha");
   
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '字符串z的值: '+z);
document.write('<br>');
 
document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');
 
document.write('0 表示相等<br>');
document.write('1 表示字母顺序靠后<br>');
document.write('-1 表示字母顺序靠前<br>');
 
</script>

七：截取一段子字符串
substring截取一段子字符串
注：第二个参数，娶不到（区间左闭右开）
x.substring(0,3);
左闭右开，取得到0，取不到3

例：

<script>
var x = new String("Hello JavaScript");
document.write("字符串x的值："+x);
document.write("<br/>");
document.write("x.substring (0,3) 获取位0到3的字符串："+x.substring(0,3));
document.write("<br/>");
document.write('左闭右开，取得到0，取不到3');
</script>

八：根据分隔符，把字符串转换为数组
split 根据分隔符，把字符串转换成数组
注：第二个参数可选，表示返回数组的长度

<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
 
var y =  x.split(" ");
document.write('通过空格分隔split(" "),得到数组'+y);
document.write("<br>");
 
var z =  x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组，并且只保留前两个'+z);
  
</script>

九：替换子字符串
replace(search,replacement)
找到满足条件的子字符串search，替换为replacement
注：默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：
x.replace(/a/g,“o”);
或者
var regS=new RegExp(“a”,“g”);
x.replace(regS,“o”);

例子：

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a:  '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a:  '+z);
 
</script>

十：返回基本类型
需要注意的是，所有返回字符串类型的方法，返回的都是基本类型的String

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new String("Hello JavaScript");
 
var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );
 
var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );
 
var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );
 
</script>

练习：字符串替换工具

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
</head>
<body>
<style>
div table tr td{
border:1px solid green;
}
div table{
border:1px solid black;
}
div table{
margin:0 auto;
}
</style>
<script>
function replace(){
var source = document.getElementById("1").value;
var sources = new String(source);
var search = document.getElementById("2").value;
var searchs = new String(search);
 
var replace = document.getElementById("3").value;
var replaces = new String(replace);
 
 
if((searchs.length!=0)&&(sources.indexOf(searchs)!=-1)){
var regS = new RegExp(search,"g");
var result = sources.replace(regS,replaces);
document.getElementById("4").value = result;
}else{
document.getElementById("4").value = "未查询到结果";
}
 
 
}
</script>
<div>
<table>
<tr>
<td align="center" colspan="2"><h2>字符串替换工具</h2></td>
</tr>
<tr>
<td>源字符串：</td>
<td><textarea id="1" cols="20" rows="2"></textarea></td>
</tr>
<tr>
<td>查询：</td>
<td><input id="2" type="text"></td>
</tr>
<tr>
<td>替换为：</td>
<td><input id="3" type="text"></td>
</tr>
<tr>
<td>替换结果：</td>
<td><textarea id="4" disabled="disabled" rows="2" cols="20"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="替换" onclick="replace()">
</td>
</tr>
</table>
</div>
</body>
</html>

在这里插入图片描述

qq1205263469
关注
Javascript对象定义的几种方式
05-20
Javascript对象定义的几种方式
JavaScript对象详解，深入理解js对象
最新发布
2401_84093860的博客
04-12 707
对象是JavaScript的基本数据类型。对象也是一种复合值：可以通过名字访问这些值，我们可以将对象看做是从字符串到值的映射，当然对象不仅仅是字符串到值的映射，除了自有的属性还可以从原型继承属性。
JavaScript面向对象
12-11
在JavaScript中定义JavaScript对象有两种方式： 方式一： var Book ={ getBookName:function(){ alert("获取书的名称") ; } }; 方式二 var oBook = function(){}; oBook.getBookName=function(){ alert("添加获取新书的名称"); } var newBook = new Book(); newBook.getBookName(); 这样调用中的结果是什么？
Javascript 对象的解释
10-30
JavaScript对象是ECMAScript语言的核心组成部分，它们在编程模型中扮演着至关重要的角色。与C++、Smalltalk或Java等语言不同，JavaScript并没有严格的类定义，而是采用构造器（Constructor）来创建和初始化对象。...
详解JavaScript对象类型
10-22
JavaScript语言的数据类型分为两大类：原始类型和引用类型，其中对象类型属于引用类型。 在JavaScript中，六种基本数据类型分别是Number、String、Boolean、Undefined、Null以及Object。Number和String等五种类型...
JavaScript 对象.pdf
11-21
JavaScript 对象 JavaScript 中的对象是非常重要的概念，所有事物都是对象，包括字符串、数值、数组、函数等等。对象只是带有属性和方法的特殊数据类型。布尔型、数字型、字符串也可以是一个对象，日期是一个对象，...
javascript对象
09-14
对象概述 创建对象、原型链 属性操作 get/set 属性标签
sizeof:获取JavaScript对象的大小
05-02
获取一个JavaScript对象的大小（以字节为单位） JavaScript不提供sizeof（类似于C语言），并且程序员无需关心内存分配/重新分配。 但是，根据，每个String值均由16位无符号整数表示，Number使用双精度64位格式IEEE...
JavaScript对象详解
weixin_42787326的博客
07-31 910
转载请注明预见才能遇见的博客：https://my.csdn.net/ 原文地址：https://blog.csdn.net/weixin_42787326/article/details/81297232 JavaScript对象详解 目录 JavaScript对象详解 1.对象的概念、特点 * 什么是对象? * 分析对象有什么特点:特征和行为 2.创建对象三种方式 * 1.调...
JavaScript学习记录十五：对象
吮指原味鸡的博客
01-27 320
js对象一、什么是对象 一、什么是对象
JS对象
jason-star博客
10-18 169
1.将一个div分成竖直两部分 &amp;amp;amp;lt;div width=&amp;amp;quot;100%&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div width=&amp;amp;quot;20%&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt; &amp;amp;am
Javascript基于对象基础
Switch的博客
12-24 3426
Java基于对象基础 基于对象和面向对象的区别 JavaScript设计者想把JavaScript语言设计成基于对象(object-based)的语言，他想把这个与面向对象(object-oriented)语言区分开来。但是实际上，可以将基于对象看作是面向对象。   原型对象和类的区别 在JavaScript中没有类这一可以使用关键字，当然保留字不算。所以它有自己对类这种封装结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值