大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、数组

1、数组定义

  1. 通过字面量定义数组var arr = [10,20,30];
  2. 通过构造函数定义数组var arr = new Array(参数); // 参数位置为一个数值时为数组长度,多个数值时为数组中的元素。如果没有参数的时候 Array后面的括号可以省略。

2、数组操作

  1. 数组长度: 数组名.length;

问:数组中存储的数据类型一定是一样的吗?

类型可以不一样。

问:数组的长度是不是可以改变呢?

可以改变。

3、数组高级API

3.1、判断数组和转换数组

  1. instanceof // 是一个关键字,判断A是否是B类型:A instanceof B。
  2. isArray() //HTML5中新增 ,判断是不是数组
  3. toString() //把数组转换成字符串,每一项用,分割
  4. valueOf() //返回数组对象本身
  5. join(变量) //根据每个字符把数组元素连起来变成字符串,变量可以有可以没有。不写变量默认用逗号分隔,无缝连接用空字符串。

instanceof

  1. var str1 = new String("abc");
  2. var str2 = "abc";
  3. console.log(str1 instanceof String); // true
  4. console.log(str2 instanceof String); // false str2不是String对象

join

  1. //join是把数组元素用特殊方式链接成字符串(参数决定用什么链接,无参默认用逗号链接)
  2. var arr = ["关羽","张飞","刘备"];
  3. var str1 = arr.join();
  4. var str2 = arr.join(" ");//如果用空格的话,那么元素之间会有一个空格
  5. var str3 = arr.join("");//用空字符串,链接元素,无缝连接
  6. var str4 = arr.join("&");
  7. console.log(str1);
  8. console.log(str2);
  9. console.log(str3);
  10. console.log(str4);

arguements

只在函数中使用,代表传入实参的数组。

arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)

  1. fn(1,2);
  2. fn(1,2,3);
  3. fn(1,2,3,4,5);
  4. function fn(a,b){
  5. //只在函数中使用,实参的数组。
  6. arguments[0] = 0; // 可以修改内容
  7. console.log(arguments);
  8. //伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)
  9. arguments.push(1); // arguments 伪数组没有push方法
  10. console.log(arguments instanceof Array); // false
  11. //形参个数
  12. console.log(fn.length);
  13. //实参个数
  14. console.log(arguments.length);
  15. // 形参和实参个数可以不同,因为实参传入的时候可以形参的个数不一样。
  16. // arguments.callee相当于函数名,这里打印整个函数。
  17. console.log(arguments.callee);
  18. }

3.2、数组增删和换位置(原数组将被修改)

  1. push() //在数组最后面插入项,返回数组的长度
  2. //数组1改后的长度 = 数组1.push(元素1);
  3. pop() //取出数组中的最后一项,返回最后一项
  4. //被删除的元素 = 数组1.pop();
  5. unshift() //在数组最前面插入项,返回数组的长度
  6. //数组1改后的长度 = 数组1.unshift(元素1);
  7. shift() //取出数组中的第一个元素,返回第一项
  8. //被删除的元素 = 数组1.shift();
  9. reverse() //翻转数组(原数组讲被反转,返回值也是被反转后的数组)
  10. //反转后的数组 = 数组1.reverse();
  11. sort(); //给数组排序,返回排序后的数组。如何排序看参数。
  12. //从小到大排序后的数组 = 数组1.sort(function(a,b){
  13. // return a-b;
  14. //});

sort

  1. var arr2 = [7,6,15,4,13,2,1];
  2. console.log(arr2); // 7,6,15,4,13,2,1
  3. console.log(arr2.sort()); // 1,13,15,2,4,6,7

问题:只能通过第一位字母或数字的 unicode 编码进行排列。

解决:sort方法不稳定,设计的时候就是这么设计的,可以通过回调函数进行规则设置。

  1. console.log(arr2);
  2. console.log(arr2.sort(function (a,b) {
  3. return a-b; //升序 //b-a:降序
  4. }));

4、迭代方法

作用:代替 for 循环。

every

every() 他的返回值是一个 boolean 类型值。而参数是一个回调函数。

参数有三个。名字随便起,但是表示的意思还是这样顺序的。

  1. var arr = ["关长","张飞","赵子龙","马超","黄忠"];
  2. // function (element,index,array)
  3. // element:数组元素的值
  4. // index:索引
  5. // array:调用这个方法的整个数组对象(一般不用)
  6. arr.every(function(fff,www,ggg) {
  7. console.log(fff);
  8. console.log(www);
  9. console.log(ggg);
  10. return true;
  11. });
  12. // 关长
  13. // 0
  14. // ["关长", "张飞", "赵龙", "马超", "黄忠"]
  15. // 张飞
  16. // 1
  17. // ["关长", "张飞", "赵龙", "马超", "黄忠"]
  18. // 赵龙
  19. // 2
  20. // ["关长", "张飞", "赵龙", "马超", "黄忠"]
  21. // 马超
  22. // 3
  23. // ["关长", "张飞", "赵龙", "马超", "黄忠"]
  24. // 黄忠
  25. // 4
  26. // ["关长", "张飞", "赵龙", "马超", "黄忠"]
  1. var arr = ["青花瓷", "一路向北", "轨迹"];
  2. var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false
  3. ele.length > 2;
  4. });
  5. console.log(flag); // false

filter

