一、 获取数组的长度 – length
let arr = ['red', 'blue', 'pink'];
console.log(arr.length); // 3
二、 更改数组元素的值 – arr[index] = value
let arr = ['red', 'pink', 'blue'];
arr[2] = 'white';
console.log(arr); // ['red', 'white', 'blue']
三、 判断是不是数组 – isArray(arr)
const arr = [1, 2, 3];
console.log(arr.isArray); // true
四、 操作数组元素
-
为数组追加一条数据 –
arr.push()
-
从数组最前面添加一条数据 –
arr.unshift()
-
从数组最后删除一条数据 –
arr.pop()
-
从数组最前面删除一条数据 –
arr.shift()
let arr = ['red', 'blue', 'pink'];
let color1 = 'white';
let color2 = 'brown';
arr.push(color1); // 从后面添加
console.log(arr); // ['red', 'blue', 'pink', 'white']
arr.unshift(color2); // 从前面添加
console.log(arr); // ['brown', 'red', 'blue', 'pink', 'white'];
arr.pop(); // 从后面删除
console.log(arr); // ['brown', 'red', 'blue', 'pink']
arr.pop(2); // 往 pop 括号里面写东西,会被自动忽略
console.log(arr); // ['brown', 'red', 'blue', 'pink']
arr.shift(); // 从前面删除
console.log(arr); // ['red', 'blue', 'pink'];
五、把多个数组合并为一个数组 — .concat()
– 如果要拼接多个数组,数组名用逗号隔开
let arr = ['red', 'pink', 'blue'];
let color = 'yellow';
console.log(arr.concat(color)); // ['red', 'pink', 'blue', 'yellow']
let b = ['yellow', 'brown', 'purple'];
let c = ['black', 'white', 'yellowgreen'];
let bc = 'red';
let bcc = 100;
let bac = ['just do it', 666];
console.log(arr.concat(b, c, bc, bcc, bac));
// ["red", "pink", 'blue', "yellow", "brown", "purple", "black", "white", "yellowgreen", "red", 100, "just do it", 666]
console.log(arr.length); // 11
六、 把数组按规则拼接成字符串 — arr.join('*')
– 不改变原来的数组
let arr = ['red', 'pink', 'blue'];
console.log(arr.join('-')); // red-pink-blue
console.log(arr.join('')); // redpinkblue
console.log(arr.join(*)); // red*pink*blue
七、 判断是否为数组 — Array.isArray(arr)
let arr1 = ['red', 'pink'];
let arr2 = '我不是数组';
console.log(Array.isArray(arr1)); // true
console.log(Array.isArray(arr2)); // false
八、 arr.splice()
– 删除、添加、替换数组元素,改变原数组
let arr1 = ['yellow', 'brown', 'purple'];
let color = ['red', 'blue', 'pink'];
// 当第二个参数为 0 的时候 -- 表示添加一个或者多个元素
arr1.splice(2, 0, color);
console.log(arr1); // ['yellow', 'brown', Array(3), 'purple']
// 当第二个参数不为 0 的时候 -- 表示替换的元素
arr1.splice(2, 1, color);
console.log(arr1); // ['yellow', 'brown', Array(3)]
arr1.splice(1, 1, color);
console.log(arr1); // ['yellow', Array(3), 'purple']
arr1.splice(0, 1, color);
console.log(arr1); // [Array(3), 'brown', 'purple'];
// 下标包含开始,不包含末尾!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let e = ['red', 'pink', 'blue', 'purple', 'green'];
console.log(e.splice(1, 2)); // 从下标为1的元素开始删除两个元素 ['pink', 'blue']
console.log(e); // ['red', 'purple', 'green']
// 当参数都是 0 ,就返回原数组,一个也不删除
let f = ['red', 'pink', 'blue', 'purple', 'green'];
console.log(f.splice(0, 0)); // []
console.log(f); // ['red', 'blue', 'pink', 'purple', 'green']
九、 arr.slice()
– 切割数组元素,不改变原来的数组
let arr2 = ['red', 'pink', 'blue', 'purple', 'brown', 'white'];
// 当没有参数的时候 -- 返回完整的数组
console.log(arr2.slice());
// 当只有一个参数的时候 -- 取从这个下标,到数组结尾的元素
console.log(arr2.slice(2)); // ["blue", "purple", "brown", "white"]
// 两个参数的时候 -- [2, 4)
console.log(arr2.slice(2, 4)); // ['blue', 'purple']
十、 数组排序 – sort
– 改变原来的数组
- 默认功效 – 按照字符串的先后顺序对数组的每一项的字符顺序来进行排序,如果数组的某个项目不是字符串,会先把数组项目转换成字符串,再按照字符串的比较方法来排序
- 如果括号里面没有排序函数,默认就是按第一位字符的 ASCII 码来排序
- 可以传入一个参数,该参数必须为一个函数(比较函数),接收两个参数
let arr = [101, 20, 3, 401, 4];
// 默认是按按第一位字符的ASCII码来排序
console.log(arr.sort()); // 101, 20, 3, 401, 4
arr.sort(function (a, b) {
if (a > b) {
return 1;
}
else if (a < b) {
return -1;
} else {
return 0;
}
})
console.log(arr); // 3, 4, 20, 101, 401
// 综合上述
arr.sort(function (a, b) {
return a - b; // 升序
// return b - a; // 降序
// return 0; // 原数组排序
})
console.log(arr); // 3, 4, 20, 101, 401
let str = ['red', 'blue', 'pink', 'purple'];
console.log(str.sort); // blue, puink, purple, red
str.sort(function (a, b) {
return a - b;
})
console.log(str); // ['red', 'blue', 'pink', 'purple']
十一、 reverse
– 反转数组元素
// reverse() 仅仅只是把数组的顺序从头到尾依次换了一下
let arr3 = ['101', '2', '3'];
arr3.reverse();
console.log(arr3); // ['3', '2', '101']
let arr4 = ['one', 'three', 'two'];
arr4.reverse();
console.log(arr4); // ['two', 'three', 'one']
十二、 every
– 全部满足,结果才为 true
传入的参数必须每一项都满足条件就为 true
, 否则为 false
let arr = [1, 2, 3, 5, 4, 3, 2, 1];
function fun1(item, index, array) {
return (item > 1);
})
function fun2(item) {
return (item > 3);
})
console.log(arr.every(fun1)); // true
console.log(arr.every(fun2)); // false
十三、 some
– 只要有一个满足就为 true
传入的参数只要有一个满足条件就为 true
, 否则为 false
let arr = [1, 2, 0, 5, 4, 3, 2, 0];
function fun1(item, index, array) {
return (item > 1);
})
function fun2(item, index, array) {
return (item > 6);
})
console.log(arr.some(fun1)); // true
console.log(arr.some(fun2)); // false
十四、 filter
– 筛选符合条件的,不改变原数组,返回一个新数组
筛选出符合条件的结果,并组合成一个新的数组返回
let arr = [1, 2, 0, 5, 4, 3, 2, 0];
function fun1(item, index, array) {
return (item > 1);
})
console.log(arr.filter(fun1)); // [2, 5, 4, 3, 2]
十五、 map()
– 遍历元素,不改变原数组
map
方法返回一个新数组,数组元素为原来的数组元素调用函数处理后的值map
方法按照原数组元素的顺序依次处理元素map
方法不会改变原来的数组
let str = ['red', 'blue', 'pink', 'purple'];
let temp = '';
arr.map(function (item, index) {
temp += `${index}: ${item}<br>`;
})
document.write(temp);
document.write(arr); // ['red', 'blue', 'pink', 'purple']
let arr1 = [];
let arr2 = [];
let num = 0;
arr.map(function (value, index) {
// 组成一个新的数组
arr1.push(value);
arr2.unshift(value);
// 求数组元素的和
num += value;
})
console.log(arr1); // [1, 2, 3, 4, 5];
console.log(arr2); // [5, 4, 3, 2, 1];
console.log(num); // 15
十六、forEach
– 遍历数组
- 没有返回值
- 本质上和
for
循环一样 - 只是处理从数组中传入函数的每个参数
- 该方法会修改原数组,而
map
不会修改原数组
let arr = [1, 2, 3, 4, 5];
let temp = '';
arr.forEach(function (item, index) {
temp += `${index} = ${item + 10}<br>`;
})
document.write(temp);
document.write(arr); // 1,2,3,4,5
// forEach()实现数组元素求和
let sum = 0;
function getSum(item) {
return sum += item
}
arr.forEach(getSum);
console.log(sum)
// 或者
arr.forEach(function(item) {
sum += item;
})
console.log(sum);
// 点击按钮将数组里面的值乘以特定的数字
function fun(item, index, array) {
array[index] = item * input.value; // 依次改变数组元素
num.innerHTML = arr2; // 把改变之后的数组输出到页面
}
btn.onclick = function () {
arr2.forEach(fun);
}
十七、forEach()
方法的 break
和 continue
forEach() 本身是不支持 break
和 continue
的,但是 some()
和 evry()
可以实现
// every 实现 forEach 的 break
arr.every(function (item) {
console.log(item);
return item !== 3; // 先打印 1, 2, 3 轮到 4 就不执行了
})
// return 实现 遍历的终止
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
if (item === 3) return; // 如果等于 3 啥也不做
console.log(item); // 输出 1, 2, 4, 5
})
// return 实现 遍历的跳出
arr.some(function (item) {
if (item === 2) return;
console.log(item); // 1, 3, 4, 5
})
十八、 reduce()
– 并归
- reduce() 方法接收一个 累加函数 和 一个初始值(可选)
- 这个函数接收4个参数(前一个值,当前值,当前值的下标,数组对象)
- 不会为一个空数组执行
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
})
console.log(sum); // 15