>  기사  >  웹 프론트엔드  >  밑줄 소스 코드 분석_javascript 기술

밑줄 소스 코드 분석_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:22:391425검색

몇 년 전 어떤 사람들은 JavaScript가 가장 과소평가된 프로그래밍 언어라고 말했습니다. nodejs가 등장한 이후 All Stack/Full Stack이라는 개념이 점점 더 대중화되었습니다. . JavaScript는 C와 유사한 언어입니다. C 언어 기초가 있으면 일반적으로 JavaScript 코드를 이해할 수 있습니다. 그러나 스크립트 언어로서 JavaScript의 유연성은 C에 비해 훨씬 낮습니다. 학습.

1. 모임

1. 첫 번째는 여러 가지 반복 방법입니다.

_.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;
 }; 

ES는 배열에 기본 forEach() 메서드도 추가합니다. 차이점은 여기에서 Each(forEach) 메서드를 모든 컬렉션에 사용할 수 있으며 함수는 세 가지 매개 변수(컬렉션, 반복 함수, 실행 환경)를 허용한다는 것입니다.

optimizeCb 함수는 반복 함수 매개변수 수에 따라 해당 실행 환경을 다양한 반복 방법에 바인딩합니다. forEach 반복 함수는 세 가지 매개변수(value, index, set)도 허용합니다.

다음 단계는 for 루프에서 반복 함수를 호출하는 것입니다.

_.map에서 isArrayLike 판단을 더욱 우아하게 구현: (for 루프는 단 하나만)

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;:可以大大减少代码量 

특별한 장소가 두 군데 더 있습니다:

•컬렉션을 배열형 컬렉션과 객체 컬렉션으로 나눕니다. isArrayLike 함수가 사용됩니다:

// 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小于最大的精确整数,则判定是类数组

• _.keys 함수가 사용됩니다. Object에는 obj가 열거할 수 있는 속성 배열을 반환하는 데 사용되는 기본 키 함수도 있습니다. 구현은 hasOwnProperty() 메소드를 포함하여 상대적으로 간단합니다.

---------------------------------- --- ---------------------

_.map, _.reduce 메소드는 비슷한 원리를 가지고 있습니다.

_.find 함수는 Array.some()과 같은 부울 값을 반환하는 대신 반복 결과를 true로 만드는 첫 번째 요소를 반환한다는 점을 제외하면 Array.some()과 유사합니다.

 _.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); 

배울만한 가치가 있는 점은 여기서 for 루프가 전달된 다양한 매개변수에 따라 다양한 루프 시퀀스를 구성할 수 있다는 것입니다.

1. 컬렉션의 다른 메소드는 기본적으로 반복 메소드를 기반으로 구현됩니다.

_.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;
 }; 

max 메소드는 목록의 모든 항목을 반복한 다음 현재 항목과 결과 항목을 비교하여 집합의 최대값을 찾는 데 사용됩니다. 결과 항목에 추가하고 최종적으로 결과 항목이 반환됩니다.

2. 컬렉션을 배열로 변환

 _.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);
   };

데이터 유형

STL은 서로 다른 데이터 구조가 필요하거나 다르게 구현될 수 있기 때문에 벡터, 목록 등을 구분해야 하는데 컬렉션과 배열을 밑줄로 구분하는 이유는 무엇인가요? 이것은 또한 JavaScript의 데이터 유형으로 시작됩니다. 아래 그림을 참조하십시오.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.