Основы JS (охватывающие основные вопросы интервью JS)

внешний интерфейс JavaScript Ajax опрос
Основы JS (охватывающие основные вопросы интервью JS)

Обобщите некоторые базовые знания о внешнем интерфейсе, некоторые знания могут быть заданы во время интервью, поэтому сделайте запись, это также поможет другим проверить, если есть какая-либо проблема, вы можете указать на нее, и она будет активно исправляться.

Типы переменных и вычисления

Какие бывают типы typeof в JS

    console.log(typeof undefined);  //undefined
    console.log(typeof 123);  //number
    console.log(typeof '123');  //string
    console.log(typeof true); //boolean
    console.log(typeof [1,2,3]);  //object
    console.log(typeof {"id": 11}); //object
    console.log(typeof null); //object
    console.log(typeof console.log);  //function

преобразование типов

  • явное преобразование типов
    • Числовая функция
      • Числа: преобразованы в числа
      • Строка: соответствующее значение, если оно может быть проанализировано как значение, NaN, если нет, 0, если это пустая строка.
      • Логическое значение: истина равна 1, ложь равна 0.
      • не определено: NaN
      • ноль: 0
      • объект: сначала выполните valueOf, чтобы увидеть, можно ли его преобразовать, если нет, снова выполните toString, чтобы увидеть, можно ли его преобразовать, если нет, сообщите об ошибке
    • Строковая функция
      • Число: преобразовать в соответствующую строку
      • Строка: или соответствующая строка
      • логическое значение: true — «истина», false — «ложь»
      • неопределенный: неопределенный
      • ноль ноль
      • объект: сначала выполните toString, чтобы увидеть, можно ли его преобразовать, если нет, выполните valueOf, чтобы увидеть, можно ли его преобразовать, если нет, сообщите об ошибке
    • Boolean
      Следующие неверны, остальные верны
      • NaN
      • null
      • undefined
      • 0
      • ""
      • false
  • Неявное преобразование типов
    • Арифметика
    • Заявление о решении
  • Странные вопросы на собеседовании по преобразованию шрифтов

когда использовать==, когда использовать===

Кромеobj.a == nullКроме этого, используйте===,==Он должен быть определен при использовании
obj.a == nullФактически после конвертацииobj.a == null || obj.a == undefined

Какие есть встроенные функции в JS

    Object
    Array
    Boolean
    Number
    String
    Function
    Date
    RegExp
    Error

Какие бывают типы переменных JS по способу хранения?

  • 1. Тип значения
  • 2. Тип ссылки (экономия места, общий блок памяти)

Отличие: изменение одного из типов значений не повлияет на другие, а изменение ссылочного типа изменит все, потому что общий блок памяти

Как понять JSON

JSON — это объект JS и формат данных. В JSON есть два API-интерфейса:

  1. Преобразование строки JSON в объект JSONJSON.parse()
  2. Преобразование объекта JSON в строку JSONJSON.stringify()

использоватьObject.prototype.toStringПолучить тип объекта

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]
toString.call(/s/); // [object RegExp]
toString.call([]); // [object Array]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

Прототипы и цепочки прототипов

Пять правил архетипов

  1. Все типы ссылок могут быть настроены для добавления атрибутов
  2. Все ссылочные типы имеют свой собственный неявный прототип (proto)
  3. Функции имеют свой явный прототип (прототип)
  4. Неявный прототип всех ссылочных типов указывает на явный прототип соответствующего конструктора.
  5. При использовании пользовательского свойства ссылочного типа, если такого свойства нет, он будет обращаться к __proto__ ссылочного типа (то есть прототипу соответствующего конструктора), чтобы найти его

原型链.png

Как точно определить, является ли переменная типом массива

arr instanceof Array

instanceof судит, какой ссылочный тип является ссылочным типом, через __proto__ (неявный прототип ищется слой за слоем, можете ли вы найти прототип соответствующего конструктора)

Напишите пример наследования цепочки прототипов

function Element(ele) {
  this.ele = document.getElementById(ele);
}

Element.prototype.html = function(val) {
  var ele = this.ele;
  if (val) {
    ele.innerHTML = val;
    return this;
  } else {
    return ele.innerHTML;
  }
};

Element.prototype.on = function(type, fn) {
  var ele = this.ele;
  ele.addEventListener(type, fn);
  return this;
}

var element = new Element('main');

element.html('hello').on('click', function() {
  alert('handleClick');
});

Описать процесс создания нового объекта

  1. создать новый объект
  2. это указывает на этот новый объект
  3. Выполнить код для присвоения значения
  4. return this
function Foo(name) {
  this.name = name;
  // return this;  // 本身会执行这一步
}

var f = new Foo('shiyanping');

Область действия и замыкания

переменное продвижение

Следующие два случая будут улучшены:

  1. Определения переменных
  2. Описание функции

Это несколько разных сценариев использования

  1. Используйте в конструкторе (сам конструктор)
  2. Используйте (вызовите свойства объекта) в качестве свойств объекта
  3. Используется как обычная функция (окно)
  4. call, apply, bind (первый аргумент для выполнения)
var a = {
  name: 'A',
  fun: function() {
    console.log(this.name);
  }
};

a.fun();  //this === a
a.fun.call({ name: 'B' });  //this === { name: 'B' }
var fun1 = a.fun;
fun1(); //this === window

Создайте 10 тегов, нажмите на каждый, чтобы открыть соответствующий серийный номер.

