从零开始学 Web 之 JavaScript(四)数组
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、数组
1、数组定义
- 通过字面量定义数组:
var arr = [10,20,30];
- 通过构造函数定义数组:
var arr = new Array(参数); // 参数位置为一个数值时为数组长度,多个数值时为数组中的元素。如果没有参数的时候 Array后面的括号可以省略。
2、数组操作
- 数组长度:
数组名.length;
问:数组中存储的数据类型一定是一样的吗?
类型可以不一样。
问:数组的长度是不是可以改变呢?
可以改变。
3、数组高级API
3.1、判断数组和转换数组
instanceof // 是一个关键字,判断A是否是B类型:A instanceof B。 isArray() //HTML5中新增 ,判断是不是数组 toString() //把数组转换成字符串,每一项用,分割 valueOf() //返回数组对象本身 join(变量) //根据每个字符把数组元素连起来变成字符串,变量可以有可以没有。不写变量默认用逗号分隔,无缝连接用空字符串。
instanceof
var str1 = new String("abc"); var str2 = "abc"; console.log(str1 instanceof String); // true console.log(str2 instanceof String); // false str2不是String对象
join
//join是把数组元素用特殊方式链接成字符串(参数决定用什么链接,无参默认用逗号链接) var arr = ["关羽","张飞","刘备"]; var str1 = arr.join(); var str2 = arr.join(" ");//如果用空格的话,那么元素之间会有一个空格 var str3 = arr.join("");//用空字符串,链接元素,无缝连接 var str4 = arr.join("&"); console.log(str1); console.log(str2); console.log(str3); console.log(str4);
arguements
只在函数中使用,代表传入实参的数组。
arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)
fn(1,2); fn(1,2,3); fn(1,2,3,4,5); function fn(a,b){ //只在函数中使用,实参的数组。 arguments[0] = 0; // 可以修改内容 console.log(arguments); //伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短) arguments.push(1); // arguments 伪数组没有push方法 console.log(arguments instanceof Array); // false //形参个数 console.log(fn.length); //实参个数 console.log(arguments.length); // 形参和实参个数可以不同,因为实参传入的时候可以形参的个数不一样。 // arguments.callee相当于函数名,这里打印整个函数。 console.log(arguments.callee); }
3.2、数组增删和换位置(原数组将被修改)
push() //在数组最后面插入项,返回数组的长度 //数组1改后的长度 = 数组1.push(元素1); pop() //取出数组中的最后一项,返回最后一项 //被删除的元素 = 数组1.pop(); unshift() //在数组最前面插入项,返回数组的长度 //数组1改后的长度 = 数组1.unshift(元素1); shift() //取出数组中的第一个元素,返回第一项 //被删除的元素 = 数组1.shift(); reverse() //翻转数组(原数组讲被反转,返回值也是被反转后的数组) //反转后的数组 = 数组1.reverse(); sort(); //给数组排序,返回排序后的数组。如何排序看参数。 //从小到大排序后的数组 = 数组1.sort(function(a,b){ // return a-b; //});
sort
var arr2 = [7,6,15,4,13,2,1]; console.log(arr2); // 7,6,15,4,13,2,1 console.log(arr2.sort()); // 1,13,15,2,4,6,7
问题:只能通过第一位字母或数字的 unicode 编码进行排列。
解决:sort方法不稳定,设计的时候就是这么设计的,可以通过回调函数进行规则设置。
console.log(arr2); console.log(arr2.sort(function (a,b) { return a-b; //升序 //b-a:降序 }));
4、迭代方法
作用:代替 for 循环。
every
every() 他的返回值是一个 boolean 类型值。而参数是一个回调函数。
参数有三个。名字随便起,但是表示的意思还是这样顺序的。
var arr = ["关长","张飞","赵子龙","马超","黄忠"]; // function (element,index,array) // element:数组元素的值 // index:索引 // array:调用这个方法的整个数组对象(一般不用) arr.every(function(fff,www,ggg) { console.log(fff); console.log(www); console.log(ggg); return true; }); // 关长 // 0 // ["关长", "张飞", "赵龙", "马超", "黄忠"] // 张飞 // 1 // ["关长", "张飞", "赵龙", "马超", "黄忠"] // 赵龙 // 2 // ["关长", "张飞", "赵龙", "马超", "黄忠"] // 马超 // 3 // ["关长", "张飞", "赵龙", "马超", "黄忠"] // 黄忠 // 4 // ["关长", "张飞", "赵龙", "马超", "黄忠"]
var arr = ["青花瓷", "一路向北", "轨迹"]; var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false ele.length > 2; }); console.log(flag); // false
filter
filter 返回值是一个新数组。return 为 true 的数组。
var arr = ["关长","张飞","赵子龙","马超","黄忠"]; var arr1 = arr.filter(function (ele,index,array) { if(ele.length>2){ return true; } return false; }); console.log(arr1); // ["赵子龙"]
foreach
foreach 遍历数组(无返回值,纯操作数组中的元素)
var arr = ["关长","张飞","赵子龙","马超","黄忠"]; var str = ""; arr.forEach(function (ele,index,array) { str+=ele; }); console.log(str); // 关长张飞赵子龙马超黄忠
map
map有返回值,返回什么都添加到新数组中。
var arr = ["关长","张飞","赵子龙","马超","黄忠"]; var arr2 = arr.map(function (ele,index,array) { return ele+"你好"; }) console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]
some
some有返回值,如果函数结果有一个是true,那么some方法结果也是true。
var arr = ["关长","张飞","赵子龙","马超","黄忠"]; var flag = arr.some(function (ele,index,array) { if(ele.length>2){ return true; } return false; }) console.log(flag); // true
push
向数组的末尾添加一个或更多元素,并返回新的长度。
注意: 新元素将添加在数组的末尾。
注意: 此方法改变数组的长度。
提示: 在数组起始位置添加元素请使用 unshift() 方法。
pop
删除数组的最后一个元素并返回删除的元素。
注意:此方法改变数组的长度!
提示: 移除数组第一个元素,请使用 shift() 方法。
了解方法
concat() //把参数拼接到当前数组 //新数组 = 数组1.concat(数组2); slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始 //新数组 = 数组1.slice(索引1,索引2); splice()//删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目) //新数组 = 数组1.splice(起始索引,结束索引,替换内容); indexOf()、lastIndexOf() //如果没找到返回-1 //索引值 = 数组.indexOf/lastIndexOf(数组中的元素); forEach() // 数组每个元素都执行一次回调函数。
5、清空数组
var array = [1,2,3,4,5,6]; // 方法一:删除数组中所有项目 array.splice(0,array.length); // 方法二:length属性可以赋值,其它语言中length是只读 array.length = 0; // 方法三: array = []; //推荐
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
世界杯快到了,看我用Python爬虫实现(伪)球迷速成!
还有4天就世界杯了,作为一个资深(伪)球迷,必须要实时关注世界杯相关新闻,了解各个球队动态,这样才能在一堆球迷中如(大)鱼(吹)得(特)水(吹),迎接大家仰慕的目光! 给大家分享一个快速了解相关信息的办法:刷论坛!我们来一起做个虎扑论坛的爬虫吧! 抓包获取虎扑论坛相关帖子内容,逐条显示! 先来观察下网页,打开论坛首页,选择国际足球 然后往下拉,找到世界杯相关内容 这里就是我们的目标了,所有相关的新闻都会在这里显示,用F12打开“开发者工具”然后往下浏览看看数据包 注意箭头指向的那几个地方! 这就是刚才浏览的新闻所在的json包,来看看具体数据是什么 ok,标题、地址、发布时间包括来源都已经出现了!我们可以直接抓取json数据然后取出相关内容! 再进入具体新闻页面看看 所有的文本内容,都在 这个标签下的 标签内,我们可以用xpath直接取div下的所有文本内容! 这里就不一 一说明了,直接上代码,并录个小的GIF图片给大家看看效果 #@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import et...
- 下一篇
前端入门教程(二)Web前端与HTML简介
一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。 例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。 相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧,2010这个组合就是web1.0时代额产物,我在2010年以前还是在使用三剑客做网页设计的 二 web2.0时代的前端开发 “前端开发”是从“网页制作”演变而来的。 从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。 在web 2.0时代,网页有静态网页和动态网页。 所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。 web2.0时代的网页不仅包含炫丽的动...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Mario游戏-低调大师作品
- 2048小游戏-低调大师作品
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Red5直播服务器,属于Java语言的直播服务器