一。数组
1.数组的定义:使用主要前面两种。
一,隐式创建
var arr = [值1,值2,值3];
湾直接实例化
var arr = new Array(值1,值2,值3);
角创建数组并指定长度
var array = new Array(size);
求数组长度有方法:数组名。长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
/*三种定义方式*/
// 字面量的方式
var arr1 = [1, true, 'abc'];
// 使用Array的构造方法, 给定每个元素
var arr2 = new Array(1, true, 'abc');
// 使用Array的构造方法, 给定长度而已
var arr3 = new Array(3);
arr3[0] = 1;
arr3[1] = true;
arr3[2] = 'abc';
console.log(arr1.length + " arr1");
console.log(arr2.length + " arr2");
console.log(arr3.length + " arr3");
arr1.length = 5;
console.log(arr1.length + " arr1");
arr3[3] = 123;
console.log(arr3.length + " arr3");
console.log(arr2[100]);
arr2[100] = undefined;
console.log(arr2[100]); // aaa
console.log(arr2.length + " arr2"); // 101
console.log("======================")
var arr1 = new Array(10);
console.log(arr1.length);
arr1[-3] = 100;
console.log(arr1[-3]);
console.log(arr1.length);
</script>
</head>
<body>
</body>
</html>
2.数组的遍历
a。普通for遍循遍历:不遍历属性
b.for ... in:不遍历索引中的undefined
c.forEach:不遍历属性和索引中的undefined
注意事项:数组在使用的时候建议大家规矩来用。在存放数据时,从下标0开始顺序的存放数组元素。如果下标:
1.为非负整数(包括整数字符串):自动从0开始,不存在添加未定义
2.为负数,小数,非数字符串:这些内容不计算在长度内,当成“属性”处理,相当于自定义属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr1=[1,2,34,"hello",'world',"your",true];
arr1[21]=999;
arr1[-3]=-666;
arr1[33]=undefined;
var arr2=new Array(1,2,3,4,5,6,7)
var arr3=new Array(5)
console.log(arr1.length + "------<"+"arr1的长度");
console.log("========普通for循环===不遍历属性===========")
for(var i=0; i<arr1.length;++i) {
console.log(arr1[i]);
}
console.log("==========for in===不遍历索引中的 undefined=================")
for( var idx in arr1) {
console.log(arr1[idx])
}
console.log("===========forEach===不遍历属性和索引中的undefined===================")
arr1.forEach(function (j,k) {
console.log(k + "---->" + j);
});
console.log("================没啥子啦=========================")
arr1.forEach(function(m,n){
console.log(m + "---->" +n);
});
console.log("====================================================")
arr1.push('拉拉阿里');
for( var idx in arr1) {
console.log(arr1[idx])
}
console.log("=========================================================")
</script>
</body>
</html>
3.数组常见的操作方法
-
推添加元素到最后
-
unshift添加元素到最前
-
pop删除最后一项
-
shift删除第一项
-
反数组翻转
-
加入数组转成字符串
-
indexOf数组元素索引
-
slice截取(切片)数组,原数组不发Th变化
-
splice剪接数组,原数组变化,
-
concat可以实现前后删除效果数组合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
<script type="text/javascript">
var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift(100);
console.log(arr);
arr.pop();
console.log(arr);
arr.shift()
console.log(arr);
arr.reverse();
console.log(arr);
var str = arr.join(' ');
console.log(str);
var idx = arr.indexOf(15);
console.log(idx)
var tempArr = arr.slice(1,3); // 第二个参数是 结束位置 [ )
console.log(tempArr);
console.log("=====================")
console.log(arr);
// arr.splice(2,1); // 第二个参数是 长度
arr.splice(2,1,100,200); // 第二个参数是 长度,第三参数及其以后是新添加的元素(在删除的地方进行添加)
console.log(arr);
console.log("=====================")
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr = arr2.concat(arr1);
console.log(arr);
console.log(arr1);
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
二。函数
函数,即方法。就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值。函数也是对象。
1.函数的定义(主要使用前两种)
一个函数声明语句:该种方式定义的函数具有声明提升的效果
function 函数名([参数列表]){}
例如:
function foo(){
console.log(1);
}
foo();
b函数定义表达式:以表达式方式定义的函数,函数的名称是可以不需要
foo();
function foo(){
console.log(1);
}
// 变量声明提升 console.log( a );
var a = 2;
c.Function构造函数函数声明语句
函数构造函数接收任意数量的参数,但最后一个参数始终都被看成是函数体,而前面的参数则列举出了新函数的参数。
var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {return (x + y);} add()
注意:
1,js中的函数没有重载,同名的函数,会被后面的函数覆盖。
2,js中允许有不定数目的参数,后面介绍arguments对象
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数的定义</title>
<script type="text/javascript">
/*3种*/
// 1、函数声明语句
function fun1(a,b){
console.log("七夕快乐===" + (a+b));
}
fun1(1,1);
// 2、函数定义表达式
var fun2 = function (a, b){
console.log("用区块链来记录你们幸福的瞬间==" + (a+b));
}
fun2(1,1);
// 3、Function 构造函数
var fun3 = new Function('a','b','console.log("好大的雨!==" + (a+b))');
fun3(1,1);
</script>
</head>
<body>
</body>
</html>
2.函数名的提升
一个。JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错
f();//先调用
function f() {}//后声明
b。表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于“变量提升”,函数名f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错
f();
var f = function (){};
// TypeError: undefined is not a function
3.函数的参数,调用和return语句
一,参数
函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参
- 实参可以省略,那么对应形参为为undefined
- 若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
- 可以给参数默认值:当参数为特殊值时,可以赋予默认值。
- 参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数</title>
<script type="text/javascript">
function fun1(a) {
a = 10;
}
var num = 100;
fun1(num);
console.log(num);
function fun2(obj) {
//obj.name = 'zs';
obj = {
"name": "zs"
};
}
var o = {
"name": "lisi"
};
fun2(o);
console.log(o.name);
function fun3(a, b) {
console.log(a + "+" + b + "=" + (a + b));
}
fun3(1);
var n1 = 10;
var n2 = 100;
function fun4(a, b) {
var temp = a;
a = b;
b = temp;
}
fun4(n1, n2);
console.log(n1); // 10
console.log(n2); // 100
var obj2 = [1, 2, 3];
function paramter2(o) {
o[1] = 3;
o = [2, 3, 4];
}
paramter2(obj2);
console.log(obj2);
// 计算两个数的和
function fun5(a, b){
var res = a+b;
}
var res = fun5(3,5);
console.log(res);
</script>
</head>
<body>
</body>
</html>
湾函数的调用
常用调用方式:函数名([ 实参]) ; 存在返回值可以变量接收,若接收无返回值函数则为undefined。
c.return语句
函数的执行可能会有返回值,需要使用return语句将结果返回.return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。
作用:在没有返回值的方法中,用来结束方法有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。
d.arguments对象和函数的方法及属性
arguments 对象中存放了调用该函数时传递的实际参数。由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数,这就是参数对象的由来。函数中可以使用arguments对象来获取实参
e。函数的作用域(全局(全局变量)和局部(局部变量))
(1)全局变量与局部变量同名问题
var box =1; //全局变量
function display(box){
var box=3; //此处 box 与全局变量 box 没有关系,这里的 box 为传递的参数,相当于新声明的局部变量
var b = 2; //局部变量 console.log("box-->"+box);
}
display();
//b 不能访问
console.log("b-->"+b);
(2)在函数中定义变量时,若没有加var关键字,使用之后自动变为全局变量
function fun(){
a = 100;
}
fun();
(3)变量作用域提升
function foo(x) { if (x > 100) {
var tmp = x - 100;
}
}
//等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作用域问题</title>
<script type="text/javascript">
var a = 10;
function test1(a) {
//var a = 100;
var a;
console.log(a);
}
console.log(a); // 10
test1(100);
var box = 1;
function test2() {
var b = 100;
console.log(box);
var box = 10;
}
/*var c = 100;
function test3(){
c = 10;
}
test3();
console.log(c);
*/
function foo(x) {
if(x > 100) {
var temp = x - 100;
}
console.log(temp);
}
foo(101);
</script>
</head>
<body>
</body>
</html>
F。闭包
出于种种原因,我们有时候需要得到函数内的局部变量。但是,正常情况下,这是办不到的,只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。以及还可以避免变量名冲突的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包</title>
<script type="text/javascript">
function test(){
var str = "hhahah";
return function(){
console.log(str);
}
}
var inner = test();
inner();
function test1(){
function test2(){
console.log("test");
}
test2();
}
//test2();
function outter(){
var a = 10;
function inner(){
console.log(++a);
}
return inner;
}
var innerFun = outter();
innerFun();
innerFun();
innerFun();
innerFun = outter();
innerFun();
</script>
</head>
<body>
</body>
</html>