在JavaScript中解释[] .slice.call？

Question

我偶然发现了将DOM NodeList转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:

[].slice.call(document.querySelectorAll('a'), 0)

所以它从一个空数组开始[],然后slice用于将结果转换call为一个新数组是啊？

我不明白的是call.如何document.querySelectorAll('a')从NodeList转换为常规数组？

Answer 1

这里发生的事情就是你称之为使用slice()的功能.什么做在这种情况下创建一个空数组,然后通过运行它的对象(最初的数组,现在迭代),并保留追加该对象的元素,它创建的空数组,这是最终返回.这是一篇关于此的文章.NodeListcall()slice()NodeList

编辑:

所以它以空数组[]开头,然后使用slice将调用结果转换为新数组是啊？

那是不对的.[].slice返回一个函数对象.函数对象具有call()调用指定call()to 的第一个参数的函数的函数this; 换句话说,使函数认为它是从参数(NodeList返回的document.querySelectorAll('a'))而不是从数组中调用的.

Answer 2

在javascript中,对象的方法可以在运行时绑定到另一个对象.简而言之,javascript允许对象"借用"另一个对象的方法:

object1 = {
    name:'frank',
    greet:function(){
        alert('hello '+this.name)
    }
};

object2 = {
    name:'andy'
};

// Note that object2 has no greet method.
// But we may "borrow" from object1:

object1.greet.call(object2); // will show an alert with 'hello andy'

在call和apply函数对象(在JavaScript函数是对象也一样)的方法,可以让你做到这一点.因此,在您的代码中,您可以说Nodelist正在借用数组的切片方法.转换是什么,slice返回另一个数组,因为它的结果.

Answer 3

它slice从一个中检索函数Array.然后它调用该函数,但使用结果document.querySelectorAll作为this对象而不是实际数组.

Answer 4

这是一种将类似数组的对象转换为实数组的技术.

其中一些对象包括:

• arguments 在功能
• NodeList(记住它们的内容在被提取后可以改变!所以将它们转换为数组是一种冻结它们的方法)
• jQuery集合,又名jQuery对象(一些doc:API,type,learn)

这有很多用途,例如,对象通过引用传递,而数组通过值传递.

另外,请注意第一个参数0可以省略,这里有详尽的解释.

为了完整起见,还有jQuery.makeArray().

Answer 5

如何document.querySelectorAll('a')从a 转换NodeList 为常规数组？

这是我们的代码,

[].slice.call(document.querySelectorAll('a'), 0)

让我们先拆掉它,

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

步骤:1执行call功能

• 里面call,比其他thisArg的参数的其余部分将被追加到的参数列表.
• 现在,slice通过将其this值 thisArg(像对象来自的数组document.querySelector)和参数列表绑定来调用该函数.ie] start包含的参数0

步骤:2执行slice内部调用的函数call

• start将被分配给变量sas0
• 既然end是undefined,this.length将被存储e
• 一个空数组将存储在一个变量中 a

• 完成上述设置后,将发生以下迭代

  while(s < e) {
    a.push(this[s]);
    s++;
  }
  

• 填充的数组a将作为结果返回.

PS为了更好地理解我们的场景,我们的上下文所需的一些步骤已经从原始的call和slice算法中忽略了.

Answer 6

从 ES6：简单地使用Array.from(element.children)或Array.from({length: 5})创建数组

Answer 7

[].slice.call(document.querySelectorAll('.slide'));

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually.

3. The slice() method returns the selected elements in an array, as a new array object.

  so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.

<div class="slideshow">

  <div class="slide">
    first slider1
  </div>
  <div class="slide">
    first slider2
  </div>
  <div class="slide">
    first slider3
  </div>
  <div class="slide">
    first slider4
  </div>
  <div class="slide">
    first slider5
  </div>
  <div class="slide">
    first slider6
  </div>

</div>

<script type="text/javascript">

  var arraylist = [].slice.call(document.querySelectorAll('.slide'));

  alert(arraylist);

</script>