javascript 对象简单介绍

Posted 2020-10-13 菜鸟的日常

JavaScript Array（数组） 对象
数组对象的作用是：使用单独的变量名来存储一系列的值。

什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据（例如：车名字），存在单独变量如下所示：
var car1="Saab";
var car2="Volvo";
var car3="BMW";
然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！
最好的方法就是用数组。
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组
创建一个数组，有三种方法。
下面的代码定义了一个名为 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"];

访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";

lamp [0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象
所有的javascript变量都是对象。数组元素是对象。函数是对象。
因此，你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

Array 对象
Array 对象用于在变量中存储多个值:
var cars = ["Saab", "Volvo", "BMW"];
第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。
更多有关 JavaScript Array 内容请参考 JavaScript Array 对象手册。
数组属性
属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。
Array 对象属性
方法 描述
concat() 连接两个或更多的数组，并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素，并返回符合条件所有元素的数组。
find() 返回符合传入测试（函数）条件的数组元素。
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
indexOf() 搜索数组中的元素，并返回它所在的位置。
join() 把数组的所有元素放入一个字符串。
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reduce() 将数组元素计算为一个值（从左到右）。
reduceRight() 将数组元素计算为一个值（从右到左）。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分，并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值。

创建新方法
原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。
实例：创建一个新的方法。
<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>
实例：
使用二维数组结合 select 对象实现二级级联菜单。
select1 省级菜单， select2市级菜单
在省级标签中添加事件onchange="addOption()"
<select id="a1" onchange="addoption()" >
<option value="江苏">江苏</option>
<option value="河北">河北</option>
</select>
<select id="a2">
<option value="南京">南京</option>
<option value="连云港">连云港</option>
<option value="苏州">苏州</option>
<option value="镇州">镇州</option>
</select>
var city = new Array;
city[‘江苏‘] = [‘南京‘,‘连云港‘,‘苏州‘,‘镇江‘];
city[‘河北‘] = [‘石家庄‘,‘保定‘,‘衡水‘,‘邯郸‘,‘廊坊‘];
function allCity(){
var select1 = document.getElementById(‘a1‘);
for (var i in city){
select1.add(new Option(i,i),null);
}
addoption();
}
function addoption(){
var select2 = document.getElementById(‘a2‘);
var select1 = document.getElementById(‘a1‘).value;
select2.length = 0; //每次都先清空下市级菜单
if(select1 != ‘请选择省份‘){
for(var i in city[select1 ]){
select2.add(new Option(city[select1][i],city[select1][i]),null);
}
}else if(select1 ==‘请选择省份‘){
select2.length = 0;
select2.add(new Option(‘请选择城市‘,‘请选择城市‘),null);
}
}
window.onload = allCity();

JavaScript Boolean（布尔） 对象
Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

检查布尔对象是 true 还是 false。
<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>

Boolean 对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
Boolean 对象完整教程, 请访问 JavaScript Boolean 对象教程。
Boolean 对象属性
属性 描述
constructor 返回对创建此对象的 Boolean 函数的引用
prototype 使您有能力向对象添加属性和方法。
Boolean 对象方法
方法 描述
toString() 把布尔值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。

创建 Boolean 对象
Boolean 对象代表两个值:"true" 或者 "false"
下面的代码定义了一个名为 myBoolean 的布尔对象：
var myBoolean=new Boolean();
如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 "false" 时）！

JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务。

实例：
返回0-4之间的随机整数
//生成0-4之间的随机数
var randomNum = Math.random()*4;
//取四舍五入后的值
y = Math.round(randomNum);

Math 对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
语法
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
Math 对象属性
属性 描述
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
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) 返回角的正切。.

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7));
上面的代码输出为：
5
下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random());
上面的代码输出为：
0.5967274364885273
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：
document.write(Math.floor(Math.random()*11));
上面的代码输出为：
6

JavaScript RegExp 对象
RegExp：是正则表达式（regular expression）的简写。

语法
var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;
pattern（模式） 描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：
var re = new RegExp("\\w+");
var re = /\w+/;
更多关于 RegExp 对象请阅读我们的 JavaScript RegExp 对象教程。
修饰符
修饰符用于执行区分大小写和全局匹配:
修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
方括号
方括号用于查找某个范围内的字符：
表达式 描述
[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 的字符串。
RegExp 对象方法
方法 描述
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
支持正则表达式的 String 对象的方法
方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

实例1：
在字符串中不区分大小写找"runoob"
<script>
var str = "Visit RUnoob";
var patt1 = /runoob/i;
document.write(str.match(patt1));
</script>
实例2：
全文查找 "is"
<script>
var str="Is this all there is?";
var patt1=/is/g;
document.write(str.match(patt1));
</script>
实例3：
全文查找和不区分大小写搜索 "is"
<script>
var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1));
</script>

test()
test()方法搜索字符串指定的值，根据结果并返回真或假。
下面的示例是从字符串中搜索字符 "e" ：
实例
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true

当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）
<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)) //输出 true
document.write("<br>")
document.write(patt2.test(str)) //输出 false
document.write("<br>")
document.write(patt3.test(str)) //输出 true
</script>

exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
下面的示例是从字符串中搜索字符 "e" ：
实例 1
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e