Javascript特效开发(二)

本文内容承接Javascript特效开发(一)

第三章    Javascript特效开发第二阶段

3.1、数组

数组是对象类型数据

Javascript特效开发(二)_第1张图片

1、数组的两种创建方式

(1)隐性方式创建数组

Javascript特效开发(二)_第2张图片

(2)通过构造函数创建数组

数组的长度永远比数组的最大下标大1

Javascript特效开发(二)_第3张图片

2、数组对象

(1)length

设置或返回数组元素的数目。

array.lenth;(注:length后没有括号);

(2)数组删除或添加元素

a、

Javascript特效开发(二)_第4张图片
Javascript特效开发(二)_第5张图片

运行结果:

Javascript特效开发(二)_第6张图片

b、万能添加和删除(splice)

Javascript特效开发(二)_第7张图片

运行结果:

Javascript特效开发(二)_第8张图片

(3)数组截取(slice)

slice在截取的时候只包含开始不包含结束;

不改变原数组,只会返回心新的结果;

只写一个参数,表示从这个开始,截取到最后;

Javascript特效开发(二)_第9张图片
Javascript特效开发(二)_第10张图片

运行结果:

Javascript特效开发(二)_第11张图片

(4)数组转换成字符串(join())

不传参默认逗号连接,传空字符串紧密链接没有间隔,传其它则以其它方式进行链接;

Javascript特效开发(二)_第12张图片

运行结果:

Javascript特效开发(二)_第13张图片

(5)数组链接concat(数组内容复制的技巧)

Javascript特效开发(二)_第14张图片

运行结果:

(6)数组去重

Javascript特效开发(二)_第15张图片

运行结果:

Javascript特效开发(二)_第16张图片

(7)数组排序

a.冒泡排序:

Javascript特效开发(二)_第17张图片

运行结果:

b.sort() 方法用于对数组的元素进行排序

Javascript特效开发(二)_第18张图片
Javascript特效开发(二)_第19张图片
Javascript特效开发(二)_第20张图片
Javascript特效开发(二)_第21张图片

方法中a-b表示从小到大排,若是b-a则从大到小排;

3.2 创建对象

(1)用原生形式创建对象(也叫JSON格式创建对象)

Javascript特效开发(二)_第22张图片

(2)构造函数方式创建对象

Javascript特效开发(二)_第23张图片

3.3属性和方法的两种访问形式:

Javascript特效开发(二)_第24张图片

3.4对象的遍历

Javascript特效开发(二)_第25张图片

运行效果:

Javascript特效开发(二)_第26张图片

第四章    Javascript特效开发第三阶段

4.1字符串对象

(1)length

str.length; 获取字符串长度,不区分中英文;

(2)获取类型

Javascript特效开发(二)_第27张图片

str.chart(num);str[num];返回指定位置的字符结果是相同的。

(3)查找类型

Javascript特效开发(二)_第28张图片

(4)截取类型

Javascript特效开发(二)_第29张图片

(5)转换类型

Javascript特效开发(二)_第30张图片
Javascript特效开发(二)_第31张图片
Javascript特效开发(二)_第32张图片

4.2数学对象&随机数

Javascript特效开发(二)_第33张图片

四舍五入的结果一定是整数;

整数向上向下取整还本身;

Javascript特效开发(二)_第34张图片

《Javascript特效开发(一)》与《Javascript特效开发(二)》主要是讲的Javacript的ECMAscript部分,属于最基础的语法部分,后续《Javascript特效开发(三)》会对Javascript的DOM和BOM部分进行讲解。

链接:www.jianshu.com/p/a886cc514a6b


如有问题欢迎交流。

如转载请注明出处,谢谢!

你可能感兴趣的:(Javascript特效开发(二))