总结:join(),concat(),slice(),filter(),reduce()数组本身保持不变
数组基础
创建数组的方法
// 方法1:使用Array构造函数,new Array()
var arr1 = new Array("HTML","CSS","javascript");
// 方法2:使用数组字面量表示法 [ ]
var arr2 = ["CSS","javascript","HTML"];
数组的特点
- 一个数组可以存放不同类型的元素
- 使用array.length,获取数组array的长度
- 把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1
var arr1 = new Array("HTML","CSS","javascript");
arr1[4] = 'test';
console.log(arr1); // ["HTML", "CSS", "javascript", empty, "test"]
console.log(arr1.length); // 5
数组操作
push():把它的参数值顺序添加到数组的尾部
var colors = new Array("red","green");
var len = colors.push("blue","yellow","blank");
console.log(colors); // 改变数组本身的内容:["red", "green", "blue", "yellow", "blank"]
console.log(len); // 返回值是新数组长度:5
unshift():把它的参数值顺序添加到数组的头部
var nums = [2,7,8,6];
var size = nums.unshift(99,66);
console.log(nums); // 改变数组本身的内容:[99, 66, 2, 7, 8, 6]
console.log(size); // 返回值是新数组长度:6
pop():删除数组中的最后一个元素
var nums = [2,7,8,6];
var n = nums.pop();
console.log(nums); // 改变数组本身的内容:[2, 7, 8]
console.log(n); // 返回值是被删除的元素:6
shift():删除数组中的第一个元素
var colors = new Array("red","green");
var m = colors.shift();
console.log(colors); // 改变数组本身的内容:["green"]
console.log(m); // 返回值是被删除的元素:red
join():把数组装换为字符串
var words=["border","left","color"];
var wordstr=words.join("-");
console.log(words); // 数组本身保持不变:["border", "left", "color"]
console.log(wordstr); // 返回值是转化后的字符串:border-left-color
sort():对数组中的元素进行排序
var arr1 = [1, 5, 2, 8, 4];
var arr2 = arr1.sort((a, b) => a - b); // 从小到大排序
console.log(arr1); // 改变数组本身的内容:1, 2, 4, 5, 8
console.log(arr2); // 返回值是排序后的数组:1, 2, 4, 5, 8
var arr3 = [1, 5, 2, 8, 4];
var arr4 = arr3.sort((a, b) => b - a); // 从大到小排序
console.log(arr3); // 改变数组本身的内容:8, 5, 4, 2, 1
console.log(arr4); // 返回值是排序后的数组:8, 5, 4, 2, 1
reverse():颠倒数组中元素的顺序
var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.reverse();
console.log(arr1); // 改变数组本身的内容:[5, 4, 3, 2, 1]
console.log(arr2); // 返回值是排序后的数组:[5, 4, 3, 2, 1]
concat():连接两个或多个数组
var arr1 = ["a", "b"];
var arr2 = ["c", "d"];
var arr3;
arr3 = arr1.concat(arr2, ["e"]);
console.log(arr1); // 数组本身保持不变:["a", "b"]
console.log(arr3); // 返回值是连接后的数组:["a", "b", "c", "d", "e"]
slice():截取数组
var colors = ["red", "green", "blue", "yellow", "orange"];
var newColors1 = colors.slice(1); // 从下标1开始到最后
var newColors2 = colors.slice(1, 2); // 从下标1开始到下标(2-1:1)为止
var newColors3 = colors.slice(-2, 5); // 从下标-2开始到下标(5-1:4)为止(-1代表最后一个)
console.log(colors); // 数组本身保持不变:["red", "green", "blue", "yellow", "orange"]
console.log(newColors1); // 返回值是选定后的数组:["green", "blue", "yellow", "orange"]
console.log(newColors2); // 返回值是选定后的数组:["green"]
console.log(newColors3); // 返回值是选定后的数组:["yellow", "orange"]
splice():更新数组内容
//删除
//splice(index,count) 删除从index处开始的0个或多个元素,返回值是被删除元素的数组
var arr1 = ["a", "b", "c", "d", "e", "f"];
var delArr1 = arr1.splice(2);
console.log(arr1); // 改变数组本身的内容:["a", "b"]
console.log(delArr1); // 返回值是被删除元素构成的数组:["c", "d", "e", "f"]
var arr2 = ["a", "b", "c", "d", "e", "f"];
var delArr2 = arr2.splice(2, 2);
console.log(arr2); // 改变数组本身的内容: ["a", "b", "e", "f"]
console.log(delArr2); // 返回值是被删除元素构成的数组:["c", "d"]
//插入
// splice(index,0,item1...,itemX) 从index之前开始插入数组,返回值是空数组
var arr3 = ["a", "b", "c", "d", "e", "f"];
var insertArr = arr3.splice(3, 0, "m", "n");
console.log(arr3); // 改变数组本身的内容: ["a", "b", "c", "m", "n", "d", "e", "f"]
console.log(insertArr); // 返回值是空数组:[]
//替换
//先删除,再追加,返回值是被删除元素的数组
var arr4 = ["a", "b", "c", "d", "e", "f"];
var replaceArr = arr4.splice(1, 2, "x", "y", "z");
console.log(arr4); // 改变数组本身的内容: ["a", "x", "y", "z", "d", "e", "f"]
console.log(replaceArr); // 返回值是被删除元素构成的数组:["b", "c"]
indexOf():从数组的开头(位置0)开始向后查找某个元素的位置
//indexOf(searchvalue,satartIndex)
//searchvalue:必须,要查找的内容
//startIndex:可选,起点位置的索引
var nums1 = [1,7,5,7,8,1,6,9];
var pos1 = nums1.indexOf(99);
var pos2 = nums1.indexOf(7,3);
console.log(pos1); // -1(没有找到)
console.log(pos2); // 3
lastIndexOf():从数组的末尾开始向前查找某个元素的位置
//lastIndexOf(searchvalue,satartIndex)
var nums2 = [1, 7, 5, 7, 8, 1, 6, 9];
var pos3 = nums2.lastIndexOf(1);
var pos4 = nums2.lastIndexOf(1, 3);
console.log(pos3); // 5
console.log(pos4); // 0
forEach():遍历所有元素
var arr = ['a','b','c'];
arr.forEach((item,index,array) => {
// 遍历数组的所有元素
console.log(item,index,array);
// a 1 ['a','b','c']
// b 2 ['a','b','c']
// c 3 ['a','b','c']
});
every():判断所有元素是否都符合条件
var arr1 = [1, 2, 3, 4];
var result1 = arr1.every((item) => item < 4);
console.log(result1); // false
var arr2 = [1, 2, 3];
var result2 = arr2.every((item) => item < 4);
console.log(result2); // true
some():判断是否有至少一个元素符合条件
var arr1 = [2, 3, 4];
var result1 = arr1.some((item) => item < 2);
console.log(result1); // false
var arr2 = [1, 3, 4];
var result2 = arr2.some((item) => item < 2);
console.log(result2); // true
map():对元素进行重新组装,生成新数组
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.map(item => item + 1);
console.log(arr1); // 1, 2, 3, 4
console.log(arr2); // 2, 3, 4, 5
filter():过滤符合条件的元素
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.filter(item => item > 2);
console.log(arr1); // 1, 2, 3, 4
console.log(arr2); // 3, 4
// 注意:数组本身保持不变
reduce():数组中的每个值(从左到右)开始缩减,最终为一个值