JS学习笔记（五）数组及其相关函数操作/浏览器传参this和arguments的学习

JS学习笔记（五） 数组相关的学习

学习数组和相关函数操作
this和argums的学习

待完成数组去重练习qwq

---

---

一、数组 Array

数组也是一个对象（内建对象），数组通过数字作为索引操作数组元素
索引从0开始

1.创建数组的两种方法

1. 构造函数创建

var arr = new Array();
console.log(typeof arr);//object

var array = new Array(10);//创建数组大小为10的数组

2. 字面量创建（相对更常用）

var arr1 = [10，23，45，67];
console.log(arr1);

var arr2 = [10];//创建了一个数组大小为1的数组，元素10为该数组目前的唯一元素。

• 数组的元素可以是不同类型的

var arr1 = [1,"hello",true,0];

2.数组长度 array.length

索引连续则获得数组大小；索引不连续则获得最大索引+1.

console.log(arr.length);

在数组末尾添加一个新的元素：

var arr1 = [1,"hello",true,0];
arr1[arr1.length]="add";
console.log(arr1);//1,"hello",true,0,"add"

• array.lenth作为数组大小值可以返回也可以进行修改

---

二.数组的常用方法

1.array.push()

可以向数组中添加一个或多个元素，并返回数组的长度。

2.array.pop()

可以删除数组的最后一个元素，并返回该删除的元素。

3.array.unshift()

向数组的开头添加一个或多个元素，并返回新的数组长度。

4.array.shift()

可以删除数组的第一个元素，并返回该删除的元素。

5.array.slice()

可以提取数组中指定元素。

• 该方法不改变原数组，而是将截取到的元素封装到一个新的数组中返回。
• ( )中参数——索引：（索引可以为负值，表示从后往前计算，例如-1表示倒数第一个）
  1.截取开始元素的索引，包括开始索引。（必需）
  2.截取结束位置索引，不包含结束索引。（可以省略不写）

举例说明：

var arr = [1,2,3,4,5];
var res = arr.slice(1,2);
console.log(res);//[ 2 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]

6.array.splice()

可以用于删除、替换数组中指定元素，还可在指定位置添加元素。

• 该方法会改变原数组，而是将指定元素从原数组中删除，删除的元素会封装到一个新数组作为返回值返回。
• ( )中参数——索引：（索引可以为负值，表示从后往前计算，例如-1表示倒数第一个）
  1.删除开始元素的索引。
  2.删除元素的数量。
  3.可以传递一些新的元素，这些元素将自动插入开始位置索引前方。

举例说明：

var arr = [1,2,3,4,5];
var res = arr.splice(1,2,88,99);//删除两个元素，添加两个元素
console.log(res);//[ 2, 3 ]
console.log(arr);//[ 1,88, 99, 4, 5 ]

7.array.concat()

可以拼接两个或多个数组，并将组合的数组封装到一个新数组作为返回值返回，对原数组不会产生影响。

var arr = [1,2];
var arr2 = [3,4];
var arr3 = [5,6];
var res = arr.concat(arr2,arr3,"hello",arr);
console.log(res);
console.log(arr);

输出：
[ 1, 2, 3, 4, 5, 6, 'hello', 1, 2 ]
[ 1, 2 ]

8.array.join()

该方法可以将数组转化为字符串。
该操作不会对原数组产生影响，会将转换后的字符串作为返回值返回。

• join（）中可以指定一个字符串作为连接参数，这个字符将会成为数组中元素的连接符。默认连接字符串是"，"

var arr = ["孙悟空","白骨精"];
var res = arr.join("-");
console.log(arr,typeof arr);
console.log(res,typeof res);

输出：
[ '孙悟空', '白骨精' ] object
孙悟空-白骨精 string

8.array.reverse()

反转数组，并会直接修改原数组。

var arr = [1,2,3,4,5,10];
var res = arr.reverse();
console.log(arr,typeof arr);
console.log(res,typeof res);

输出：
[ 10, 5, 4, 3, 2, 1 ] object
[ 10, 5, 4, 3, 2, 1 ] object

9.array.sort()

对数组元素进行排序，并会直接修改原数组。
默认按照Unicode编码进行排序。

• 注意：即使对于纯数字的数组，对数组的排序并不是从小到大，而是Unicode编码进行排序。

