百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

深入理解数组的slice方法

ztj100 2024-11-25 00:38 14 浏览 0 评论

slice() 方法可从已有的数组中返回选定的元素。原数组不改变返回新选定的元素组成的新数组。

数组.slice(start,end)

start: 可选 数组从什么位置开始选择,如果没设置默认值是0,从开始选择。

end :可选,数组截取到哪里,默认截取到数组的尾部

var arr=[1,3,5,7,9];
var arr1=arr.slice();//[1,3,5,7,9];从头开始选取
var arr2=arr.slice(1);//[3,5,7,9];从下标1开始选择
var arr3=arr.slice(-1);//[9];从倒数第1项开始选择
var arr4=arr.slice(2,4);//[5,7]从第二项选择到第4项
var arr5=arr.slice(-3,4);//[5,7]从倒数第3项选择到正数第4项
var arr6=arr.slice(-3,-1);//[5,7]从倒数第三项选择到倒数第一项

注释:您可使用负值从数组的尾部选取元素。

注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

重点

//返回一个对象,对象有max和min属性,求出当前参数的最大值和最小值
function fn1(){
	var arr= Array.prototype.slice.call(arguments);
    if(arr.length===0) return;
    arr=arr.sort(function(a,b){return a-b});
    return {max:arr[arr.length-1],min:arr[0]};
}
fn1(3,5,7,9);//{max:9,min:3

在这个案例中Array.prototype.slice.call(arguments)为什么会将伪数组转换为数组呢
这个问题牵扯一下两种概念
1、prototype 原型,所有的数组对象如果需要使用什么方法那就必须将这个方法增加在原型中,而且在必须在里面使用this,这个this就是这个数组对象
例如:

//求数组中数值元素的和
Array.prototype.sum=function(){
            var sum=0;
            //this就是调用这个方法的数组
            for(var i=0;i<this.length;i++){
            //判断这个数组的第i项是不是数值
                if(!isNaN(this[i])){
                    sum+=this[i];
                }
            }
            return sum;
  };
var arr=[10,15,20,30,40];
var sum=arr.sum();
console.log(sum);//115;

2、call 的作用,call在调用函数时可以替代函数中的this,例如:

function fn2(){
    this.a=3;
    this.b=10;
}
fn2();//因为直接调用函数this就是window,
//因此,这里等于给window增加属性a和b。
//那么window的属性其实就是变量,因此实际上是增加变量a和b
console.log(a,b);//3,10
var obj={};
fn2.call(obj);
//这里将obj带入函数后替代函数中this,
//因此,其实就是给obj增加属性a和属性b
console.log(obj.a,obj.b);//3,10;

那么现在我们解释一下Array.prototype.slice.call(arguments)。首先我们先模仿数组的原生API写一下slice,猜测哦,谁也不知道JS底层怎么写的。

Array.prototype.slice1=function(start,end) {
     if (!start) start = 0;
     if (!end) end = this.length;
     if (start < 0) start = this.length + start;
     if (end < 0) end = this.length + end;
     var arr = [];
     for (var i = start; i < end; i++){
           arr.push(this[i]);
     }
      return arr;
  };
  
  var arr=[1,3,5,7,9];
  var arr1=arr.slice1(2,4);//[5,7];

上面这个就是模拟了slice的函数内容。那么在这里,this就是这个数组。如果我们使用Array.prototype.slice1.call(arguments);那么就是把上面的这个方法中slice1函数中this用arguments替代了,类数组也是有下标的,因此,就相当于遍历取出每个下标存储在新的数组中,并且返回这个新数组。而这里call()后面没有带参,意味着直接调用了slice1,start和end都没有传入,当没有传参时默认从开始选择到尾部所有的元素放在新数组中,因此才可以转换为新数组。

相关推荐

Vue 技术栈(全家桶)(vue technology)

Vue技术栈(全家桶)尚硅谷前端研究院第1章:Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...

vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)

前言《vue基础》系列是再次回炉vue记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)在开发时,是不是遇到过这样的场景,响应...

vue3 组件初始化流程(vue组件初始化顺序)

学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)...

vue3优雅的设置element-plus的table自动滚动到底部

场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去...

Vue3为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...

9、echarts 在 vue 中怎么引用?(必会)

首先我们初始化一个vue项目,执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts,npminstallecharts-S//或...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...

vue-element-admin 增删改查(五)(vue-element-admin怎么用)

此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...

最全的 Vue 面试题+详解答案(vue面试题知识点大全)

前言本文整理了...

基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...

不来看看这些 VUE 的生命周期钩子函数?| 原力计划

作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块...

Vue3.5正式上线,父传子props用法更丝滑简洁

前言Vue3.5在2024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性...

Vue 3 生命周期完整指南(vue生命周期及使用)

Vue2和Vue3中的生命周期钩子的工作方式非常相似,我们仍然可以访问相同的钩子,也希望将它们能用于相同的场景。...

救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘

前端打工人集合!是不是经常遇到这些崩溃瞬间:Vue3项目越写越卡,组件通信像走迷宫,复杂逻辑写得脑壳疼?别慌!作为在一线摸爬滚打多年的老前端,今天直接甩出10个超实用的Vue3实战技巧,手把...

怎么在 vue 中使用 form 清除校验状态?

在Vue中使用表单验证时,经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...

取消回复欢迎 发表评论: