JavaScript数据类型之数组

1.1 创建数组

1.1.1 构造函数法、数组实例化

/* use Object Method:new */
var array = new Array();

/* 数组实例化 */
var array = [];
var array = [1,6,3];
var array = [
    163,
    "netease",
    {color:"red"},
    [],
    true
];
---
var students = [
    {id:1,score:80},
    {id:2,score:50},
    {id:3,score:70}
];
---

1.1.2 Array.of() 将一组值转换为数组

Array.of(1,2,3,4,5);//[1,2,3,4,5]

1.1.3 Array.from() 将类似数组的对象或者可遍历的对象转换成真正的数组

let ele = document.getElementsByTagName('a');
ele instanceof Array;//false
Array.from(ele) instanceof Array;//true

let str = 'hello';
Array.from(str);//["h", "e", "l", "l", "o"]

1.1.4 数组推导法创建新函数

var arr1 = [1,2,3,4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);//[2,4,6,8]
var arr3 = [for(i of arr1) if(i>3) i];
console.log(arr3); //[4]

1.2 数组长度：arr.length

var students = [
    {id:1,score:80},
    {id:2,score:50},
    {id:3,score:90}
];
students.length;//3

students = [];
students.length;//0

1.3 获取和修改数组元素

var students = [
    {id:1,score:70},
    {id:2,score:100},
    {id:3,score:30}
];

/* 获取数组元素 */
students[0];//{id:1,score:70}
students[3].score;//30

/* 修改数组元素 */
students[3].score = 60;

1.4 搜索匹配数组元素：indexOf

/* arr.indexOf(searchElement[,fromIndex=0]) */
var telephones = [110,120,114,1212];
telephones.indexOf(120);//1
telephones.indexOf(1212);//3
telephones.indexOf(119);//-1

1.5 遍历数组元素：forEach

//数组中是对象
/* arr.forEach(callback[,thisArg]) */
var editScore = function(item,index,array){
    item.score +=5;
};
students.forEach(editScore);

//数组中是数字
/* array.forEach(function()); */
var scores = [60,70,80,90];
var newScore = [];
var addScore = function(item,index,array){
    newScore.push(item+5);
};
scores.forEach(addScore);
newScore;
//[65,75,85,95]

1.6 数组倒序：reverse（）

var telephones = [110,120,114,1212];
telephones.reverse();
telephones[0];//1212

1.7 数组排序：sort（）

/* arr.sort([compareFunction]) */
var byScore = function(a,b){
    return b.score-a.score;
};
student.sort(byScore);
//outcome to be finded out!!
//经过实验，发现是按照从大到小的顺序排序的

var studentNames = ["wq","xl","gp"];
studentNames.sort();
studentNames;//["gp","xl","wq"]

1.8 添加元素：push

/* arr.push(element1,...,elementN) */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
---
students.push({id:4,score:99},{id:5,score:100});
---
students;
/*
[
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95},
    {id:4,score:99},
    {id:5,score:100}
]
*/

1.9 添加元素：unshift

/* arr.unshift(element1,...,elementN) */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
---
students.unshift({id:4,score:99});
---
students;
/*
[
    {id:4,score:99},
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
]
*/

1.10 删除元素：shift

/* arr.shift() */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
---
students.shift();
---
students;
/*
[
    {id:2,score:90},
    {id:3,score:95}
]
*/

1.11 删除元素：pop

/* arr.pop() */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
---
students.pop();//{id:3,score:95}
---
students;
/*
[
    {id:1,score:80},
    {id:2,score:90}
]
*/

1.12 删除、替换、添加操作：splice

/* arr.splice(index,howMany[,ele1[,...[,eleN]]]) */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
---
students.splice(1,1,{id:4,score:99});
students;
/*
[
    {id:1,score:80},
    {id:4,score:99},
    {id:3,score:95}
]
*/

students.splice(1,1);
students;
/*
[
    {id:1,score:80},
    {id:3,score:95}
]
*/

students.splice(1,0,{id:4,score:99});
students;
/*
[
    {id:1,score:80},
    {id:4,score:99},
    {id:2,score:90},
    {id:3,score:95}
]
*/

1.13 数组截取一部分：slice

/* arr.slice(begin[,end]) */
---
var students = [
    {id:1,score:80},
    {id:2,score:90}，
    {id:3,score:95}
];
---
var newStudents = students.slice(0,2);
newStudents;
/*
[
    {id:1,score:80},
    {id:2,score:90}
]
*/

var newStudents = students.slice(0);
newStudents;
/*
[
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
]
*/

1.14 数组连接：concat

/* arr.concat(value1,...,valueN) */
---
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95}
];
var students1 = [
    {id:4,score:99},
    {id:5,score:100}
];
---
var newStudents = students.concat(students1);
newStudents;
/*
[
    {id:1,score:80},
    {id:2,score:90},
    {id:3,score:95},
    {id:4,score:99},
    {id:5,score:100}
]
*/

1.15 字符串分割得到数组：split

/* str.split(seperater); */
"wuq@163.com;gp@163.com;xl@163.com".split(",");
//["wuq#163.com","gp@163.com","xl@163.com"]

1.16 数组连接成字符串：join

/* array.join(connecter); */
var emails = ["wuq@163.com","gp@163.com","xl@163.com"];
emails.join(";");
//"wuq@163.com;gp@163.com;xl@163.com"

1.17 遍历数组操作：map

/* array.map(function()); */
var scores = [60,70,80,90];
var addScore = function(item,index,array){
    return item+5;
};
var arr2 = scores.map(addScore);
//经过map遍历操作过的item需要存在一个新的arr2中才能正常访问

1.18 渐次操作：reduce

/* arr.reduce(callback,[initialValue]); */
var students = [
    {id:1,score:80},
    {id:2,score:90},
    {id:3,socre:95}
];
var sum = function(previousResult,item,index,array){
    return previousResult + item.score;
};
students.reduce(sum,0);//265

1.19 返回数组中符合条件的第一个元素值：find()

let arr = [1,2,3,4,5,6];
arr.find(function(value){
    return value > 2;  //3
});
arr.find(function(value){
    return value > 7;  //undefined
})

1.20 返回数组中符合条件的第一个元素位置：findIndex()

let arr = [7,8,9,10];
arr.findIndex(function(value){
    return value > 8; //2
})

1.21 用指定的值填充到数组：fill()

let arr = [1,3,2];
arr.fill(4);//[4,4,4]
arr.fill(4,1,3)//[1,4,4] 从位置1的元素开始填充数字4，截止到位置3之前

1.22 遍历数组，返回供for-of使用的遍历器

//entries() 对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。
for(let[i,v]of['a','b'].entries())
{ console.log(i,v); }
//0 'a'
//1 'b'

//keys() 对数组的索引键进行遍历，返回一个遍历器。
for(let index of ['a','b'].keys())
{console.log(index);}
//0
//1

//values() 对数组的元素进行遍历，返回一个遍历器。
for(let value of ['a','b'].values())
{ console.log(value); }
//a
//b