从零开始的JS生活(三)——内置对象
咱们继续进行我们的正经的JS介绍。今天所要跟大家讲述的是JS中十分常用、十分常用、十分常用的内置对象。
一、世界上最熟悉的陌生就是,当你看着数组、而我看着你... — 数组对象
1、数组的概念
在内存中 连续存储 多个 有序 元素的结构(元素的顺序称为下标,通过下标查找对应元素);
2、数组的声明
2.1 通过字面量声明
JS中同一数组可以储存多种不同数据类型(但一般同一数组只用于存放同种数据类型)
2.2 new关键字声明:var arr2 = new Array(参数);
>>>参数可以是
① 空->声明一个没有指定长度的数组:var arr2 = new Array();
② 数组的长度->声明一个指定长度的数组:var arr2 = new Array(5);【但是数组的长度随时可变可追加,长度为0-(2^32-1)】;
③ 数组默认的n个值:var arr2 = new Array(1,2,3);相当于var arr2 = [1,2,3]; ;
3、数组中元素的读写/增删
3.1 读写:通过下表来访问元素,例如arr[2];
3.2 增删
① delete arr[n];删除数组的第n+1个值,但数组长度不变,对应位置值为Undefined,相当于delete(arr3[4]);;
② arr.push(值); 数组最后增加一个值,返回新的长度,相当于arr3[arr3.length] = 7;
③ arr.unshift(值);数组的第0位插入一个值,返回新的长度,其余位数顺延;
④ arr.pop();删除数组最后一位,返回被删掉的数值,不同与delete的是pop执行后数组长度也会减少一个,相当于arr.length-=1;
⑤ arr.shift(值);删除数组第0位,返回被删掉的数值,长度也会减1;
4、数组中常用的方法
① join("分隔符");将数组用指定分隔符分隔,链接为字符串,参数为空时,默认用逗号分隔;
② concat();(原数组不会改变,需要重新定义并接受)将数组与多个数组的值链接为新的数组:
[1,2].concat[3,4] = [1,2,3,4] //连接时,中括号至多拆一层;
[1,2].concat[1,2,[3,4]] = [1,2,1,2,[3,4]] //多层中括号,以二维数组形式存在;
③ push();数组最后增加一个数/unshift();数组开始增加一个数 -> 返回新的长度,原数组会改变;
④ pop();删除数组最后一位/arr.shift(值);删除数组第0位 -> 返回被删掉的值,原数组会改变;
⑤ reverse();数组翻转,逆序排列,原数组会改变;
⑥ slice(begin,end);原数组不会改变,截取数组中的某一部分,成为新数组
//传递一个参数:默认为begin index,从这个开始,截到最后一个;
//传递两个参数:截取从begin index到end index区间,左闭右开(包含begin,不含end);
//参数可以为负数,-1表示最后一个;
⑦ sort(function);原数组会被改变,对数组进行排序
//不指定排序function,默认按首字母的Ascii码值进行排列;
//传入排序函数,默认两个参数a,b,如果返回值>0,则a>b,反之a<b;
// console.log(arr4.sort(function func(a,b){
// return a-b ; //如果>0 b在a前,其他同理(升序排列)
// return b-a ; //如果>0 a在b前,其他同理(降序排列)
// }));
⑧ indexOf(value,index);返回第一个value值对应的索引位置,若未找到,返回-1
⑨ lastIndexOf(value,index);返回最后一个value值对应的索引位置,若未找到,返回-1
//若未指定index参数,默认在所有元素中查询;
//若指定index参数,则从index开始,向后查询;
5、二维数组与稀疏数组
5.1 稀疏数组:数组并不含有从0开始到length-1的所有索引(length值比实际元素个数多);
5.2 二维数组:var arr = [[1,2],[3,4],[5,6]]; 相当于三行两列的矩阵
//如何取出二维数组中的元素?arr[行号][列号];可是用循环嵌套遍历
6、引用数据类型与基本数据类型
6.1 常见引用数据类型:(数组,对象)赋值时,是将原变量的地址,赋给新变量,两个变量。实际操作的是同一份数据,所以,修改其中一个变量,另一个跟着变化;
6.2 基本数据类型:赋值时,是将原变量的值,赋值给新变量,两个变量属于不同的内存空间,修改其中一个,互不干扰。
7、下面我们来举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>杨辉三角</title> <script type="text/javascript"> // var row =
// [
// [1],
// [1,1],
// [1,2,1],
// [1,3,3,1],
// [1,4,6,4,1],
// [1,5,10,10,5,1]
// ]; //—————————确定二维数组框架——————————— var num = parseInt(prompt("请输入行数:"));
var arr = new Array(num);
for (var i = 0 ; i < num ; i ++) {
arr[i] = new Array(i+1);
} //—————————二维数组中每个元素的确定——————— for ( var i = 0 ; i < num ; i ++) {
for (var j = 0 ; j < arr[i].length ; j ++) {
if(j==0||j==i){
arr[i][j] = 1 ;
}else{
arr[i][j] = arr[i-1][j-1]+arr[i-1][j] ;
}
}
} //—————————打印———————————————— for ( var i = 0 ; i < num ; i ++) {
console.log(arr[i].toString());
} </script> </head>
<body>
二、数组头上青青草,其他对象都来搞 — 其他JS支持对象
1、Boolean类型
var isTrue = true ; // 单纯的变量
var isTrue1 = new Boolean(true); // 一个Boolean类型的对象
console.log(isTrue);
console.log(isTrue1);
2、Number类型
var num = 100000 ;
var num1 = new Number(1);
console.log(num);
console.log(num1);
//常用属性与方法
① console.log(Number.MAX_VALUE);// 可表示的最大数
② console.log(Number.MIN_VALUE);// 可表示的最小数
③ console.log(Number.NaN);
④ console.log(num.toString());// ★将数字转为字符串,相当于num+"";
⑤ console.log(num.toFixed(2));// ★将数字转为字符串,保留n位小数,且会四舍五入
⑥ console.log(num.valueOf());// ★返回Number对象的基本数字值
⑦ console.log(num.toLocaleString());// 将数字按照本地格式的顺序转为字符串。一般,三个为一组加逗号
⑧ console.log(num.toExponential());
⑨ console.log(num.toPrecision(7));// 将数字格式化为指定长度,n等于不含小数点的所有位数的和
3、String类型
var str = "This is Javascript";
① console.log(str.length);//属性:返回字符串的长度
② console.log(str.toLowerCase());//方法:将所有字符转为小写
③ console.log(str.toUpperCase());//方法:将所有字符转为大写
④ console.log(str.charAt(2));//方法:截取字符串中的第几个字符
⑤ console.log(str.indexOf("is",3));//方法:查询从index开始的第一个子串的索引,未找到返回-1,同数组的indexOf()方法
⑥ console.log(str.substring(2,6));//方法:截取子串->只写一个参数:从begin开始,到最后;写两个参数:从begin开始,到end,左闭右开
⑦ console.log(str.replace(" ","-"));//方法:将字符串中第一个old替换为new,第一个参数可以为普通字符串、也可以为正则表达式,普通字符串将只匹配第一个、正则表达式则根据具体情况区分
⑧ console.log(str.split(""));//方法:将字符串通过制定分隔符分为数组,传入""空字符串,将把单个字符存入数组
4、Date类型
4.1 new Date(); 拿到当前最新时间;
new Date("2008,8,8,20:08:08") 设置最指定时间;
4.2 方法
document.write(today);
document.write(today.getFullYear());//获取4位年份
document.write(today.getMonth()+1);//获取月份0-11,需要+1
document.write(today.getDate());//获取一月中的某一天
document.write(today.getDay())//获取一周中的某一天0-6
var day = today.getDay();
var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
document.write(week[day]);
document.write(today.getHours());
document.write(today.getMinutes());
document.write(today.getSeconds());
三、嘿、你的对象...不、这是你的对象! — 自定义对象
1、基本概念
① 对象:包含一系列无序属性和方法的集合
② 键值对:对象中的数据是以键值对形式存在的,以键取值;
③ 属性:描述对象特征的一系列变量(对象中的变量);
④ 方法:描述对象行为的一系列方法(对象中的函数);
2、声明对象
① 字面量声明
var obj = {
key1:"value1", //属性
key2:"value2"
func:function(){} //方法
}
对象中的键,可以是任何数据类型。但,一般用作普通变量名(不需要""双引号)即可
对象中的值,可以是任何数据类型。但,字符串的话必须用""双引号包裹
多组键值对之间用,英文逗号分割,键值对的键与值之间用:英文冒号分割
② new关键字
var lisi = new Object();
lisi.name = "李四";
lisi.say = function(){
console.log("我爱敲代码!");
}
3、对象中属性和方法的读写
① .运算符:
对象内部->this.属性名 this.方法名();
对象外部->对象名.属性名 对象名.方法名();
>>>对象中,直接写变量名,默认为调用全局变量,如果需要调用对象自身属性,则需要通过this关键字
② 通过["key"]调用:对象名["属性名"] 对象名["方法名"]()
如果key中包含特殊字符,则无法使用第①种方式,必须使用第②种;
③ 删除对象的属性方法:delete 对象名.属性/方法名
4、下面我们来举个栗子
四、话不投机半句多,一堆乱码扔上桌 — 正则表达式
1、正则表达式包括两部分
①定义的正则表达式规则 ②正则表达式的模式(g/i/m)
2、正则表达式的声明
字面量声明: var reg = /表达式规则/表达式模式 /white/g
使用new关键字声明: var reg = new RegExp("表达式规则","表达式模式"); var reg = new RegExp("white","g");
3、正则表达式的常用方法
.text()方法:检测一个字符串是否匹配某个正则模式,返回true、false
.exec()方法:
4、正则表达式的常用模式
g:全局匹配;不加默认非全局,只匹配第一个
"www".replace(/w/,"#") -> #ww
"www".replace(/w/g,"#") -> ###
i:忽略大小写;不加默认需要匹配大小写
"wWw".replace(/W/,"#") -> w#w
"wWw".replace(/W/i,"#") -> #Ww
m:匹配多行模式(字符串分多行显示,每行都有开头结尾);
"abc "#bc
abc".replace(/^a/g,"#") -> abc"
"abc "#bc
abc".replace(/^a/gm,"#") -> #bc"
5、常用符号
6、下面我们来举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客园注册</title>
</head>
<body> 用 户 名:<input type="text" name="user" id="user"/>
<button id="userBtn">验证</button>
<br /><br />
密 码:<input type="password" name="psw" id="psw"/>
<button id="pswBtn">验证</button>
<br /><br />
电子邮箱:<input type="text" name="mail" id="mail"/>
<button id="mailBtn">验证</button>
<br /><br />
手机号码:<input type="tel" name="tel" id="tel"/>
<button id="telBtn">验证</button>
<br /><br />
生 日:<input type="text" name="birth" id="birth"/>
<button id="birthBtn">验证</button> </body> <script type="text/javascript"> var userVa = document.getElementById("user").value;
var userBtn = document.getElementById("userBtn");
var pswVa = document.getElementById("psw").value;
var pswBtn = document.getElementById("pswBtn");
var mailVa = document.getElementById("mail").value;
var mailBtn = document.getElementById("mailBtn");
var telVa = document.getElementById("tel").value;
var telBtn = document.getElementById("telBtn");
var birthVa = document.getElementById("birth").value;
var birthBtn = document.getElementById("birthBtn"); userBtn.onclick = function(){
var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
if(reg.test(userVa)){
alert("验证成功!");
}else{
alert("验证失败!");
}
} pswBtn.onclick = function(){
var reg = /^[a-zA-Z0-9]{4,10}$/;
if(reg.test(pswVa)){
alert("验证成功!");
}else{
alert("验证失败!");
}
} mailBtn.onclick = function(){
var reg = /^\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
if(reg.test(mailVa)){
alert("验证成功!");
}else{
alert("验证失败!");
}
} telBtn.onclick = function(){
var reg = /^1[34578]\d{9}$/;
if(reg.test(telVa)){
alert("验证成功!");
}else{
alert("验证失败!");
}
} birthBtn.onclick = function(){
var reg = /^(\d{4}-((2|02)-(0[1-9]|1[0-9]|2[0-8])|((0?[469]|11)-(0[1-9]|[1-2][0-9]|30))|((0?[13578]|10|12)-(0[1-9]|[1-2][0-9]|30|31))))|(([0-9]{2})(0[48]|[2468][048]|[13579][26])|(0[48]|[2468][048]|[3579][26])00)-0?2-29$/;
if(reg.test(birthVa)){
alert("验证成功!");
}else{
alert("验证失败!");
}
} </script> </html>
从零开始的JS生活(三)——内置对象的更多相关文章
- JS中的内置对象简介与简单的属性方法
JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...
- js数组、内置对象、自定义对象
[js中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合 元素在数组中的顺序,称为下标.可以使用下表访问数字的每个元素. 2.如何声明一个数组? ① 使用字面量声明: 在 ...
- JS基础语法---内置对象
js学习中三种对象: 内置对象----js系统自带的对象 自定义对象---自己定义的构造函数创建的对象 浏览器对象---BOM的时候讲 内置对象: Math Date String Array Obj ...
- JS数组及内置对象
[JS中的数组]1.数组的概念:数组是在内存中连续存储多个有序元素的结构元素的顺序,称为下标,通过下标查找对应元素.2.数组的声明: ① 字面量声明: var arr1 = [];JS中同一数组,可以 ...
- js中的内置对象(还没怎么看)
在js里,一切皆为或者皆可以被用作对象.可通过new一个对象或者直接以字面量形式创建变量(如var i="aaa"),所有变量都有对象的性质.注意:通过字面量创建的对象在 ...
- js中的内置对象
在js里,一切皆为或者皆可以被用作对象.可通过new一个对象或者直接以字面量形式创建变量(如var i="aaa"),所有变量都有对象的性质.注意:通过字面量创建的对象在调用属性和 ...
- JS高级---为内置对象添加原型方法
为内置对象添加原型方法 我们能否为系统的对象的原型中添加方法, 相当于在改变源码 我希望字符串中有一个倒序字符串的方法 //我希望字符串中有一个倒序字符串的方法 String.prototype. ...
- JS高级——扩展内置对象的方法
基本概念 内置对象有很多,几个比较重要的:Math.String.Date.Array 基本使用 1.内置对象创建出来的对象使用的方法使用的其实都是内置对象的原型对象中的方法 (1)a并没有charA ...
- JS重要的内置对象
Array对象: 属性: .length 获得数组的长度: 方法: .concat() 连接内容或者数组,组成新的数组: .join(n) 用n连接数组的每一项组成字符串,可以是空字符串: ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- tmux配置
bind k selectp -U bind j selectp -D bind h selectp -L bind l selectp -R bind -r ^k resizep -U 5 bind ...
- [洛谷P2580]于是他错误的点名开始了
洛谷P2580的一个水题,用啥都能过,不过为了练习一下刚刚学会的字典树,还是认真做一下吧. #include <cstdio> #include <cstring> using ...
- SQL零星技术点:SQL中转换money类型数值转换为字符串问题
--SQL中转换money类型数值转换为字符串问题,直接转换就转为两位了,所以需要做一下处理.具体请看下述sql实例. 1 create table #test(price money) insert ...
- yum仓库
1.概念: Yum仓库则是为进一步简化RPM管理软件难度而设计的,Yum能够根据用户的要求分析出所需软件包及其相关依赖关系,自动从服务器下载软件包并安装到系统 yum的工作原理:执行yum命令――&g ...
- python在接口测试的实际应用
今天看到@51Testing软件测试网 关于"关于接口测试的总结"的文章,进去浏览了一下,文章主要是针对接口测试的理论性的描述,而实战的内容没有涉及到.刚好今天我将我的系列文章的& ...
- sql server 2008 数据库管理系统使用SQL语句创建登录用户详细步骤
--服务器角色:--固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL Server,且不能更改分配给它们的权限. --可以在数据库中不存在用户帐户的情况下向固定服 ...
- JavaScript高级程序设计 第三章 基本概念
ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...
- sfdfssd
[TOC] Disabled options TeX (Based on KaTeX); Emoji; Task lists; HTML tags decode; Flowchart and Sequ ...
- 小米Adnroid默认禁止悬浮框的使用,导致开发的悬浮框无法接收事件
比如你建了一个悬浮框: WindowManager windowManager = getWindowManager(context); int screenWidth = windowManager ...
- HashSet实现原理
/* HashSet的实现原理: 往HashSet添加元素的时候,HashSet会先调用元素的hashCode方法得到元素的哈希值 , 然后通过元素 的哈希值经过移位等运算,就可以算出该元素在哈希表中 ...