一、函数
函数就是将具有一定功能的一段JS代码的封装,可以在程序的多个地方被反复调用。
(1)定义函数
格式一:
function 函数名([形参列表]){
函数体;
[return [<表达式>];]
}
格式二:
var 变量名 = function([形参列表]){
函数体;
[return [<表达式>];]
}
格式三:
(function([形参列表]){
函数体;
[return [<表达式>];]
})([实参列表]);
上面的函数叫立即执行函数表达式(IIFE),它会自动调用自身,不被在其它地方被调用,一般用于JS库或JS插件的封装或闭包处理。
(2)函数调用
函数名([实参列表]);
Tips:函数不会自动执行(IIFE(立即执行函数表达式)除外),必须通过调用才能执行。
(3)return
函数可以通过return返回结果,如果return没有返回结果,表示结束函数的调用,且返回调用处。
(4)arguments对象
返回实参列表的一个伪数组。一般用在不确定传过来的实参的个数的情况下。
现在做几个例子,我将用格式一来写,其余的格式都相同,可以自己尝试
1、无参
<script type="text/javascript">
// 无参
function show1(){
console.log('这是我的第一个函数!');
}
show1()
</script>
还是要注意,console.log()表示在控制台进行查看,一般用于开发的的测试中。
打开网站,右键点击检查,右上角选中console即可查看
2、有参
<script type="text/javascript">
function sum1(a, b){
var rs = a + b;
console.log(rs);
}
sum1(10, 20);
</script>
3、参数匹配个数问题
(1)实参个数超过形参个数
function sum3(a, b){
var rs = a + b;
console.log(rs);
}
sum3(10, 20, 30);
结果没变,实参按顺序依次传递,若形参个数不够,则实参忽略后面的值,也就是说30就不会传进去了
(2)形参个数超过实参个数
function sum3(a, b, c, d){
var rs = a + b + c + d;
console.log(rs);// NaN
console.log(a,b,c,d);// 10 20 30 undefined
}
sum3(10, 20, 30);
可以看到,将实参依次传形参,如果形参没有与实参匹配的值,那么形参的值默认为undefined
4、return
function max(a, b) {
var result = a > b ? a : b;
return result;
console.log('aaaaaaaaaaaaaa');
}
console.info(max(100, 20))
结果可以看到,执行完return后,后面的语句即使再多都不会执行了
5、argument
function sum() {
var rs = 0;
for(var i=0;i<arguments.length;i++){
rs += arguments[i];
}
return rs;
};
console.log(sum(10,20,30,40,50))
二、对象(object)
对象,其实就是一种类型,即引用类型。用于将数据和功能组织在一起。
对象由属性和方法组成,通常用键值对定义。
(1)对象定义
(a)new构建
new Object([参数]);
var obj1 = new Object();
obj1.name = '张三';
obj1.age = 16;
obj1.fn = function(){
console.log(11111111111);
}
console.log(obj1)
console.log(obj1.name)
obj1.fn();
或者
var obj2 = new Object({
aa:'bb',
cc:true,
dd:123
});
console.log(obj2)
(b)字面量定义
var obj = {
key: value,// 属性
fn: function(){ // 方法
…
}
}
var obj3 = {};
obj3.name = '张三';
obj3.age = 16;
obj3.fn = function(){
console.log(11111111111);
}
console.log(obj3)
console.log(obj3.name)
obj3.fn();
var obj4 ={
aa: 'bb',
cc: true,
dd: 123,
fn1: function(){
console.log(11111111111);
},
fn2: function(){
console.log(2222222222);
}
};
console.log(obj4)
可以看到一些区别:使用new时需要new一个Object对象,二使用字面量定义时,直接使用{}即可
(2)对象的引用
(a)对象名.属性名
对象名.方法名([实参列表])
(b)对象名[属性名]
var obj4 = {
aa: 'bb',
cc: true,
dd: 123,
fn1: function (a, b) {
console.log(a + ' ' + b);
},
fn2: function () {
console.log(2222222222);
}
};
console.log(obj4.aa);//对象名.属性名
obj4.fn1('Hello', 'world');
console.log(obj4['aa']); // 这里的aa上的引号不能省略
obj4["fn1('Hello', 'world')"];
var str = 'aa';
console.log(obj4[str]);// 当属性名为一个变量时,只能用[]去取值,且不能加引号,因为它是变量
三、数组
数组将一组数据组合到一起,并存入到一个变量中,数组是有序排列的,占用一段连续的内存空间。
一个数组可以存储不同类型的数据。
(1)定义数组
a.new
new Array([值列表])
b.字面量创建
var arr = [值列表]
var arr1 = new Array(123,false,null,'aaa');
var arr2 = [1,2,3,'aaa',true];
console.log(arr1);
console.log(arr2)
(2)获取数组元素值
数组名[下标] ,下标可以是一个数值型常量,也可以是一个表达式或函数或变量
var arr = [1,2,3,'aaa',true];
console.log(arr);
console.log(arr[2]);
(3)遍历数组
一维数组用一个循环实现;二维数组必须用双重循环实现(先行后列)。
a.for
b.for…in // 推荐写法
c.forEach()
1、一维数组遍历
var arr1 = [1,2,3,4,5];
// for
for(var i=0;i<arr1.length;i++){
console.log(arr1[i])
}
// for...in
for(var i in arr1){
console.log(arr1[i])
}
// forEach
arr1.forEach(function(value,index){
console.log(index, value)
})
结果都是相同的1,2,3,4,5
2、二维数组遍历
var arr2 = [[1,2,3],[4,5,6],[7,8,9]];
// for
for(var i=0;i<arr2.length;i++){ // 先遍历行
for(var j=0;j<arr2[i].length;j++){ // 遍历列
console.log(arr2[i][j]);
}
}
// for...in
for(var i in arr2){
for(var j in arr2[i]){
console.log(arr2[i][j])
}
}
// forEach
arr2.forEach(function(v){
v.forEach(function (v1) {
console.log(v1)
})
})
结果是1,2,3,4,5,6,7,8,9
(4)数组的属性和方法
a.length属性:获取数组的长度。
var arr = [1,2,3,4]
console.log(arr.length)
结果是:4
b.方法
i)push():向数组中添加数组到数组最后。
var arr = [1,2,3,4];
arr.push(10);
arr.push('Hello');
arr.push(undefined);
console.log(arr)
ii)pop():删除数组最后一个元素。
var arr = [1,2,3,4];
arr.pop();
console.log(arr)
结果是:[1,2,3]
iii)unshift():向数组头部添加数据。
var arr = [1,2,3,4];
arr.unshift(1,2,3)
console.log(arr)
结果为:[1,2,3,1,2,3,4]
iv)shift():删除数组第一元素。
var arr = [1,2,3,4];
arr.shift()
console.log(arr)
结果为:[2,3,4]
v)concat():将两个或多个数组组合成一个数组。
var arr1 = [1,2,3,4]
var arr2 = ['111','222','333'];
var arr3 = ['a','b','c'];
var arr4 = arr2.concat(arr3, arr1);
console.log(arr4)
vi)reverse():对数组进行倒序处理。
var arr1 = [1,2,3,4];
var arr2 = arr1.reverse();
console.log(arr2);
结果为:[4,3,2,1]
vii)join():将数组转换为字符串。
var arr1 = [1,2,3,4];
var str = arr1.join();
console.log(str);
console.log(typeof str);// string
var str = arr1.join('%%');/*指定符号拼接*/
console.log(str);
var str = arr1.join('');
console.log(str);
viii)splice():删除、修改或向数组中添加数据。
(1)删除
var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,2);
console.log(arr1) // [1,4] 从下标为1的位置开始删除,删除2个元素
console.log(arr2) // [2,3] 返回被删除的元素
(2)修改
var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,2,'aa');
console.log(arr1)
var arr2 = arr1.splice(1,2,'aa','bb','cc');
console.log(arr1)
(3)添加
var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,0,'aa');
console.log(arr1)
var arr2 = arr1.splice(1,0,'aa','bb','cc'); // 中间添加
console.log(arr1)
var arr2 = arr1.splice(0,0,'aa','bb','cc'); // 头部添加
console.log(arr1)
var arr2 = arr1.splice(arr2.length,0,'aa','bb','cc'); // 尾部添加
console.log(arr1)
四、Function类型
Function是一个用来构建函数的类(构造函数)。
// 1.普通方式
function fn1(n) {
console.log(n)
}
fn1(10);
// 2.使用变量初始化函数
var fn2 = function (n) {
console.log(n)
}
fn2(100)
// 3.new创建
var fn3 = new Function(); // 通过Function构建了一个函数对象fn3
fn3 = function (n1, n2) {
console.log(n1 + n2)
}
fn3(10, 20);
定义方法与前面的函数定义其实差不多
函数内部属性
在函数内部,有两个特殊的对象:arguments和this。
callee:arguments是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。也即是说可以通过arguments.callee调用函数自身,一般用于函数的递归调用。
函数自己调用自己叫函数的递归调用。
function fact(n){
if( n === 1){
return 1;
}else{
return n * arguments.callee(n - 1);
}
}
console.log(fact(6));
其实就是一个递归,arguments.callee调用函数自身,无论函数名字(fact)怎么改都还是调用本身的函数
this指针对象
在全局中this指向的是window(在JS中没有global这个全局对象,而JS的全局对象是window);在函数中this指向的是这个函数执行所操作的当前对象。
var name = '李四';// window.name = '李四'
var obj = {
name: '张三',
age: 16,
fn:function () {
console.log(this.name + this.age); //张三16 this指向的是当前执行这个函数的对象
}
}
console.log(this.name);//李四 this指向的是window
obj.fn();