JSレビュー(Day02)

オブジェクト指向

一種のプログラミングアイデアであり、この種のアイデアを実現するプログラミング言語であり、オブジェクト指向とも呼ばれます。

3つの特徴:

カプセル化:内部の詳細を非表示にし、外部の操作インターフェイス(オブジェクトのメソッド)のみを開発します

継承:オブジェクトは、別のオブジェクトのメンバーを継承し、他のオブジェクトを変更せずに展開できます。

ポリモーフィズム:異なるオブジェクトに作用する同じ操作は、異なる結果を生成します。(jsの変数ストレージ)

オブジェクト:

定義:

{}によって実現されるオブジェクトのメンバーはキーと値のペアであり、複数のメンバーは(コンマ)で区切られます。

空のオブジェクト:

var o1 = {
    
    }

単一メンバーオブジェクト

var o2 = {
    
    
        name:"jack"
    }

複数のメンバーオブジェクト

var o3= {
    
    
        name:"jack",
        age:18,
        sex:'男'
        ......
    }

メンバーとメソッドを持つオブジェクト

var o4 ={
    
    
	name:'angle',
	age:25,
	gender:'女',
	say:function(){
    
    
		console.log('hello')
	}
}

オブジェクトのメンバー、オブジェクト名、メンバー名へのアクセス。

オブジェクトメンバーのトラバーサル

のために…完了するために

for(obj in o4)

強調:オブジェクトのコピー(複製)

浅いコピー:

元のオブジェクトのショートカットがコピーオブジェクトにコピーされ(オブジェクト自体はコピーされません)、2つのオブジェクトは同じメモリスペースを指します

**利点:**メモリスペースを節約できます

ここに画像の説明を挿入します

ディープコピー:

実際にオブジェクトのコピーを作成し、このコピーを別のオブジェクトにコピーします

ここに画像の説明を挿入します

// 深拷贝
function deepCopy(obj){
    
    
    var p2 = {
    
    }
    for(var k in obj){
    
    
        //遍历obj的成员,判断obj[k]的类型,用到了递归
        p2[k] = (typeof obj[k] === 'object')?deepCopy(obj[k]):obj[k]
    }
    return p2
}

var p3 = {
    
    
    name:'jack',
    age:18,
    subject:{
    
    
        name:['html','css','javascript']
    }
}

var p4 = deepCopy(p3)
console.log(p3 === p4)

p4.name = '猪猪'
console.log(p3)
console.log(p4)

コンストラクタ

これは、オブジェクトを作成するjavascriptの別の方法であり、{}とは異なります。同じ特性を持つ複数のオブジェクトを作成できます。

function factory(age,name){
    
    
    var obj = {
    
    }
    obj.name = name;
    obj.age = age;

    return obj;
}

var o1 = factory('曹操',24)
var o2 = factory('刘备',30)

console.log(o1)
console.log(o2)

ここに画像の説明を挿入します

JavaScript組み込みコンストラクター

new 构造函数名([形参1,形参2])

Object:new Object()
String:new String('123456')
Date:new Date('2021-03-12')
......

オブジェクトのコンストラクターにアクセスします。

オブジェクトを介したコンストラクター

对象名.constructor

プライベートメンバー

varで定義された変数であるコンストラクターでは、これをプライベートメンバーと呼び、プライベートメンバーに对象名.成员名アクセスできません。

var name = 'javaScript'

プライベートメンバーにアクセスするには、関数をコンストラクターにネストして、プライベートメンバーの値を返す必要があります

function Person(){
    
    
    var name = 'javaScript'
    //必须加this
    this.getName = function(){
    
    
        return name
    }
}
var o1 = new Person();
console.log(o1.getName())

このキーワード

主に関数で使用されます。関数が呼び出される環境によって、そのポイントは異なります。

1. newキーワードを使用して関数をコンストラクターとして呼び出す場合:

コンストラクター内のこれは、新しく作成されたオブジェクトを指します

ここに画像の説明を挿入します

