js基础(3)

发表于 更新于 分类于 ，

对象

在JS中，有三种方式创建对象

利用字面量创建对象

对象字面量：就是{}里面包含了表达这个具体事物（对象）的属性和方法

1
2
3
4
5
6
7
8
9
10
11
var obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sayHi: function() {
             alert('hi')
       },
    show: function() {
           alert('姓名：' + obj.uname + '\n年龄：' + obj.age + '\n性别：' + obj.sex)
        }
    }

调用对象的属性有两种方法：1、对象名.属性名 2、 对象名[‘属性名’]

1
2
alert(obj.age)
alert(obj['uname'])

调用对象的方法：

1
2
obj.sayHi()
obj.show()

利用new object创建对象

1
2
3
4
5
6
7
8
9
var obj = new Object()
obj.uname = '张三'//利用=号赋值的方法添加属性和方法
obj.age = 18
obj.sex = '男'
obj.show = function() {
      alert('名字：' + obj.uname + '\n年龄：' + obj.age + '\n性别：' + obj.sex)
}
alert(obj.sex)
obj.show()

利用构造函数创建对象

前两种方法一次只能创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制。构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Star(uname, age, sex) {
       this.name = uname
       this.age = age
       this.sex = sex
       this.show = function() 
       {
       alert('姓名：' + this.name + '\n年龄：' + age + '\n性别：' + sex)
        }
     		this.sing = function(songs) {
                alert('德华唱' + songs)
            }
        }
var zy = new Star('吕德华', 38, '男')
alert(zy.name)
alert(zy['age'])
zy.show()
zy.sing('大眼睛')

我们利用构造函数创建对象的过程也称为对象的实例化

new在执行时会做四件事情：

​ 1、在内存中创建一个新的空对象

​ 2、让this指向这个新的对象

​ 3、执行构造函数里面的代码，给这个新对象添加属性和方法

​ 4、返回这个新对象，所以构造函数并不需要return

遍历对象

1
2
3
4
5
obj = new Star('邓壹', 18, '男')
for (var k in obj) {
   alert(k)//k变量得到的是属性名
   alert(obj[k])//obj[k]得到的是属性值
}

内置对象

JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象。内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供一些常用的属性和方法。内置对象很多，内置对象的属性和方法更多，所以很多对象和方法要靠应用是查阅文档完成学习。查阅文档：mdn/w3c

math

这个对象不需要new，可以直接使用。在这个对象中，random是其中比较重要的方法之一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getrandom(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min
        }
