concat 连接两个或多个数组，并返回结果
concat()可以连接两个或多个数组，并将新的数组返回
不会改变原数组
var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
var arr3 = arr1.concat(arr2)
console.log(arr3);//[1, 2, 3, 4, 5, 6]
join 数组转字符串
数组转字符串，不会改变原数组 将字符串返回
在join（）中指定一个字符串作为参数，这个字符串会成为连接符
不指定连接符，默认使用 逗号作为连接符
var arr1 = [1, 2, 3]
var arr2 = arr1.join()
console.log(arr2);//1,2,3
reverse 反转数组
会修改原数组
var arr1 = [1, 2, 3]
arr1.reverse()
console.log(arr1);// [3, 2, 1]
sort 排序
会改变原数组
a - b 升序
b - a 降序
var arr1 = [1, 2, 3]
arr1.sort((a, b) => b - a)
console.log(arr1);//[3, 2, 1]
Array.of 默认值
var arr = Array.of(100)
console.log(arr)//100
console.log(arr.length)// 1
Array.fill填充默认值
var arr = Array(100) //此时是100个空 length是100
var arr = Array(10).fill(0) // 此时是10个0
字符串转数组的几种方法
方法一
var str = "hello,word"
var arr = str.split(",")//['hello', 'word']
方法二 具有length属性才可以转化
from可以将伪数组转化为真实数组
var obj = {
0:"张三",
1:18,
length:2
}
console.log(Array.from(obj)) // ['张三', 18]
indexOf()查找元素
var arr = [1,2,3,4]
arr.indexOf(3) // 返回索引2
var arr = [1,2,3,4,"5"]
arr.indexOf(5) // 返回-1 查找不到返回-1 严格类型查找
var arr = [5,1,2,3,4,5]
arr.indexOf(5,1) //5 arr.indexOf(要查找的元素,查找的起始位置（索引）)
find 查找元素，把元素返回，适合引用 数据类型
let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.find(item => item.name === "js")
console.log(status);//{name: 'js'}
findIndex查找元素，把元素索引位置返回
let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.findIndex(item => item.name === "js")
console.log(status);//0
every 监测数组所有元素是否符合条件
● 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
● 如果所有元素都满足条件，则返回 true。
● 注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组
var user = [
{ name: "张三", js: 80 },
{ name: "李四", js: 90 },
{ name: "王麻子", js: 40 }
]
const res = user.every(item => {
return item.js >= 60
})
console.log(res ? "全部及格" : '有同学不及格');//有同学不及格
some（）方法检测数组中的元素是否满足指定条件
some() 方法会依次执行数组的每个元素
● 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
● 如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 10
})
console.log(res);//true
var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 100
})
console.log(res);//false
filter() 过滤
注意：filter删选所有满足条配件的，find返回第一个满足条件的
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.filter(item => {
return item.age == 13
})
console.log(res);
//0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
map() 映射
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
值类型不会改变原数组，引用类型会改变原数组因为是吧地址拿过去了
值类型
let arr = ['js', 'php', 'html']
const res = arr.map(item => {
return item = ${item}入门到放弃
})
console.log(res);// ['js入门到放弃', 'php入门到放弃', 'html入门到放弃']
console.log(arr);//['js', 'php', 'html']
引用类型
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
lesson.map(item => {
return item.sex = '男'
})
console.log(lesson);
//输出结果 改变原数组了
0: {name: '张三', age: 13, sex: '男'}
1: {name: '里斯', age: 13, sex: '男'}
2: {name: '王麻子', age: 14, sex: '男'}
引用类型 浅拷贝方法
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.map(item => {
return Object.assign({ sex: '男' },item)
})
console.log(res);
// res输出结果
0: {sex: '男', name: '张三', age: 13}
1: {sex: '男', name: '里斯', age: 13}
2: {sex: '男', name: '王麻子', age: 14}
console.log(lesson);
//lesson输出结果
0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
2: {name: '王麻子', age: 14}
Object.entries 可以将对象转换为二维数组
let hd = {
name: '你好啊',
year: 12312
}
console.log(Object.entries(hd));
[
[
"name",
"你好啊"
],
[
"year",
12312
]
]
记录一：扁平化 n 维数组
[1, [2, 3]].flat(2); // [1, 2, 3]
[1, [2, 3, [4, 5]]].flat(3); // [1, 2, 3, 4, 5]
Array.flat(n) 是 ES10 扁平化数组的 api， n 表示维度， n 值为 Infiniti 时维度为无限大。
js 实现：利用递归和数组合并方法 concat 实现扁平
function flatten(arr) {
while(arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
flatten([1, [2, 3]]); // [1, 2, 3]
记录二：去重
let arr = [1,2,3,4,1,2,3,4]
Array.from(new Set(arr)); // [1, 2, 3, 4]
[...new Set(arr)]; // [1, 2, 3, 4]
Set 是 ES6 新出来的一种定义不重复数组的数据类型。
Array.from 是将类数组转化为数组。
… 是扩展运算符，将 set 里面的值转化为字符串。
● js 实现：可以根据双层循环过滤掉重复项。
Array.prototype.distinct = function () {
var arr = this,
result = [],
i,
j,
len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] === arr[j]) {
j = ++i;
}
}
result.push(arr[i]);
}
return result;
};
[1, 2, 2, 3].distinct(); // [1, 2, 3];
记录三：排序
[1, 2, 3, 4].sort(); // [1, 2, 3, 4] 默认是升序
[1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]
sort 是 js 内置的排序方法，参数为一个函数
● js 实现：冒泡排序
Array.prototype.bubleSort = function () {
let arr = this,
len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (arr[j - 1] > arr[j]) {
[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
}
}
}
return arr;
}[(2, 1, 3)].bubleSort(); // [1, 2, 3]
记录四：最大值
Math.max(...[1, 2, 3, 4]); // 4
Math.max.apply(this, [1, 2, 3, 4]); // 4
[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
return Math.max(prev, cur);
}); // 4
记录五：求和
[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
return prev + cur;
}, 0); // 10
记录六：合并
var a = [1, 2, 3, 4];
var b = [5, 6];
a.concat(b); // [1, 2, 3, 4, 5, 6]
[...a, ...b]; // [1, 2, 3, 4, 5, 6]
[].push.apply(a, b); // [1, 2, 3, 4, 5, 6]
b.map((item) => {
a.push(item);
}); // [1, 2, 3, 4, 5, 6]
记录七：判断是否包含
[1, 2, 3].includes(4); // false
[1, 2, 3].indexOf(4); // -1 表示没有
[1, 2, 3].find(item => item === 3); // 3 如果没有返回 undefined
[1, 2, 3].findIndex(item => item === 3); // 2 如果没有则返回 -1
includes(), find(), findIndex() 是 ES6 的 api。
记录八：类数组转换
类数组：表示有 length 属性，但是不具备数组的方法。
Array.prototype.slice.call(arguments); // arguments 是类数组（伪数组）
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[...arguments];
// 可运行示例
function a () {
return [...arguments];
}
a(1, 2); // array
Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
// document.querySelectorAll('.color'); 返回的也是类数组
var targets = document.querySelectorAll('.color');
[].forEach.apply(targets, function(item){
// do something.
});
// slice 实现
Array.prototype.slice = function(start, end) {
var result = new Array();
start = start || 0;
end = end || this.length;
for(var i = start; i < end; i ++){
result.push(this[i]);
}
return result;
}
call、apply：改变 slice 里面的 this 指向 arguments， 所以 arguments 也可以调用数组的方法。
Array.from: 将类数组或可迭代对象创建为数组。
… 将数组扩展为字符串，再定义为数组。
记录九：每项设置值
[1, 2, 3].fill(false); // [false, false, false]
Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
fill 是 ES6 的方法。
记录十：单项处理
// every 每项都满足返回 true
[1, 2, 3].every(item => { return item > 2 }); // false
// 有一项满足返回 true
[1, 2, 3].some(item => { return item > 2 }); // true
// 数组过滤
[1, 2, 3].filter(item => { return item > 2 }); // [3]
some、every、filter 是 ES5 的 api。
记录十一：对象、数组转化
Object.keys({ name: "zhangsan", age: 14 }); // ["name", "age"]
Object.values({ name: "zhangsan", age: 14 }); // ["zhangsan", 14]
Object.entries(["zhangsan", 14]); // [["name", "zhangsan"], ["age", 14]]
Object.fromEntries(["name", "zhangsan"], ["age", 14]); // ES10 的 api，Chrome 不支持，firebox 输出 { "name": "张三", "age": 14 }
slice 数组中提取指定的元素
slice从数组中提取指定的元素 该方法不会改变原数组 返回新数组
参数1截取开始位置的索引，包含结束索引
参数2截取结束位置的索引，不好含结束索引
第二个参数可以不写，此时截取从开始索引及往后的所有元素
var arr = [1, 23, 56, 7, 8, 12]
var res = arr.slice(1, 4)
console.log(res);//(3) [23, 56, 7]
splice 删除元素，并向数组添加新元素
可以删除数组中指定的元素 会影响原数组 会将指定的元素从原数组中删除 并将删除的元素作为返回值
参数1开始位置的索引
参数2表示删除的数量
参数3及以后可传递新的元素，元素会插入到开始位置的前面
var arr = [1, 23, 56, 7, 8, 12]
arr.splice(1, 4)
console.log(arr);// [1, 12]
concat 连接两个或多个数组，并返回结果
concat()可以连接两个或多个数组，并将新的数组返回
不会改变原数组
var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
var arr3 = arr1.concat(arr2)
console.log(arr3);//[1, 2, 3, 4, 5, 6]
join 数组转字符串
数组转字符串，不会改变原数组 将字符串返回
在join（）中指定一个字符串作为参数，这个字符串会成为连接符
不指定连接符，默认使用 逗号作为连接符
var arr1 = [1, 2, 3]
var arr2 = arr1.join()
console.log(arr2);//1,2,3
reverse 反转数组
会修改原数组
var arr1 = [1, 2, 3]
arr1.reverse()
console.log(arr1);// [3, 2, 1]
sort 排序
会改变原数组
a - b 升序
b - a 降序
var arr1 = [1, 2, 3]
arr1.sort((a, b) => b - a)
console.log(arr1);//[3, 2, 1]
Array.of 默认值
var arr = Array.of(100)
console.log(arr)//100
console.log(arr.length)// 1
Array.fill填充默认值
var arr = Array(100) //此时是100个空 length是100
var arr = Array(10).fill(0) // 此时是10个0
字符串转数组的几种方法
方法一
var str = "hello,word"
var arr = str.split(",")//['hello', 'word']
方法二 具有length属性才可以转化
from可以将伪数组转化为真实数组
var obj = {
0:"张三",
1:18,
length:2
}
console.log(Array.from(obj)) // ['张三', 18]
indexOf()查找元素
var arr = [1,2,3,4]
arr.indexOf(3) // 返回索引2
var arr = [1,2,3,4,"5"]
arr.indexOf(5) // 返回-1 查找不到返回-1 严格类型查找
var arr = [5,1,2,3,4,5]
arr.indexOf(5,1) //5 arr.indexOf(要查找的元素,查找的起始位置（索引）)
find 查找元素，把元素返回，适合引用 数据类型
let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.find(item => item.name === "js")
console.log(status);//{name: 'js'}
findIndex查找元素，把元素索引位置返回
let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
let status = lessons.findIndex(item => item.name === "js")
console.log(status);//0
every 监测数组所有元素是否符合条件
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
-
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组var user = [ { name: "张三", js: 80 }, { name: "李四", js: 90 }, { name: "王麻子", js: 40 } ] const res = user.every(item => { return item.js >= 60 }) console.log(res ? "全部及格" : '有同学不及格');//有同学不及格
some（）方法检测数组中的元素是否满足指定条件
some() 方法会依次执行数组的每个元素
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 10
})
console.log(res);//true
var ages = [3, 10, 18, 20];
let res = ages.some(item => {
return item > 100
})
console.log(res);//false
filter() 过滤
注意：filter删选所有满足条配件的，find返回第一个满足条件的
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.filter(item => {
return item.age == 13
})
console.log(res);
//0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
map() 映射
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
值类型不会改变原数组，引用类型会改变原数组因为是吧地址拿过去了
#值类型
let arr = ['js', 'php', 'html']
const res = arr.map(item => {
return item = `${item}入门到放弃`
})
console.log(res);// ['js入门到放弃', 'php入门到放弃', 'html入门到放弃']
console.log(arr);//['js', 'php', 'html']
#引用类型
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
lesson.map(item => {
return item.sex = '男'
})
console.log(lesson);
//输出结果 改变原数组了
0: {name: '张三', age: 13, sex: '男'}
1: {name: '里斯', age: 13, sex: '男'}
2: {name: '王麻子', age: 14, sex: '男'}
#引用类型 浅拷贝方法
let lesson = [
{ name: "张三", age: 13 },
{ name: "里斯", age: 13 },
{ name: "王麻子", age: 14 }
]
const res = lesson.map(item => {
return Object.assign({ sex: '男' },item)
})
console.log(res);
// res输出结果
0: {sex: '男', name: '张三', age: 13}
1: {sex: '男', name: '里斯', age: 13}
2: {sex: '男', name: '王麻子', age: 14}
console.log(lesson);
//lesson输出结果
0: {name: '张三', age: 13}
1: {name: '里斯', age: 13}
2: {name: '王麻子', age: 14}
Object.entries 可以将对象转换为二维数组
let hd = {
name: '你好啊',
year: 12312
}
console.log(Object.entries(hd));
#[
[
"name",
"你好啊"
],
[
"year",
12312
]
]
浅拷贝的几种方法[浅拷贝不能深层次拷贝]
let hd = {
name: '你好啊',
year: 12312
}
// 浅拷贝的几种方法
let obj = { ...hd }
obj.name = '132'
console.log(obj);//{name: '132', year: 12312}
console.log(hd);//{name: '你好啊', year: 12312}
方法2
let obj = Object.assign({}, hd)
obj.name = 'hello'
console.log(obj);//{name: 'hello', year: 12312}
console.log(hd);//{name: '你好啊', year: 12312}
深拷贝
案例1
let hd = {
name: 'hello',
year: 999,
user: {
name: "word"
}
}
function copy(object) {
let res = {}
for (const key in object) {
res[key] = typeof object[key] == 'object' ? copy(object[key]) : object[key]
}
return res
}
let data = copy(hd)
data.user.name = 'hello word'
console.log(JSON.stringify(data, null, 2));
console.log(JSON.stringify(hd, null, 2));
/*
{
"name": "hello",
"year": 999,
"user": {
"name": "hello word"
}
}
index.html:34 {
"name": "hello",
"year": 999,
"user": {
"name": "word"
}
}
*/
案例2
let hd = {
name: 'hello',
year: 999,
user: {
name: "word"
},
arr: [123, 456]
}
function copy(object) {
let res = object instanceof Array ? [] : {}
for (const [k,v] of Object.entries(object)) {
res[k] = typeof v== 'object' ? copy(v) : v
}
return res
}
let data = copy(hd)
data.arr.push(789)
console.log(JSON.stringify(data, null, 2));
console.log(JSON.stringify(hd, null, 2));
/*
{
"name": "hello",
"year": 999,
"user": {
"name": "word"
},
"arr": [
123,
456,
789
]
}
index.html:54 {
"name": "hello",
"year": 999,
"user": {
"name": "word"
},
"arr": [
123,
456
]
}
*/
使用闭包 实现区间筛选
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
function between(a, b) {
return function (v) {
return v > 2 && v < 7
}
}
console.log(arr.filter(between(2, 7)));
方法2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var a = arr.filter(item => {
if (item > 2 && item < 7) return item
})
console.log(a);