数组的方法(①Es4、②Es5、③Es6)
一、数组:就是存储一组关联的数据。
二、数组的定义:
数组直接量（常用):var arr = [];
var arr2 = [10,20,30];
通过 new 创建: var arr3 = new Array()；
var arr4 = new Array(10,20,30)
console.log(arr4) // [ 10, 20, 30 ]
数组长度可以通过数组名.length访问
四、数组元素的遍历:
①for 循环:
for(var i=0; i<arr4.length; i++) {
console.log(arr4[i]);
}②for in 对对象进行访问,数组也是对象:
var arr4 = [1,3,9,11];
for(var i in arr4) {
console.log(i+":"+arr4[i]); // i 0 1 2 3 数组下标
//console.log(arr4[i]);
}例:
var obj = {
a: 100,
b: 200
}
for(var k in obj) {
console.log(k); // 打印为 a , b
//console.log(obj.k); 用法错误，k是变量，只能通过[]
console.log(obj[k]);
}①Es4
(1) concat()
数组拼接,返回是一个新数组,原数组不变:
var arr3 = [1, 2, 3];
var arr4 = [4, 5, 6];
var arr5 = [7, 8, 9];
var arr6 = arr3.concat(arr4, arr5, 10);// [1,2,3,4,5,6,7,8,9,10]
console.log(arr6);
(2)splice()
对数组进行删除、添加元素:
function fnSplice() {
var arr = [11, 34, 32, 56, 37];
// 1 从角标为1开始删除2个元素，返回值是删除元素组成的数组，原数组变为删除后的数组
// var res1 = arr.splice(1,2);
// console.log(arr); // [ 11, 56, 37 ]
// console.log(res1); // [ 34, 32 ]
// 2 从角标为2开始，添加元素，第二个参数为0，返回值是删除元素组成的数组
// var res2 = arr.splice(2,0,10);
// console.log(arr); // [ 11, 34, 10, 32, 56, 37 ]
// console.log(res2); // []
// 3 替换，返回值是被替换的数组，原数组变为替换后的数组
var res3 = arr.splice(2, 2, 100, 200);
console.log(arr); // [ 11, 34, 100, 200, 37 ]
console.log(res3); // [ 32, 56 ]
}
fnSplice();
(3) pop()
删除数组的最后一个元素,返回被删除的项,没有参数,原数组变为删除后的新数组：
var arr = [1, 2, 3];
var res3 = arr.pop();
console.log(arr); // [ 1, 2 ]
console.log(res3); // 3（4）shift()
删除数组第一个元素,返回被删除的项,原数组变为删除后的新数组：
var arr = [1, 2, 3];
var res4 = arr.shift();
console.log(arr); // [ 2, 3 ]
console.log(res4); // 1（5）join()
把数组的元素用指定的符号拼接成一个大的字符串,不传参数,默认以逗号连接:
var arr2 = [-10, 20, 34, 22];
var res2 = arr2.join(); // '-10,20,34,22'
var res3 = arr2.join("-"); // '-10-20-34-22'
console.log(res2, res3);（6）push() 数组末尾添加一个或多个元素,原数组变为添加后的数组,返回值是改变后的数组长度:
var arr = [1, 2, 3];
// arr[arr.length] = 4;
var res = arr.push(4, 5);
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(res); //5(7)unshift() 数组开头添加一个或多个元素,原数组变为添加后的新数组,返回值是改变后的数组长度:
var arr = [1, 2, 3];
var res2 = arr.unshift(10, 20);
console.log(arr); // [10,20,1,2,3,4,5]
console.log(res2); // 5
②Es5
(1) forEach()
对数组进行遍历,它没有返回值：
var arr = [10,30,50,70];
arr.forEach(function(item,index,arr) {
//item表示元素、index表示下标、arr为数组
//console.log(item,index); // 10 0
//console.log(arr);
if(item >= 20) {
console.log(item);
}
});
// 找数组中最小值
var arr2 = [-2,34,0,-5,6];
var min = arr2[0];
arr2.forEach(function(item,index,arr) {
if(item < min) {
min = item;
}
});
alert(min);
（2）map
返回新的数组,新数组长度与原数组长度一样,新数组的每个元素等于每次函数的返回值:
var array = [10, 23, 21, 34, 44, 88];
var res2 = array.map(function (item, index, array) {
//return 0;
return item - 5; //返回值每个数减5
});
console.log(array); // 原数组不变 [ 10, 23, 21, 34, 44, 88 ]
console.log(res2); // [ 5, 18, 16, 29, 39, 83 ]
(3)reduce():
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)(4)indexof()
判断一个元素是否存在数组中,存在的话,返回元素所在数组下标,不存在返回-1:
var arr2 = [-2,34,0,-5,6];
var index = arr2.indexOf(34);
var index2 = arr2.indexOf(134);
console.log(index,index2); // 1 -1
// 练习 数组去重 [10,23,10,34,23,11] 返回 [10,23,34,11]
var arr = [10,23,10,34,23,11];
var res = [];
arr.forEach(function(item, index, arr) {
if(res.indexOf(item) === -1) {
res.push(item);
}
});
console.log(res);(5)filter()
对原数组进行过滤,根据每次函数返回值是true,对应的元素组成一个新数组,原数组不变:
var array = [10,23,21,34,44,88];
var res = array.filter(function(item,index,arr) {
console.log(item);
return item%2 === 0; //控制返回的值，保留偶数，return 1 为全部保留，0为都不保留
});
console.log(res); // [ 10, 34, 44, 88 ]
console.log(array); // [ 10, 23, 21, 34, 44, 88 ]
③Es6
keys()&values()&entries()遍历键名、遍历键值、遍历键名+键值:
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
(1) Array.of()
对数组进行添加值：
console.log(new Array(3).length);// [,,] 其中3代表长度 长度为3
console.log(Array.of(3).length);// 1 [3] 3是元素 长度为1
console.log(new Array(3,2)); // [3,2]
console.log(new Array(3,2).length); // 2
(2)Array.from()
把数组或者类数组转成数组,并且复制一份:
function fn() {
//下面两种方式将....转为数组
let arr = Array.from(arguments);
//let arr = [...arguments];
console.log(arr);
}
fn(1,2,3);
（3） copyWithin()替换:
let arr2 = [1,2,3,4,5];
arr2.copyWithin(0,2,4);
console.log(arr2); // [3, 4, 3, 4, 5] 用下标2-4（不包含4）的元素从0开始替换
(4) fill() 填充:
let arr = [1,2,3,4,5];
arr.fill('a',1,3); //[1,a,a,4,5] 用‘a’填充下标1-3（不包含3）
console.log(arr);
(5)find() findIndex() some() every():
// find() findIndex() es5 some/every
let res = [2,3,3].findIndex(item => item > 1 ); //找到第一个返回值为true的值的下标作为返回值。找不到返回-1
console.log(res); // 0
let res2 = [1,2,3].some(item=>item>12);
console.log(res2); //某个值大于12就返回true
let res3 = [1,2,3].every(item=>{
console.log(123);
return item<2; //每个值小于2就返回true
});
console.log(res3);手写filter map reduce方法:
// filter 实现
function filter(arr, callback) {
if(!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
return [];
} else {
let res = [];
for(let i=0; i<arr.length; i++) {
// 返回结果为真
if(callback(arr[i], i, arr)) {
res.push(arr[i]);
}
}
return res;
}
}
// 实现 map 方法
function map(arr, callback) {
if (!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
return [];
} else {
let res = [];
for (let i=0; i<arr.length; i++) {
res.push(callback(arr[i], i, arr));
}
return res;
}
}
// 实现 reduce
function reduce(arr, callback, initValue) {
if(!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
return [];
} else {
let hasInitValue = initValue !== undefined;
let prexValue = hasInitValue ? initValue : arr[0];
for (let i = hasInitValue ? 0 : 1; i < arr.length; i++) {
prexValue = callback(prexValue, arr[i], i ,arr)
}
return prexValue;
}
}
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
