記事とコードは [Github ウェアハウス: https://github.com/timerring/front-end-tutorial ]にアーカイブされています。または、 javascriptに返信することで公開アカウント [AIShareLab]を取得することもできます。

記事ディレクトリ

物体

物体

オブジェクトは JavaScript データ型の一種であり、数値型、文字列型、ブール型、未定義についてはすでに学習しました。オブジェクトデータ型は、データのコレクションとして理解できます。これは、属性とメソッドの 2 つの部分で構成されます。

文法

Object 型の変数の宣言は、以前に Number 型または String 型の変数を宣言した場合と基本的に変わりません。

    // 声明字符串类型变量
    let str = 'hello world!'
    
    // 声明数值类型变量
    let num = 199

    // 声明对象类型变量，使用一对花括号
    // user 便是一个对象了，目前它是一个空对象
   // {} 是对象字面量
    let user = {
    
    }

プロパティとアクセス

データ記述情報は属性と呼ばれ、人の名前、身長、年齢、性別など、一般に名目的なものです。

属性は、属性名と値を含むペアで表示され、英語で:区切られます。
複数の属性を,区切るには英語を使用してください
プロパティはオブジェクトに付加される変数です
""属性名は使用することも、を使用することもできます''が、名前にスペースやダッシュなどの特殊な記号が含まれていない限り、通常は省略されます。

    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
    
    
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }

オブジェクトを宣言し、いくつかのプロパティを追加した後、.またはを使用して[]、オブジェクト内のプロパティに対応する値を取得できます。これをプロパティアクセスと呼びます。

  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      
      
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    };
    
    // 访问人的名字
    console.log(person.name) // 结果为 小明
    // 访问人性别
    console.log(person.gender) // 结果为 男
    // 访问人的身高
    console.log(person['stature']) // 结果为 185
   // 或者
    console.log(person.stature) // 结果同为 185
  </script>

拡張: オブジェクトに属性を動的に追加することもできます。動的追加は直接定義と同じですが、構文はより柔軟です。

    // 声明一个空的对象（没有任何属性）
	let user = {
    
    }
    // 动态追加属性
    user.name = '小明'
    user['age'] = 18
    
    // 动态添加与直接定义是一样的，只是语法上更灵活

メソッドと呼び出し

データの動作に関する情報はメソッドと呼ばれ、その本質は関数です。

メソッドは、メソッド名と関数で構成され、次のように区切られます。
複数の属性を,区切るには英語を使用してください
メソッドはオブジェクトに付加された関数です
メソッド名は、スペース、ダッシュなどの特殊な記号が使用されない限り、""またはを使用できますが、通常は省略されます。''

  <script>
    // 方法是依附在对象上的函数
    let person = {
      
      
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
      
      
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
      
      
        console.log('我跑的非常快...')
      }
    }
  </script>

オブジェクトを宣言し、いくつかのメソッドを追加した後、.またはを使用し[]てオブジェクト内の関数を呼び出すことができます。これはメソッド呼び出しと呼ばれます。

  <script>
    // 方法是依附在对象上的函数
    let person = {
      
      
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
      
      
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
      
      
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()

  </script>

拡張: オブジェクトにメソッドを動的に追加することもできます。動的追加は直接定義と同じですが、構文はより柔軟です。

  <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
	let user = {
      
      }
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      
      
      console.log('移动一点距离...')
    }
  </script>

注: 属性であってもメソッドであっても、同じ名前が同じオブジェクト内に存在する場合、後者が前者をオーバーライドします。

マルチワード属性または -etc. 属性

マルチワード属性やze-などの属性の場合、ドット演算は使用できません。一重引用符と二重引用符の両方を
使用できます。对象[‘属性’]

let person = {
    
    
	'user-name' : 'timerring',
}

console.log(person.user-name) // NaN
console.log(person['user-name']) // timerring

ヌル

Null は JavaScript のデータ型でもあり、通常は存在しないオブジェクトを表すためにのみ使用されます。typeof を使用してその型を検出すると、結果はになりますobject。

オブジェクトを横断する

オブジェクトには配列と同じ長さのプロパティがないため、長さを決定できません。オブジェクトには順序のないキーと値のペアが含まれます (コンテキストには影響しません)。これは、配列内の通常の添え字とは異なり、不規則です。

  <script>
    // for in 我们不推荐遍历数组
    let arr = ['pink', 'red', 'blue']
    for (let k in arr) {
      
      
      console.log(k)  // 数组的下标 索引号  但是是字符串类型的 '0'
      console.log(arr[k])  // arr[k]
    }
    // 1. 遍历对象 for in  
    let obj = {
      
      
      uname: 'pink老师',
      age: 18,
      gender: '男'
    }

    // 2. 遍历对象
    for (let k in obj) {
      
      
      console.log(k) // 属性名  'uname'   'age'
      // console.log(obj.k)
      // 翻译过来就是：console.log(obj.'uname') 实际不能这么用，可以采用另一种方法：
      // console.log(obj['uname'])   'uname'  === k
      console.log(obj[k])  // 输出属性值  obj[k]
    }
  </script>

⚠for in は、k が文字列型であるため、配列の走査を推奨しません。
覚えておいてください:kオブジェクトの属性名を取得するには、对象名[k]属性値を取得します。

組み込みオブジェクト

ここで使用したものは実際には JavaScript の組み込みオブジェクトであることを思い出してください。このオブジェクトにはメソッドが呼び出されており、このメソッドを呼び出しconsole.logます。オブジェクトに加えて、JavaScript には他の組み込みオブジェクトもありますconsoleloglogconsole.log()
console

数学

Mathこれは数学オブジェクトと呼ばれる JavaScript の組み込みオブジェクトであり、プロパティと多くのメソッドの両方が含まれています。

属性

Math.PI、円周率を取得

// 圆周率
console.log(Math.PI);

方法

Math.random()：0から1までの乱数（0を含み1は含まない） [0, 1）
Math.ceil(3.4)：小数部を切り捨て、整数部に1を足します（切り上げ）
Math.floor(4.68): 小数部分を破棄し、整数部分は変更しません。
Math.round(4.849)：四捨五入
Math.max(10, 21, 7, 24, 13): 一連の数値の最大のものを見つけます
Math.min(24, 18, 6, 19, 21): 一連の数値の最小値を見つけます
Math.pow(4, 2) : 4の2乗を求めます。
Math.sqrt(16): 平方根を求めます

テスト: https://ks.wjx.top/vj/tHu7X7y.aspx

JavaScript オブジェクトの基本