web前端----JavaScript对象
简介：
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的
<script language="javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript");
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四");
//数组对象
</script>
一、string对象（字符串）
1.字符串对象创建
字符串创建(两种方式)
① 变量 = “字符串”
② 字串串对象名称 = new String (字符串)
// ========================
// 字符串对象的创建有两种方式
// 方式一
var s = 'sffghgfd';
// 方式二
var s1 = new String(' hel lo ');
console.log(s,s1);
console.log(typeof(s)); //object类型
console.log(typeof (s1)); //string类型
2.字符串对象的属性和函数
-------属性
x.length －－－－获取字符串的长度
------方法
x.toLowerCase() －－－－转为小写
x.toUpperCase() －－－－转为大写
x.trim() －－－－去除字符串两边空格 －－－－字符串查询方法 x.charAt(index) －－－－str1.charAt(index);－－－－获取指定位置字符，其中index为要获取的字符索引 x.indexOf(index)－－－－查询字符串位置
x.lastIndexOf(findstr) x.match(regexp) －－－－match返回匹配字符串的数组，如果没有匹配则返回null
x.search(regexp) －－－－search返回匹配字符串的首字符位置索引 示例：
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]); // 结果为"world"
alert(str3); // 结果为15 －－－－子字符串处理方法 x.substr(start, length) －－－－start表示开始位置，length表示截取长度
x.substring(start, end) －－－－end是结束位置 x.slice(start, end) －－－－切片操作字符串
示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg" x.replace(findstr,tostr) －－－－ 字符串替换 x.split(); －－－－分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//结果为"二" x.concat(addstr) －－－－ 拼接字符串
方法的使用
<script>
// ========================
// 字符串对象的创建有两种方式
// 方式一
var s = 'sffghgfd';
// 方式二
var s1 = new String(' hel lo ');
console.log(s,s1);
console.log(typeof(s)); //object类型
console.log(typeof (s1)); //string类型 // ======================
// 字符串对象的属性和方法
// 1.字符串就这么一个属性
console.log(s.length); //获取字符串的长度 // 2.字符串的方法
console.log(s.toUpperCase()) ; //变大写
console.log(s.toLocaleLowerCase()) ;//变小写
console.log(s1.trim()); //去除字符串两边的空格(和python中的strip方法一样，不会去除中间的空格)
//// 3.字符串的查询方法
console.log(s.charAt(3)); //获取指定索引位置的字符
console.log(s.indexOf('f')); //如果有重复的，获取第一个字符的索引,如果没有你要找的字符在字符串中没有就返回-1
console.log(s.lastIndexOf('f')); //如果有重复的，获取最后一个字符的索引
var str='welcome to the world of JS!';
var str1 = str.match('world'); //match返回匹配字符串的数组，如果没有匹配则返回null
var str2 = str.search('world');//search返回匹配字符串从首字符位置开始的索引，如果没有返回-1
console.log(str1);//打印
alert(str1);//弹出
console.log(str2);
alert(str2); // =====================
// 子字符串处理方法
var aaa='welcome to the world of JS!';
console.log(aaa.substr(2,4)); //表示从第二个位置开始截取四个
console.log(aaa.substring(2,4)); //索引从第二个开始到第四个，注意顾头不顾尾
//切片操作（和python中的一样，都是顾头不顾尾的）
console.log(aaa.slice(3,6));//从第三个到第六个
console.log(aaa.slice(4)); //从第四个开始取后面的
console.log(aaa.slice(2,-1)); //从第二个到最后一个
console.log(aaa.slice(-3,-1)); // 字符串替换、、
console.log(aaa.replace('w','c')); //字符串替换，只能换一个
//而在python中全部都能替换
console.log(aaa.split(' ')); //吧字符串按照空格分割
alert(aaa.split(' ')); //吧字符串按照空格分割
var strArray = aaa.split(' ');
alert(strArray[2])
</script>
使用方法
二、Array对象（数组）
1.创建数组的三种方式
创建方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true); 创建方式3:
var arrname = new Array(长度);
// 初始化数组对象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";
2.数组的属性和方法
// ====================
// 数组对象的属性和方法
var arr = [11,55,'hello',true,656];
// 1.join方法
var arr1 = arr.join('-'); //将数组元素拼接成字符串，内嵌到数组了，
alert(arr1); //而python中内嵌到字符串了
// 2.concat方法(链接)
var v = arr.concat(4,5);
alert(v.toString()) //返回11,55,'hello',true,656,4,5
// 3.数组排序reserve sort
// reserve:倒置数组元素
var li = [1122,33,44,20,'aaa',2];
console.log(li,typeof (li)); //Array [ 1122, 33, 44, 55 ] object
console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
alert(li.reverse()); //2,'aaa',55,44,33,1122
// sort :排序数组元素
console.log(li.sort().toString()); //1122,2,20,33,44,aaa 是按照ascii码值排序的
// 如果就想按照数字比较呢?（就在定义一个函数）
// 方式一
function intsort(a,b) {
if (a>b){
return 1;
}
else if (a<b){
return -1;
}
else{
return 0;
}
}
li.sort(intsort);
console.log(li.toString());//2,20,33,44,1122,aaa // 方式二
function Intsort(a,b) {
return a-b;
}
li.sort(intsort);
console.log(li.toString());
// 4.数组切片操作
//x.slice(start,end);
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
alert(arr2.toString());//结果为"c,d"
alert(arr3.toString());//结果为"e,f,g,h"
alert(arr4.toString());//结果为"c,d,e,f,g"
// 5.删除子数组
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ]
// 6.数组的push和pop
// push:是将值添加到数组的结尾
var b=[1,2,3];
b.push('a0','');
console.log(b) ; //Array [ 1, 2, 3, "a0", "" ] // pop；是讲数组的最后一个元素删除
b.pop();
console.log(b) ;//Array [ 1, 2, 3, "a0" ]
//7.数组的shift和unshift
unshift: 将值插入到数组的开始
shift: 将数组的第一个元素删除
b.unshift(888,555,666);
console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ] b.shift();
console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ]
// 8.总结js的数组特性
// java中的数组特性：规定是什么类型的数组,就只能装什么类型.只有一种类型.
// js中的数组特性
// js中的数组特性1：js中的数组可以装任意类型,没有任何限制.
// js中的数组特性2： js中的数组,长度是随着下标变化的.用到多长就有多长.
</script>
数组的一些方法和属性
三、date对象（日期）
1.创建date对象
创建date对象
// 方式一：
var now = new Date();
console.log(now.toLocaleString()); //2017/9/25 下午6:37:16
console.log(now.toLocaleDateString()); //2017/9/25
// 方式二
var now2 = new Date('2004/2/3 11:12');
console.log(now2.toLocaleString()); //2004/2/3 上午11:12:00
var now3 = new Date('08/02/20 11:12'); //2020/8/2 上午11:12:00
console.log(now3.toLocaleString()); //方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT
2.Date对象的方法—获取日期和时间
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
实例练习
1.打印这样的格式2017-09-25 17:36:星期一
function foo() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day= date.getDate();
var hour = date.getHours();
var min= date.getMinutes();
var week = date.getDay();
console.log(week);
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(arr[week]);
// console.log(arr[3]);
console.log(year+'-'+chengemonth(month+1)+'-'+day+' '+hour+':'+min+':'+arr[week])
}
function chengemonth(num) {
if (num<10){
return ''+num
}
else{
return num
}
}
foo()
console.log(foo()) //没有返回值返回undefined
//三元运算符
console.log(2>1?2:1)
2.设置日期和时间
//设置日期和时间
//setDate(day_of_month) 设置日
//setMonth (month) 设置月
//setFullYear (year) 设置年
//setHours (hour) 设置小时
//setMinutes (minute) 设置分钟
//setSeconds (second) 设置秒
//setMillliseconds (ms) 设置毫秒(0-999)
//setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date();
x.setFullYear (1997); //设置年1997
x.setMonth(7); //设置月7
x.setDate(1); //设置日1
x.setHours(5); //设置小时5
x.setMinutes(12); //设置分钟12
x.setSeconds(54); //设置秒54
x.setMilliseconds(230); //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒
设置日期和时间
3.日期和时间的转换:
日期和时间的转换: getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)
日期和时间的转换:
四、Math对象（数学有关的）
//该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x)对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
使用
》》》》》》》》》》
五、Function对象（重点）
1.函数的定义
function 函数名 (参数){
<br> 函数体;
return 返回值;
}
功能说明：
可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。
示例：
var func2 = new Function('name',"alert(\"hello\"+name);");
func2('haiyan');
注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以：
f(); --->OK
function f(){
console.log("hello")
}
f();//----->OK
//
2.Function 对象的属性
如前所述，函数属于引用类型，所以它们也有属性和方法。
比如，ECMAScript 定义的属性 length 声明了函数期望的参数个数。
alert(func1.length)
3.Function 的调用
// ========================函数的调用
function fun1(a,b) {
console.log(a+b)
}
fun1(1,2);// 3
fun1(1,2,3,4); //3
fun1(1); //NaN
fun1(); //NaN
console.log(fun1()) // ===================加个知识点
var d="yuan";
d=+d;
alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d));//Number
NaN特点:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN参与的所有的运算都是false,除了!= =============一道面试题、、
function a(a,b) {
console.log(a+b);
}
var a=1;
var b=2;
a(a,b) //如果这样的话就会报错了，不知道是哪个a了。
4.函数的内置对象arguments
// 函数的内置对象arguments,相当于python中的动态参数
function add(a,b){
console.log(a+b);//3
console.log(arguments.length);//2
console.log(arguments);//[1,2]
}
add(1,2)
// ------------------arguments的用处1 ------------------
function ncadd() {
var sum = 0;
for (var i =0;i<arguments.length;i++){
// console.log(i);//打印的是索引
// console.log(arguments);//Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 项… }
console.log(arguments[i]);//1,2,3,4,5
sum +=arguments[i]
}
return sum
}
ret = ncadd(1,2,3,4,5,6);
console.log(ret); // ------------------arguments的用处2 ------------------ function f(a,b,c){
if (arguments.length!=3){
throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
}
else {
alert("success!")
}
} f(1,2,3,4,5)
5.匿名函数
/ =======================
// 匿名函数
var func = function(arg){
return "tony";
}; // 匿名函数的应用
(function(){
alert("tony");
} )() (function(arg){
console.log(arg);
})('')
web前端----JavaScript对象的更多相关文章
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- web前端+javascript+h5电子书籍和实战分享
有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...
- web前端----JavaScript的DOM(三)
一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...
- web前端----JavaScript的BOM
一.引入 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...
- web前端----JavaScript(JS)简单介绍
JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...
- WEB前端--JavaScript
JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...
- web前端----JavaScript的DOM（二）
前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...
- web前端----JavaScript(JS)函数
函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...
随机推荐
- Java开发之上帝之眼系列教程前言&目录
前言 如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝的角度去观察(了解)Java体系. ...
- 170811、Java获取jdk系统环境变量
package com.rick.utils; /******************************************************** *@Desc: 系统变量属性工具类 ...
- jquery选择器中的逗号
$("span",this)等同于$(this).find('span') 中间逗号两个条件的并集
- 处理 Java Tomcat 的“Cannot allocate memory”错误
参考:https://www.cnblogs.com/rabbitpei/p/6738671.html 启动tomcat报错如下 临时生效 echo 1 > /proc/sys/vm/overc ...
- poj3347 Kadj Squares【计算几何】
Kadj Squares Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 3594 Accepted: 1456 Desc ...
- MapReduce排序
在map和reduce阶段进行排序时,比较的是k2.v2是不参与排序比较的.如果要想让v2也进行排序,需要把k2和v2组装成新的类,作为k2,才能参与比较. 例子: 二次排序:在第一列有序得到前提下第 ...
- ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
- iOS-数据缓存(转载)
一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造成以下问题 (1)用户流量的浪费 ...
- Intellij Idea常用配置设置
1.配置Intellij Idea的配置文件从默认c盘转移到其他盘符 找到Intellij idea的安装文件,在bin目录下找到idea.properties配置文件,如下把Idea的配置文件夹和I ...
- Github常用命令【转】
本地仓库(local repository) 创建一个本地仓库的流程: 为本地仓库创建一个目录 在目录中执行 git init 对本地仓库所做的改变(例如添加.删除文件等)首先加入到本地仓库的 Ind ...