filter 返回值是一个新数组。return 为 true 的数组。

  1. var arr = ["关长","张飞","赵子龙","马超","黄忠"];
  2. var arr1 = arr.filter(function (ele,index,array) {
  3. if(ele.length>2){
  4.   return true;
  5. }
  6. return false;
  7. });
  8. console.log(arr1); // ["赵子龙"]

foreach

foreach 遍历数组(无返回值,纯操作数组中的元素)

  1. var arr = ["关长","张飞","赵子龙","马超","黄忠"];
  2. var str = "";
  3. arr.forEach(function (ele,index,array) {
  4. str+=ele;
  5. });
  6. console.log(str); // 关长张飞赵子龙马超黄忠

map

map有返回值,返回什么都添加到新数组中。

  1. var arr = ["关长","张飞","赵子龙","马超","黄忠"];
  2. var arr2 = arr.map(function (ele,index,array) {
  3. return ele+"你好";
  4. })
  5. console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]

some

some有返回值,如果函数结果有一个是true,那么some方法结果也是true。

  1. var arr = ["关长","张飞","赵子龙","马超","黄忠"];
  2. var flag = arr.some(function (ele,index,array) {
  3. if(ele.length>2){
  4. return true;
  5. }
  6. return false;
  7. })
  8. console.log(flag); // true

push

向数组的末尾添加一个或更多元素,并返回新的长度。

注意: 新元素将添加在数组的末尾。

注意: 此方法改变数组的长度。

提示: 在数组起始位置添加元素请使用 unshift() 方法。

pop

删除数组的最后一个元素并返回删除的元素。

注意:此方法改变数组的长度!

提示: 移除数组第一个元素,请使用 shift() 方法。

了解方法

  1. concat() //把参数拼接到当前数组
  2. //新数组 = 数组1.concat(数组2);
  3. slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
  4. //新数组 = 数组1.slice(索引1,索引2);
  5. splice()//删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目)
  6. //新数组 = 数组1.splice(起始索引,结束索引,替换内容);
  7. indexOf()、lastIndexOf() //如果没找到返回-1
  8. //索引值 = 数组.indexOf/lastIndexOf(数组中的元素);
  9. forEach() // 数组每个元素都执行一次回调函数。

5、清空数组

  1. var array = [1,2,3,4,5,6];
  2. // 方法一:删除数组中所有项目
  3. array.splice(0,array.length);
  4. // 方法二:length属性可以赋值,其它语言中length是只读
  5. array.length = 0;
  6. // 方法三:
  7. array = []; //推荐

从零开始学 Web 之 JavaScript(四)数组的更多相关文章

  1. 从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 JavaScript(一)JavaScript概述

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. 从零开始学 Web 之 JavaScript(五)面向对象

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. 从零开始学 Web 之 JavaScript(二)变量

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. 从零开始学 Web 之 JavaScript(三)函数

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  7. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 ES6(六)ES6基础语法四

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 一、Windows许可证即将过期怎么办

    当Win10系统提示“windows许可证即将过期”窗口时,直接点击“转到‘设置’”按钮,此时将显示“Windows激活”界面,从此界面中可以获取当前Win10版本信息. 由于Win10激活即将过期, ...

  2. 【.Net】 大文件可使用的文本分组统计工具(附带源码,原创)

    本工具可实现的效果: 1.读取大文件(大于1GB) 2.根据分隔符分割后的列分组 3.速度快. 4.处理过程中,可以随时停止处理,操作不卡死. 5.有对当前内存的实时监测,避免过多占用内存,影响系统运 ...

  3. mybatis进阶--一对多查询

    首先,我们还是先给出一个需求:根据订单id查询订单明细——我们知道,一个订单里面可以有多个订单的明细(需求不明确的同学,请留言或者去淘宝网上的订单处点一下就知道了).这个时候,一个订单,对应多个订单的 ...

  4. BeanUtils.copyProperties的简单示例

    一.新建测试实体 1.UserA package com.dechy.hebswj.test; public class UserA { private String a; private Strin ...

  5. [JAVA]JAVA章3 如何获取及查看DUMP文件

    一.dump基本概念 在故障定位(尤其是out of memory)和性能分析的时候,经常会用到一些文件来帮助我们排除代码问题.这些文件记录了JVM运行期间的内存占用.线程执行等情况,这就是我们常说的 ...

  6. laravel控制器之资源控制器

    资源控制器 Laravel 的资源控制器可以让我们很便捷地构建基于资源的 RESTful 控制器,例如,你可能想要在应用中创建一个控制器,用于处理关于文章存储的 HTTP 请求,使用 Artisan ...

  7. AX_InventCounting

    static void Job649(Args _args)  {      ItemId                  ItemId          = "000XA00612R1& ...

  8. 牛客练习赛42 C 反着计算贡献

    https://ac.nowcoder.com/acm/contest/393/C 题意 给你一个矩阵, 每次从每行挑选一个数,组成一个排列,排列的和为不重复数字之和,求所有排列的和(n,m<= ...

  9. telnet的安装和使用

    在日常使用中,有时候需要检测服务器上面的部分端口有没有打开,这个时候可以使用telnet进行调试.下面是一篇转载的文章. 原文地址:http://linuxtech.blog.51cto.com/36 ...

  10. 源码分析MySQL mysql_real_query函数

    目录 目录 1 1. 前言 1 2. 调用路径 2 3. MAX_PACKET_LENGTH宏 2 4. DBUG_RETURN宏 3 5. COM_QUERY枚举值 3 6. mysql_query ...