JS中的String 对象及其属性（方法）

Posted 2023-04-23

参考技术A String 对象用于处理文本（字符串）：

        参数是要存储在 String 对象中或转换成原始字符串的值 ；

        通过构造函数的方式也可以把数字类型转成字符串类型； 

         let str = new String(123456);

         console.log(str);

         字面量的方式去创建一个字符串 

        let str = 'he k' 

1、属性   length  字符串的长度 

        整个字符串（无论是内部的空格还是外部的空格）都算成长度 

        console.log(str.length); 

        字符串有length属性 也可以被遍历 

         for(var i=0;i<str.length;i++)

            console.log(str[i]);

2、 charAt() 返回在指定位置的字符（注：字符串中第一个字符的下标是0） 

        如果写的索引位置找不到对应的字符 会返回一个空字符串 

         let a = str.charAt(6);

        console.log(a); 

3、concat()    连接字符串 

         会返回一个新的拼接后的字符串 

          let newstr = str.concat('itty');

           console.log(newstr);

4、 replace()    用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 ；

       replace会把第一参数（第一个参数是属于原字符串的字符）替换成第二个参数里面内容  

        原来的字符串不会受到影响，会返回一个新的替换后的字符串 

         let str = "hello world";

        let a = str.replace('world','kitty'); 

          console.log(a,str); 

         let str = 'abc123qwe456'; 

 5、/\d/正则表达式 代表字符串里面的第一个数字替换成nnn 

         /\d+/ 表示匹配字符串里面的所有数字当成一个整体替换成nnn 

         let a = str.replace(/\d+/,'nnn') 

        因为/\d+/ 这段正则不是全局的，所以只会改变第一个匹配项（123整体） 

        因为/\d/ 这段正则不是全局的，所以只会改变第一个匹配项（1） 

         let a = str.replace(/\d/,'n') 

        想让str中所有的数字都变成n 

         正则里面的g表示全局的意思 str.replace(/\d/g,'n') 可以把字符串里面的每一个数字都变成n 

         正则里面的g表示全局的意思 str.replace(/\d+/g,'n')

         把字符串里面的所有数字当成一个整体都变成n    

         let a = str.replace(/\d/g,'n') 

         console.log(a); 

         sort会对原数组造成影响 

         let arr = [4,5,1,3]

         let newarr = arr.sort();

         console.log(arr[0]);

         let str = 'abcdefg' 

        eg： 通过索引找到e charAt方法， 再写一个字符串 aaaa 拼接到str上 并答应出来新的字符串 ，  把abcd替换成hello 并把替换后的字符串打印出来；

         let str = 'abcdefg';

         console.log(str.charAt(4));

         let str2 = 'aaaa';

         let newstr = str.concat(str2);

        console.log(newstr);

        let rstr = str.replace('abcd','hello')

         console.log(rstr);

         function fn()

       arguments 参数集合 是一个类数组  

        类数组不具有数组的方法 比如push 

        arguments.push(5) 

       es6里面提供了一个方法 Array.from

       使用Array.from把类数组转成真正的数组，这样就可以使用数组的方法了 比如push pop 

         let arr = new Array() 

        let arr = Array.from(arguments)

        arr.push(5)

         console.log(arr);

         fn(1,2,3,4)

6、split()  把一个字符串分割成字符串数组 

        数组转字符串 

        let arr = [1,2,3];

        let str = arr.join('-');

        console.log(str); 

         let str = 'hello'; 

         split()不加参数 会把hello这个整体放到数组当中 

         str.split('') 把hello这个字符串 用空字符串分割 转化为数组 

        str.split(',') 如果用字符串中不存在的字符分割 那么还是会把整体放到数组中 

        str.split('e') 用e当作分割符 把字符串分割成数组 ['h','llo'] 

         str.split('l') 用l当作分割符 会变成空字符串 因为有两个l 所以会分割成用['he', '', 'o'] 

        let arr = str.split('l');

        console.log(arr);

7、 indexOf()    返回某个指定的字符串值在字符串中首次出现的位置(★首次很重要) 

         let str = 'hello'

       str.charAt(1) => e 

         和数组的indexOf一样 

        let index = str.indexOf('l');

         console.log(index);

 8、lastIndexOf()    返回一个指定的字符串值最后出现的位置 

         let str = 'hello'

         let index = str.lastIndexOf('l');

         console.log(index);

 9、 match()  可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配 

         let str = 'he123llo456'; 

         str.match('o') 使用match来检索o 可以知道o在字符串内的信息，以数组的形式返回

        比如o所在的索引，o所在的字符串和o的长度 

        let a = str.match('o')

         console.log(a);

         /\d+/ 代表匹配一段整体的数字 

         /\d/代表匹配一个数字 g代表全局

        总体来说就是 在str字符串全局内 去查找一个一个的数字

        会以一个数组的形式方式

        不写g 只会返回第一个  写g 代表全局 会查找所有 

        let a = str.match(/\d+/g);

        console.log(a); 

10、 toLowerCase()    把字符串转换为小写 

         let str = "HELLO"

         let str2 = str.toLowerCase();

         console.log(str2);

 11、 toUpperCase()    把字符串转换为大写 

         let str = 'hello'

        let str2 = str.toUpperCase();

        console.log(str2);

深入理解js面向对象中的prototype

一、基本使用方法

   prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“继承”的效果。 

   具体来说，prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。

    对于javascript本身而言是基于对象的，任何元素都可以看成对象。然而类型和对象是不同的，而我们所讲的prototype属性即是基于类型的一种属性。对于prototype的基本使用就如对象的创建及属性赋值一样的简单。直接通过赋值操作即可完成属性的创建。如：

var objectRef = new Object();  // 创建一个最基本的js对象

一个名为property的属性即可如下进行创建：

objectRef.property = 6;
objectRef["property"] = 6;

对于prototype的赋值也是类似，如下所示：

//首先创建一个基本的AClass类型

var AClass = function() 

   this.property = 5; 

;

//可以通过prototype属性来为该类型新增属性或方法

AClass.prototype.Method = function() 

    alert(5);

所有对象本身都可以有prototype属性，它本身也是对象。如此循环下去就形成一个prototype链，这个链当遇到链中的prototype为null时即中止。（Object的默认prototype是null）。

    如上代码var objectRef = new Object()，这个对象的prototyp是null, 所以objectRef的prototype链只包含一个对象Object.prototype。

    分析如下的代码结构，可以看出类型MyClass2本身并没有定义testNumber，但通过prototype属性将MyClass1的所有定义都继承下来了，而且还继承了Object中的toString方法。因此该prototype的链包含3个。

<script>

    var MyClass1 =function(formalParameter) 

        this.testNumber =formalParameter;

    ;

 

    var MyClass2 = function(formalParameter)

        this.testString  = formalParameter;

    ;

 

    MyClass2.prototype = newMyClass1(9);

 

    var myObject2 = newMyClass2("Hello World!");

    alert(myObject2.testString);//Hello World!

    alert(myObject2.testNumber); //9

    alert(myObject2.toString); //function toString() 

</script>   

二、JS中的面向对象

JS中最简单的对象即为内嵌型的Object数据类型，如下所示，我们可以新建一个新的对象，并为其添加几个属性。

var obj = new Object();

obj.x = 1;

obj.y = 2;

可以用如下的图示来表示该对象。该对象中有两上属性，同时还包含一个隐含的prototype对象。

Obj
x	1
y	2
Object.prototype
constructor	Object

当然我们也可以构造如下带有构造函数的类，并生成其对象。

var AClass = function() 

    this.x = 1;

    this.y = 2;



var obj = new AClass();

此时，该对象的内部结构即如下图所示。其中包含了一个构造函数。

obj
x	1
y	2
AClass.prototype
constructor	AClass
Object.prototype
(constructor)	Object

在js中，每个对象都可以继承自另外一个其它的对象，我们可以称之为引用原型。当我们访问一个属性时，如果能通过对象本身直接找到，则返回，否则它会向引用原型中追溯，直到根部prototype(即object)。如下所示：

Object.prototype.inObj = 1;

var A = function() 

    this.inA = 2;



A.prototype.inAProto = 3;

var B = function() 

    this.inB = 4;



B.prototype = new A();

