JavaScript 中 9个需要掌握基础的问题

1.如何从数组中移除一个特定的项

思路：首先，使用indexOf查找要删除的数组元素的索引(index)，然后使用splice方法删除该索引所对应的项。

splice()是一个非纯函数，通过删除现有元素和/或添加新元素来更改数组的内容。

const array = [2, 5, 9]

const index = array.indexOf(5)
if (index > -1) {
     
  array.splice(index, 1)
}

console.log(array)
// [ 2, 9 ]

splice的第二个参数是要删除的元素数量。注意，splice会在适当的位置修改数组，并返回一个包含已删除元素的新数组。

接着，我们可以来完善一下。下面有两个函数，第一个函数仅删除一个匹配项（即从[2,5,9,1,5,8,5]中删除第一个匹配项5），而第二个函数则删除所有匹配项：

// 仅删除第一个匹配项
function removeItemOnce (arr, value) {
     
  let index = arr.indexOf(value)
  if (index > -1) {
     
    arr.splice(index, 1)
  }
  return arr
}

// 删除所有匹配项
function removeItemAll (arr, value) {
     
  let i = 0
  while(i < arr.length) {
     
    if (arr[i] === value) {
     
      arr.splice(i, 1)
    } else {
     
      ++i
    }
  }
}

删除数组中索引i处的元素：

删除数组中索引i处的元素:

array.splice(i, 1)

如果你想从数组中删除值为number的每个元素，可以这样做：

for (let i = array.length - 1; i>=0; i--) {
     
  if (array[i] === number) {
     
    array.splice(i, 1)
  }
}

如果你只想使索引i处的元素不再存在，但又不想更改其他元素的索引：

delete array[i]

2. 如何使用 jQuery 或纯 JS 将用户从一个页面重定向到另一个页面

jQuery 不是必需的，window.location.replace(…)最适合模拟 HTTP 重定向。window.location.replace(...)优于使用window.location.href，因为replace()不会将原始页面保留在会话历史记录中，这意味着用户将不会陷入永无休止回退按钮。

如果要模拟单击链接，可以使用location.href，如果要模拟HTTP重定向，请使用location.replace。

事例：

//模拟HTTP重定向
window.location.replace("http://stackoverflow.com")

// 模拟单击链接
window.location.href = "http://stackoverflow.com"

你还可以这样做：

$(location).attr('href', 'http://stackoverflow.com')

3.JavaScript 闭包是如何工作的

闭包是一个函数和对该函数外部作用域的引用(词法环境)，词法环境是每个执行上下文（堆栈）的一部分，并且是标识符（即局部变量名称）和值之间的映射。

JavaScript 中的每个函数都维护对其外部词法环境的引用。此引用用于配置调用函数时创建的执行上下文。不管何时调用函数，该引用使函数内的代码能够查看在函数外声明的变量。

在下面的代码中，inner与调用foo时创建的执行上下文的词法环境一起形成一个闭包，并对外部隐藏了变量secret：

function foo() {
     
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
     
    console.log(`The secret number is ${
       secret}.`)
  }
}
const f = foo() // secret 不能从foo 外部直接访问
f() // 访问 secret 的唯一办法就是调用 f

换句话说，在JavaScript中，函数带有对私有状态的引用，只有它们(以及在相同的词法环境中声明的任何其他函数)可以访问该私有状态。这个状态对函数的调用者是不可见的，这为数据隐藏和封装提供了一种优秀的机制。

请记住，JavaScript中的函数可以像变量一样传递，这意味着这些功能和状态的对可以在程序中传递:类似于在c++中传递类的实例。

如果JavaScript没有闭包，则必须在函数之间显式传递更多状态，从而使参数列表更长，代码更冗余。

所以，如果你想让一个函数总是能够访问私有状态，你可以使用一个闭包，我们经常想把状态和函数联系起来。例如，在Java或c++中，当你向类添加私有实例变量和方法时，这是将状态与功能关联起来。

