03:数组的属性 && 操作方法(上)

一、Array property 数组的属性

1、constructor
返回对创建此对象的数组函数的引用

[].constructor
// ƒ Array() { [native code] }
2、length
返回 或者 设置数组中元素的数目
const abc = ['a', 'b', 'c']
console.log(abc.length) // 3 abc.length = 2
console.log(abc) // ['a', 'b'] abc.length = 4
console.log(abc) // ["a", "b", "c", empty]
3、prototype:使您有能力向对象添加属性和方法
那么数组的 prototype 属于 就是 JS 原生带的非常多的方法。

二、Array prototype 数组的原型

这里,我们就详细的介绍下 Array prototype 数组的原型 中包含了哪些方法
1、concat()

连接两个数组,并返回结果


const a = [1,2,3,4]
const b = [5,6,7,8] const c = a.concat(b)
// [1, 2, 3, 4, 5, 6, 7, 8]
2、join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔


const a = [1,2,3,4]
const aStrin = a.join(',') // "1,2,3,4"

那么在这个原生方法中我们常常会用到的这个方法来解决一些问题, 比如调换字符串的排序

eg:


const aArray = '1,2,3,4,5,6,7'
const arrayA = aArray.split(',').reverse().join(',') // "7,6,5,4,3,2,1"
3、pop()

删除并返回数组的最后一项

const testArray = [1,2,3,4,5,6,7]
cosnt a = testArray.pop() // 7
console.log(testArray) // [1,2,3,4,5,6]
// pop 和 push 组合成栈
4、push()

向数组的末尾添加一个或多个元素,并返回数组的新长度

const a = [12,123,1234]
var l = a.push(12345)
console.log(l) // 4
console.log(a) // [12, 123, 1234, 12345]
5、shift()

删除并返回数组的第一个元素

const a = [1,2,23,44,55,66]
const b = a.shift()
console.log(b) // 1
console.log(a) // [2, 23, 44, 55, 66]
6、unshift()

向数组的开头添加一个或多个元素,并返回新的长度

const a = [1,2,23,44,55,66]
const b = a.unshift('add')
const c = a.unshift('add', 'second')
console.log(b) // 7
console.log(a) // ["add", 1, 2, 23, 44, 55, 66]
console.log(c) // 8
console.log(a) // ["add", "second", 1, 2, 23, 44, 55, 66]
利用以上的方法 去实现 栈、队列、反向队列

首先解释下 栈、队列、反向队列 分别是什么意思?

1、栈

栈: 作为一种数据结构,是一种只能从一端进行数据的增减或者删除。 即所谓的先进者后出 (水杯)

eg:

var stack = []
stack.push(1)
var item = stack.pop()
2、队列

队列: 我们可以和 栈 进行对比,即为:只能够在 表的前端进行删除,只能够在表的后端进行插入操作. 即 先进者先出 ( 推-注射器 )

eg:

var queue = []
queue.push(1)
queue.shift()
3、反向队列

反向队列: 我们可以和 队列 进行对比,即为:只能够在 表的后端进行删除,只能够在表的前端进行插入操作. 即 先进者后出 ( 吸-注射器 )

eg:

var reverseQueue = []
reverseQueue.unshift(1)
var item = reverseQueue.pop()
今天就先说到这里,下班回家~

Github地址,欢迎 Star

《前端之路》之三 数组的属性 && 操作方法(上)的更多相关文章

  1. 《前端之路》之三 数组的属性 && 操作方法(下)

    咱们 接着上篇来讲- 7.slice() 从某个已有的数组返回选定的元素 经常用来将类数组转化成数组,这样做一方面可以利用现有的数组方法更加方便的处理,另一方面是处于性能的考虑 var f = fun ...

  2. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  3. 《前端之路》- TypeScript (四) class 中各类属性、方法,抽象类、多态

    目录 一.TypeScript 中的类 二.TypeScript 中类的继承 三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...

  4. 《前端之路》--- 重温 Egg.js

    目录 <前端之路>--- 重温 Egg.js 一.基础功能 > 日志系统包含了 四大层面的 日志对象, 分别是 App Logger.App CoreLogger.Context L ...

  5. 《前端之路》之 Javascript 模块化管理的来世今生

    目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...

  6. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  7. js中Array数组的属性和方法

    这是我自己整理出来的一些关于Array数组的属性和方法,即查即用. 1.Array.length属性:数组的项数组,始终返回0或者更大的值. 2.instanceof操作符:value instanc ...

  8. springmvc后台接前端的参数,数组,集合,复杂对象等

    springmvc后台接前端的参数,数组,集合,复杂对象等 参考地址:https://blog.csdn.net/feicongcong/article/details/54705933  常用的几种 ...

  9. 《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

    目录 一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链 例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**prot ...

随机推荐

  1. 学习ASP.NET Core Razor 编程系列十——添加新字段

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  2. BZOJ_1877_[SDOI2009]晨跑_费用流

    BZOJ_1877_[SDOI2009]晨跑_费用流 题意: Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他 坚持下来的只有晨跑. 现在给出 ...

  3. .Net Remoting 调用远程对象

    根据需求,我们的系统必须以C/S方式构建,而且是三层架构,这样一来,就出现了服务器端和客户端通信的问题. 为了解决双方的通信问题,还要考虑效率.性能等方面,经过分析.试验,我们根据效率.移植.开发难易 ...

  4. Form表单 JSON Content-type解析

    Form表单 JSON Content-type解析 1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属 ...

  5. 面试必问!Java 多线程中两个线程交替执行,一个输出偶数,一个输出奇数

    前言 楼主今天在面经上看到这个题,挺有意思,小小的题目对多线程的考量还挺多.大部分同学都会使用 synchronized 来实现.楼主今天带来另外两种优化实现,让你面试的时候,傲视群雄! 第一种 sy ...

  6. MySQL(七)DQL之分组查询

    一.语法 select 分组函数,分组后的字段from 表[where 筛选条件]group by 分组的字段[having 分组后的筛选][order by 排序列表] 二.特点 分组前筛选:whe ...

  7. PostCSS 基本用法

    1.postcss相关网站 https://www.postcss.com.cn/ https://www.ibm.com/developerworks/cn/web/1604-postcss-css ...

  8. [Swift]LeetCode1033. 移动石子直到连续 | Moving Stones Until Consecutive

    Three stones are on a number line at positions a, b, and c. Each turn, let's say the stones are curr ...

  9. Java8新特性之一:Lambda表达式

    Java8是自java5之后最重大的一次更新,它给JAVA语言带来了很多新的特性(包括编译器.类库.工具类.JVM等),其中最重要的升级是它给我们带来了Lambda表达式和Stream API. 1. ...

  10. Netty源码—五、内存分配概述

    Netty中的内存管理应该是借鉴了FreeBSD内存管理的思想--jemalloc.Netty内存分配过程中总体遵循以下规则: 优先从缓存中分配 如果缓存中没有的话,从内存池看看有没有剩余可用的 如果 ...