B.prototype.inBProto = 5;

var x = new B();

alert(x.inObj + “,” + x.inA + “,” + x.inAProto + “,” + x.inB + “,” +x.inBProto); //1, 2, 3, 4, 5

对于上述的代码，创建一个对象x，它所生成的prototype链结构如下：

对应生成的对象x的内部结构图如下所示：

x
inB	4
B.prototype
constructor	B
inA	2
inBProto	5
A.prototype
(constructor)	A
inAProto	3
Object.prototype
(constructor)	Object
inObj	1

三、prototype的继承使用

1、将ClassA的一个实例赋值给ClassB，则 ClassB就继承了ClassA的所有属性。

<script>

    var ClassA = function() 

        this.a = "a";

    ;

    var ClassB = function() 

    this.b= "b";

    ;

 

    ClassB.prototype = new ClassA();

    var objB = new ClassB();

    alert(objB.a); // a

    alert(objB.b); // b

</script>

从上述的变量输出结果，可以看出本身ClassB是没有属性a的，但在创建的对象中调用objB.a时却输出了a，说明在执行ClassB.prototype= new ClassA();后，ClassB继承了ClassA的所有属性。

2、js的原型继承是引用原型，而不是复制原型。当修改原型时会导致所有的实例变化。

<script>

     var ClassA = function() 

     this.a = "a";

     ;

 

     var ClassB = function() 

         this.b = "b";

     ;

     ClassB.prototype = new ClassA();

     var objB = new ClassB();

     alert(objB.a); // a

     ClassB.prototype.a ="changed";

     alert(objB.a); //changed

</script>

    由上述代码可以看出，即使对象创建于原型修改之前，但仍然会生效。这就印证了js是引用原型。即使是在对象创建之后修改，仍然会对之前生成的对象生效。

3、每个子类对象都执行同一个原型的引用，所以子类对象中的原型成员实际是同一个

<script>

    var ClassA = function() 

         this.a = "a";

         this.Method = function() 

        alert("ClassA");

         

    ;

    var ClassB = function() 

         this.b = "b";

    ;

    ClassB.prototype = new ClassA();

    var objB1 = new ClassB();

    var objB2 = new ClassB();

    alert(objB1.a == objB2.a); //true

    alert(objB1.b == objB2.b); //true

    alert(objB1.Method ==objB2.Method);

</script>

4、子类对象的写操作只访问子类对象的成员，相互之间不产生影响。写一定是写子类，读则要看是否子类中有，若有则读子类，若无则读原型。

<script>

    var ClassA = function() 

     this.a = "a";

    ;

    var ClassB = function() 

         this.b = "b";

    ;

    ClassB.prototype = new ClassA();

    var objB1 = new ClassB();

    var objB2 = new ClassB();

    objB1.a = "change";

    alert(objB1.a);  // change

    alert(objB2.a);  // a

</script>

由上述代码分析，其中由于进行了objB1.a进行了重新改变，所以其值在接下来进行了改变，但它不会影响到objB2对象。但若是原型发生了变化，则如2所示，它下面的所有实例均会发生变化。

5、构造子类时，原型的构造函数不会被执行

<script>

    var ClassA = function() 

        alert("ClassA");

        this.a = "a";

    ;

    var ClassB = function() 

        alert("ClassB");

        this.b = "b";

    ;

    ClassB.prototype = new ClassA();// ClassA

    var objB1 = new ClassB();  // ClassB

    var objB2 = new ClassB();  // ClassB

</script>

由此可以看出，在构造子类时并没有象java中那样需要调用父类的构造函数。

6、在子类对象中访问原型的成员对象，会影响到其它对象

<script>

    var ClassA = function() 

        this.a = [];

    ;

    var ClassB = function() 

        this.b = "b";

    ;

    ClassB.prototype = new ClassA();

    var objB1 = new ClassB();

    var objB2 = new ClassB();

    objB1.a.push(1,2,3);

    alert(objB2.a); // 1,2,3

</script>

由此可以看出，在子类对象中访问原型的成员对象后，由于采用的是引用原型方式，其实它和ClassB.a.push实现的是同样的功能。所以其它的子类也会跟着变化。