JavaScript基本组成

最新推荐文章于 2021-09-20 13:19:10 发布

aaaaluo

最新推荐文章于 2021-09-20 13:19:10 发布

阅读量628

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/aaaaluo/article/details/96445263

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

数组

定义:一组数据的集合
创建方式:

var aList = [1,2,3];

操作数组的方法

获取数组的长度：aList.length;
用下标操作数组的某个数据：aList[0];
join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join(’-’)); // 弹出 1-2-3-4

push() 和 pop() 从数组最后增加成员或删除成员
unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

reverse() 将数组反转:改变了原来的数组

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

indexOf() 返回数组中元素第一次出现的索引值
splice() 在数组中增加或删除成员

ar aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

多维数组

数组里面嵌套着数组

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

循环语句

for循环:一般用于遍历数组或者集合的数据

for(var i=0;i<len;i++)
{
    ......
}

while循环:一般用在重复操作

var i=0;
while(i<4){
	...
	i+=1;
}

数组去重

思路:遍历数组,获取数据的每一个数据,判断这个数据的索引值是否等于它的下标值

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList1 = [];
//遍历数组
for(var i=0; i<aList.lenth; i+=1;)
{
	if (aList.indexOf(aList[i]) == i)
	{
		aList1.push(aList[i]);
	}
}

获取元素的第二种方法

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

这里需要注意的是 aLi是一个选择集,不是某个集体的标签,所以不能直接写样式

JavaScript的组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型操作html和css的方法比如document.getElementById
3、BOM 浏览器对象模型操作浏览器的一些方法比如window.onload

字符串操作

1, 字符串合并操作

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

特别注意数字和字符串相加的情况.

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   //弹出数字12 将字符串小数转化为数字整数

这里需要注意用parseInt()将含有小数的字符串转化成整数的时候,小数被舍弃,只有整数

3、parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt() 获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf() 查找字符串是否含有某字符
找出字符串第一个字母的索引值,如果没有这个字符串,则结果为 -1

7、substring() 截取字符串用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

字符串反转

思路:注意点---->只有数组才能使用reverse()
先切割成数组,在反转,然后在组成字符串

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

定时器

定时器的类型和语法

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
两者的区别:
一般函数


function myalert(){
    alert('hello!');
};

myalert();

封闭函数:

(function myalert(){
    alert('hello!');
})();

优点:封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突

常用的内置对象

document

document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){

			// 存储上一个页面的地址：
			//var sUrl = document.referrer;
			var oBtn = document.getElementById('btn01');

			oBtn.onclick = function(){

				//window.location.href = sUrl;
				window.location.href = "http://www.baidu.com";

			}


		}

	</script>
</head>
<body>
	<input type="button" name="" value="跳转" id="btn01">
</body>

下面是一个通过地址栏参数改变页面的例子,判断动态参数改变相应的背景

<script type="text/javascript">
		window.onload = function(){
			var oBody = document.getElementById('body01');
			var sData = window.location.search;
			alert(sData);

			var sHash = window.location.hash;
			alert(sHash);

			if(sData!='')
			{
				var aRr = sData.split("=");  //切割成数组
				var iNum = aRr[1];  //取出参数数字
				
				if(iNum==1)
				{
					oBody.style.backgroundColor = 'gold';
				}
				else if(iNum==2)
				{
					oBody.style.backgroundColor = 'green';
				}
				else
				{
					oBody.style.backgroundColor = 'pink';
				}
			}
		}

	</script>

Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

向下取整:

//向下取整，去掉小数部分
alert(Math.floor(5.6)); // 弹出5

向上取整

//向上取整，去掉小数部分
alert(Math.floor(5.6)); // 弹出6

// 10 - 20 之间的随机数
var iN01 = 10;
var iN02 = 20;
var arr2 = [];

for(var i=0;i<40;i++)
{
	// 生成从10到20的随机数
	var iNum02 = Math.floor((iN02-iN01+1)*Math.random()) + iN01;
	arr2.push(iNum02);
}
console.log(arr2);

aaaaluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基本组成

数组定义:一组数据的集合创建方式:var aList = [1,2,3];操作数组的方法获取数组的长度：aList.length;用下标操作数组的某个数据：aList[0];join() 将数组成员通过一个分隔符合并成字符串var aList = [1,2,3,4];alert(aList.join(’-’)); // 弹出 1-2-3-4push() 和 pop...
复制链接

扫一扫