在 C 语言和大多数其他编程语言中，函数返回后，由于堆栈被销毁，所有的局部变量都不再可访问。在JavaScript中，如果在另一个函数中声明一个函数，那么外部函数的本地变量在返回后仍然可以访问。这样，在上面的代码中，secret在从foo返回后仍然对函数对象内部可用。

闭包在需要与函数关联的私有状态时非常有用。这是一个非常常见的场景，JavaScript直到2015年才有类语法，它仍然没有私有字段语法，闭包满足了这一需求。

私有实例变量

在下面的事例中，函数 toString 隐藏了 Car 类的一些细节。

function Car(manufacturer, model, year, color) {
     
  return {
     
    toString() {
     
      return `${
       manufacturer} ${
       model} (${
       year}, ${
       color})`
    }
  }
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())

函数式编程

在下面的代码中，函数inner隐藏了fn和args。

function curry(fn) {
     
  const args = []
  return function inner(arg) {
     
    if(args.length === fn.length) return fn(...args)
    args.push(arg)
    return inner
  }
}

function add(a, b) {
     
  return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5

面向事件的编程

在以下代码中，函数onClick隐藏了变量BACKGROUND_COLOR。

const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'

function onClick() {
     
  $('body').style.background = BACKGROUND_COLOR
}

$('button').addEventListener('click', onClick)

<button>Set background colorbutton>

模块化

在下面的示例中，所有实现细节都隐藏在一个立即执行的函数表达式中。函数tick和toString隐藏了私有状态和函数，它们需要完成自己的工作。闭包使我们能够模块化和封装我们的代码。

let namespace = {
     };

(function foo(n) {
     
  let numbers = []
  function format(n) {
     
    return Math.trunc(n)
  }
  function tick() {
     
    numbers.push(Math.random() * 100)
  }
  function toString() {
     
    return numbers.map(format)
  }
  n.counter = {
     
    tick,
    toString
  }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

事例 1：

此示例演示局部变量未在闭包中复制。闭包保留对原始变量本身的引用。似乎即使外部函数退出后，堆栈仍在内存中保留。

function foo () {
     
  let x = 42
  let inner = function () {
     
    console.log(x)
  }
  x = x + 1
  return inner
}

let f = foo()
f()

事例 2：

在下面的代码中，三种方法log ，increment 和update 都在同一词法环境闭包中。

function createObject() {
     
  let x = 42;
  return {
     
    log() {
      console.log(x) },
    increment() {
      x++ },
    update(value) {
      x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

事例 3：

如果使用的变量是使用var声明的，需要注意的一点是，使用var声明的变量被提升。由于引入了let和const，这在现代JavaScript 中几乎没有问题。

在下面的代码中，每次循环中，都会创建一个新的inner函数，变量i被覆盖，但是因var会让 i 提升到函数的顶部，所以所有这些inner函数覆盖的都是同一个变量，这意味着i(3)的最终值被打印了三次。

function foo () {
     
  var result = []
  for (var i = 0; i < 3; i++) {
     
    result.push(function inner () {
     
      console.log(i)
    })
  }
  return result
}
const result = foo()

for(var i = 0; i < 3; i++) {
     
  result[i]()
}
// 3 3 3

4. use strict 在 JavaScript 中做了什么，背后的原因是什么

引用一些有趣的部分：

严格模式是ECMAScript 5中的一个新特性，它允许我们将程序或函数放置在严格的操作上下文中。这种严格的上下文会防止某些操作被执行，并引发更多异常。

严格模式在很多方面都有帮助：

• 它捕获了一些常见的编码漏洞，并抛出异常。
• 当采取相对不安全的操作(例如访问全局对象)时，它可以防止错误或抛出错误。
• 它禁用令人困惑或考虑不周到的特性。

另外，请注意，我信可以将“strict mode”应用于整个文件，也可以仅将其用于特定函数。

// Non-strict code...

(function(){
     
  "use strict";

  // Define your library strictly...
})();

// Non-strict code... 

如果是在混合使用旧代码和新代码的情况，这可能会有所帮助。它有点像在Perl中使用的“use strict”。通过检测更多可能导致损坏的东西，帮助我们减少更多的错误。

现在所有主流浏览器都支持严格模式。

在原生ECMAScript模块(带有import和export语句)和ES6类中，严格模式始终是启用的，不能禁用。

5.如何检查字符串是否包含子字符串？

ECMAScript 6 引入了string .prototype.include

const string = "foo";
const substring = "oo";

console.log(string.includes(substring));

为了使其在旧的浏览器中运行，可以使用这种polyfill：

if (!String.prototype.includes) {
     
  String.prototype.includes = function(search, start) {
     
    'use strict';
    if (typeof start !== 'number') {
     
      start = 0;
    }

    if (start + search.length > this.length) {
     
      return false;
    } else {
     
      return this.indexOf(search, start) !== -1;
    }
  };
}

6. var functionName = function() {} 与 function functionName() {}

不同之处在于functionOne是一个函数表达式，因此只在到达这一行时才会定义，而functionTwo是一个函数声明，在它周围的函数或脚本被执行(由于提升)时就定义。

如，函数表达式

// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
     
  console.log("Hello!");
};

函数声明:

// "Hello!"
functionTwo();

function functionTwo() {
     
  console.log("Hello!");
}

过去，在不同的浏览器之间，在块中定义的函数声明的处理是不一致的。严格模式(在ES5中引入)解决了这个问题，它将函数声明的范围限定在其封闭的块上。

'use strict';    
{
      // note this block!
  function functionThree() {
     
    console.log("Hello!");
  }
}
functionThree(); // ReferenceError
function abc(){
     }也具有作用域-名称abc在遇到该定义的作用域中定义。例：

function xyz(){
     
  function abc(){
     };
  // abc 在这里定义...
}
// ...不是在这里

如果想在所有浏览器上给函数起别名，可以这么做：

function abc(){
     };
var xyz = abc;

在本例中，xyz和abc都是同一个对象的别名

console.log(xyz === abc) // true

它的名称是自动分配的。但是当你定义它的时候

var abc = function(){
     };
console.log(abc.name); //  ""

它的name称为空，我们创建了一个匿名函数并将其分配给某个变量。使用组合样式的另一个很好的理由是使用简短的内部名称来引用自身，同时为外部用户提供一个长而不会冲突的名称：

// 假设 really.long.external.scoped 为 {}
really.long.external.scoped.name = function shortcut(n){
     
  // 它递归地调用自己:
  shortcut(n - 1);
  // ...
  // 让它自己作为回调传递：:
  someFunction(shortcut);
  // ...
}

在上面的例子中，我们可以对外部名称进行同样的操作，但是这样做太笨拙了(而且速度更慢)。另一种引用自身的方法是arguments.callee，这种写法也相对较长，并且在严格模式中不受支持。

实际上，JavaScript对待这两个语句是不同的。下面是一个函数声明：

function abc(){
     }

这里的abc可以定义在当前作用域的任何地方：

// 我们可以在这里调用
abc(); 

// 在这里定义
function abc(){
     }

// 也可以在这里调用 
abc(); 

7.如何从 JavaScript 对象中删除属性？

我们可以这样删除对象的属性：

delete myObject.regex;
// 或者
delete myObject['regex'];
//  或者
var prop = "regex";
delete myObject[prop];

事例：

var myObject = {
     
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;

console.log(myObject);

JavaScript 中的对象可以看作键和值之间的映射。delete操作符用于一次删除一个键(通常称为对象属性)。

var obj = {
     
  myProperty: 1    
}
console.log(obj.hasOwnProperty('myProperty')) // true
delete obj.myProperty
console.log(obj.hasOwnProperty('myProperty')) // false

delete操作符不是直接释放内存，它不同于简单地将null或undefined值赋给属性，而是将属性本身从对象中删除。

注意，如果已删除属性的值是引用类型(对象)，而程序的另一部分仍然持有对该对象的引用，那么该对象当然不会被垃圾收集，直到对它的所有引用都消失。

delete只对其描述符标记为configurable的属性有效。

8. JS 的比较中应使用哪个等于运算符（ == vs ===）？

严格相等运算符( === )的行为与抽象相等运算符(==)相同，除非不进行类型转换，而且类型必须相同才能被认为是相等的。

== 运算符会进行类型转换后比较相等性。=== 运算符不会进行转换，因此如果两个值的类型不同，则===只会返回false。

JavaScript有两组相等运算符:=== 和 !== ，以及它们的孪生兄弟== 和 != 。 如果这两个操作数具有相同的类型和相同的值，那么===的结果就是 true，而!==的结果就是 false。

下面是一些事例：

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

上面有些看起来会挺困惑的，所以尽量还是使用严格比较运算符(===)。对于引用类型，==和===操作一致(特殊情况除外)。

var a = [1,2,3];
var b = [1,2,3];

var c = {
      x: 1, y: 2 };
var d = {
      x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b            // false
a === b           // false

c == d            // false
c === d           // false

e == f            // true
e === f           // true

特殊情况是，当你将一个字符串字面量与一个字符串对象进行比较时，由于该对象的toString或valueOf方法，该对象的值与相字面量的值一样。

考虑将字符串字面量与由String构造函数创建的字符串对象进行比较：

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

在这里，==操作符检查两个对象的值并返回true，但是===看到它们不是同一类型并返回false。哪一个是正确的?这取决于你想要比较的是什么。

我们的建议是完全绕开该问题，只是不要使用String构造函数来创建字符串对象。

使用==运算符（等于）

true == 1; //true, 因为 true 被转换为1，然后进行比较
"2" == 2;  //true, 因为 “2” 被转换成 2，然后进行比较

使用===操作符

true === 1; //false
"2" === 2;  //false

9.在 JavaScript 中深拷贝一个对象的最有效方法是什么？

快速克隆，数据丢失– JSON.parse/stringify

如果您没有在对象中使用Date、函数、undefined、Infinity、RegExp、Map、Set、blob、、稀疏数组、类型化数组或其他复杂类型，那么可以使用一行简单代码来深拷贝一个对象：

JSON.parse(JSON.stringify(object))
const a = {
     
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(), 
  undef: undefined,  // 丢失
  inf: Infinity,  // 被设置为 null
  re: /.*/,  // 丢失
}
console.log(a);
console.log(typeof a.date);  // object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
/*
object
{
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: '2020-09-04T00:45:41.823Z',
  inf: null,
  re: {}
}

*/
console.log(typeof clone.date);  // string

使用库进行可靠的克隆

由于克隆对象不是一件简单的事情(复杂类型、循环引用、函数等等)，大多数主要的库都提供了拷贝对象的函数。如果你已经在使用一个库，请检查它是否具有对象克隆功能。例如

• lodash – cloneDeep;可以通过lodash.clonedeep模块单独导入，如果你尚未使用提供深拷贝功能的库，那么它可能是你的最佳选择

• AngularJS – angular.copy

• jQuery – jQuery.extend(true, { }, oldObject); .clone()仅克隆DOM元素

ES6

ES6 提供了两种浅拷贝机制:Object.assign()和spread语法。它将所有可枚举的自有属性的值从一个对象复制到另一个对象。例如

var A1 = {
     a: "2"};
var A2 = Object.assign({
     }, A1);
var A3 = {
     ...A1};  // Spread Syntax

在以前的测试中，速度是最主要的问题

JSON.parse(JSON.stringify(obj))

这是深拷贝对象的最慢方法，它比jQuery.extend慢 10-20%。

当deep标志设置为false（浅克隆）时，jQuery.extend非常快。这是一个不错的选择，因为它包括一些用于类型验证的额外逻辑，并且不会复制未定义的属性等，但这也会使你的速度变慢。

如果想拷贝的一个对象且你知道对象结构。那么，你可以写一个简单的for (var i in obj)循环来克隆你的对象，同时检查hasOwnProperty，这将比jQuery快得多。

var clonedObject = {
     
  knownProp: obj.knownProp,
  ..
}

注意在 Date 对象JSON上使用JSON.parse(JSON.stringify(obj))方法。JSON.stringify(new Date())以ISO格式返回日期的字符串表示，JSON.parse()不会将其转换回Date对象。