前端 js 经典:array 原生方法

简介: 前端 js 经典:array 原生方法

1. 创建数组

let arr = new Array(1, 2, 3); // [1,2,3]
let arr = [1, 2, 3]; // [1,2,3]

2. 数组方法

// 默认数组
let arr = [1, 2, 3];
 
// 拼接,默认','拼接
arr.join("-"); // "1-2-3"
 
// 尾部添加
arr.push(4, 5); // 返回长度:5,改变数组 [1,2,3,4,5]
arr.concat(4, 5); // [1,2,3,4,5]
 
// 头部添加
arr.unshift(4, 5); // 返回长度:5,改变数组 [4,5,1,2,3]
 
// 移除尾部
arr.pop(); // 返回移除项:3,改变数组 [1,2]
 
// 移除头部
arr.shift(); // 返回移除项:1,改变数组 [2,3]
 
// 裁切 一个参数,开始到数组结束
//      两个参数,开始到结束,不包含结束下标的项
arr.slice(1, 2); // [2]
 
// 删除指定项 参数1:开始下标,参数2:结束下标
arr.splice(1, 2); // 返回删除项:[2, 3],改变数组 [1]
 
// 替换
arr.splice(1, 1, 4, 5); // 返回替换项:[2],改变数组 [1,4,5,3]
 
// 查找 参数1:查找项,参数2:开始下标
arr.indexOf(2, 1); // 返回下标:1
arr.lastIndexOf(2, 1); // 返回下标:1
 
// 排序 从大到小
arr.sort((num1, num2) => num1 - num2); // 返回: [1,2,3],改变原数组 [1,2,3]
 
// 反转排序
arr.reverse(); // 返回:[3,2,1],改变原数组 [3,2,1]
 
// 将数组的所有元素"缩减"为一个单独的值
// reduce()方法接受一个回调函数作为参数,该回调函数可以接受四个参数:累加器(accumulator)、当前值(current value)、当前索引(current index)和原始数组(original array)。
// reduce()方法可选第二个参数是累加器默认值,默认为0。
// 回调函数通过对每个元素的操作来更新累加器的值,并返回更新后的累加器。
arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 6

3. 数组遍历

// item:子项,index:下标,self:遍历的数组
arr.map((item, index, self) => item + 1) // 返回:[2,3,4]
arr.filter((item, index, self) => item > 1) // 返回:[2,3]
arr.every((item, index, self) => item > 1) // 返回:false
arr.some((item, index.self) => item > 1) // 返回:true
arr.forEach((item, index self) => { item + 2 }) // 没有返回体,只是遍历数组


目录
相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1686 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1686 80
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
793 8
|
JavaScript 前端开发 容器
|
JavaScript 前端开发
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
存储 JavaScript 前端开发
|
JavaScript 前端开发

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1312
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    598
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    460
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    458
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    581
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    758
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1484
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    329
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1203
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    541