js对象属性与Bom

Posted 2020-10-08 黎明NB

1JavaScript 的对象

1.1字符串

1.2Array对象

1.3Date对象

1.4Math对象

1.5Function对象（重点）

2 Bom对象

1   JavaScript对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。

1.1字符串对象

字符串对象创建2种方法：

 //字符串创建的方法
//       var s=‘hello‘
//        var s1=new String(‘hello‘)

字符串对象的属性和函数（只有length是属性其余都是方法）：

//属性和方法 一个属性是length其余都是方法
        var s=‘helloworld‘
//        console.log(s.length)//包括字符串中的空格
//        console.log(s.toUpperCase())//把字符串变成大写
//        console.log(s.trim()) //去掉字符串两边的空格
//        console.log(s.charAt(4))//通过索引找元素
//        console.log(s.indexOf(‘l‘))//通过字符找索引（找到第一个）
//        console.log(s.lastIndexOf(‘h‘))//通过字符找最后一个出现的字符的索引
//        console.log(s.match(‘hehh‘))//返回的是匹配到的字符串，如果没有返回的是null
//        console.log(s.search(‘world‘))//返回的是匹配到的字符串，出现的索引
//       res=s.substr(1,8)
//        console.log(typeof res)//返回的是截取到的字符串，1 是开始的索引，8是截取的长度。
//       res=s.substring(1,4)
//        console.log(typeof res)//返回的是截取到的字符串，1是开始索引，4取不到。又叫顾头不顾尾
//        console.log(s.slice(1,4))//切片返回的是字符串，也是顾头不顾尾。
//        res=s.split(‘w‘)
//        console.log(typeof res)
//        console.log(res[0],res[1])//返回的是数组类型，python中返回的列表
        console.log(s.replace(‘l‘, ‘fuck‘))//替换一个函数   只能替换第一个字母，python中可以全部替换
//        console.log(s.concat(‘99999‘))//拼接字符串

1.2Array对象

创建数组的三种方式：

//数组对象的创建三种方式
//        创建方式一
//        var arr=[11,22,33]
        //创建方式二
//        var arr=new Array(11,22,33)
        //创建方式三
//        var cnweek=new Array(7)
//            cnweek[0]=‘星期日‘
//            cnweek[1]=‘星期一‘
//            cnweek[2]=‘星期二‘
//            cnweek[3]=‘星期三‘
//            cnweek[4]=‘星期四‘
//            cnweek[5]=‘星期五‘
//            cnweek[6]=‘星期六‘

创建二维数组：

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

数组的属性和方法：

join方法：

数组方法
//        ss=[‘jaljgljal‘]
//        var arr=[11,22,33,88,2];
//        console.log(arr[2]);
//        join方法
//          ret=arr.join(‘-‘)
//        console.log(ret)

cocat方法：

 //concat方法
//        var a=[2,4]
//        console.log(a.concat(arr))
//        console.log(a.toString())//变成字符串

 

reverse sort方法：

//reverse sort 方法
        var arr=[11,22,33,88,2];
//        console.log(arr.reverse())//翻转排序
//        console.log(arr.sort())//按照acci码值进行排序[11,2,22,33,88]
//        console.log(arr.sort(foo1))//这种方法可以按照大小排序[2,11,22,33,88]
        //方法一
//        function  foo(x,y) {
//            if(x>y){
//                return 1
//            }
//            else  if(x<y){
//                return -1
//            }
//            else {
//                return 0
//            }
//
//        }
//方法二
//        function foo1(x,y){
//            return x-y
//        }

slice方法：

slice
//             var arr=[11,22,33,88,2];
//             console.log(arr.slice(1,3))//得到的结果[22,33]

删除数组

    //x. splice(start, deleteCount, value, ...)

//使用注解

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略
//        var a=[1,2,3,4,5,6,7]
//        a.splice(1,2)
//        console.log(a)//[1,4,5,6,7]
//        console.log(a.toString(),typeof a)
//        a.splice(1,0,2,3)
//        console.log(a.toString())//[1,2,3,4,5,6,7]

push pop方法

 //push 和pop的用法这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除
//            var a=[1,2,3,4,5,6,7]
//        ret=a.push(2,3)
//        console.log(ret)//9
//        console.log(a)//[1,2,3,4,5,6,7,2,3]
//        ret1=a.pop()
//        console.log(ret1)//pop 的值
//        console.log(a)//去掉最后一个数值

unshift shift方法

     //x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除
        var arr=[1,2,3,4]
        console.log(arr.unshift(4,5))
        console.log(arr)//[4,5,1,2,3,4]
        ret=arr.shift()


        console.log(ret)//[4]
        console.log(arr)//[5,1,2,3,4]

 js中数组的特性
         //java中数组的特性,  规定是什么类型的数组,就只能装什么类型.只有一种类型.
         //js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
         //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.

1.3Date对象
创建形式

var day=new Date()
Date对象的方法：

var day=new Date()
//        console.log(day)
//        console.log(day.toString())//变成字符串
//        console.log(day.getDate())  //几号
//        console.log(day.getDay())//周几
//        console.log(day.getFullYear())//四位数的年表示形式
//        console.log(day.getYear())//从1900开始到现在多少年117
//        console.log(day.getMonth())//8月要加1月
//        console.log(day.getTime())//返回累计毫秒（从1970年？1月/1午夜）
//        console.log(day.getHours())//小时20小时
//        console.log(day.getSeconds())//从获取秒数
//        console.log(day.getMinutes())//获取分钟数

拼接日期：

    " 2012-12-12 12:12 星期三 "
//拼接日期
//        var date=new Date()
//        function  foo(y) {
//          var  year=y.getFullYear()
//             var month=y.getMonth()
//          var  day=y.getDate()
//          var   hours=y.getHours()
//           var  minth=y.getMinutes()
//           var weeked=y.getDay()
//            var ss=[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘]
//           return  year+"-"+cc(month+1)+‘-‘+day+‘ ‘+hours+‘:‘+minth+‘ ‘+ss[weeked]
//
//        }
//        function  cc(x)  {
//            if(x<10) {return ‘0‘+x}
//            else {return(x)}
//
//        }
//        console.log(ss)
//    console.log(foo(date))

三元运算符：

  var i=+‘1‘
//        console.log(i)//1
//        console.log(typeof i )//num
//        console.log(2>1?2:1)//三元运算符

设置日期与时间

//设置日期和时间
//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秒

日期与时间转换：

日期和时间的转换:

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

1.4Math对象

console.log(Math.max(11,22,66,99,789))
//        console.log(Math.min(11,22,66,99,789))
//        console.log(Math.ceil(89.4656513646))//向上取整
//        console.log(Math.floor(89.4656513646))//向下取整
//        console.log(Math.exp(0))//以e为底的指数
//        console.log(Math.pow(2,3))//幂
        var  num=Math.random();//取0-1之间的数不包括1
        num=num*100;
        num=Math.round(num)//四舍五入
        console.log(num)

1.5Function对象

函数的定义：

function 函数名 (参数){?<br>    函数体;

    return 返回值;

}

功能说明：

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

function  foo() {
//            return console.log(‘ok‘)
//        }
//        var ret=foo()
//        console.log(ret)

注：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以：

<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>

function对象的调用：

function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

    //只要函数名写对即可,参数怎么填都不报错.

-------------------面试题-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

内置对象：arguments

function  add() {
//            var sum=0;
//            for (var i=0;i<arguments.length;i++)
//            { console.log(arguments[i])
//                sum+=arguments[i]
//            }
//            for(i in arguments) {//法二
//                sum+=arguments[i]
//            }
//            return sum
//        }
//
//        ret=add(5,6,9,2)
//        console.log(ret)

匿名函数

 (function(arg){
        console.log(arg);
    })(‘123‘)；
(function(){
        alert("tony");
    } )();

2 Bom对象

window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

 function foo() {
          var date=new Date();
          var date=date.toLocaleString();
        
          var ele=document.getElementById("timer");
          ele.value=date;
      }

      var ID;
      function begin() {

           if (ID==undefined){
                 foo();
                 ID=setInterval(foo,1000);

                 var ele=document.getElementById("show");
                 ele.disabled="disabled"
            }

         
      }
      
      
      function end() {
          clearInterval(ID);
          ID=0;
      }