目录
一、数组
1.数组的概念
- 数组是一种特殊的变量,它能够一次存放一个以上的值。
- 在数组中可以存放任意类型的元素。
2.数组的创建
- 通过 new 关键词创建数组
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组 “A”为大写。
var arr = new Array(‘汽车’,’卡车’);
- 通过数组文本直接创建数组。
var array-name = [item1, item2, ...];
var arr = [‘汽车’,’卡车’];
注意:在数组种可以存放任意数据类型。如:['小明',12,true,28.9]
3.数组的获取
数组可以通过索引(下标)来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素,数组的下标是从0开始。
// 定义数组
var arr= [1,2,3];
// 获取数组中的第2个元素。
alert(arr[0]); //1
alert(arr[1]); //2
alert(arr[2]); //3
alert(arr[3]); //undefined
注意:如果访问时数组没有和索引值对应的元素,则得到的值是undefined
4.数组的遍历
把数组中的每个元素都访问一次,可以通过for循环遍历数组。
var arr = ['小明','小红', '大胖'];
for(var i = 0; i < arr.length; i++){
console.log(arr [i]);
}
- length的长度是为数组的个数,非下标。
- 当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。
- 数组的length属性可以被修改:
- 如果设置的length属性值大于数组的元素个数,则会在数组末尾出现空元素,访问空元素时显示undefined;
- 如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除。
//js
var arr = ['小明', '小红', '小兰', '大胖'];
arr.length = 3;
console.log(arr.length);
console.log(arr);
5.数组添加元素
```js
数组[ 数组.length ] = 新数据;
```
举例:
var arr = ['小明', '小红', '小兰', '大胖'];
arr[1] = '小帅';// 重新赋值
arr[arr.length] = '小帅';//末尾新增一个值
console.log(arr);
二、函数
函数:就是**封装了一段可被重复调用执行的代码块**。通过此代码块可以**实现大量代码的重复使用**。
// 声明函数
function 函数名(){
return 需要返回的值;
}
//举例
function sayHello(){
console.log(“hello”);
}
- function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum;
- 函数需要调用后才执行,不调用里面代码块不执行。
1.函数的调用
// 声明函数 计算1-100之间的和
function getSum(){
var sumNum = 0;// 准备一个变量,保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值 都累加 到变量中
}
alert(sumNum);
}
getSum(); //函数调用。
2.函数的参数
- 形参:函数定义时设置接收调用时传入。
- 实参:函数调用时传入小括号内的真实数据。
参数的作用 : 在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
function say(mylanguage){
console.log(“请说” + mylanguage);
}
say(“中文”);
```js
// 带参数的函数声明。
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔。
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
```
1. 调用的时候实参值是传递给形参的。
2. 形参简单理解为:不用声明的变量。
3. 实参和形参的多个参数之间用逗号(,)分隔。
function getSum(sum1,sum2,sum3){
console.log(sum1);
console.log(sum2);
console.log(sum3);
}
getSum(sum1,sum2,sum3);
总结:
- 声明函数的时候可以不带参数;
- 实参多于形参时,形参只读取形参的个数;
- 实参少于形参时,形参未赋值undefined,为了确保不可避免错误,传参需一致。
3.函数的返回值
返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回。
// 声明函数
function 函数名(){
...
return 需要返回的值;
}
//举例
function getName(){
return “小二班的:张三”;
}
var myname = getName();
console.log(myname);
- 在使用 return 语句时,函数会停止执行,并返回指定的值。
- 如果函数没有 return ,返回的值是 undefined
- return只返回一个值,如return 1,2。//返回2
break ,continue ,return
- break :结束当前的循环体(如 for、while)
- continue :跳出本次循环,继续执行下次循环(如 for、while)
- return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码 。
4.arguments的使用
当不确定有多少个参数传递的时候,可以用 arguments 来获取。JavaScript 中,
arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,
arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组,
因此可以进行遍历。伪数组具有以下特点:
- 具有 length 属性。
- 按索引方式储存数据。
- 不具有数组的 push , pop 等方法。
function fn() {
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。
- 伪数组 并不是真正意义上的数组。
- 具有数组的 length 属性。
- 按照索引的方式进行存储的。
- 它没有真正数组的一些方法 pop() push() 等等。
练习题
1.封装一个函数,判断某个值是否存在某个数组里面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var arr = ['a','s','d','f','8'];
console.info(isInArray(arr,'8'));//循环的方式
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value === arr[i]){
return "在这个数组中";
}
}
return "不在这个数组中";
}
</script>
</body>
</html>
实现效果
2.传递一个数组,实现数组翻转的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function overturn(){
var arr = ["a","b","c","d","e"];
var newarr = [];
for (var i=arr.length-1;i>=0;i--){
newarr[newarr.length]=arr[i];
}
return newarr;
}
var newarr = overturn();
console.log(newarr);
</script>
</body>
</html>
实现效果
3.数组筛选,把分数及格(60分)的同学放入一个新数组。
var score = [90,20,49,10,80,65,44,70,60];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var score = [90,20,49,10,80,65,44,70,60];
var newscore = [];
for (var i=0;i<score.length;i++) {
if(score[i]>=60){
newscore[newscore.length]=score[i];
}
}
console.log(newscore);
</script>
</body>
</html>
实现效果