从零开始的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的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- Xamarin GitHub 下载的源码运行不了
初学Xamarin ,各种折腾,大概这公司破电脑配置差,老是很多问题. GitHub 真是个好东西,可以参考别人做的,不过下载来运行不了就各种折腾了,为此我重装电脑两次了,反正win10安装就十几分 ...
- angular 过滤排序
<table class="table"> <thead> <tr> <th ng-click="changeOrder('id ...
- mpu6050参数获取
MPU6050其实就是一个 I2C 器件,里面有很多寄存器(但是我们用到的只有几个),我们通过读写寄存器来操作这个芯片.所以首要问题就是 STM32 和 MPU6050 的 I2C 通信.1.配置 S ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- Python之路- 反射&定制自己的数据类型
一.isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 issubclass(sub, super)检查sub类是否是 super ...
- Java多线程的几个常用关键字
一.同步(synchronized)和异步(asynchronized) 1.同步(synchronized)简单说可以理解为共享的意思,如果资源不是共享的,就没必要进行同步.设置共享资源为同步的话, ...
- 个人VIM配置实例
用户 vimrc 文件: "$HOME/.vimrc" " vimrc by lewiyon@hotmail.com " last update 2013-10 ...
- [原创]一种基于Python爬虫和Lucene检索的垂直搜索引擎的实现方法介绍
声明:本文首发在博客园晨星落羽,Shulin_Cao和lvmememe首页,转载请注明出处. 前言 2016.5到2017.5,我们三人(lvmememe,Shulin_Cao,晨星落羽)共同完成了一 ...
- 关于WebService、WebApi的跨域问题
随着移动互联网的发展, 传统营销模式往网站以及移动客户端转移已经成为一种趋势.接触过互联网开发的开发者肯定会很熟悉两种网络服务WebApi.WebService.在使用JavaScript进行数据交互 ...
- eclipse--java工程转web工程 以及 java或java web工程转maven工程
1. 打开工程文件夹,编辑工程的.project文件. 在<natures></natures>中加入 <nature>org.eclipse.wst.commo ...