目录
字符串
JS字符串转数组
split()方法
var string = "1,2,3,4,5,6,7,8,9,10"
var array = string.split(',')
var arrayLimit = string.split(',', 5) // 限制前5个
console.log(array) // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
console.log(arrayLimit) // ["1", "2", "3", "4", "5"]
数组
JS数组转字符串
1. join()方法，转换为指定符号分隔的字符串
该方法不指定参数的时候，默认以逗号进行分隔；也可以指定用于分隔的参数
var array = [1,2,3,4,5,6,7,8,9,10]
var stringOfComma = array.join(',') // join()默认以逗号分隔
var stringOfSemicolon = array.join(';')
console.log(stringOfComma) // 1,2,3,4,5,6,7,8,9,10
console.log(stringOfSemicolon) // 1;2;3;4;5;6;7;8;9;10
2. JSON.stringify()，转换为JSON字符串
var array = [1,2,3,4,5,6,7,8,9,10]
var stringOfJSON = JSON.stringify(array)
console.log(stringOfJSON) // [1,2,3,4,5,6,7,8,9,10]
JS判断两个数组是否相同
1. 完全相同
every()：检测数值元素的每个元素是否都符合条件。
a. 首先判断两个数组长度，长度不相等自然就可以直接判定其不相同。
b. 长度相等则可以借助数组的every()函数进行验证，如图：item指arrayFir的每个元素，index为每个元素对应的索引，因此依次判断item和arraySec中对应索引元素的值，当全都相等的时候，该方法将返回true，说明两个数组完全相等。
arrayCompare(arrayFir, arraySec) {
// 可先判断两个数组长度是否相等，不相等则没有逐一比较的必要
if (arrayFir.length != arraySec.length) {
return false
}
// 通过every函数进行比较
return arrayFir.every((item, index) => item == arraySec[index])
/* return arrayFir.every((item,index) => {
console.log(item)
return item == arraySec[index]
}) */
/* return arrayFir.every(function(item,index) {
console.log(item);
return item == arraySec[index]
}) */
},
例：
2. 元素相同，不关心排序
arrayCompare(arrayFir, arraySec) {
// 可先判断两个数组长度是否相等，不相等则没有逐一比较的必要
if (arrayFir.length != arraySec.length) {
return false
}
// 转换成排序的JSON字符串进行比较
return JSON.stringify(arrayFir.sort()) == JSON.stringify(arraySec.sort())
},
例：
经过排序后，二者拥有相同的元素
遍历数组
1. map
有返回值，返回一个新数组，其元素为：原数组中元素调用func的结果。
let list = [1, 2, 3, 4, 5]
let arr = list.map((d, i) => {
return d * 2
})
console.log(arr)
// [2, 4, 6, 8, 10]
2. filter
有返回值，返回一个新数组，其元素为：原数组中符合func条件的元素。
let list = [1, 2, 3, 4, 5]
let arr = list.filter((d, i) => {
return d % 2 // 取余
})
console.log(arr)
// [1, 3, 5]
let list = [1, 2, 3, 4, 5]
let arr = list.filter((d, i) => {
return d % 2 == 0
})
console.log(arr)
// [2, 4]
3. some
对数组中的每一个元素进行遍历，遇到return true退出循环
var list = [1, 2, 3, 4, 5, 6]
var sum = 0
list.some(item => {
sum = sum + item
if(item === 5) {
return true
}
})
console.log(sum)
//sum == 15
返回一个boolean，判断是否有元素符合func条件，如果有一个元素符合func条件，则循环终止，返回true。
可以用来判断一个数组中是否有满足某条件的元素。
let list = [1, 2, 3, 4, 5]
let boolean = list.some((d, i) => {
console.log(d, i)
return d > 3
})
// 1,0 2,1 3,2 4,3
// boolean: true 存在大于3的元素，循环被终止
let list = [1, 2, 3, 4, 5]
let boolean = list.some((d, i) => {
return d > 6
})
// boolean: false 不存在大于6的元素，循环未被终止
4. every
对数组中的每一个元素进行遍历，遇到return false退出循环
var list = [1, 2, 3, 4, 5, 6]
var sum = 0
list.every(item => {
sum = sum + item
if(item === 5) {
return false
}
return true // 需要有return true，否则循环不会继续
})
console.log(sum)
//sum == 15
返回一个boolean，判断每个元素是否符合func条件，如果有一个元素不满足func条件，则循环终止，返回false。
可用于判断一个数组中的元素是否都满足某条件；或者一个数组中是否有不满足某条件的元素。
let list = [1, 2, 3, 4, 5]
let boolean = list.every((d, i) => {
console.log(d, i)
return d < 3
})
// 1,0 2,1 3,2
// boolean: false 存在不小于3的元素，循环被终止
let list = [1, 2, 3, 4, 5]
let boolean = list.every((d, i) => {
return d < 6
})
// boolean: true 所有元素均小于6，循环未被终止
5. forEach
无返回值，对数组中的每一个元素进行遍历，直到循环完成，无法使用break，return等终止循环。值得注意的是，return虽不能终止循环，但其后面的代码是无法执行到的。
var list = [1, 2, 3, 4, 5, 6]
var sum = 0
list.forEach(item => {
sum = sum + item
if(item === 3)
return true
if(item === 4)
return false
if(item === 5)
return
})
console.log(sum)
//sum == 21
var list = [1, 2, 3, 4, 5, 6]
var sum = 0
list.forEach(item => {
if(item === 3) {
return true
}
sum = sum + item
if(item === 4)
return false
if(item === 5)
return
})
console.log(sum)
//sum == 18
let list = [1, 2, 3, 4, 5]
let arr = []
list.forEach((d, i) => {
arr.push(d * 2)
})
console.log(arr)
// [2, 4, 6, 8, 10]
6. for in
for in 实际是为循环可枚举性（enumerable）对象而设计的，也可以循环数组（不建议使用）。
a. 循环对象时，得到的是对象的key，不能直接得到value；
var obj = {
a:1, b:2, c:3}
for (var key in obj) {
console.log("obj." + key + " = " + obj[key])
}
// "obj.a = 1" "obj.b = 2" "obj.c = 3"
b. 循环数组时，得到的是数组的index下标；
const arr = [1, 2 ,3, 4]
for (const key in arr) {
console.log(key) // 输出 0 1 2 3
}
7. for of
for of 为ES6提供，可遍历带有iterator接口的，如Set，Map，String，Array。也就是说，for of循环内部调用的是数据结构的Symbol.iterator方法。
使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、Generator对象，以及字符串。
不可遍历普通的对象。
// 字符串
let str = "hello"
for (let s of str) {
console.log(s) // h e l l o
}
// 遍历数组
let arr = [1, 2, 3, 4, 5]
for (let e of arr) {
console.log(e)
}
// 1 2 3 4 5
8. entries、keys、values
有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6的数组、Set、Map都部署了以下三个方法，调用后都返回遍历器对象，所遍历的都是计算生成的数据结构。
a. entries
entries() 返回一个遍历器对象，可用于遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于Set，键名与键值相同。Map结构的iterator接口，默认就是调用entries方法。
// 遍历数组
let arr = ['a', 'b', 'c']
for (let item of arr.entries()) {
console.log(item) // 得到的是索引加值
}
// [0, "a"] [1, "b"] [2, "c"]
for (let [index, item] of arr.entries()) {
console.log(index, item)
}
// 0 "a" 1 "b" 2 "c"
// 遍历对象，使用Object.entries方法将对象的[键名,键值]组成一个数组，然后遍历这个数组。
let obj = {
a:1, b:2, c:3}
for (let item of Object.entries(obj)) {
console.log(item)
}
// ["a", 1] ["b", 2] ["c", 3]
for (let [key, value] of Object.entries(obj)) {
console.log(key, value)
}
// a 1 b 2 c 3
b. keys
keys() 返回一个遍历器对象，可用于遍历所有的键名。对于数组，则为索引值。
// 遍历数组
let arr = ['a', 'b', 'c']
for (let item of arr.keys()) {
console.log(item)
}
// 0 1 3
// 遍历对象，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。
let obj = {
a:1, b:2, c:3}
for (let key of Object.keys(obj)) {
console.log(key, obj[key])
}
// a 1 b 2 c 3
c. values
values() 返回一个遍历器对象，可用于遍历所有的键值。
// 遍历数组
let arr = ['a', 'b', 'c']
for (let item of arr.values()) {
console.log(item)
}
// a b c
// 遍历对象，使用Object.keys方法将对象的键值生成一个数组，然后遍历这个数组。
let obj = {
a:1, b:2, c:3}
for (let value of Object.values(obj)) {
console.log(value)
}
// 1 2 3
9. reduce
定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
prev：上一次调用 callbackFn 时的返回值。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
| 参数 | 描述 |
|---|---|
| function(total, currentValue, index, arr) | 必需。用于执行每个数组元素的函数。 |
| initialValue | 可选。传递给函数的初始值 |
函数参数
| 参数 | 描述 |
|---|---|
| total | 必需。初始值, 或者计算结束后的返回值。在第一次调用时，若指定了初始值 init，其值则为 init，否则为数组索引为 0 的元素 arr[0]。 |
| currentValue | 必需。当前元素；在第一次调用时，若指定了初始值 init，其值则为数组索引为 0 的元素 arr[0]，否则为 arr[1]。 |
| index | 可选。当前元素的索引；若指定了初始值 init，则起始索引号为 0，否则从索引 1 起始。 |
| arr | 可选。当前元素所属的数组对象。 |
示例
a. 数组求和
var arr = [1, 2, 3]
var sum = arr.reduce((total, item) => {
return total + item
})
console.log(sum)
// sum == 6
b. 求数组最大值
var arr = [3, 9, 9]
var max = arr.reduce((total, item) => {
return Math.max(total, item)
})
console.log(max)
// max == 9
c. 扁平化数组
var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]]
var res = arr.reduce((prev, cur) => prev.concat(cur), [])
console.log(res)
// [1,2,8,3,4,9,5,6,10]
let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]]
function flat(arr) {
return arr.reduce(function(prev, cur) {
return prev.concat(Array.isArray(cur) ? flat(cur) : cur)
}, [])
}
console.log(flat(arr))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
let arr = [[1, 2, [3, 4], 5], [6, 7, 8], [[9, 10], 11]]
console.log(this.flat(arr))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
methods: {
flat(arr) {
var that = this
return arr.reduce(function(prev, cur) {
return prev.concat(Array.isArray(cur) ? that.flat(cur) : cur)
}, [])
}
}