JavaScript内置对象之Array的使用小结


Posted in Javascript onMay 12, 2020

数组的创建方式:

1.字面量:

放置一个数值时,就是一个数据。

var arr = [6];

2.构造函数:

放置一个数据时,表示长度或数据的个数,空表示undefined。

var arr = new Array(6);

建议:Array作为构造函数,行为很不一致。因此,不建议使用它生成新数组,直接使用数组字面量是更好的做法。

数组的操作:

1.push();

用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。

注意,该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.push("hello")); //4
  console.log(arr);        //[1,2,3,"hello"]---原数组改变
  console.log(arr.push("a","b")); //6
  console.log(arr);        //[1,2,3,"hello","a","b"]---原数组改变

2.pop();

用于删除数组的最后一个元素,并返回该元素。对空数组使用pop方法,不会报错,而是返回undefined。

注意,该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.pop());   //3
  console.log(arr);      //[1,2] →原数组改变

3.concat();

合并数组。

注意,该方法不会改变原数组

var arr1 = [1,2,3]
  var arr2 = arr1.concat();
  console.log(arr1);      //[1,2,3]→→原数组
  console.log(arr1 === arr2); //false
  console.log(arr2);      //[1,2,3]→→原数组的副本
  console.log(arr1.concat("hello","world"));
  //[1,2,3,"hello","world"]
  console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));  
  //[1,2,3,"a","b",[3,4],{"name":"admin"}]
  console.log(arr1);      //[1,2,3]→→原数组未改变

4.shift();

用于删除数组的第一个元素,并返回该元素。

注意,该方法会改变原数组

var arr = [1,2,3]
  console.log(arr.shift());    //1
  console.log(arr);        //[2,3]→→原数组改变

5.unshift();

用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。

注意,该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.unshift("hello")); //4
  console.log(arr);          //["hello",1,2,3]→→原数组改变
  console.log(arr.unshift("a","b")); //6
  console.log(arr);          //["a","b","hello",1,2,3]→→原数组改变

6.slice();

用于复制目标数组的一部分,返回一个新数组。

注意,该方法不会改变原数组。

如果slice方法的参数是负数,则表示倒数计算的位置;如果第一个参数大于等于数组长度,或者第二个参数小于第一个参数,则返回空数组。

var arr = ["a","b","c","d","e"];
  console.log(arr.slice(1,3));    //["b","c"]
  console.log(arr.slice(1));     //["b","c","d","e"]
  console.log(arr.slice(-4,-1));   //["b","c","d"]
  console.log(arr.slice(-2));     //["d","e"]
  console.log(arr.slice(1,-2));    //["b","c"]
  console.log(arr);          //["Tom","Jack","Lucy","Lily","May"]→→原数组未改变

7.splice();

用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。

注意,该方法会改变原数组。
起始位置如果是负数,则表示从倒数位置开始删除。

①不传参时:无操作;

var arr = ["a","b","c","d","e"];
  console.log(arr.splice()); //[]
  console.log(arr);      //["a","b","c","d","e"]→→无操作

②只传入start:表示从索引为start的数据开始删除,直到数组结束;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2));   //["c", "d", "e"]
  console.log(arr);        //["a", "b"]→→原数组改变

③传入start和num:表示从索引为start的数据开始删除,删除num个;

var arr = ["a","b","c","d","e"];   
  console.log(arr.splice(2,2));  //["c", "d"]
  console.log(arr);        //["a", "b", "e"]→→原数组改变

④传入更多:表示从索引为start的数据开始删除,删除num个,并将第三个参数及后面所有参数,插入到start的位置;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2,2,"f","g")); //["c", "d"]
  console.log(arr);           //["a", "c", "f", "g", "e"]---原数组改变

8.reverse();

用于颠倒排列数组元素,返回改变后的数组(还是原数组)。

注意,该方法将改变原数组

var arr = [a,b,c];
  console.log(arr.reverse());   //[c,b,a]
  console.log(arr);        //[c,b,a]→→原数组改变

9.sort();

对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变;

注意:sort方法不是按照大小排序,而是按照字典顺序。也就是说,数值会被先转成字符串,再按照字典顺序进行比较,例如:121排在13的前面;如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。

[10111,1101,111].sort(function(a,b){
return a - b;   // 升序
// return b - a; // 降序
})  // [111,1101,10111]

10.join();

以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔;

注意, 该方法不会改变原数组;
如果数组成员是undefined或null或空位,会被转成空字符串。

var arr = [a,b,c];
  console.log(arr.join());     // a,b,c
  console.log(arr.join("*"));   // a*b*c
  console.log(arr);        //[1,2,3]→→原数组未改变

11.for- in();

