关于slice

1,slice() 方法可从已有的数组中返回选定的元素。(取前不取后,和substring一样)

语法

arrayObject.slice(start,end)
参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

 

 

 

var arr = [];
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

// ["John", "Thomas"]
console.log(arr.slice(1));


// ["John"]
console.log(arr.slice(1,2));


//["George", "John", "Thomas"]
console.log(arr.slice()); 

 

2,String.slice

    和array.slice一样,可以从字符串中返回选定的元素,类似于substring

   

var str = 'Jobs';

// obs
console.log(str.slice(1)); 

// obs
console.log(str.substring(1)); 

// o
console.log(str.slice(1,2)); 

// o
console.log(str.substring(1,2)); 

 

3,关于dom和slice

    相关的html

    

<html>
   <body>
		<div class='test'>t1</div>
		<div class='test'>t2</div>
		<div class='test'>t3</div>
	</body>
</html>

 这样如果写:

 

console.log(document.getElementsByClassName('test').slice());
 

 

 此时会报错:

 

 

 Uncaught TypeError: document.getElementsByClassName(...).slice is not a function
 说 document.getElementsByClassName('test')不是一个数组,这是怎么回事呢,这竟然不是数组,但我们用 document.getElementsByClassName('test')[0]的话确实是有内容的啊。

 

 

console.log(document.getElementsByClassName('test')[0]);
 输出:
<div class="test">t1</div>
 也就是它返回了第一个class='test'的dom,那为什么它不是一个数组呢,其实我们通过测试可以发现,它确实不是一个数组,只是伪装成了数组的样子而已。
console.log(document.getElementsByClassName('test') instanceof Array);//false
 

 在调试中我们也可以看到getElementsByClassName的真相:

 

 

console.log(document.getElementsByClassName('test'));

 返回:

[div.test, div.test, div.test]
0:div.test
1:div.test
2:div.test
length:3
__proto__:HTMLCollection

 可以很清楚的看到了,它的proto是HTMLCollection,而不是Array,因为它也有一些数组的相关属性,比如序号(0,1,2等),还有length属性,所有我们才能像数组一样操作它,但它并不是一个真正的数组。

然而我们经常需要将getElementsByClassName转换成真正的数组,用slice又会报错,那我们该如何进行操作呢,其实我们可以用call

 

console.log(Array.prototype.slice.call(document.getElementsByClassName('test'))); 

 输出:

[div.test, div.test, div.test]
0:div.test
1:div.test
2:div.test
length:3
__proto__:Array[0]

 可以看到proto变成Array了,转换数组成功。

其实任何具有这种伪数组属性的对象(有序号和length属性),都可以通过这种方法转换成数组。

 

 

var sa = {0:'Mark',1:'Gaoyuanyuan',length:2};
console.log(Array.prototype.slice.call(sa)); //['Mark'.'Gaoyuanyuan']

 

顺便说下call

call的基本用法在这里就不说了,有时候使用call可以比直接调用函数避免一些错误,就像上面的,直接用document.getElementsByClassName('test').slice() 会报错,因为document.getElementsByClassName('test')并不是一个数组。但如果使用Array.prototype.slice.call(document.getElementsByClassName('test')),就能够正常运行,因为本质上call是用document.getElementsByClassName('test')来代替Array的对象,所以只要document.getElementsByClassName('test')拥有Array基本的属性(序号,length),就能够正常运行。

同理的还有数组的every()方法等。

 

 

最后,附个转成数组的通用函数

var toArray = function(s){
    try{
        return Array.prototype.slice.call(s);
    } catch(e){
            var arr = [];
            for(var i = 0,len = s.length; i < len; i++){
                //arr.push(s[i]);
                   arr[i] = s[i];  //据说这样比push快
            }
             return arr;
    }
}

 

你可能感兴趣的:(JavaScript,数组,call,slice)