Rumah  >  Artikel  >  hujung hadapan web  >  Gariskan kemahiran analisis kod sumber_javascript

Gariskan kemahiran analisis kod sumber_javascript

WBOY
WBOYasal
2016-05-16 15:22:391425semak imbas

Beberapa tahun yang lalu, sesetengah orang mengatakan bahawa JavaScript adalah bahasa pengaturcaraan yang paling dipandang remeh Sejak kemunculan nodej, konsep All Stack/Full Stack kini semakin popular . JavaScript ialah bahasa seperti C Jika anda mempunyai asas bahasa C, anda secara amnya boleh memahami kod JavaScript Walau bagaimanapun, sebagai bahasa skrip, fleksibiliti JavaScript jauh lebih rendah daripada C, yang juga akan menyebabkan beberapa kesukaran dalam. pembelajaran.

1 1. Yang pertama ialah beberapa kaedah berulang.


ES juga menambah kaedah forEach() asli pada tatasusunan. Perbezaannya ialah kaedah setiap (untukSetiap) di sini boleh digunakan untuk semua koleksi, dan fungsi menerima tiga parameter (pengumpulan, fungsi lelaran, persekitaran pelaksanaan).
_.each = _.forEach = function(obj, iteratee, context) {
iteratee = optimizeCb(iteratee, context);
var i, length;
if (isArrayLike(obj)) {
 for (i = 0, length = obj.length; i < length; i++) {
  iteratee(obj[i], i, obj);
 }
} else {
 var keys = _.keys(obj);
 for (i = 0, length = keys.length; i < length; i++) {
  iteratee(obj[keys[i]], keys[i], obj);
 }
}
// 链式调用
return obj;
 }; 
Fungsi optimizeCb mengikat persekitaran pelaksanaan yang sepadan dengan kaedah lelaran yang berbeza berdasarkan bilangan parameter fungsi lelaran ForEach juga menerima tiga parameter (nilai, indeks, set).

Langkah seterusnya ialah memanggil fungsi lelaran dalam gelung for.

Pelaksanaan pertimbangan isArrayLike yang lebih elegan dalam _.map: (hanya satu untuk gelung)


Ada dua lagi tempat istimewa:
var keys = !isArrayLike(obj) && _.keys(obj),
    length = (keys || obj).length,
    results = Array(length);
  for (var index = 0; index < length; index++) {
   var currentKey = keys &#63; keys[index] : index;
   results[index] = iteratee(obj[currentKey], currentKey, obj);
  }
  return results;
  // 合理使用&&、||、&#63;:可以大大减少代码量 

•Bahagikan koleksi kepada koleksi seperti tatasusunan dan koleksi objek. Fungsi isArrayLike digunakan:

•Fungsi _.keys digunakan Object juga mempunyai fungsi kekunci asli, yang digunakan untuk mengembalikan tatasusunan atribut yang boleh dihitung oleh obj. Pelaksanaannya agak mudah, kerana ditambah dengan kaedah hasOwnProperty().
// js的最大精确整数
 var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
 var isArrayLike = function(collection) {
var length = collection != null && collection.length;
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
 }; // 如果集合有Length属性且为数字并且大于0小于最大的精确整数,则判定是类数组
------------------------------------------------ --- -----------------------------------

_.map, _.reduce kaedah mempunyai prinsip yang sama.

Fungsi _.find adalah serupa dengan Array.some(), kecuali ia mengembalikan elemen pertama yang menjadikan hasil lelaran benar, dan bukannya mengembalikan nilai Boolean seperti Array.some().

Apa yang patut dipelajari ialah gelung for di sini boleh mengkonfigurasi jujukan gelung berbeza mengikut parameter berbeza yang dihantar masuk.
 _.find = _.detect = function(obj, predicate, context) {
  var key;
  if (isArrayLike(obj)) {
   key = _.findIndex(obj, predicate, context);
  } else {
   key = _.findKey(obj, predicate, context);
  }
  if (key !== void 0 && key !== -1) return obj[key];
 };
function createIndexFinder(dir) {
  return function(array, predicate, context) {
   predicate = cb(predicate, context);
   var length = array != null && array.length;
   // 如果dir为1,index为0,index+=1,index正序循环
   // 如果dir 为-1,index为length-1,index += -1反序循环
   // 判断循环条件则用了index >= 0 && index < length方法兼顾两种循环方式
   var index = dir > 0 &#63; 0 : length - 1;
   for (; index >= 0 && index < length; index += dir) {
    if (predicate(array[index], index, array)) return index;
   }
   return -1;
  };
 }
 _.findIndex = createIndexFinder(1);
 _.findLastIndex = createIndexFinder(-1); 

1. Kaedah lain dalam koleksi pada asasnya dilaksanakan berdasarkan kaedah berulang.

Kaedah maks digunakan untuk mencari nilai maksimum dalam set, dengan menggelung semua item dalam senarai, dan kemudian membandingkan item semasa dan item hasil Jika item semasa lebih besar daripada hasil, ia ditetapkan kepada item hasil, dan akhirnya item hasil dikembalikan.
_.max = function(obj, iteratee, context) {
var result = -Infinity, lastComputed = -Infinity,
  value, computed;
if (iteratee == null && obj != null) {
 obj = isArrayLike(obj) &#63; obj : _.values(obj);
 for (var i = 0, length = obj.length; i < length; i++) {
  value = obj[i];
  if (value > result) {
   result = value;
  }
 }
} else {
 iteratee = cb(iteratee, context);
 _.each(obj, function(value, index, list) {
  computed = iteratee(value, index, list);
  if (computed > lastComputed || computed === -Infinity && result === -Infinity) {
   result = value;
   lastComputed = computed;
  }
 });
}
return result;
 }; 


2. Tukar koleksi kepada tatasusunan

 _.toArray = function(obj) {
    if (!obj) return [];
    // 如果是数组,采用了Array.prototype.slice.call(this,obj)这种方法
    if (_.isArray(obj)) return slice.call(obj);
    // 类数组对象,这里没有采用Slice方法,而是利用.map对集合进行迭代,从而返回一个数组。 _.identity该方法传入的值和返回的值相等。(主要用于迭代)
    if (isArrayLike(obj)) return _.map(obj, _.identity);
    // 普通对象,则返回由属性值组成的数组。
    return _.values(obj);
   };
Jenis Data

STL perlu membezakan vektor, senarai, dsb. kerana struktur data yang berbeza memerlukan atau boleh dilaksanakan secara berbeza, tetapi apakah sebab pemisahan Koleksi dan Tatasusunan dalam garis bawah? Ini juga bermula dengan jenis data JavaScript, lihat gambar di bawah.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn