第二季企业网站开发php中文网,鄂西建设公司官网,百家号淄博圻谷网站建设,衡水建个网站多少钱入门篇大纲 第二部分 函数与数组
1.函数
函数的定义
普通函数
function 函数名 #xff08;表达式1…#xff09; { 代码块 }js是解释性语言#xff0c;在当前script标签代码执行的开始阶段#xff0c;就会将普通函数放入堆中#xff0c;也只是将引用放入堆中#xf…入门篇大纲 第二部分 函数与数组
1.函数
函数的定义
普通函数
function 函数名 表达式1… { 代码块 }js是解释性语言在当前script标签代码执行的开始阶段就会将普通函数放入堆中也只是将引用放入堆中函数中的内容并没有解释执行只有当函数执行的时候才会解析执行一次函数解析一次普通函数 function fn() {} 可以在定义之前调用执行
fn(); // 可以在定义之前调用
function fn() {console.log(普通函数);
}
fn(); // 也可以在定义之后调用函数重名的危险 普通函数和匿名函数重名匿名函数会覆盖普通函数原因是普通函数在script标签开始时就将函数放入堆中而匿名函数是在代码解析的时候才存入堆中如果名称相同就会覆盖原函数普通函数和变量重名变量会覆盖普通函数 例子
// 1. 普通函数和匿名函数重名
function fn() {console.log(我是普通函数);
}
var fn function() {console.log(我是匿名函数);
}
fn(); // 输出我是匿名函数
// 2. 普通函数和变量重名
function fn() {console.log(我是普通函数);
}
var fn 10;
fn(); // 调用失败会报fn未定义的错误匿名函数
定义 var 变量 function() { 代码块}将匿名函数赋值给变量执行变量函数就是执行这个匿名函数匿名函数不能再定义该函数之前进行调用
var fn function() {console.log(匿名函数);
}
fn(); // 只能在定义之后调用匿名函数不建议使用匿名函数通常使用addEventListener() 方法替代
// 兼容性极好 ie6, 但是不建议使用
btn.onclick function() {console.log(this);
}
// 通常用下面方式代替兼容性 ie8
btn.addEventListener(click, clickHandler);
function clickHandler(e) {console.log(e);
}构造函数
定义var 变量 new Function(参数字符串, 执行语句代码块字符串)使用全字符串参数在最前面后面的字符串内容是执行代码的语句缺点代码会做2次执行第一次会将函数中的字符串解析为普通代码第二次执行该代码因此效率极低优点可以用任何语言传入该js代码并且执行
var fn new Function(a, console.log(a));
fn(10); // 输出 10自执行函数
定义(function () { 代码块}) ()自执行函数只能执行一次执行完成后再也找不到变成孤儿对象但是有引用不能被回收
(function () {console.log(自执行函数);
})();变量的作用域
全局变量
所谓全局变量就是在script标签中直接使用var定义的变量当在script中定义了变量在定义前调用是undefined这是因为定义变量是在内存中开辟了该变量的存储位置并在代码解释执行时将值存在栈中如果提前调用计算机在内存中找不到对应的存储位置所以会报undefined
console.log(s); // 报错s is not defined
var s 100;如果在上一个script中调用下一个script中定义的变量因为没有开辟存储空间所以永远报错
script typetext/javascriptconsole.log(s); // 报错s is not defined
/script
script typetext/javascriptvar s 100;
/script一旦定义变量完成后在后面的script中都是可以任意调用的因为这些变量都是全局变量
script typetext/javascriptvar s 100;console.log(s); // 输出 100
/script
script typetext/javascriptconsole.log(s); // 输出 100
/script局部变量
所谓局部变量就是在函数中使用var定义的变量函数中的定义的局部变量是有作用域的他的范围仅限于该函数内部函数运行完成后函数内定义的变量将会自动销毁
var s;
function fn() {var c 10; // 这是局部变量c 3; console.log(c); // 输出13// 可以在函数中修改全局变量的值修改后全局调用有效s 10;console.log(s) // 输出10
}
fn();局部变量和全局变量重名
如果在函数中定义了某个局部变量名那么在该函数中所有的这个变量都是局部变量不能通过直接使用变量名的方法调用到外部同名的全局变量
例子 var s 10;function fn() {var s 20;s 20;window.s 10; // 想要在函数内调用与局部变量同名的全局变量需要加上window前缀console.log(s); // 输出40console.log(window.s); // 输出20}fn();典型例子 var s 10;function fn() {console.log(s); // 输出undefineds 20;console.log(s); // 输出NaN 因为是 undefined 10var s 20; // 函数内一旦定义在其前后调用都为布局变量}fn();参数
定义
由于js是一种弱类型语言在使用参数时需要注意以下两点
参数类型因为参数类型不能固定如果是对外开放的函数参数一定需要在代码中判断输入参数的类型初始化在ES5中函数的参数不能设置初始化值所以需要在执行代码时给他自定义一个默认的初始值而在ES6中是可有初始化参数设置直接可以使用比如function(a, b, type)参数type默认是
实参和形参
对象参数
如果参数为对象传入的是引用对象的地址
function fn(o) {var obj {a: 1};console.log(o obj); // falseconsole.log(o obj3); // true
}
var obj3 {a: 3};
fn(obj3);函数参数–回调
参数如果传入的是一个函数名在当前函数中运行了这个参数这就是回调
function fn1(o, fn){o.a 1;fn(o); // 执行回调console.log(o.a); // 输出: 12
}
function fn2(_o){_o.a 10;
}
var obj {a: 1};
fn1(obj, fn2);函数执行自己–递归
var sum1 0;
var i 0;
function fn() {if (i 100){return // 跳出函数外}sum i;i;fn(); // 执行回调
}return
注意事项
return语句会终止函数的执行并返回函数的值return是JavaScript里函数返回值的关键字一个函数内处理的结果可以使用return返回这样在调用函数的地方就可以用变量接受返回结果return关键字内任何类型的变量数据或表达式都可以进行返回甚至什么都不返回也可以return也可以作为阻止后续代码执行的语句被使用function abc() { if (bool) return}这样可以有效的控制语句在一定的条件下执行不过一定要与break区分break是用在条件当中跳出的也仅仅是条件和循环但是return却可以跳出函数仅仅是针对函数使用如果没有函数是不能使用return的
应用场景
返回一个数据
function createObj(_a) {return {a: _a}; // 返回一个数据对象
}
console.log(createObj(3) createObj(3)); // 输出false工厂模式或者单例模式
var box;
function createBox(_a, _b) {if (!box) {box {};}box.a _a;box.b _b;return box;
}
console.log(createBox(3, 5) createBox(10, 20)); // 输出 true通过参数传入的对象
function setObjProper(obj) {obj obj || {}; // 宽模式obj.n 3;return obj;
}
var obj setObjProper({});
var obj1 setObjProper();
var obj2 {a: 5};
console.log(obj2 setObjProper(obj2)); // 输出true
console.log(obj, obj1); // 输出{n: 3} {n: 3}如果参数一个函数返回的是回调函数的结果
function fn1(fn) {var obj {};return fn(obj); // 返回回调函数的结果
}
function fn2(obj) {obj.a 10;return obj;
}
console.log(fn1(fn2)); // 输出{a: 10}返回的是一个私密的对象 (闭包)
function fn() {return function () {console.log(aaa);}
}
fn()(); // 输出 aaa返回一个数组返回多个元素返回一个对象返回多个元素返回一个函数体跳出
2.数组
定义
数据将无序的数据做有序的排列存储在一个变量中原生JS中没有数组类型原生JS中的数据可以存储多个不同类型的数据弱类型Array.isArray(arr) 是判断arr是否为数组数组中标识元素所在的位置叫做下标也叫做索引数组中标识元素的内容arr[0]这个就叫做下标变量
数组的创建
字面量创建 var arr [1, 2, 3, 4, 5]对象构造函数创建 var arr new Object([1, 2, 3, 4, 5])构造函数创建 var arr new Array() 注意 创建数组时有且仅有一个数值类型的参数这个参数就是数组的长度创建数组时有且仅有一个非数组类型的参数或者有两个或两个以上的参数这些参数都是数组的元素
数组的长度
数组的长度是可以设置的将数组的长度设置为0表示清空数组如果数组的长度小于原数组长度意味着将数组从0位截取到指定位置
var arr [1, 2, 3, 4, 5];
arr[arr.length-1] 6; // 将数组中最后一个元素5替换为6
arr[arr.length] 6; // 给数组的尾部添加一个新元素6数组的遍历
for循环遍历
var arr [1, 2, 3, 4, 5];
for (let i 0; i arr.length; i) {console.log(i arr[i]); // 输出 01// 12// 23 // 34 // 45
}for in 遍历 (能遍历出数组中所有的对象)
var arr [1, 2, 3, 4, 5];
arr.key 100;
for (let prop in arr) {console.log(prop arr[prop]); // 输出 01// 12// 23 // 34 // 45// key100
}forEach遍历 forEach遍历当前数组没有返回值不会返回新数组
var arr [1, 2, 3, 4, 5];
arr.forEach(function(t, i, arr)) {// 参数为元素值元素下标数组对象console.log(t, i, arr)
})map遍历 map遍历数组将当前数组中的元素返回给新数组不适用return时新数组的长度与原数组相同但是每个元素都是undefined
var arr [1, 2, 3, 4, 5];
arr arr.map(function (t) {if (t % 2 0) { // 数组元素中偶数元素 1return t 1;}return t;
});
console.log(arr); // 输出[1, 3, 3, 5, 5]冒泡排序
var arr [6, 3, 4, 5, 7, 1, 2, 9, 0, 8];
// 要点1 外层循环从后向前
for (var i arr.length; i 0; i--) {// 要点2内层循环从前向后for (var j 0; j arr.length; j) {// 要点3只判断内层循环的当前为和下一位的大小然后互换if (arr[j] arr[j1]) { // 升序: jj1 降序jj1var temp arr[j];arr[j] arr[j1];arr[j1] temp;} }
}
console.log(arr); // 输出[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]选择排序
var arr [6, 3, 4, 5, 7, 1, 2, 9, 0, 8];
// 要点1外层循环从头到尾
for (var i 0; i arr.length; i) {// 要点2每次初始最小值是当前循环所在的值var min i; // 要点3从当前所在值的下一项到尾部循环for (var j min 1; j arr.length; j) {// 要点4比较大小找出后面元素中最小值所在的下标if (arr[min] arr[j]) { // 升序minj 降序minjmin j;}}// 要点5互换当前下标值和最小值的下标值var temp arr[i];arr[i] arr[min];arr[min] temp;
}
console.log(arr) // 输出[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]数组的方法
push
var arr [1, 2, 3, 4, 5];
// 向数组尾部添加元素
var len arr.push(6); // 返回数组的新长度
// 典型应用
var len arr.push(6, 7, 8);
var len2 arr.push([6, 7, 8]);
console.log(len, len2) // 输出8 9pop
// 删除数组尾部的元素
var t arr.pop(); //返回被删除的元素
// 典型应用
var arr [-2, -1, 0, 1, 2, 3, 4];
var arr1 [];
var t;
while (t arr.pop()) { // 会获取arr中0以后的所有元素并倒序排列arr1.push(t);
}
console.log(arr1); // [4, 3, 2, 1]shift
// 删除数组的头部元素
var t arr.shift(); // 返回被删除的元素unshift
var arr [1, 2, 3, 4, 5];
// 向数组头部添加元素
var len arr.unshift(); // 返回数组的新长度
var len arr.unshift(0); // [0, 1, 2, 3, 4, 5]
// 尽量减少unshift的使用从数组头部添加元素费性能join
var arr [1, 2, 3, 4];
console.log(arr.join()); // 与arr.toString()相同
console.log(arr.join(#)); // 设置一个符号用这个符号链接数组的每一个元素形成一个新字符串
console.log(arr.join()); // 元素紧密相连 concat
var arr [1, 2, 3, 4];
var arr1 arr.concat(); // 没有参数数表示复制数组
var arr2 arr.concat(5, 6); // 将arr数组链接 56两个元素形成新数组原数组不变
var arr3 arr.concat([5, 6, 7]); // 将arr数组和数组[5, 6, 7]合并形成新数组
var arr4 [5, 6, 7];
var arr5 arr.concat(arr4); // 将两个数组链接形成新数组splice
var arr [1, 2, 3, 4, 5];
arr.splice(); // 数组插入删除替换元素并且返回被删除元素组合成新数组
var arr1 arr.splice(); // 创建一个新的空数组返回
var arr1 arr.splice(3); // 从下标是3开始删除到尾部
var arr1 arr.splice(0); // 将arr的所有元素导入arr1中清空arr
var arr1 arr.splice(0, 2); // 从arr数组的下标0开始删除2位元素
var arr1 arr.splice(0, 0, -1); // 在第0位插入一个-1
var arr1 arr.splice(-1, 0, -1); // 在第-1位倒数第1位插入一个-1
var arr1 arr.splice(arr.length, 0, -1); // 在数组尾部插入一份-1
var arr1 arr.splice(1, 2, -1, -2); // 从第1位开始替换两个元素为-1 -2slice
var arr [1, 2, 3, 4, 5];
arr.slice(); // 数组截取元素并且返回被截取元素组合成新数组原数组不变
var arr1 arr.slice(); // 复制arr的所有元素给arr1和原数组没有引用关系
var arr1 arr.slice(0); // 复制arr的所有元素给arr1和原数组没有引用关系
var arr1 arr.slice(3); // 将数组从下标3开始到结尾截取形成新数组
var arr1 arr.slice(-2); // 将数组从倒数第2位开始到结尾截取形成新数组
var arr1 arr.slice(3, 4); // 将数组从下标3开始到下标4截取形成新数组
var arr1 arr.slice(-2, 4); // 将数组从倒数第2位开始到下标4截取形成新数组
var arr1 arr.slice(-2, -1); // 将数组从倒数第2位开始到倒数第1位截取形成新数组indexOf
var arr [1, 2, 3, 4, 5];
arr.indexOf(); // 在数组中查找元素返回查找到元素的下标没有找到返回-1
console.log(arr.indexOf(2)); // 从0开始向后查找2
console.log(arr.indexOf(2, 3)); // 从下标3开始向后查找2lastIndexOf
var arr [1, 2, 3, 4, 5];
arr.lastIndexOf(); // 在数组中从后向前查找元素返回查找到元素的下标没有找到返回-1
console.log(arr.lastIndexOf(2)); // 从后向前查找2
console.log(arr.lastIndexOf(2, 3)); // 从下标3开始向前查找2reverse
var arr [1, 2, 6, 4, 3, 5];
// 将原数组倒序改变返回的新数组和原数组是引用关系
var arr1 arr.reverse();
console.log(arr, arr arr1); // 输出: [5, 3, 4, 6, 2, 1] truesort
var arr [1, 12, 6, 4, 3, 5];
// 将原数组中的元素按位排序原数组发生改变返回的新数组和原数组是引用关系
var arr1 arr.sort();
console.log(arr, arr arr1); // 输出: [1, 12, 3, 4, 5, 6] true
// sort(function(pre, next){}); 可以实现升序降序排列
// 升序排序 输出[1, 3, 4, 5, 6, 12]
arr.sort(function(pre, next) {return pre - next;
});
// 降序排序 输出[12, 6, 5, 4, 3, 1]
arr.sort(function(pre, next) {return next-pre;
});some
判断数组中的所有元素是否满足某条件只要有一个满足条件返回true, 否则返回false
var arr [1, 3, 5, 2, 7, 8, 0, 6]
var boolean arr.some(function(t) {t ;return t 5;
})
console.log(boolean); // 输出 trueevery
判断数组中的所有元素是否满足某条件只有当全部满足返回true否则返回false
var arr [1, 3, 5, 2, 7, 8, 0, 6]
var boolean arr.every(function(t) {t ;return t 5;
})
console.log(boolean); // 输出 falsefilter
判断数组中的所有元素是否满足某条件并返回满足条件的所有元素组成的新数组原数组元素不变
var arr [1, 3, 5, 2, 7, 8, 0, 6]
var arr1 arr.filter(function(t) {t ;return t 5;
})
console.log(arr1); // 输出 [5, 7, 8, 6]reduce
// 如果没有initValue值sum就是第0项的值item就是第一项值所以index是从1开始
var s arr.reduce(function(sum, item, index)) {console.log(sum, item, index);return sum item;
}, initValue); // 这里第二个参数是初始值如果设置这个初始值index就从0开始from
var div document.getElementsByTagName(div);
// es5将对象转换成数组
var arr Array.prototype.slice.call(div);
// es6: 将对象转换成数组
var arr Array.from(div);参数数组
在函数中参数如果写在所有参数的最前面那就是必要参数es5中所有的参数一般都需要按位填写如果没有填写就会变成undefined多填进入的参数值不会被直接获取到如果一个函数的参数不定我们一般在函数定义时不写参数在函数体中使用参数数组arguments进行处理
arguments典型案例
// 1. 求若干数的最大值
function max() {var arr Array.from(arguments);return arr.reduce(function(p1, p2){return p1 p2 ? p1 : p2;});
}
console.log(max(1, 2, 3, 6, 3, 2, 6, 8, 9)); // 输出9// 2.函数回调
function fn() {console.log(arguments.callee); // 获取当前执行的函数console.log(arguments.callee.a); // 获取属性值console.log(arguments.callee.caller); // 回调当前函数的父级函数
}
fn.a 10; // 给对象添加属性
fn(2, 3, 4); // 执行函数
function fn2(fn) {fn();
}
fn2(fn); // 执行父级函数二维数组
var arr [[1, 2, 3, 4, 5],[1, 2, 3, 4, 5],[1, 2, 3, 4, 5],[1, 2, 3, 4, 5],[1, 2, 3, 4, 5],
]对象数组
var arr [{a: 1, b: 2, c: 3},{a: 1, b: 2, c: 3},{a: 1, b: 2, c: 3},
]