var arr = ["b","d","a","e","c"];
var res = arr.sort();
console.log(arr,typeof arr);
console.log(res,typeof res);

输出：
[ 'a', 'b', 'c', 'd', 'e' ] object
[ 'a', 'b', 'c', 'd', 'e' ] object

可以自己指定排序规则：在sort（）中添加一个回调函数指定排序规则。
该回调函数中定义两个形参，浏览器会分别将数组中的元素作为实参去调用回调函数。
浏览器根据回调函数返回值来决定元素的顺序，大于0则两个元素交换位置

//a-b升序 b-a降序

var arr = [5,4,3,2,1];
console.log(arr);
arr.sort(function(a,b){
    console.log(a,b);
        return a-b;//或b-a
})
console.log(arr);//[ 1, 2, 3, 4, 5 ]

---

三.数组的遍历

1.for循环语句

一般常用 for(, , )

2.forEach遍历

IE8及以下的浏览器不支持。如果需要兼容IE8，则不要使用forEach。

• forEach()方法需要一个函数作为参数。该函数由程序员创建但是不由程序员调用，称为回调函数。
• 使用forEach，数组中有几个元素函数就执行几次，每次执行时，浏览器将遍历到元素以实参的形式传递进函数中，程序员可以它用来定义函数形参后读取。
• 浏览器在回调函数中传递三个参数，按顺序分别是（value，数组从0开始的index，正在遍历的数组对象）

var arr1 = [1,"hello",true,0];
arr1.forEach(function(value,index,arrobj){
    console.log(value,index,arrobj);
});
输出：
1 0 [ 1, 'hello', true, 0 ]
hello 1 [ 1, 'hello', true, 0 ]
true 2 [ 1, 'hello', true, 0 ]
0 3 [ 1, 'hello', true, 0 ]

---

四.函数的方法

• call（）和apply（）都是函数对象的方法，需要通过函数对象来调用。
• 对函数调用call（）和apply（）都会调用函数执行

调用call()和apply()可以指定一个对象作为第一个参数，此时该对象将成为该函数执行时的this。

举例说明：

function fun(){
    console.log(this.name);
}
var obj ={  name:"obj",
            sayName:function n1(){
                console.log(this.name);}
};
var obj2 ={name:"obj2"};

obj.sayName.apply(obj2);//输出：obj2

1.call（）

call方法可以将实参在第一个参数的对象之后依次传递。

• fun.call(obj,2,3);

function fun(a,b){
    console.log("a = "+a);
    console.log("b = "+b);
}
var obj ={  name:"obj",
            sayName:function n1(){
                console.log(this.name);}
};
var obj2 ={name:"obj2"};

fun.call(obj,2,3);

输出：
a = 2
b = 3

2.apply（）

apply方法可以将实参在第一个参数的对象之后封装到一个数组里按数组传递。

• fun.apply(obj,[2,3]);

function fun(a,b){
    console.log("a = "+a);
    console.log("b = "+b);
}
var obj ={  name:"obj",
            sayName:function n1(){
                console.log(this.name);}
};
var obj2 ={name:"obj2"};

fun.apply(obj,[2,3]);

输出：
a = 2
b = 3

3.this总结

1. 以函数形式时调用this，this是window
2. 以方法形式时调用this，this是方法的对象
3. 以构造函数形式时调用this，this是新创建的那个对象
4. 使用call和apply时，this是函数参数中指定的对象。

---

五.arguments

在调用函数时，浏览器会传入两个隐含的参数：即this和arguments。

1. 函数的上下文对象this
2. 封装实参的对象arguments

1.arguments

1. arguments是类数组对象，但是不是数组。
2. arguments也可以通过索引来操作数据，也可以获取数据。
3. **在调用函数时，传递的实参都会在arguments中保存。**即使不定义形参，也可以用arguments使用实参。

function fun( ){
    console.log(arguments.length);
    console.log(arguments[1]);
}
fun(1,23,4);

输出：
3	//fun()中有三个实参。
23 

4. arguments有个属性callee，arguments.callee对应一个函数对象，就是当前正在指向的函数的对象.

function fun( ){
    console.log(arguments.callee == fun);
}
fun("hello",23,4);

输出：
true