var random = getrandom(1, 10)//在（1，10）随机取整数
while (true) {
       var num = prompt('你猜猜')
       if (random > num) {
         alert('你猜小了')
        } else if (random < num) {
            alert('你猜大了')
         } else {
             alert('你猜对了')
            break
        }

Date

Date必须使用new来调用创建我们的日期对象。

1
2
var arr = new Date()//不传参数，返回的是当前时间。传参数有两种格式：数字型 2021，01，10 字符串型 '2021-1-10 15:34:08',用数字型的创建时，返回的比实际的大一个月
alert(arr)

格式化日期、时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var date = new Date()
alert(date.getFullYear())
alert(date.getMonth() + 1) //因为月份从0开始，所以月份返回的月份小一个月
alert(date.getDate())
var year = date.getFullYear()
var month = date.getMonth() + 1
var dates = date.getDate()
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay()
alert('今天是' + year + '年' + month + '月' + dates + '日 ' + arr[day])
hours = date.getHours()
minute = date.getMinutes()
second = date.getSeconds()
second = second < 10 ? '0' + second : second//小于10的秒数补0
alert('现在是' + hours + '时' + minute + '分钟' + second + '秒')

时间戳：当前时间距离1970年一月一日过了多少毫秒。JS中获取时间戳有三种方法

1
2
3
4
5
6
7
8
9
var date=new Date()
//第一种方法
alert(date.valueOf())
alert(date.getTime())
//第二种方法
var date1=+new Date()
alert (date1)
//第三种方法是h5新增的
alert(Date.now())

计时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function countdown(time) {
    var date = new Date()
    var nowtime = +new Date()
    var inputtime = +new Date(time)
    var times = (inputtime - nowtime) / 1000
    var d = parseInt(times / 60 / 60 / 24)
    d = d < 10 ? '0' + d : d
    var h = parseInt(times / 60 / 60 % 24)
    h = h < 10 ? '0' + h : h
    var m = parseInt(times / 60 % 60)
    m = m < 10 ? '0' + m : m
    var s = parseInt(times % 60)
    s = s < 10 ? '0' + s : s
    return d + '天' + h + '时' + m + '分' + s + '秒'
        }
    alert(countdown('2021-1-11 19:00:00'))

Array

检测是否为数组。1、instanceof 2、isArray

1
2
3
4
5
var arr = []
var obj = {}
alert(arr instanceof Array)//true
alert(obj instanceof Array)//false
alert(Array.isArray(arr))//true

添加/删除数组

1
2
3
4
5
6
7
8
9
10
11
//添加元素
var arr = [1, 2, 3]
alert(arr.push(4, 'DENGYI')) //5
alert(arr) //[1,2,3,4,'DENGYI']
alert(arr.unshift('red', 'green')) //7
alert(arr) //['red','green',1,2,3,4,'DENGYI']
//删除元素
alert(arr.pop())//DENGYI
alert(arr)//['red','green',1,2,3,4,'DENGYI']
alert(arr.shift())//red
alert(arr)//['green',1,2,3,4]

数组翻转、排序

1
2
3
4
5
6
7
8
9
10
11
12
var arr=['DENGYI','blue','white','black']
arr.reverse()
alert(arr)
var arr1=[4,1,5,6,2]
arr1.sort()//注意：这里如果数组里有两位数，sort无法实现
alert(arr)
var arr2 = [12, 45, 7, 43, 2]
arr2.sort(function(a, b) {
            //return a - b//升序的顺序排列
  				 return b - a//降序排列
        })
alert(arr2)

数组索引

1
2
3
4
var arr = ['red', 'green', 'pink', 'green', 'black']
alert(arr.indexOf('green'))//1
var arr = ['red', 'green', 'blue', 'red', 'purple']
alert(arr.lastIndexOf('red'))//3

数组去重

1
2
3
4
5
6
7
8
9
10
11
function unique(arr) {
   var newArr = []
   for (var i = 0; i < arr.length; i++) {
          if (newArr.indexOf(arr[i]) === -1) {
                 newArr.push(arr[i])
               }
            }
            return newArr
        }
var demo = unique(['c', 'a', 'z', 'z', 'x', 'a', 'c', 'b', 'x'])
alert(demo)

数组转换为字符串

1、toString 2、join(分隔符)

1
2
3
4
var arr1 = ['green', 'blue', 'pink']
alert(arr1.join())
alert(arr1.join('$'))
alert(arr1.join('@'))

string

基本包装类型：就是把简单数据类型包装成为了复杂数据类型。在js中，有三种数据类型可以包装:String、Number Boolean。把简单数据类型包装成为复杂数据类型，即可使用复杂数据类型中的属性和方法

字符串不可变。指的是字符串里面的值不可变，虽然看上去可以改变内容，但其实地址变了，内存中开辟一个新的空间。字符串里所有的方法，都不会修改字符串本身

根据字符返回位置

1
2
3
4
5
6
7
8
9
10
11
12
13
var str='改革春风吹满地，春天来了'
alert(str.indexOf('春'))
alert(str.indexOf('春',3))//从索引号是3的位置开始往后查找
//求某个字符出现的位置以及次数
 var str = 'oabcoefoxyozzopp'
 var index = str.indexOf('o')
 var num = 0
  while (index !== -1) {
       alert(index)
        num++
         index = str.indexOf('o', index + 1)
        }
 alert('o出现的次数是' + num)

根据位置返回字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 var str = 'DENGYI'
 alert(str.charAt(3))
 for (var i = 0; i < str.length; i++) {
         alert(str.charAt(i))
   }
alert(str.charCodeAt(0))
alert(str[0])
//统计出现次数最多的字符
var str = 'abcoefoxyozzopp'
var o = {}
for (var i = 0; i < str.length; i++) {
      var chars = str.charAt(i)
      if (o[chars]) {
            o[chars]++
        } else {
             o[chars] = 1
            }
        }
var max=0
var ch=''
for(var k in o){
  if(o[k]>max){
    max=o[k]
    ch=k
  }
}
alert(max)
alert('最多的字符是'+ch)

替换字符

1
2
3
4
5
var str='DENGYIRED'
alert(str.replace('D','B'))//只替换一个
while(str.indexOf('D')!==-1){
  str=str.replace('D','B')
}

字符转换为数组

1
2
var str1='red&pink&blue'
alert(str1.split('&'))

其它方法

数据类型的赋值

js把数据类型分为简单类型和复杂类型。简单数据类型存放在栈里面，里面直接开辟一个空间存放的是值，复杂数据类型首先以十六进制在栈里面存放地址，然后这个地址指向堆里面的数据

简单类型

简单类型又叫做基本数据类型或者值类型。他们在存储时变量中存储的是值本身。简单类型包括string、number、boolean、undefined、null。前四种类型返回的都是对应的数据类型，只有null返回的是空的对象

1
2
var time = null
alert(typeof(time)) //object

简单数据类型传参

1
2
3
4
5
6
7
function fn(a) {
   a++
   alert(a)//11
      }
var x = 10
fn(x)
alert(x)//10

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在函数内对形参做任何修改，都不会影响到外部变量

复杂类型

通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date

复杂数据类型传参

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name) {
  this.name = name
}

function f1(x) {
  alert(x.name)
  x.name = '李克勤'
  alert(x.name)
}
var p = new Person('DENGYI')
alert(p.name)
f1(p)
alert(p.name)

函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象

----本文结束，感谢您的阅读。如有错，请指正。----
大哥大嫂过年好！支持我一下呗
0%