数组相关方法积累(vue\ag等特别常用)
改变原数组的:
- shift:将第一个元素删除并且返回删除元素,空即为undefined
- unshift:向数组开头添加元素,并返回新的长度
- pop:删除最后一个并返回删除的元素
- push:向数组末尾添加元素,并返回新的长度
- reverse:颠倒数组顺序
- sort:对数组排序
- splice:splice(start,length,item)删,增,替换数组元素,返回被删除数组,无删除则不返回
不改变原数组的:
- concat:连接多个数组,返回新的数组
- join:将数组中所有元素以参数作为分隔符放入一个字符
- slice:slice(start,end),返回选定元素, 从某个已有的数组返回选定的元素,从start位开始返回到end(包括start不包括end)如果是负数,表示从数组尾部进行计算(同样:包括start不包括end),请注意,该方法并不会修改数组,而是返回一个子数组
- map,filter,forEach,some,every等不改变原数组
-----------------------------------------------------------------------------------------------------------------------------
1、 join()
功能:将数组中所有元素都转化为字符串并连接在一起。
输入: 分隔符,默认为逗号
输出:分隔符分割的字符串
举例:
var a = [1,2,3];
a.join(); // =>"1,2,3"
a.join(";");// =>"1;2;3"
2、 reverse()
功能:将数组中的元素颠倒顺序。
输入:无
输出:逆序的数组
举例:
var a = [1,2,3];
a.reverse.join()// =>"3,2,1"
3、sort()
功能:将数组中的元素
输入:比较函数或null。null时表示按照字母表顺序排序;传入带两个参数的比较函数时;第一个参数在前,则返回小于0的数值;第一个参数在后,则返回大于0的数组
输出:排序后数组
注意:改变了原数组
举例:
var a = [22,33,11111,4444];
a.sort();// =>11111,22,33,4444
a.sort(function(a,b){
return a-b;
});// => 22,33,4444,11111
a.sort(function(a,b){return b-a})// =>11111,4444,33,22
4、concat()
功能:数组拼接的功能
输入:待拼接的元素;如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组。
输出:拼接后的新数组
注意:新建的数组,原数组不改变。
举例:
var a = [1,2,3];
a.concat(4,5) // =>[1,2,3,4,5]
a.concat([4,5]) // =>[1,2,3,4,5]
a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]
5、slice()
功能:获取原数组的片段或子数组
输入:片段的开始和结束
输出:返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。
注意:新建的数组,原数组不改变。
举例:
var a = [1,2,3,4,5];
a.slice(0,3);// =>[1,2,3]
a.slice(3);// =>[4,5]
a.slice(1,-1)// =>[2,3,4]
6、splice()
功能:从数组中删除元素、插入元素到数组中或者同事完成这两种操作。
输入:第一个参数为指定插入或删除的起始位置,第二个参数为要删除的个数。之后的参数表示需要插入到数组中的元素
输出:返回一个由删除元素组成的数组。
注意:新建了一个数组,并修改了原数组
举例:
var a = [1,2,3,4,5,6,7,8];
a.splice(4) // =>[5,6,7,8];a [1,2,3,4]
a.splice(2,0,'a','b') // =>[];a [1,2,a,b,3,4]
7、push()和pop()
功能:push从数组尾部添加一个或多个元素,并返回数组新的长度;pop返回最后一个元素
输入:push输入为插入的元素;pop输入为空
输出:push为新长度;pop为返回的数组元素
举例:
var stack = [];
stack.push(1,2);// =>stack:[1,2],返回2
stack.pop;// => stack: [1],返回2
8、unshift()和shift
功能:类似push和pop,不同是从头部插入和删除,而非尾部
9、toString()和toLocaleString()
功能:将数组的每个元素转化为字符串,并且输入用逗号分隔的字符串列表。功能类似join();
输入:无
输出:字符串
举例:
[1,2,3].toString() // =>'1,2,3'
***********以下为es5中新增的9个方法*********
10、forEach()
功能:从头至尾遍历数组,为每个元素调用指定函数
输入:输入为一个待遍历函数,函数的参数依次为:数组元素、元素的索引、数组本身
输出:只是执行了遍历函数,无特定返回
举例:
var data = [1,2,3,4,5];
data.forEach(function(v,i,a){a[i] = v + 1;});
data // =>[2,3,4,5,6]
11、map()
功能:调用的数组的每一个元素传递给指定的函数,并返回一个新数组
输入:和forEach一样
输出:执行完函数的新数组
注意:返回新数组,不修改原数组
举例:
a = [1,2,3];
b = a.map(function(x){return x*x;}); // =>[1,4,9]
12、filter()
功能:将数组元素执行特定函数,而返回一个子集。
输入:执行逻辑判断的函数,该函数返回true或false,参数类似forEach和map()
输出:如果执行输入函数返回值为true,则传递给判定函数的元素是这个子集的成员
举例:
a = [5,4,3,2,1];
smallvalues = a.filter(function(x){return x<3});// =>[2,1]
13、every()和some()
功能:对数组元素进行指定函数的逻辑判断。
输入:特定函数
输出:true 或者false
举例:
var a = [1,2,3,4,5];
a.every(function(x){return x<10;}) // =>true
14、reduce()和reduceRight()
功能:使用指定的函数将数组元素进行组合,生成单个值。
输入:两个参数,第一个是执行化简操作的函数。第二个(可选)的参数是一个传递给函数的初始值。
注意:执行化简的函数的第一个参数为目前为止化简操作累积的结果。
15、indexOf()和lastIndexOf()
功能:搜索整个数组中具有给定值得元素,返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。
输入:元素的值。
输入:索引值
*************************华丽分割ES6扩展*************************
16、Array.from()
功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象
输入:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
输入:数组
举例:
let arrayLike = {
'0':'a',
'1':'b',
'2':'c',
length:3
};
let arr2 = Array.from(arrayLike);// =>['a','b','c']
17、Array.of()
功能:将一组值,转换为数组。
输入:数组元素
输出:数组
举例:
Array.of(2,11,3)// =>[2,11,3]
Array.of(3)// =>[3]
18、copyWithin()
功能:在当前数组内部,将指定位置的成员复制到其他位置,返回当前数组。
输入:第一个参数(从该位置开始替换数据);第二个参数可选(从该位置开始读取数据,默认为0,负值表示倒数);第三个参数(到该位置前停止读取,默认为数组长度)
输出:返回当前替换后的数组。
注意:改变了当前数组
举例:
[1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5]
19、find()和findIndex()
功能:找到第一个符合条件的数组成员。
输入:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。
输出:find()返回找到的成员;findIndex()返回成员的位置。
举例:
[1,5,10,15].find(function(value,index,arr){
return value > 9;
})// =>10
20、fill()
功能:使用给定的值,填充一个数组。
输入:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。
输出:填充后的数组
举例:
['a', 'b', 'c'].fill(7, 1, 2)
// =>['a', 7, 'c']
21、entries()、keys()、values()
功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。
输入:无
输出:遍历器对象
举例:
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// =>0
// =>1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// =>'a'
// =>'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// =>0 "a"
// =>1 "b"
如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历。
22、includes()
功能:表示某个数组是否包含给定的值
输入:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。
输出:一个布尔值。
注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。
举例
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
array.indexOf(searchElement[, fromIndex = 0])
返回指定元素能在数组中找到的第一个索引值,否则返回-1
fromIndex可以为负,表示从倒数第n个开始(此时仍然从前向后查询数组)
使用“严格相等”(===)进行匹配
一个例子:
var obj = {a: 'test'}
var arr = ['a', 'b', {a: 'test'}]
console.log(arr.indexOf(obj)) //-1
var arr2 = [1, 'b', {a: 'test'}]
console.log(arr2.indexOf('1')) //-1
array.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
返回指定元素在数组中的最后一个的索引,如果不存在则返回-1, 从数组的后面向前查找
数组相关方法积累(vue\ag等特别常用)的更多相关文章
- Vue.js入门及其常用指令
一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...
- vue.js介绍,常用指令,事件,以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- vue 快速入门、常用指令(1)
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...
- Vue.js学习(常用指令)
Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...
- Vue基础知识之常用属性和事件修饰符(二)
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Vue.js中的常用的指令缩写
Vue.js为两个最为常用的指令提供了特别的缩写: v-bind缩写 <!--完整语法--> <a v-bind:href="url">测试</a&g ...
- php数组去重、魔术方法、redis常用数据结构及应用场景
一.用函数对数组进行去重的方法 1.arrau_unique函数的作用 移除数组中重复的值. 将值作为字符串进行排序,然后保留每个值第一次出现的健名,健名保留不变. 第二个参数可以选择排序方式: SO ...
- Vue(三)常用指令
(1) v-model 双向数据绑定,一般用于表单元素 <script> window.onload=function(){ new Vue({ // el:'.itany', el:'d ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
随机推荐
- AngularJs2 构建简单的英雄编辑器
参考上一篇文章的步骤,重新把相关环境准备.目录结构走一遍. 这一次我们要开始创建真正的Angularjs项目了. 显示我们的英雄 我们要在应用中显示英雄数据 我们来为 AppComponent 添加两 ...
- C#多边形求角——实例说
前段时间有写过一个计算多边形角度的代码,这里给它整理整理,留给自己也送给萌新. 看左下图,这是一个多环的多边形,一个外环(内部为多边形内部区域),一个内环(外部为多边形内部区域),同时多边形中任意一个 ...
- C#——做一个简单代理IP池
一.缘由. 抓取数据时,有一些网站 设置了一些反爬虫设置,进而将自己本地 IP 地址拉入系统黑名单.从而达到禁止本地 IP 访问数据的请求. 二.思路. 根据其他 代理 IP 网站,进行一个免费的代理 ...
- UWP多线程枚举安全的List
最近在做windows runtime下APP开发的工作.在Service层请求返回后,往往会通过回调的形式来通知UI更新数据.多个线程操作经常出现foreach抛出异常:System.Invalid ...
- c语言------第一次作业,分支,顺序结构
1.1思维导图 1.2本章学习体会及代码量学习体 1.2.1学习体会 初次接触C语言,由于比较懒惰,感觉学习脚步跟不上身边的同学,也比较困扰.但伴随着pta上多次显示的##编译错误##,坚持不懈地问舍 ...
- 注意力机制(Attention Mechanism)应用——自然语言处理(NLP)
近年来,深度学习的研究越来越深入,在各个领域也都获得了不少突破性的进展.基于注意力(attention)机制的神经网络成为了最近神经网络研究的一个热点,下面是一些基于attention机制的神经网络在 ...
- GO学习笔记 - 基本数据类型
官方教程:https://tour.go-zh.org/basics/11 Go 的基本类型有Basic types bool string int int8 int16 int32 int64 ui ...
- AGC007C Pushing Balls
题目链接 题意:\(N\)个坑,\(N+1\)个球,相间分布,距离为以\(d_1\)为首项,\(x\)为公差的等差数列.对于每次操作,随机选择一个未入坑的球,随机选择向左或向右,掉入第一个没有球的坑, ...
- CTF中密码学一些基础
本文作者:i春秋签约作家MAX. 凯撒密码作为一种最为古老的对称加密体制,在古罗马的时候都已经很流行,他的基本思想是:通过把字母移动一定的位数来实现加密和解密. 给大家先找两道题,来一起探讨基础密码学 ...
- rpm小结
包括安装.卸载.升级.查询.校验.数据库维护 一. 安装: 常用方法:rpm -ivh 包名 ,其中“i”表示安装, "v"表示显示安装过程,“h"表示以#显示程 ...