IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScrip面向对象(字符串、值类型和引用类型) -> 正文阅读

[JavaScript知识库]JavaScrip面向对象(字符串、值类型和引用类型)

一、字符串

1.创建方式:

(1)直接创建

????????var 变量名 = "字符串"

????????var str = "湘潭大学"

(2)通过String创建对象

????????var 变量名 = new String("字符串")

2.字符串默认的属性 :length,用来记录字符串的长度

????????字符串变量名.length

var str = new String("邮电大学西安大雁塔")
console.log("长度:",str.length)
console.log("位置:",str.indexOf('大学123'));
console.log(str.lastIndexOf('大'));

3.方法:

(1)根据字符返回位置

? ? A.index()of(value):返回参数value在字符串中首次出现的位置。

? ? 若返回-1,他表示没有找到value

? ? B.lastIndexOf(value):返回参数value在字符串中最后出现的位置

var str = "Hello World,Hello JavaScript";
var index = str.indexOf('o');//找到o第一次出现的位置
var num = 0;
while(index != -1){
    console.log(index);
    index = str.indexOf('o',index+1);//继续找下一个
    num++;
}
console.log("出现的次数:",num);
console.log(str.charAt(9))
console.log(str.charCodeAt(5));
console.log(str[0]);
str.forEach(element=>{
    consol.log(element)
})

(2)根据位置返回字符

? ? A.charAt(index):返回index位置上的字符

? ? B.charCodeAt(index):返回index位置上的字符的ASCII值

? ? '0'---48,'a'---97,'A'---65,''---32

? ? C.str[index]:H5中新增的方法,把字符串看作数组

? ? var o = {} ?//表明变量o是一个对象,对象保存数据的格式是

? ? {

? ? ? ? 属性名:值

? ? }

? ? 通过对象名访问属性 :

? ? ? ? 对象名.属性名

? ? ? ? 对象名['属性名']

var str = 'Apple';
var o = {}

for(var i=0;i<str.length;i++){
    var chars = str.charAt(i)
    if(o[chars]){  //表示o对象中存在chars
        o[chars]++;
    }else{
        o[chars]=1;
    }
}
console.log(o);

??

(3)其他方法

A.concat(str1,str2,...);便于连接多个字符串?

B.slice(start,[end]):切片,截取从start到end之间的字符串。若没有参数end则截取start到串末尾的字符串

C.substring(start,[end]):截取子串,作用和slice?类似,但不接受负数

D.substr(start,[]):截取从start开始的连续length的字符

E.toLowerCase():转成小写

F.toUpperCase():转成大写

