ES5の重要な機能

バージョン認識
  • ECMAスクリプト(ECMA組織によって開発された)が仕様であり、JavaScriptが実装です。
  • ES5(2009)、ES6(2015)、ES7(2016)
  • IEブラウザにはES5のサポートの問題がいくつかあります。

1.厳密モード( 'use strict'):Javascriptをより厳密な文法条件で実行する

  • 変数:宣言にはvarを使用する必要があります
  • オブジェクト:属性を繰り返すことはできません
  • 関数:これがウィンドウオブジェクトを指すことができないカスタム関数、eval関数にスコープを追加します

2. json:テキスト情報を保存および交換するための構文

  • json.stringFy():javascriptオブジェクト/配列からjsonテキストへ。
  • json.parse():jsonテキストをjavascriptオブジェクト/配列に変換します。

3.オブジェクト拡張

  • 1.Object.create(prototype、[descriptors]):指定したオブジェクトをプロトタイプとして新しいオブジェクトを作成します
  var obj = {
    
    firstName:"张",lastName:'三'};
  var newObj = null;
  // 一:ES5构建对象:Object.create
  newObj = Object.create(obj,{
    
    
    sex:{
    
    
      value:"男",
      writable:true,// 可修改
      configurable:true,// 可删除
      enumerable:true // 可枚举
    }
  });

[外部リンク画像の転送に失敗しました。ソースサイトにリーチ防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします(img-AEmtv36D-1583675311642)(C:\ Users \ ASUS \ Desktop \ md notes \ Silicon Valley front end \ 5 standard Integration \ ES_567 \ assets \ 1583551448985.png)]

  • 2.Object.defineProperties(object、descriptors):指定されたオブジェクトの複数のプロパティを拡張します
var strongObj = {
    
    
    firstName:"张",
    lastName:'三',
    get fullName(){
    
    
      return this.firstName+this.lastName;
    },
    set fullName(name){
    
    
      var arr = name.split("");
      this.firstName = arr[0];
      this.lastName = arr[1];
    }
  };
  
  var obj = {
    
    firstName:"张",lastName:'三'};
  var strongObj1 = {
    
    firstName:"张",lastName:'三'};
  // 二:ES5增强对象:Object.defineProperties(添加存取器/计算属性)
  Object.defineProperties(strongObj1,{
    
    
    fullName:{
    
    
      get:function(){
    
    
        return this.firstName+this.lastName;
      },
      set:function(name){
    
    
        var arr = name.split("");
        this.firstName = arr[0];
        this.lastName = arr[1];
      }
    }
  });

[外部リンク画像の転送に失敗しました。ソースサイトにリーチ防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします(img-B6MWwWkf-1583675311645)(C:\ Users \ ASUS \ Desktop \ md notes \ SiliconValleyフロントエンド\ 5標準統合\ ES_567 \ assets \ 1583551569778.png)]

4.配列拡張

  • 索引:Array.prototype.indexOf / lastIndexOf(値)
  • 配列历:Array.prototype.forEach(function(item、index){})
  • 映射:Array.prototype.map(function(item、index){})
  • 過滤:Array.prototype.filter(function(item、index){})
  var arr = [6,2,4,6,1,6];
  console.log(arr.indexOf(6),arr.lastIndexOf(6));
  arr.forEach(function(item){console.log(item)});
  console.log(arr.map(function(item){return item+10}));
  console.log(arr.filter(function(item){return item>4}));

[外部リンクの画像転送に失敗しました。ソースサイトにリーチ防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします(img-jE9kUuVI-1583675311646)(C:\ Users \ ASUS \ Desktop \ md notes \ Silicon Valley front end \ 5 standard Integration \ ES_567 \ assets \ 1583573247405.png)]

5.機能拡張

  • Function.prototype.bind(obj):これを関数内でobjにバインドし、関数を返します
  • バインド、呼び出し、適用を区別する:すぐに実行するか、パラメーターを渡すかを区別します
function fn(param){
  console.log(this,param);
}
  var obj = {name:"张三"};
  fn("param");
  fn.call(obj,"call_param");
  fn.apply(obj,["apply_param"]);
  fn.bind(obj,"bind_param")();//不会立即执行,常用在回调函数。

ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/jw2268136570/article/details/104741491