javascript杂乱知识点小结

最新推荐文章于 2021-10-31 17:37:38 发布

春风又一季

最新推荐文章于 2021-10-31 17:37:38 发布

阅读量166

点赞数

分类专栏： javascript

javascript 专栏收录该内容

27 篇文章

订阅专栏

博客主要介绍了JavaScript中Array的定义与使用，包括常规、简洁、字面三种定义方式，还提及数组可包含不同变量类型。同时讲解了JavaScript函数参数、Arguments对象，addEventListener()方法用于事件监听，以及split字符串分隔的参数和用法。

Array的定义与使用

第一种方式常规

var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br />");
}

输出

Saab
Volvo
BMW

第二种简洁

var myCars=new Array("Saab","Volvo","BMW");

第三种字面

var myCars=["Saab","Volvo","BMW"];

合并三个数组

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

数组按照字母排序

<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

输出

 Apple,Banana,Mango,Orange

你可以在数组中有不同的变量类型。你可以在一个数组中包含对象元素、函数、数组：

菜鸟教程很多关于数组的操作https://www.runoob.com/js/js-obj-array.html
在这里插入图片描述

JavaScript 函数参数

Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最大的一个参数的值：

<body>

<p>查找最大的数。</p>
<p id="demo"></p>
<script>
x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
document.getElementById("demo").innerHTML = x;
</script>

</body>

三元运算符格式

variablename=(condition)?value1:value2

例子

<body>

<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var age,voteable;
	age=document.getElementById("age").value;
	voteable=(age<18)?"年龄太小":"年龄已达到";
	document.getElementById("demo").innerHTML=voteable;
}
</script>

</body>

addEventListener() 方法

事件监听，通过一个按钮监听不同的事件产生不同的行为

<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>

在这里插入图片描述
关于参数赋值

<body>
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
//定义一个函数在这个函数中调用要引用的函数，并传递参数
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>