この時点で、これはO1を指します

2.関数名を使用して関数を直接呼び出す場合、関数内のこれはグローバルオブジェクトを参照します

ブラウザのこれはウィンドウオブジェクトを指しています

3.関数がメソッドとして呼び出される場合、これはオブジェクトを指します。

これの方向を変える

apply()

コール()

function method(){
    
    
    console.log(this.name)
}
method.apply({
    
    name:'张三'})
method.call({
    
    name:'李四'})

最初のこれは張三を指し、2番目のこれはLiSiを指します

一般的に使用される組み込みオブジェクト

文字列:文字列オブジェクト

番号:数値オブジェクト

数学:数学演算オブジェクト

日付:日付と時刻のオブジェクト

配列:配列オブジェクト

プロトタイプと継承

関数が作成されるたびに、オブジェクトが続き、関数はプロトタイププロパティを介してオブジェクトを指します。

プロトタイプ:プロトタイプオブジェクトとも呼ばれ、メソッドに対応するオブジェクトを指します

プロトタイプを介して継承を実装する方法は?

1.従来の継承では、オブジェクトには特定のプロパティやメソッドはありませんが、別のペアから取得できます。

function Person(name){
    
    
    this.name = name
}
Person.prototype.sayHello = function(){
    
    
    console.log('Hello'+this.name)
}
var p1 = new Person('关羽')
p1.sayHello()

ここに画像の説明を挿入します

2.プロトタイプオブジェクトを置き換えて継承を実現し、コンストラクターのプロトタイプオブジェクトを新しいオブジェクトに置き換えます。そうすると、コンストラクターに基づいて作成されたオブジェクトが新しいプロトタイプオブジェクトを継承します。

function Person(){
    
    }

Person.prototype = {
    
    
    sayHello:function(){
    
    
        console.log('你好,我是新对象')
    }
}

var p = new Person()
p.sayHello()

ここに画像の説明を挿入します

3. object.create()を使用して継承を実現します

var obj = {
    
    
    sayHello:function(){
    
    
        console.log('我是一个带有sayHello方法的对象')
    }
}
//相当于newObj继承了obj的功能
var newObj = Object.create(obj)

newObj.sayHello()
// __proto__是寻找它的原型对象
console.log(newObj.__proto__ === obj)

ここに画像の説明を挿入します

プロトタイプチェーン

ここに写真の説明を書いてください

img

オブジェクトにはプロトタイプオブジェクトがあり、プロトタイプオブジェクトにも独自のプロトタイプオブジェクトがあります。このようなチェーン構造は、プロトタイプチェーンと呼ばれます。

関数の本質はオブジェクトであるため、関数にはコンストラクターもあります。すべての組み込みオブジェクトのコンストラクターは関数関数です。

console.log(String.constructor)
console.log(Number.constructor)

ここに画像の説明を挿入します

プロトタイプオブジェクトのプロトタイプオブジェクト:オブジェクトのプロトタイプは、对象.constructor.prototypeコンストラクターの属性がループを形成するコンストラクターを指し、プロトタイプオブジェクトのプロトタイプにアクセスできないため、を介して取得されます。この問題を解決するために、一部のブラウザは__proto__、プロトタイプオブジェクトのプロトタイプを指す新しいプロパティをオブジェクトに追加しました(Firefox、Google)

プロトタイプチェーンの構造

カスタム関数、およびObject、String、Numberなどの組み込み関数はすべて、関数関数自体によって作成される関数関数によって作成されます。

各コンストラクターにはプロトタイプオブジェクトがあり、コンストラクターはプロトタイプ属性を介してプロトタイプオブジェクトを指し、プロトタイプオブジェクトはコンストラクター属性を介してコンストラクターを指します。

コンストラクター関数によって作成されたインスタンスオブジェクトは、コンストラクター関数のプロトタイプオブジェクトを継承し__proto__インスタンスオブジェクトのプロパティを介してプロトタイプオブジェクトに直接アクセスできます。