var i;
for (i = 0; i < 10; i++) {
  (function(i) {
    // 函数作用域
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
      e.preventDefault();
      alert(i);
    });
    document.body.appendChild(a);
  })(i);
}

Как понять охват

  1. свободная переменная
  2. Цепочка областей действия и поиск свободных переменных не могут быть найдены и просматриваются по уровням.
  3. Два сценария закрытия
    1. Функции передаются как переменные
    2. функция как возвращаемое значение

Применение замыканий в реальной разработке

// 判断一个数字是否出现过
function isFirst() {
  var _list = [];
  return function(id) {
    if (_list.indexOf(id) >= 0) {
      return false;
    } else {
      _list.push(id);
      return true;
    }
  };
}

var first = isFirst();
first(10);
first(10);
first(20);

однопоточный и асинхронный

Разница между синхронным и асинхронным, приведите пример синхронного и асинхронного соответственно

Синхронизация блокирует код, а асинхронность — нет. оповещение синхронно setTimeout является асинхронным

Письменные вопросы о setTimeout

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
console.log(3);
setTimeout(function() {
  console.log(4);
}, 1000);
console.log(5);
// 输出结果：1，3，5，2，4

Внешний интерфейс с использованием асинхронных сценариев

  1. Временные задачи: setTimeout, setInterval
  2. Сетевой запрос: ajax-запрос, динамическая загрузка img
  3. привязка события

Асинхронный требуется во всех случаях, когда вам нужно подождать, потому что он не будет блокироваться, как синхронный

Дата и математика

Точка знаний:

Дата

console.log(Date.now());  // 获取当前毫秒数
var dt = new Date();  // 获取当前时间
console.log(dt.getTime());  // 当前时间的毫秒数
console.log(dt.getFullYear());  //  年
console.log(dt.getMonth()+1); // 月（0-11）
console.log(dt.getDate());  // 日（0-31）
console.log(dt.getHours()); // 时（0-23）
console.log(dt.getMinutes()); // 分（0-59）
console.log(dt.getSeconds()); // 秒（0-59）

Math

  • Math.random()- возвращает случайное число от 0 до 1
  • Math.abs(x)- Возвращает абсолютное значение числа
  • Math.ceil(x)- Округлен
  • Math.floor(x)- округлить

Часто используемые API-интерфейсы массивов

  • forEach (обход всех элементов)
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function (item, index) {
  console.log(item + ',' + index);
})
  • map (соберите массив для создания нового массива)
// map，生成新数组，不改变原来数组的格式
var arr = ['a', 'b', 'c', 'd'];
var result = arr.map(function (item, index) {
  return index + '/' + item;
})
console.log(result);
  • sort (сортировать массив)
// sort， 会改变原来数组
var arr = [1, 23, 3, 4];
var result = arr.sort(function (a, b) {
  // 从小到大排序
  return a - b;

  // 从大到小排序
  // return b - a;
})
console.log(result);
  • filter (фильтрует элементы, соответствующие условию)
var arr = [1, 2, 3, 4];
var result = arr.filter(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);
  • каждый (судя, все ли элементы соответствуют требованиям)
var arr = [1, 2, 3, 4];
var result = arr.every(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);   // false
  • некоторые (судя, соответствует ли хотя бы один элемент условию)
var arr = [1, 2, 3, 4];
var result = arr.some(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);  // true
  • join (объединяет массивы в строки на основе условий)
var arr = [1, 2, 3, 4];
var result = arr.join(',');
console.log(result);
  • реверс (обратить массив)
var arr = [1, 2, 3, 4];
var result = arr.reverse();
console.log(result);

Часто используемые объектные API

  • for in
  • hasOwnProperty (проверяет, принадлежит ли свойство объекту, исключая свойства, найденные в цепочке прототипов)
 var obj = {
  x: 10,
  y: 20,
  z: 30
}

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ':' + obj[key]);
  }
}

вопрос:

получить текущую дату

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();

  if (month < 10) {
    month = '0' + month;
  }

  if (date < 10) {
    date = '0' + date;
  }

  return year + '-' + month + '-' + date;
}

var nowDate = new Date();
var formatDate = formatDate(nowDate);
console.log(formatDate);

Получить случайное число, требующее строкового формата той же длины

function randomStr(len) {
  var random = Math.random();
  random = random + '0000000000'; // 防止自动生成的数字不满足长度报错并且强制转换成字符串
  return random.substr(0, len)
}

console.log(randomStr(20));

Напишите общую функцию forEach, которая перебирает объекты и массивы.

function forEach(obj, fn) {
  if (obj instanceof Array) {
    obj.forEach(function (item, index) {
      fn(index, item);
    })
  } else {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        fn(key, obj[key]);
      }
    }
  }
}

var arr = [1, 2, 3, 4];
forEach(arr, function (index, item) {
  console.log(index + ',' + item);
});

var obj = {
  x: 10,
  y: 20
};
forEach(obj, function (index, item) {
  console.log(index + ',' + item);
});

Прочтите две последние главы

  1. Если вам это нравится, пожалуйста, поставьте лайк. Если вы считаете, что это полезно для окружающих, пожалуйста, переместите палец и поделитесь им. Большое спасибо за то, что нашли время, чтобы прочитать, и за ваши лайки и репосты.
  2. Надеюсь, вы обратите внимание на мою официальную учетную запись. Новые статьи будут отправлены на официальную учетную запись как можно скорее. Официальная учетная запись в основном отправляет некоторые личные эссе, заметки для чтения, а также некоторые технические горячие точки и горячие точки в реальном времени.И есть очень привлекательная лотерея за мой счет~

Категории