修改于 2019-11-10

1 length:长度

<script>
var arr = [1,2,3,4,5,6,7,8];
console.log(arr.length);//arr.length = 8;
arr.length = 5;//给定数组长度;
console.log(arr);//arr = [1,2,3,4,5];
delete arr[2];//删除arr[2],数组长度不变;
console.log(arr);//arr = [1, 2, empty, 4, 5];
console.log(typeof(arr[2]));//undefined;
console.log(arr.length);
</script>

2 pop,push:方法,把数组相当于一个栈

push(x):向数组尾部压入x,并返回新数组的长度

pop():从尾部弹出一个元素,并返回弹出的元素

  <script>
var arr = [1,2,3,4,5];
var number = arr.push(7);//arr.push(9) 相当于 arr[arr.length] = 7;
console.log(arr);//arr = [1,2,3,4,5,7]
console.log(number);//
var num = arr.pop();
console.log(arr);// arr = [1,2,3,4,5]
console.log(num);//
</script>

3 unshift 和 shift 方法,把数组相当于一个队列

unshift(x):向数组头部插入x,并返回数组长度

shift():从头部弹出一个元素,并返回弹出的元素

  <script>
var arr = [1,2,3,4,5];
var number = arr.unshift(9);
console.log(arr);// arr = [9,1,2,3,4,5];
console.log(number);//
var num = arr.shift();
console.log(arr);// arr = [1,2,3,4,5];
console.log(num);//
</script>

4 slice 和 splice 方法

slice(x,y):返回数组[x,y),索引位置的片段,左从0开始,右从-1开始,不影响原数组

splice(x,y,[.....]):x:删除的起始位置,y删除的个数(没有y的话,删除起始点开始所有),[...]为要插入数组的所有参数;splice方法改变原数组

 <script>
var arr = [1,2,3,4,5];
console.log(arr.slice(1,3));//[2, 3]
console.log(arr);// [1,2,3,4,5]
console.log(arr.slice(1));//[2, 3, 4, 5]
console.log(arr.length);//
console.log(arr.slice(0,-1));//[1, 2, 3, 4]
var arr1 = [1,2,3,4,5,6];
console.log(arr1.splice(1,2));//[2, 3]
console.log(arr1);//[1, 4, 5, 6]
console.log(arr1.splice(0));//[1, 4, 5, 6]
console.log(arr1);//[]
arr1 = [1,6]
console.log(arr1.splice(0,1,1,2,3,'4','5'));//[1]
console.log(arr1);//[1, 2, 3, "4", "5", 6]
</script>

5 join 方法,把数组变为一个字符串(用指定分割符划分)//相反于string.split()方法,它把字符串变为数组

join("x"):将一个数组用x分割符生成一个字符串,join()默认分割符为",",不改变原数组;

<script>
var arr = [1,2,3,4,5];
console.log(arr.join());//1,2,3,4,5
console.log(typeof(arr.join()));//string
console.log(arr.join("-"));//1-2-3-4-5
console.log(arr.join(""));//
console.log(arr);//[1,2,3,4,5]
</script>

6 sort 和 reverse 方法

reverse():在原数组操作,并把元素颠倒,改变原数组

sort(x):不传x:对原数组按字母表顺序排列,undefined排在最后;传x:x一般为一个比较函数,用比较函数的返回值来判定排序,改变原数组

<script>
var arr = [1,3,2,4,5];
console.log(arr.reverse());//[5, 4, 2, 3, 1]
console.log(arr);//改变原数组,arr = [5, 4, 2, 3, 1]
var arr1 = [4,3,2,undefined,1];
console.log(arr1.sort());//[1, 2, 3, 4, undefined]
console.log(arr1);//arr = [1, 2, 3, 4, undefined]
var arr2 = [11,13,12];
function flag(a,b){return a-b};//function(a,b);a为i+1,b为i;当要比较的时候,从中间开始比较
console.log(arr2.sort(flag));//逆序排列,arr2 = [13, 12, 11];
</script>

7 concat 方法

arr.concat(x): 将数组arr中的元素和参数x进行连接并返回连接后的数组,不会影响原先的arr数组

  <script>
var arr = [1,2,3,4,5];
console.log(arr.concat(1,'2',3,[4,5],[6,[7,8]]));//[1,2,3,4,5,1,'2',3,4,5,6,[7,8]]
console.log(arr);//[1,2,3,4,5]
</script>

8 Array.from()方法

将类数组和可遍历的对象变成真正的数组

  <script>