G.split(sep,[,limit):将字符串按指定的分隔符分隔成数组

H.replace(str1,str2):用str2去替换str1

var s1 = "abc";
var s2 = "def";
var s3 = "123";
var str = "javascript程序设计";
console.log(s1.concat(s2,s3))

console.log(str.slice(4));//截取4到末尾的所有字符
console.log(str.slice(4,10));//截取4到10之间末尾的所有字符
console.log(str.slice(-1));//截取最后一个字符

console.log(str.substr(0,10));
console.log(str.toLowerCase());//转成小写
console.log(str.toUpperCase());//转成大写

var phone = "130-1234-5678"

var arr = phone.split('-');

arr.forEach(elem=>{
    console.log(elem)
})

// arr.forEach(function(elem){
//     console.log(elem)

// })

console.log(str.replace('java','action'))

二、值类型和引用类型

1.值类型:简单的数据类型(String,Number,Boolean,undefined,null)

2.引用类型:就是对象,特点:

var student = {

name:'关羽',

gender='男 ',

age='28'

};

var s2 = student;//将对象的地址赋值给s2

3.函数的参数是对象,若在函数体中修改了对象的属性值,则在函数外部访问该对象时,得到的是修改之后的对象的值。

function f1(obj){   //obj是形参
    obj.name = "张三";
}
var obj2 = {name:'李四',age:56}  //obj2是实参
console.log("函数调用前的对象:",obj2)

f1(obj2);       //obj = obj2

console.log("函数调用后的对象:",obj2)
console.log(obj2.name)

??

?三、JavaScript的面向对象编程

1.面向过程:核心是解决问题的过程

2.面向对象:核心是对象。主要关注每个对象在解决问题过程中的行为

(1)封装性 :对象是属性(静态特征)和行为(动态特征)的结合体(封装体)。

(2)继承性:父类(基类)的属性和行为可以派生到子类中。子类不需要重复定义。

(3)多态性:同一个消息传递给不同的对象,最终得到的结果不同。

3.类:具有相同属性和行为的对象的抽象。

4.对象:是类的实例(是类的具体体现)

5.ES5中定义类的方法:通过构造函数实现

function Student(name,age){     //构造函数,建议首字母大学写
    this.name = name;
    this.age = age;
}

var s1 = new Student('刘备',32);//s1就是对象
var s2 = new Student('张三',22);

6.ES6中定义类的方法

class 类名{
? ? ? ? constructor([参数]){? ? ? ? //构造方法
????????????????方法体;
? ? ? ? }
}

(1)创建对象:

var 对象名 = new 类名([参数])

强调:在ES6构造方法不能显示调用

注意:this.name中‘name’是对象的属性

(2)对象成员(包括属性和方法)的访问

对象名.属性名

对象名.方法名([参数])

class Student{//实验class关键字定义类
    constructor(name,age){//构造方法:用来初始化对象成员
        this.name = name;
        this.age = age;
    }
    study(){//成员方法(对象的行为)
        console.log("学生"+this.name+"在学习")
    }
    sleep(){
        console.log("学生"+this.name+"在休息")
    }
}
var s1 = new Student('孔明',32);//s1就是对象
var s2 = new Student('张三',22);

console.log(s1.name)
console.log(s2.name)

s1.study();
s1.sleep();

s2.study();
s2.sleep();

?

?案例:设计雇员Employee类,记录雇员的情况,包括姓名,年龄,年薪,受雇时间,要求定义MyDate类作为受雇时间,其中包括工作的年月日,并用相应的方法(构造方法,显示信息的方法)对Employee类进行设置

class Mydate{
    constructor(year,month,day){
        this.year = year;
        this.month = month;
        this.day = day;
    }
    show(){
        console.log("受雇时间:"+this.year+'-'+this.month+'-'+this.day)
    }
}
class Employee{
    constructor(name,salary,workData){
        this.name = name;
        this.salary = salary;
        this.workData = workData;
    }
    disp(){
        console.log("姓名:"+this.name);
        console.log("年薪:"+this.salary);
        // console.log("受雇时间:");
        this.workData.show();
    }
}
var work1 = new Mydate(2021,6,15)
var e1 = new Employee('张三',320000,work1);
e1.disp();

?7.继承:

(1)父类:又称为基类或超类,被继承的类

(2)子类:又称为派生类。有父类派生而得到的类

(3)继承的实现:extends? ? ? ?

class 子类名 extends 父类名 {
    constructor(){
    }
    其他成员方法
}

(4)super关键字:代表父类,用于调用和访问父类的成员

? ? ? ? A.调用父类的构造方法:在子类的构造方法中调用父类的 构造方法。在继承中,创建子类对象时必须西安调用父类的构造方法,然后再调用子类的构造方法,并且父类构造方法的调用必须是子类构造方法中的第一条语句。

? ? ? ? B.super([参数]):调用父类的构造方法

? ? ? ? C.调用父类的普通方法:super.方法名

//父类 
class Father{
    constructor(name,sex){  //无参的构造方法
        this.name = name;
        this.sex = sex;
    }
    money(){
        console.log(100)
    }
}

class Son extends Father{   //定义一个子类
    constructor(name,sex){
        super('李四','男');//父类构造方法的调用必须是子类构造方法中的第一条语句
        this.name = name;
        this.sex = sex;
    }
    disp(){
        console.log("姓名:",this.name);
        console.log("性别",this.sex)
    }
}

var s1 = new Son("张三",'男');
s1.money();//继承了父类的money方法
s1.disp();//调用自己的方法

8.实例成员和静态成员

(1)实例成员:对象成员

(2)静态成员:所有对象所共享的成员,不属于某一个具体的对象,又称为类成员

? ? ? ? 类名.成员名? ? ? ? ? ---ES6

? ? ? ? 构造方法名.成员名? ? ? ? ---ES5

class Student{
    constructor(name){
        this.name = name;
    }
    show(){
        console.log("学校:",Student.school);
        console.log("姓名:",this.name);
    }
}
Student.school = "邮电大学";        //      静态成员

var s1 = new Student("张三");
var s2 = new Student("刘三");
s1.show();
s2.show();

??

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-14 21:32:45  更:2021-11-14 21:35:05 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/10 18:47:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码