目录
1、类型检测
在前面 typeof 和 instanceof 中提到可以使用 arr instanceof Array 来判断一个对象是不是数组类型。同样的，Array 中自带一个方法 Array.isArray() 也可以检测一个对象是不是数组类型。
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray(3)); // false2、类型转换
（1）转换为字符串
console.log([1, 2, 3].toString()); // 1,2,3
console.log(String([1, 2, 3])); // 1,2,3
console.log([1, 2, 3].join('-')); // 1-2-3
console.log([1, 2, 3].join('')); // 123可以看出，使用 toString() 和 String() 将数组转换为字符串时，会默认将 “ , ” 也包含其中；而使用 join() 可以指定使用什么字符将数组中的每个元素连接成字符串。
（2）Array.from()
可将类数组转化为数组。类数组：①包含 length 属性的对象；②可迭代的对象。
console.log(Array.from('length')); // ["l", "e", "n", "g", "t", "h"]
let person = {
0: '张三',
'1': 18,
length: 2 // 指定了 length 属性，故可以转换为数组
};
console.log(Array.from(person)); // ["张三", 18]
let person1 = {
'name': '张三',
'age': 18,
length: 2
};
console.log(Array.from(person1)); // [undefined, undefined]此方法有两个参数：
参数一：需要转换的数据；
参数二：类似于 map 函数的方法，可对数组元素执行函数处理。
console.log(Array.from('length', (item) => {
if (item == 'g') {
item = 'G';
}
return item;
})); // ["l", "e", "n", "G", "t", "h"]（3）展开语法
①通过展开语法将 NodeList 转换为数组进行操作：
<body>
<div>123123123123123</div>
<div>456456456456456</div>
<script>
let divs = document.getElementsByTagName('div');
console.log([...divs]); // [div ,div]
[...divs].map((div) => {
div.addEventListener('click', function() {
this.style.background = 'skyblue';
});
});
</script>
</body>②可以传递任意数量的函数参数：
console.log(f(1, 2, 3, 4, 5)); // [1, 2, 3, 4, 5]
function f(...args) {
console.log(args);
}
console.log(f1(2021, 7, 3));
// 2021
// [7, 3]
function f1(year, ...date) {
console.log(year);
console.log(date);
}（4）解构赋值
解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构。
①基本用法
let [name, age] = ['张三', 18];
console.log(name); // 张三
console.log(age); // 18
let [year, ...date] = [2021, 7, 3];
console.log(year); // 2021
console.log(date); // [7, 3]
let [...a] = 'length';
console.log(a); // ["l", "e", "n", "g", "t", "h"]②简洁定义
let [, age] = ['张三', 18];
console.log(age); // 18③设置默认值
let [name = '张三', age] = [, 18];
console.log(name, age); // 张三 18④函数参数
function f([a, b]) {
console.log(a, b);
}
f([1, 2]); // 1 2（5）管理元素
①push()
压入元素，直接改变元数组，返回值为数组长度。
②pop()
从末尾弹出元素，直接改变元数组，返回值为弹出的元素。
let arr = [1, 2, 3];
console.log(arr.push(5)); // 4
console.log(arr); // [1, 2, 3, 5]
console.log(arr.pop()); // 5
console.log(arr); // [1, 2, 3]③shift()
从数组前端取出一个元素，返回值为该元素。
④unshift()
从数组前端插入一个元素，返回值为数组的长度。
let arr = [1, 2, 3];
console.log(arr.shift()); // 1
console.log(arr); // [2, 3]
console.log(arr.unshift(0)); // 3
console.log(arr); // [0, 2, 3]⑤fill()
填充数组。
第一个参数：要填充的元素；
第二个元素：要填充的开始下标；
第三个元素：要填充的结束下标，填充的位置不包括结束下标。
let arr = [1, 2, 3,,,,,];
console.log(arr.fill(4)); // [4, 4, 4, 4, 4, 4, 4]
console.log(arr.fill('h', 2)); // [4, 4, "h", "h", "h", "h", "h"]
console.log(arr.fill('hh', 1, 5)); // [4, "hh", "hh", "hh", "hh", "h", "h"]⑥slice()
从数组中截取部分元素组合成新数组（并不会改变原数组）。
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice()); // [1, 2, 3, 4, 5]
console.log(arr.slice(1)); // [2, 3, 4, 5]
console.log(arr.slice(1, 3)); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5]⑦splice()
添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。
第一个参数：设定删除的开始下标；
第二个参数：设定删除的长度；
剩余所有参数：设定要在删除的位置插入的元素。
若没有参数，则不删除元素；若只有一个参数，则从此下标开始删除后面所有元素；若有两个参数，则删除两下标之间的元素；若超过两个参数，则在删除的位置插入元素。
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(1, 3, 'h', 'h', 'h', 'h')); // [2, 3, 4]
console.log(arr); // [1, "h", "h", "h", "h", 5]（6）合并拆分
①join()
将数组连接成字符串。
②split()
将字符串分割成数组。
let arr = [1, 2, 3, 4];
let str = 'This is a good day';
console.log(arr.join('|')); // 1|2|3|4
console.log(str.split(' ')); // ["This", "is", "a", "good", "day"]③concat()
连接两个或多个数组，元素是值类型的是复制操作，是引用类型还是指向同一对象。
当然，使用拓展语法也可以。
let arr = [1, 2, 3, 4];
let arr1 = [5, 6, 7];
let arr2 = [8, 9];
console.log(arr.concat(arr1)); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr.concat(arr1, arr2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log([...arr, ...arr1, ...arr2]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]④copyWithin()
从数组中复制一部分到同数组另一位置。有三个参数：
参数一：复制到指定目标索引位置，必填；
参数二：复制的开始下标，选填；
参数三：复制的结束下标，复制内容不包含此下标，选填。
let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = [1, 2, 3, 4, 5, 6];
let arr3 = [1, 2, 3, 4, 5, 6];
console.log(arr1.copyWithin(1)); // [1, 1, 2, 3, 4, 5]
console.log(arr2.copyWithin(1, 2)); // [1, 3, 4, 5, 6, 6]
console.log(arr3.copyWithin(1, 2, 4)); // [1, 3, 4, 4, 5, 6]（7）查找元素
①indexOf()
②lastIndexOf()
这两个方法与 String 中的方法类似。不同的是数组中可以包含不同数据类型的值，所以这两个方法进行匹配时使用的为全等(===)而不是相等(==)。
③includes()
判断元素是否在数组中，是则返回 true ，否则返回 false 。
④find()
查找到元素后返回该元素，否则返回 undefined 。
⑤findIndex()
与 find() 不同的是返回的为元素的下标，找不到则返回 -1 。
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.includes(3)); // true
console.log(arr.includes(0)); // false
console.log(arr.find((item => {
return item == 3;
}))); // 3
console.log(arr.find((item => {
return item == 0;
}))); // undefined
console.log(arr.findIndex(item => {
return item == 3;
})); // 2
console.log(arr.findIndex(item => {
return item == 0;
})); // -1使用 includes() 等不能查找引用类型。
console.log(objArr.includes({ name: '李四', age: 19 })); // false
console.log(objArr.find((item => (
item.name == '李四'
)))); // {name: "李四", age: 19}
console.log(objArr.findIndex((item => (
item.name == '李四'
)))); // 1（8）数组排序
①sort()
将数组按从小到大自动排序并返回。
let objArr = [
{ name: '张三', age: 18 },
{ name: '李四', age: 19 },
{ name: '王五', age: 17 }
];
let num = [2, 3, 1, 5, 7, 9, 8, 4, 0, 6];
let str = ['b', 'a', 'c', 'B', 'A', 'C'];
console.log(num.sort()); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(str.sort()); // ["A", "B", "C", "a", "b", "c"]
console.log(objArr.sort());
// [{ name: '张三', age: 18 }, { name: '李四', age: 19 }, { name: '王五', age: 17 }]②reverse()
将数组反序并返回。
let objArr = [
{ name: '张三', age: 18 },
{ name: '李四', age: 19 },
{ name: '王五', age: 17 }
];
let num = [2, 3, 1, 5, 7, 9, 8, 4, 0, 6];
let str = ['b', 'a', 'c', 'B', 'A', 'C'];
console.log(num.reverse()); // [6, 0, 4, 8, 9, 7, 5, 1, 3, 2]
console.log(str.reverse()); // ["C", "A", "B", "c", "a", "b"]
console.log(objArr.reverse());
// [{ name: '王五', age: 17 }, { name: '李四', age: 19 }, { name: '张三', age: 18 }]（9）forEach()
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
lessons.forEach((item, index, array) => {
item.title = item.title.substr(0, 5);
});
console.log(lessons);
// [{title: "媒体查询响", category: "css"}, {title: "FLEX ", category: "css"}, {title: "MYSQL", category: "mysql"}]（10）迭代器方法
①keys()
通过迭代对象获取索引。
②values()
通过迭代对象获取值。
③entries()
返回数组所有键值对。
let num = ['a', 'b', 'c', 'd'];
let keys = num.keys();
let values = num.values();
let entries = num.entries();
console.log(keys); // Array Iterator {}
console.log(keys.next()); // {value: 0, done: false}
console.log(keys.next()); // {value: 1, done: false}
console.log(keys.next()); // {value: 2, done: false}
console.log(values); // Array Iterator {}
console.log(values.next()); // {value: "a", done: false}
console.log(values.next()); // {value: "b", done: false}
console.log(values.next()); // {value: "c", done: false}
console.log(entries); // Array Iterator {}
console.log(entries.next()); // {value: Array(2), done: false}
console.log(entries.next()); // {value: Array(2), done: false}
console.log(entries.next()); // {value: Array(2), done: false}
// 解构获取 entries 内容
let { done, value: [key, value] } = entries.next();
console.log(key); // 3
console.log(value); // d（11）扩展方法
①every()
用于递归的检测元素，要所有元素操作都要返回 true ，则结果为 true 。
let person = [
{ name: '张三', age: 23 },
{ name: '李四', age: 19 },
{ name: '王五', age: 17 }
];
let age_18 = person.every(person => ( person.age > 18 ));
let age_30 = person.every(person => ( person.age < 30 ));
console.log(age_18); // false
console.log(age_30); // true
// 用 every() 来检测关键词
let words = ['html', 'css', 'js'];
let title1 = 'js真有趣';
let title2 = 'html,js,css真有趣';
let state1 = words.every((item, index, array) => {
console.log(title1.indexOf(item)); // false
return title1.indexOf(item) > -1;
});
let state2 = words.every((item, index, array) => {
console.log(title2.indexOf(item)); // 0 8 5
return title2.indexOf(item) > -1;
});
if (state1 == false) {
console.log('标题必须包含所有关键词');
} else {
console.log('标题包含所有关键词');
}
if (state2 == false) {
console.log('标题必须包含所有关键词');
} else {
console.log('标题包含所有关键词');
}②some()
可以递归的检测元素，如果有一个返回 true ，表达式结果就是 true 。
参数一：为元素；
参数二：为索引；
参数三：为原数组。
let words = ['html', 'css', 'js'];
let title1 = 'js真有趣';
let title2 = 'html,js,css真有趣';
let state1 = words.some((item, index, array) => {
console.log(title1.indexOf(item)); // -1 -1 0
return title1.indexOf(item) > -1;
});
let state2 = words.some((item, index, array) => {
console.log(title2.indexOf(item)); // 0
return title2.indexOf(item) > -1;
});
if (state1 == false) {
console.log('标题必须包含关键词');
} else {
console.log('标题包含关键词');
}
if (state2 == false) {
console.log('标题必须包含关键词');
} else {
console.log('标题包含关键词');
}③filter()
过滤数据中元素。
let lessons = [
{title: '媒体查询响应式布局',category: 'css'},
{title: 'FLEX 弹性盒模型',category: 'css'},
{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];
let lessons_css = lessons.filter((item, index, array) => {
if (item.category.toLowerCase() == 'css') {
return true;
}
});
console.log(lessons_css);
// [{title: '媒体查询响应式布局',category: 'css'}, {title: 'FLEX 弹性盒模型',category: 'css'}]④map()
可以在数组的所有元素上应用函数，用于映射出新的值。
let lessons_js = lessons.map((item => {
if (item.category.toLowerCase() == 'css') {
item.category = 'js';
} else {
item.title = `张三${item.title}`;
}
}));
console.log(lessons);
// [{title: '媒体查询响应式布局',category: 'js'}, {title: 'FLEX 弹性盒模型',category: 'js'}, {title: '张三MYSQL多表查询随意操作',category: 'mysql'}]⑤reduce()
迭代数组的所有元素，从前开始。
⑥reduceRight()
迭代数组所有元素，从后开始。
参数一：是执行函数；
参数二：初始值。
参数一执行函数的参数如下：
| 参数 | 描述 |
|---|---|
| total | 必需。初始值，或者计算结束后的返回值。 |
| currentValue | 必需。当前元素。 |
| currentIndex | 可选。当前元素的索引。 |
| array | 可选。当前元素所属的数组对象。 |
let num = [1, 2, 3, 4];
function f(total, cur) { // 计算总和
return total + cur;
}
console.log(num.reduce(f, 0)); // 10
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