var oLi = document.querySelectorAll('li');
console.log(typeof(oLi));//object
console.log(Array.from(oLi));//Array(3) [ li, li, li ]
</script>

9 ...rest参数的逆运算,将数组变成参数列

console.log(...[1,2,3,4]); //1 2 3 4

10 find()和findIndex()

查找值或位置,参数为一个判断函数

  <script>
var arr =new Array(1,2,3,4,5,6);
console.log(arr.find((i) => { return i==2}))//
console.log(arr.findIndex((i) => { return i==2}))//
</script>

11 entries() , keys() ,values()对数组返回名字相对应的可遍历对象

  <script>
var arr =new Array(1,2,3,4,5,6);
console.log([...arr.entries()]);//键值对Array(6) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
console.log([...arr.keys()]);//键 Array(6) [ 0, 1, 2, 3, 4, 5 ]
console.log([...arr.values()]);//值 Array(6) [ 1, 2, 3, 4, 5, 6 ]
</script>

12 for in 和 for of

  <script>
var arr =new Array(1,2,3,4,5,6);
for(i in arr){//遍历键
console.log(i);
}//0,1,2,3,4,5
for(i of arr){//遍历值
console.log(i);
}//1,2,3,4,5,6
</script>

13 forEach(function(item,index,array)) 遍历处理函数

  <script>
var arr =new Array(1,2,3,4,5,6);
arr.forEach((i) => {console.log(i)});//1,2,3,4,5,6
</script>

js基础总结03 --操作数组的更多相关文章

  1. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  2. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  3. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  4. JS基础-分支结构-循环-数组

    1.分支结构  1.if结构    语法:    if(条件){       语句块:    }    注意:      1.条件尽量是boolean的,如果不是boolean的,以下条件值,会当做f ...

  5. js基础篇(dom操作,字符串,this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--数组

    1.什么事数组 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦.我们用 ...

  7. JS基础之属性操作注意事项

    1.js中注意问题 font-size 改成fontSize padding-top 改成paddingTop 2.js动态添加Class class    改成className 3.oInp.ty ...

  8. 1.7 js基础,字符串、数组小结

    一.arguments  实参参数的数组         实参[实际的值],形参[形式上的参数]         当参数个数不固定的时候使用.         示例: script> var g ...

  9. 【JS基础】DOM操作

    appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值

随机推荐

  1. java中List、Set和Map三个接口及其主要实现类

    三个接口都在java.util包下 List与Set具有相似性,它们都是单列元素的集合,所以,它们有一个共同的父接口,叫Collection,Map没有继承Collection接口 1.List接口: ...

  2. Oracle自带工具sql优化集-SQL Tuning Advisor (使用心得体会)

    如何有效的诊断和监控高负载的SQL对于DBA来说并非是件容易的事情,对SQL语句手工调优需要很多的经验和技巧, 结合个人经验常见如下问题:          . 对SQL语句本身进行优化以便获得更优的 ...

  3. Java 多线程爬虫及分布式爬虫架构探索

    这是 Java 爬虫系列博文的第五篇,在上一篇 Java 爬虫服务器被屏蔽,不要慌,咱们换一台服务器 中,我们简单的聊反爬虫策略和反反爬虫方法,主要针对的是 IP 被封及其对应办法.前面几篇文章我们把 ...

  4. Js获取宽高度的归纳集锦总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种.属性根据不同的兼容性也分为五种 window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关 window.inner ...

  5. UVa12105 越大越好

    题文:https://vjudge.net/problem/12364(或者见紫书) 题解: 因为题目中有两个限制条件,那么我们就顺着题目的意思来dp,设dp[i][j]表示目前还剩下的i个火柴,用这 ...

  6. RF作用与目的

    robotframework自动化原理:通过ride工具编写脚本,加载指定的UI测试库,再通过pybot程序去运行指定脚本,调用浏览器驱动,打开浏览器,操作浏览器页面元素,达到模拟用户操作的行为 为什 ...

  7. [Luogu3420][POI2005]SKA-Piggy Banks

    题目描述 Byteazar the Dragon has NNN piggy banks. Each piggy bank can either be opened with its correspo ...

  8. 常用函数-String

    /************************************************************************ 函数功能:将字符串中str的old_value子字符 ...

  9. 安装Go语言及搭建Go语言开发环境

    一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境 下载 下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站(推荐):https://gol ...

  10. python-利用freeze生成requirements文件

    使用场景:本地电脑开发完成的python自动化项目,需要导出python相关的依赖包以便后续迁移项目使用. C:\Users\acer>e: E:\>pip freeze >requ ...