1.length 数组长度

计算数组的长度

var arr=[1,2,3,4,5];
console.log(arr.length);//输出结果是5

2. push() 添加元素

向数组尾部添加新元素,返回值是数组的新长度

var arr=[1,2,3,4,5];
console.log(arr.push(6,7));//输出结果是7
console.log(arr);//输出结果是[1,2,3,4,5,6,7]

3. pop() 删除元素

删除并返回最后一个元素

var arr = [1, 2, 3, 4, 5];
console.log(arr.pop());//输出结果是5
console.log(arr);//输出结果是[1,2,3,4]

4. reserve() 颠倒顺序

将数组元素颠倒顺序,数组本身发生了变化

var arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());//输出结果是[5,4,3,2,1]
console.log(arr);//输出结果是[5,4,3,2,1]

5. join() 数组转为字符串

把数组转为字符串。即把数组所有元素通过指定的分隔符变革一个字符串,数组本身不发生变化。

var arr = [1, 2, 3, 4, 5];
console.log(arr.join(','));//输出结果是1,2,3,4,5
console.log(arr);//输出结果是[1, 2, 3, 4, 5]

6. map() 操作元素

将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组。=>是es6的箭头函数,在后面会介绍。

对数组进行遍历

var arr = [1, 2, 3, 4, 5];
arr.map(item => {
console.log(item)
})

对数组内容进行操作后返回新数组

var arr = [1, 2, 3, 4, 5];
console.log(arr.map(item => item*2)) //输出结果是[2, 4, 6, 8, 10]
console.log(arr) //输出结果是[1, 2, 3, 4, 5]

7. forEach() 遍历元素

将数组中的每个元素执行提供的函数,没有返回值,并没有改变原来的数组,常用来遍历数组。

var arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
console.log(item)
})

8. filter() 元素过滤

将所有元素进行判断,将满足条件的元素作为一个新数组返回,不会改变原始数组。

实例1:过滤所有的奇数

var arr = [1, 2, 3, 4, 5];
//过滤出奇数
console.log(arr.filter(item => {
return item%2==1
})) //输出结果是[1, 3, 5]
console.log(arr)//输出结果是 [1, 2, 3, 4, 5]

实例2:判断数组中是否包含某个值。当包含时会返回此值的数组,不存在时返回空数组

var arr = [1,5,4,3]
console.log(arr.filter(item => item==3))//[3]

实例3:过滤掉null,undefined,空字符串

var arr2 = [1, null, 2, '', 'm', undefined, 222]
console.log(arr2.filter(item => item))//[ 1, 2, 'm', 222 ]

实例4:数组去重。index表示索引,self表示filter函数本身。

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];
var arr2 = arr.filter((item, index, self) => self.indexOf(item) === index)
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

9. every() 元素判断

将所有元素进行判断,如果所有元素都满足判断条件,则返回true,否则为false。常作为所有条件判断。

var arr = [1, 2, 3, 4, 5];
var morethan4 = value => value > 4
var lessthan6 = value => value < 6
console.log("arr数组所有元素都大于4吗?" + arr.every(morethan4))//输出结果是 arr数组所有元素都大于4吗?false
console.log("arr数组所有元素都小于6吗?" + arr.every(lessthan6))//输出结果是 arr数组所有元素都小于6吗?true

10. some() 元素判断

将所有元素进行判断,如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false。常作为部分条件判断。

var arr = [1, 2, 3, 4, 5];
var morethan4 = value => value > 4
var morethan6 = value => value > 6
console.log("arr数组存在元素大于4吗?" + arr.some(morethan4))//输出结果是arr数组存在元素大于4吗?true
console.log("arr数组存在元素大于6吗?" + arr.some(morethan6))//输出结果是arr数组存在元素大于6吗?false

11. reduce() 操作内容

所有元素都调用返回函数,返回值为最后结果,传入的值必须是函数类型。

var arr = [1, 2, 3, 4, 5];
//遍历元素,将它们累加后返回
console.log(arr.reduce((a,b) => {
return a+b
}))//输出结果是15

12. shift() 删除元素

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

var arr = [1, 2, 3, 4, 5];
console.log(arr.shift())//输出结果是 1
console.log(arr)//输出结果是[2, 3, 4, 5]

13. unshift() 添加元素

将一个或多个元素添加到数组的开头,并返回数组的长度。

var arr = [1, 2, 3, 4, 5];
console.log(arr.unshift(6,7))//输出结果是7
console.log(arr)//输出结果是[1, 2, 3, 4, 5, 6, 7]

14. concat() 连接数组

将多个数组进行拼接,返回一个新数组。

var arr = [1, 2, 3, 4, 5]
var arr2=[6, 7]
console.log(arr.concat(arr2))//输出结果是[1, 2, 3, 4, 5, 6, 7]

15. toString() 数组转字符串

将数组转为字符串。

var arr = [1, 2, 3, 4, 5]
console.log(arr.toString())//输出结果是1, 2, 3, 4, 5

16. splice(开始位置, 删除的个数,元素)

万能的方法,可实现数组的增删改。常用于删除指定元素。

新增元素时,删除个数为0:

var arr = [1, 2, 3, 4, 5]
arr.splice(1,0,6)//在索引为1的位置插入元素
console.log(arr)//输出结果是[1, 6, 2, 3, 4, 5]

删除元素时,元素不写:

var arr = [1, 2, 3, 4, 5]
arr.splice(1,1)//删除索引为1的元素
console.log(arr)//输出结果是[ 1, 3, 4, 5]

修改元素时,删除个数为1:

var arr = [1, 2, 3, 4, 5]
arr.splice(1,1,6)//把索引为1的元素替换为6
console.log(arr)//输出结果是[ 1,6, 3, 4, 5]