コンストラクターのプロトタイプオブジェクトはObjectのプロトタイプオブジェクトを継承し、Objectのプロトタイプオブジェクトの__proto__プロパティはnullです。

instanceof演算子は、オブジェクトのプロトタイプチェーンに、特定のコンストラクターのプロトタイププロパティによって表されるオブジェクトが含まれているかどうかを検出するために使用されます。

アレイ

同じタイプのデータのコレクション

配列を作成する

配列オブジェクトを使用して作成

var arr = new Array()

var arr = new Array( 'a1'、 'a2'、 'a3')

[]を使用して配列を作成します

var tmp = [1,2,3]

アレイの基本操作

配列の長さを取得します

Arrayオブジェクトを提供配列の長さを格納するプロパティを、。

配列の長さ=配列インデックス+1

アレイへのアクセスとトラバーサル

配列要素にアクセスする

数组名[索引]

トラバース

for…in…ループを完了します

アレイの追加、削除、変更

追加:配列名.push(データ)配列名.unshift(データ)

変更:配列名[インデックス] =値

削除:配列名を削除[添え字]

配列の並べ替え

バブルソート:

// 冒泡排序 12 升序排列
var arr = [10,22,1,24,4,2,13,5,7,3,0,99]
console.log('待排序数组是'+arr)

for(var i=0;i<arr.length;i++){
    
    
    for(var j=0;j<arr.length-i;j++){
    
    
        if(arr[j]>arr[j+1]){
    
    
            // var flag = arr[j+1];
            // arr[j+1] = arr[j];
            // arr[j] = flag
            [arr[j],arr[j+1]] = [arr[j+1],arr[j]]
        }
    }
}
console.log("排序后的数组为"+arr)

ここに画像の説明を挿入します

挿入ソート:

最後の要素から前方にトラバースします

// 插入排序
var arr = [12,1,15,46,23,45,34,22,345]
console.log('需排序数组'+arr)

for (var i = 0;i<arr.length;i++){
    
    
    for(var j = i;j>0;j--){
    
    
        if(arr[j-1]>arr[j]){
    
    
            [arr[j-1],arr[j]] = [arr[j],arr[j-1]]
        }
    }
}

console.log('排序后的为'+arr)

ソートを選択

for(var i=0;i<arr.length;i++){
    
    
    var min = arr[i];
    var k = i;
    for(var j=i+1;j<arr.length;j++){
    
    
        if(min > arr[j]){
    
    
            min = arr[j];
            k = j;
        }
    }
    if(k !=i){
    
    
        [arr[i],arr[k]] = [arr[k],arr[i]]
    }
}

一般的に使用される配列操作方法

スタックとキューのメソッド:

push()-配列最後に新しい要素追加し配列の新しい長さを返します

unshift()-配列先頭に新しい要素追加し配列の新しい長さを返します

pop()-配列の末尾から要素削除し、配列がnullの場合はundefinedを返します

shift()-配列の先頭から移動して要素を返します。配列がnullの場合は、undefinedを返します。

検索方法:

include()-配列に要素があるかどうかを判別し、ある場合はtrueを返し、ない場合はfalseを返します。

indexof()-指定された要素の最初のインデックスを返します

lastIndexOf()-配列内の指定された要素の最後のインデックス値(添え字)を返します

Array.IsArray()-渡された値が配列であるかどうかを判断し、戻り値:yes -true、not -false

配列から文字列へ:

join()-配列内のすべての要素を文字列に接続します

toString()-配列を文字列に変換します

その他:

sort()-配列をソートして配列を返します(デフォルトの昇順)

fill()-配列内の指定された添え字範囲内のすべての要素を固定値で埋めます

reverse()-配列内のすべての要素の位置を逆にします

splice()-指定された範囲内の配列に要素を追加または削除します

cancat()-2つ以上の配列を組み合わせる

スライス()-指定した範囲の配列を新しい配列にコピーします

おすすめ

転載: blog.csdn.net/rraxx/article/details/114728694