03前端入门课--数组的属性 操作方法
### 03：数组的属性 && 操作方法
[TOC]
#### 一、Array property 数组的属性
##### 1、constructor
返回对创建此对象的数组函数的引用
```javascript
[].constructor
// ƒ Array() { [native code] }
```
##### 2、length
返回 或者 设置数组中元素的数目
```javascript
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()
` 连接两个数组，并返回结果 `
```javascript
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()
` 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔 `
```javascript
const a = [1,2,3,4]
const aStrin = a.join(',') // "1,2,3,4"
```
` 那么在这个原生方法中我们常常会用到的这个方法来解决一些问题， 比如调换字符串的排序`
` eg: `
```javascript
const aArray = '1,2,3,4,5,6,7'
const arrayA = aArray.split(',').reverse().join(',')
// "7,6,5,4,3,2,1"
```
##### 3、pop()
` 删除并返回数组的最后一项 `
```javascript
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()
` 向数组的末尾添加一个或多个元素，并返回数组的新长度 `
```javascript
const a = [12,123,1234]
var l = a.push(12345)
console.log(l) // 4
console.log(a) // [12, 123, 1234, 12345]
```
##### 5、shift()
` 删除并返回数组的第一个元素 `
```javascript
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()
`向数组的开头添加一个或多个元素，并返回新的长度`
```javascript
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:`
```javascript
var stack = []
stack.push(1)
var item = stack.pop()
```
###### 2、队列
` 队列： 我们可以和 栈 进行对比，即为：只能够在 表的前端进行删除，只能够在表的后端进行插入操作. 即 先进者先出 ( 推-注射器 ) `
`eg:`
```javascript
var queue = []
queue.push(1)
queue.shift()
```
###### 3、反向队列
` 反向队列： 我们可以和 队列 进行对比，即为：只能够在 表的后端进行删除，只能够在表的前端进行插入操作. 即 先进者后出 ( 吸-注射器 ) `
`eg:`
```javascript
var reverseQueue = []
reverseQueue.unshift(1)
var item = reverseQueue.pop()
```
###### 今天就先说到这里，下班回家～
[Github地址，欢迎 Star](https://github.com/erbing/blog/blob/master/%E5%89%8D%E7%AB%AF%08%E4%B9%8B%E8%B7%AF/03%EF%BC%9A%E6%95%B0%E7%BB%84%E7%9A%84%E5%B1%9E%E6%80%A7%20%26%26%20%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95.md)
##### 7、slice()
` 从某个已有的数组返回选定的元素 `
` 经常用来将类数组转化成数组，这样做一方面可以利用现有的数组方法更加方便的处理，另一方面是处于性能的考虑 `
```javascript
var f = function(a,b,c,d,e,f){
var args = Array.prototype.slice.call(arguments,0)
console.log(args)
}
f(1,2,3,4,5,6) // [1, 2, 3, 4, 5，6]
```
` tips: 箭头函数中的 arguments 无效： 后文中会仔细介绍到。`
```javascript
var f = (...args) => Array.prototype.slice.call(args, 0)
f(1,2,2,2,2)
// [1, 2, 2, 2, 2]
```
换种写法就有了 - -
##### 8、splice()
` 删除元素，插入元素，替换元素。`
`8.1 删除元素 (index,numOfDelete)`
```javascript
var a = [1,2,3,4,5,6]
for( var i = 0, lens = a.length; i<lens; i++ ) {
if(a[i] == 4) break
}
console.log(i) // 3
var m = a.splice(i, 1) // [4] 返回被删除的元素
console.log(a) // [1, 2, 3, 5, 6] 删除了元素
```
`8.2 插入元素 (index,0，insertItem)`
```javascript
var a = [112,121,211,212]
var m = a.splice(1,0,1111111)
console.log(m) // []
console.log(a) // [112, 1111111, 121, 211, 212]
```
`8.3 替换元素 (index,numOfDelete，replaceItem)`
index: 替换的开始索引、 numOfDelete: 删除的长度、 replaceItem： 替换的新元素
```javascript
var a = [112,121,211,212]
var m = a.splice(1,2,1111111)
console.log(m) // []
console.log(a)
```
##### 9、sort()
` 对数组的元素进行排序 `
`默认情况下，sort()是升序排序，而且是调用每一项的toString()，然后比较得到的字符串。`
```javascript
var a = [1,11,2,13,45,15]
var m = a.sort()
console.log(m) // [1, 11, 13, 15, 2, 45]
```
` 这里大家肯定很好奇为毛线 2 排到了那么靠后的位置？ `
这里我们，做一个最为简单的 demo 来看一下
```javascript
var x = '2'
var y = '11'
x > y // true
2 > 11 // false
```
很简单的理解 默认情况下，sort()是升序排序，而且是调用每一项的toString()，然后比较得到的字符串。那么字符串 ‘2’ 比 字符串 ‘11’ 在 ascii表上 排名靠前
` tips: 可能你不太相信 `
` 我们通过 String.charcodeAt() 方法来查看，当前字符串在 ascii 表上的大小对比 `
```javascript
var x = '2'
var y = '11'
console.log(x.charCodeAt()) // 50
console.log(y.charCodeAt()) // 49
```
` 看到这里是不是恍然大悟 `
` 同时 sort()方法可以接收一个比较函数作参数，实现我们想要的排序。 `
```javascript
var asc = function(a, b) { // 升序
return a - b
}
var desc = function(a, b) { // 降序
return -asc(a, b)
}
var a = [11,22,12,1,23,13]
var aAsc = a.sort(asc)
console.log(aAsc) // [1, 11, 12, 13, 22, 23]
var aDesc = a.sort(desc)
console.log(aDesc) // [23, 22, 13, 12, 11, 1]
```
##### 10、reverse()
` 颠倒数组中元素的顺序。 `
```javascript
var a = [1,21,12,22,23,13,15,2,31]
var b = a.sort( (a, b) => a - b ) // [1, 2, 12, 13, 15, 21, 22, 23, 31]
var c = b.reverse() // [31, 23, 22, 21, 15, 13, 12, 2, 1]
```
##### 11、valueOf()
` 返回数组对象的原始值 `
```javascript
var a = [1,12,32,41,25]
var v = a.valueOf() // 1,12,32,41,25]
```
##### 12、indexOf()
` 判断当前数组中是否有某一项元素，若有则返回索引，若无则返回 -1 `
```javascript
var a = [1,12,32,41,25]
var t = a.indexOf(2) // -1
var f = a.indexOf(12) // 1
```
##### 13、toSource()
` 返回该对象的源代码 `
```javascript
var a = [1,12,32,41,25]
a.toSource() // a.toSource is not a function
```
` tips: `
只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。
```javascript
// in Firefox borwser
var o = {
name: 'zzz',
age: 18,
job: 'dev'
}
var s = o.toSource() // ({name: 'zzz', age: 18, job: 'dev'})
```
##### 14、toString()
` 把数组转换为字符串，并返回结果。 `
```javascript
var a = [12,12,12,12]
var t = a.toString() // "12,12,12,12"
```
##### 15、toLocaleString()
` 把数组转换为本地数组，并返回结果。 `
```javascript
var a = [12,12,12,12]
var t = a.toLocaleString() // "12,12,12,12"
var d = new Date() // Thu Jul 12 2018 16:34:46 GMT+0800 (中国标准时间)
var xd = d.toLocaleString() // "2018/7/12 下午4:34:46"
```
##### 16、forEach()、map()、filter()、reduce()、every()、some()
` 我们通过一张图 可以非常快速的了解并区分这些方法 `
###### 16.1 forEach()
` 让数组中的每一项做一件事 `
```javascript
var a = [1,2,3,4,1,2,3]
a.forEach(function(item, index) {
console.log(item+index)
})
```
###### 16.2 map()
` 让数组通过某种计算产生一个新的数组 `
```javascript
var a = [1,2,3,4,1,2,3]
var b = a.map((item, index)=>{
return item * index
})
b // [0, 2, 6, 12, 4, 10, 18]
```
###### 16.3 filter()
` 筛选出数组中符合条件的项，组成新的数组 `
```javascript
var a = [1,2,3,4,1,2,3]
var b = a.filter((item, index) => {
return item > 2
})
b // [3, 4, 3]
```
###### 16.4 reduce()
` 让数组中的前项 和 后项做某种计算，并累积最终值 `
```javascript
var a = [1,2,3,4,1,2,3]
var b = a.reduce((p, n) => {
return p + n
})
b // 16
```
###### 16.5 every()
` 检测数组中的每一项是否符合条件 `
```javascript
var a = [1,2,3,4,1,2,3]
var b = a.every((item, index) => {
return item > 2
})
b // false
```
###### 16.6 some()
` 检测数组中的是否 至少有一项满足条件 `
```javascript
var a = [1,2,3,4,1,2,3]
var b = a.some((item, index) => {
return item > 2
})
b // true
```
` 总结：`
这么多的关于数组的方法，也不能纯粹的死记硬背，需要结合场景，结合适当的代码需求来进行记忆。 当我们用过了好用的方法能够节约我们的时间的话，那么一次适合的使用场景就能让我们记住这些方法了～
当让，这些总结 也是为了能让小伙伴们能够知道 JS 中 数组的概念，对数组这个数据类型有一个大致的理解，以便在后续的开发中不会因为基础问题导致影响开发效率的事情发生。
03前端入门课--数组的属性 操作方法相关推荐
- 《前端之路》之三 数组的属性 操作方法（上）
目录 03:数组的属性 && 操作方法(上) 03:数组的属性 && 操作方法(上) 一.Array property 数组的属性 1.constructor 返回对创 ...
- 前端入门教程(七)CSS属性设置
宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多个字体名称作为一 ...
- 个人学习笔记——庄懂的技术美术入门课（美术向）03
个人学习笔记--庄懂的技术美术入门课(美术向)03 1 回顾渲染流程 2 尝试shader代码 3 Lambert试试 4 节点组 5 作业 1 回顾渲染流程 老师以美术绘画的角度理解渲染管线,比较形 ...
- js不完全入门之数组
数组是值得有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引. JS中的数组是弱类型的,数组中可以含有不同类型的元素. 数组元素甚至可以是对象或其它数组. var arr = [1 ...
- 个人学习笔记——庄懂的技术美术入门课（美术向）01
个人学习笔记--庄懂的技术美术入门课(美术向)01 0 前言 1 工程搭建示范 2 理论 2.1 结构(struct) 2.2 渲染管线 3 操作 3.1-2 向量/标量/点积等若干线代基础 3.3 ...
- 零基础前端入门系列（八）
CSS精讲(二) CSS体系知识介绍 选择器优先级 为什么关注优先级 优先级处理原则 !important 和 内联样式 样式继承 一个继承的例子 继承属性和非继承属性 范例 选择器权重计算 范例1 ...
- 【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
- 什么是前端？前端入门需要学习哪些技术？前端找工作需要具备什么样的条件？
一.web前端是什么 简单的来说就是,我们使用的APP.网站.小程序中所有可以直接看到的东西.比如:淘宝首页,中间部分的天猫新品.充值中心.右下角 我的淘宝,这些按钮都属于前端.那点一下按钮,跳到另一 ...
- 前端入门 前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
最新文章
- 清理C盘无用的垃圾的文件，给c盘瘦身
- Kmeans聚类算法分析(转帖)
- chrome 不支持12px以下字体为题的解决
- Python中的join()函数和split()函数的用法
- Modbus通信协议之CRC16冗余循环校验函数
- win10兼容android下载安装,Win10手机运行安卓App兼容工具下载！
- python︱imagehash中的四种图像哈希方式（phash/ahash/dhash/小波hash）
- 最齐全的射灯ies光域网素材，速来收藏
- 计算机制图的基本知识和技能,《计算机绘图基础》制图的基本知识和技能精讲.ppt...
- 宝子，你知道小程序代码大小超限除了分包还能怎么做吗？
- idea服务器与项目连接,idea服务器与项目连接数据库
- Linux Kernel Makefiles
- 计算机系统感染了病毒怎么办,老司机教你电脑感染了病毒怎么解决
- FreeRTOS STM32CubeMX port.c(483): error: A1586E: Bad operand types (UnDefOT, Constant) ...
- twitter视频下载php,Twitter推特红心点赞H5动画按钮特效
- Flink On Yarn HA 安装和配置
- java ant配置环境变量
- js 的json转数组，数组转json
- 时间序列分析预测实战之指数平滑法
- 2021天梯赛总决赛-L2-4 哲哲打游戏