17. Array.isArray() 判断是否数组

判断是否是一个数组

var arr = [1, 2, 3, 4, 5]
//判断是否是一个数组
console.log(Array.isArray(arr))//输出结果是true
console.log(Array.isArray({'id':1}))//输出结果是false

18. sort() 数组排序

对数组的内容进行排序,可以数字,字符串数字,字母等,会按照Unicode进行升序排序。数组内容已经变成排序后的结果!

console.log([5,6,9,1,2,4].sort())//[1, 2, 4, 5, 6, 9]
console.log(['5','6','9','1','2','4'].sort())//["1", "2", "4", "5", "6", "9"]
console.log(['b','f','a','A','C','4'].sort())//["4", "A", "C", "a", "b", "f"]

下面看一个特例

console.log([5,1,10,20,2].sort())//[1, 10, 2, 20, 5]

结果出乎意料,10竟然在2前面,原因就是它是根据Unicode来排序。对于数字的这种情况,需要些一个方法,然后给sort调用:

function compare(m,n){
if (m < n) return -1
else if (m > n) return 1
else return 0
}
const arr = [5,1,10,20,2]
console.log(arr.sort(compare))//[ 1, 2, 5, 10, 20 ]

通过这种方式,自定义比较方式,就可以完美的解决这个问题。对于字符串数字也是类似。

JS数组的常用属性或方法的更多相关文章

  1. Node.js process 模块常用属性和方法

    Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...

  2. js dom 的常用属性和方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

  3. js数组定义、属性及方法(push/pop/unshfit/shfit/reverse/sort/slice/splice/indexOf/lastIndexOf)

    数组 一.定义数组 * 字面量方式  var 数组名称 = [ value,value,... ] * 构造函数方式 var 数组名称 = new Array(value,value,...):  v ...

  4. UITableView常用属性和方法 - 永不退缩的小白菜

    UITableView常用属性和方法 - 永不退缩的小白菜 时间 2014-05-27 01:21:00  博客园精华区原文  http://www.cnblogs.com/zhaofucheng11 ...

  5. UIView的一些常用属性和方法

    UIView的一些常用属性和方法 1. UIView的属性 UIView继承自UIResponder,拥有touches方法. - (instancetype)initWithFrame:(CGRec ...

  6. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  7. 第190天:js---String常用属性和方法(最全)

    String常用属性和方法 一.string对象构造函数 /*string对象构造函数*/ console.log('字符串即对象');//字符串即对象 //传统方式 - 背后会自动将其转换成对象 / ...

  8. UIView常用属性与方法/UIKit继承结构

    UIView常用属性与方法 @interface UIView : UIResponder<NSCoding, UIAppearance, UIAppearanceContainer, UIDy ...

  9. ios基础篇(四)——UILabel的常用属性及方法

    UILabel的常用属性及方法:1.text //设置和读取文本内容,默认为nil label.text = @”文本信息”; //设置内容 NSLog(@”%@”, label.text); //读 ...

随机推荐

  1. cassandra权威指南读书笔记--cassandra概述

    cassandra是一个开源的.分布式.去中心化.弹性可扩展.高可用.容错.可调一致性.面向行数据库,分布式设计基于Amazon Dynamo,数据模型基于Google BigTable.cassan ...

  2. Flink-v1.12官方网站翻译-P006-Intro to the DataStream API

    DataStream API介绍 本次培训的重点是广泛地介绍DataStream API,使你能够开始编写流媒体应用程序. 哪些数据可以流化? Flink的DataStream APIs for Ja ...

  3. Unity3d开发中遇到的问题记录

    安装Unity unity官方提供免费的community版本,功能健全,下载时还有Visual Studio,非常方便. 官方文档 Unity的官方文档非常权威!详尽!可靠!很多关于函数细节的疑惑都 ...

  4. Topo check failed. Mapred tasks exceed 1000000000

    Problem Description: java.sql.SQLException: EXECUTION FAILED: Task MAPRED-SPARK error SparkException ...

  5. Educational Codeforces Round 91 (Rated for Div. 2) B. Universal Solution

    题目链接:https://codeforces.com/contest/1380/problem/B 题意 你在和一个机器人玩石头剪刀布,给出一个长为 $n$ 的出拳序列,机器人会从某一处开始出拳 $ ...

  6. AtCoder Beginner Contest 183 E - Queen on Grid (DP)

    题意:有一个\(n\)x\(m\)的棋盘,你需要从\((1,1)\)走到\((n,m)\),每次可以向右,右下,下走任意个单位,\(.\)表示可以走,#表示一堵墙,不能通过,问从\((1,1)\)走\ ...

  7. (数据科学学习手札106)Python+Dash快速web应用开发——回调交互篇(下)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  8. C#中word导出功能骚操作

    马上过牛年了,先祝大家新年好,身体好,心情好!!! 年前最后写一篇之前项目开发的一个功能,自己根据系统业务,想到的一个解决办法,效率还是不错的,废话不多说,开整!!! 需求:企业填报自己的企业信息到系 ...

  9. OpenStack Train版-8.安装neutron网络服务(控制节点)

    安装neutron网络服务(controller控制节点192.168.0.10) 创建neutron数据库 mysql -uroot CREATE DATABASE neutron; GRANT A ...

  10. kubernetes进阶(三)服务发现-coredns

    服务发现,说白了就是服务(应用)之间相互定位的过程. 服务发现需要解决的问题: 1.服务动态性强--容器在k8s中ip变化或迁移 2.更新发布频繁--版本迭代快 3.支持自动伸缩--大促或流量高峰 我 ...