遍历语句,类似于循环,但for-in可以遍历没有索引的集合,也被成为枚举。

  • for(var i in arr) i是下标;
  • for(var i in obj) i是属性名.

补充:
push和pop结合使用,就构成了“后进先出”的栈结构(stack);
push和shift结合使用,就构成了“先进先出”的队列结构(queue)。

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    /*
     *
     * Array.isArray(对象)---->判断这个对象是不是数组
     * instanceof关键字
     * .concat(数组,数组,数组,...) 组合一个新的数组
     * .every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值,第二个参数是索引值,第三个参数是原来的数组(没用)
     * 如果这个数组中的每个元素的值都符合条件,最后才返回的是true
     *
     * .filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组
     *
     * .push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
     * .pop();--->删除数组中最后一个元素,返回值就是删除的这个值
     * .shift();--->删除数组中第一个元素,返回值就是删除的这个值
     * .unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
     * .forEach(函数)方法---遍历数组用---相当于for循环
     * .indexOf(元素值);返回的是索引,没有则是-1
     * .join("字符串");----返回的是一个字符串
     * .map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
     * .reverse();----->反转数组
     * .sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
     * .arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
     * .splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素
     *
     *
     * */
    //构造函数
    //  var arr1=new Array();
    //  //字面量的方式
    //  var arr2=[];


    //对象是不是数组类型:两种
    //1  instanceof
    //  var obj=[];
    //  console.log(obj instanceof Array);//false
    //
    //  //2 使用数组的
    //  console.log(Array.isArray(obj));//


    //  var arr=["a","b","c"];
    //  var newArr=Array.from(arr);
    //  console.log(newArr);

    //  var arr1=[10,20,30];
    //  var arr2=[40,50,60];
    //  console.log(arr1.concat(arr2));

    //  var arr=[1000,2000,3000];
    //  //a----: 元素的值
    //  //b----: 索引的值
    //  //c----:谁调用了这个方法,那么c就是谁---->arr
    //  var flag= arr.every(function (a,b) {
    //   //console.log(a+"==="+b+"===="+c);
    //   return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
    //  });


    //  var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
    //  var flag=arr.every(function (ele,index) {
    //   //数组中的每个元素的长度是不是大于4
    //   return ele.length>4;
    //  });


    //console.log(flag);


    //  var arr=[10,20,30,40,50,60,70,80];
    //  var newArr=arr.filter(function (ele) {//ele---每个元素
    //   return ele>40;
    //  });
    //  console.log(newArr);

    //  var arr=[10,0,20,0,40,0,60,100];
    //  var newArr=arr.filter(function (ele) {
    //   return ele!=0;
    //  });
    //  console.log(newArr);

    //  var arr=[10,20,30,40,50];
    //  var result=arr.unshift(100);
    //  console.log(result);
    //  console.log(arr);
    //
    //  var arr = [10, 20, 30, 40];
    //  arr.forEach(function (ele,index) {
    //   console.log(ele+'======'+index);
    //  });

    //  var arr=[10,20,30,40];
    //  var index=arr.indexOf(300);
    //  console.log(index);


    //  var arr=["小白","小黑","小红","小芳","小绿","小苏"];
    //  var str=arr.join("|");
    //  console.log(str);


    //  var numbers = [1, 4, 9];
    //  var roots = numbers.map(Math.sqrt);
    //  console.log(roots);


    //  var arr=[10,20,30,40,50];
    //  arr.reverse();//反转
    //  console.log(arr);


    //  var arr=[1,40,20,10,100];
    //  //a---arr[j]
    //  //b---arr[j+1]
    //  arr.sort(function (a,b) {
    //   if(a>b){
    //    return 1;
    //   }else if(a==b){
    //    return 0;
    //   }else{
    //    return -1;
    //   }
    //  });
    //  console.log(arr);


    //
    //  var arr=[10,20,30,40,50,60,70,80,90,100];
    //  var newArr= arr.slice(3,7);
    //  console.log(newArr);


    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

    // myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'

    // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

    myFish.splice(2, 1); // 从索引为2的位置删除一项(也就是'drum'这一项)

    console.log(myFish);
    // myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

  </script>
</head>
<body>

</body>
</html>

到此这篇关于JavaScript内置对象之Array的使用小结的文章就介绍到这了,更多相关JavaScript内置对象Array内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 #Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 #Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 #Javascript
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
Node.js API详解之 console模块用法详解
May 12 #Javascript
基于JS实现视频上传显示进度条
May 12 #Javascript
You might like
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
详解php命令注入攻击
2019/04/06 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS实现页面打印功能
2017/03/16 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
angularjs请求数据的方法示例
2019/08/06 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python递归实现汉诺塔算法示例
2018/03/19 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python读取ini配置文件过程示范
2019/12/23 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
交通事故调解协议书
2015/05/20 职场文书