（AngularJS）配列内の値を置き換えるための最も効率的な方法は、グローバル

Question

私は、アレイ内のすべての値を置き換えたい

は、ここではコードです：

var jsonImg = [ 
{"url":"https://example.amazonaws.com/images-lib/1496846856-Retina 01.jpg"}, 
{"url":"https://example.amazonaws.com/images-lib/1496846856-Retina 02.jpg"}, 
{"url":"https://example.amazonaws.com/images-lib/1496846856-Retina 03.jpg"} 
]; 

var imgUrl = JSON.stringify(jsonImg); 
var oldString = imgUrl; 
var newString = oldString.replace(/https:\/\/example.amazonaws.com\/images-lib\//g,"cordova.url/"); 

$scope.Images = JSON.parse(newString); 

しかし、私はJSON.StringflyとJSON.Parseは少し冗長だと思いますここでは、これがJSON.StringとJSON.Parseの値のすべてを置き換える最も効率的な方法だと思いますか？これを行うにはいくつかの代替手段がありますか？ここのフィドルを確認してください： https://jsfiddle.net/dedenbangkit/zu7utr6a/3/

Answer 1

、すべての画像のURLにCDNのパスを繰り返すことは冗長です。このパスを保持する別の変数を作成し、使用する必要がある場合は両方の文字列を連結するだけです。この方法で、あなたは簡単にcdnのパスを変更することができ、処理する必要はありません。

サンプルは、デモンストレーションの目的のために、私はMath.randomを使用しているが、あなたはあなたの状態を置くことができます。我々の議論を1として

function ImgCtrl($scope) { 
 
    var s3 = "https://s3-ap-southeast-1.amazonaws.com/publixx-statics/images-lib/"; 
 
    var cordava = "cordova.url/"; 
 
    var urls = [{ 
 
    "url": "1496846856-Retina 01.jpg" 
 
    }, { 
 
    "url": "1496846856-Retina 02.jpg" 
 
    }, { 
 
    "url": "1496846856-Retina 03.jpg" 
 
    }] 
 

 
    $scope.path = Math.floor(Math.random() * 100) % 2 === 0 ? s3 : cordava; 
 
    $scope.Images = urls; 
 
    console.log($scope.Images[0].url) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="ImgCtrl"> 
 
    <ul> 
 
     <li ng-repeat="Image in Images"> 
 
     {{path}}{{Image.url}} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

---

、あなたは2つのオプションを持つことができます：あなたのフラグは、より動的であり、非常に頻繁に変更されるとき

• サンプル1は、より有用です。
• サンプル2は、フラグが1サイクルの間に1つの値しか持たない場合に便利です。 A/Bテストのようなもの。それは常に1サイクルの間同じであるので、コンピューティングは再び意味をなさない。処理された値を保存するだけです。これにより、範囲内のURLもカプセル化され、外部では利用できなくなるため、セキュリティが強化されます。

// Sample 1 
var flag = Math.floor(Math.random() * 100) % 2 === 0; 

function getImagePath(image) { 
    var s3 = "https://s3-ap-southeast-1.amazonaws.com/publixx-statics/images-lib/"; 
    var cordava = "cordova.url/"; 
    return (flag ? s3 : cordava) + image; 
} 

// Usage: 

var url = getImagePath(imageUrl) 

// Sample 2 
var path = (function() { 
    var s3 = "https://s3-ap-southeast-1.amazonaws.com/publixx-statics/images-lib/"; 
    var cordava = "cordova.url/"; 
    return flag ? s3 : cordava; 
})() 

var url = path + imageUrl; 

Answer 2

あなたは正しいです。 stringとbackに変換する必要はありません。配列内の値の数が少ない場合は、効率の面で大したことではありません。しかし、配列自体にこのような強力な機能を持たせることができるときに、なぜ文字列に変換するのか。

ような何か：私の理解で

$scope.Images = jsonImg.map(function(obj) { 
    obj.url = "cordova.url" + obj.url.substr(obj.url.lastIndexOf("/")) 
    return obj; 
}); 

updated fiddle

Answer 3

var jsonImg = [ 
    { 'url': 'https://example.amazonaws.com/images-lib/1496846856-Retina 01.jpg' }, 
    { 'url': 'https://example.amazonaws.com/images-lib/1496846856-Retina 02.jpg' }, 
    { 'url': 'https://example.amazonaws.com/images-lib/1496846856-Retina 03.jpg' }, 
]; 

jsonImg.map(function(image) { 
    var split = image.url.split('/'); 
    var fileName = split[split.length - 1]; 
    image.url = 'cordova.url/' + fileName; 
}); 

これはhttps://example.amazonaws.com/images-lib/ URLのcordova.url/とを交換し、あなたのjsonImg、アレイ内のすべての文字列を変異させます。