如何判断一个变量是不是数组
Array.isArray()
var arr = [1,2,3]
Array.isArray(arr) // true
instanceof
var arr = [1,2,3]
arr instanceof Array // true
Object.prototype.toString.call()
var arr = [1,2,3]
Object.prototype.toString.call(arr) //'[object Array]'
arr.constructor === Array
- 缺点:对象的constructor属性是可以被改写的
var arr = [1,2,3]
arr.constructor === Array // true
Array.prototype.isPrototypeOf(arr)
var arr = [1,2,3]
Array.prototype.isPrototypeOf(arr) //true
创建数组的方法
构造函数
let arr = new Array()
字面量
- 使用数组字面量创建数组不会调用Array构造函数
let arr = [1,2,3,4,5]
Array.of
let arr = Array.of(1,2,3,4,5)
Array.fill
let arr = Array(5).fill(7)
Array.from()
类数组(伪数组)
具有length属性的对象
类数组的特点
- 对象是按照索引的方式存储数组
- 这个对象有一个length属性
如何将一个类数组转化为数组:arguements NodeList
ES5中的方法
- Array.prototype.slice.call(arrayLike, start);
- [].slice.call(arrayLike)
- tips:为什么使用[].slice.call()将类数组转换为数组,为什么是slice方法,而不是其他方法
ES6中的方法
- Array.from(arrayLike);
Array.from(arrayLike,mapFn,thisArg) thisArg是mapFn中的this
- [...arrayLike];
初始化一个长度为5的数组,并且给每个值设置为1
- 方法一
let array1 = Array(5)
for (let i = 0 ;i <array1.length; i ++){
array1[i] = 1
}
- 方法二
let array1 = Array(5)
array1.forEach(item=>{
item = 2
})
- 方法三
let array2 = Array.from({
length: 5
}, () => {
return 1;
})
- 方法四
let array = Array.from({length:5}).fill(1)
- 方法五
let arr = Array(5).fill(7)
数组的浅拷贝
利用concat()方法
var arr = [1,2,3]
var newArr = arr.concat()
arr.push(4)
newArr // [1,2,3]
利用数组扩展运算
var arr = [1,2,3]
var newArr = [...arr]
arr.push(4)
newArr //[1,2,3]
利用Array.from()
Array.from([1, 2, 3])
数组的深拷贝
数组中哪些方法会改变原数组,哪些方法不会改变原数组
会改变原数组的方法
不会改变原数组的方法
- concat() 返回值是新的数组
var arr = [1,2,3]
var newArr = arr.concat(4,5)
//newArr [1, 2, 3, 4, 5]
// arr [1, 2, 3]
ES5中数组的遍历方法
for循环
- 可以使用break终止循环,也不可以使用continue结束本次循环
- 不可以使用return终止循环
const arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
if (i === 2) {
break
}
console.log(arr[i])
}
for...in...
本身是为对象设计的,但是也可以遍历数组
- 可以使用continue结束本次循环,可以使用break终止循环
- 不能使用return终止循环
for (let index in arr) {
if (index === '2') { //index是字符串
continue
}
console.log(i, arr[i])
}
Array的遍历(迭代)方法
相同点:
- 不会对原数组进行改变
- 接收的参数相同
- 不可以使用break终止循环,也不可以使用continue结束本次循环,会报语法错误。
不同点:
- 返回值不同
没有返回值
forEach
对数组每一项运行传入函数,没有返回值。
- 没有返回值,循环不能
终止。 - 不支持使用
break终止循环,也不能用continue跳出本次循环。 - 可以使用retrun false,return true, return
跳出本次循环。
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item,index,arr){
//做一些操作
})
- 使用return false跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
if(item === 2){
return false
}
console.log(item)
})
- 使用return true跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
if(item === 2){
return true
}
console.log(item)
})
- 使用return 跳出本次循环
var arr = [1,2,3,4]
var returnArr = arr.forEach(function(item){
if(item === 2){
return
}
console.log(item)
})
- 不能使用break终止循环,也不能用continue结束本次循环
返回值是true或false
some()
对数组的每一项运行指定函数,如果有一项返回true则返回true,遇到返回true的项就终止。
- 可以使用return true
终止循环 - 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnValue = arr.some(item=>item>2)
console.log(returnValue) //true
every()
对数组的每一项运行指定函数,如果每一项都返回true则返回true,遇到返回fasle的项就终止。
- 可以使用return false、return
终止循环。 - 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnValue = arr.every(item=>item>2)
var arr = [1,2,3,4]
arr.every((item,index,arr)={
if(item === 2){
return true
}else{
console.log(item)
return true
}
})
等价于
arr.every((item,index,arr)={
if(item === 2){
}else{
console.log(item)
}
retun true
})
返回一个新数组
filter()
返回一个符合条件的数组,循环不可以终止
- 不可以使用return false、return、return true
终止循环。 - 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnArr = arr.filter(item=>item>2)
console.log(returnValue) //[3,4]
map()
返回一个每一项都是在原始数组的基础上做了对应操作的数组
- 不可以使用return false、return、return true
终止循环。 - 不可以使用break终止循环,也不可以使用continue结束本次循环
var arr = [1,2,3,4]
var returnArr = arr.map(itme=>item*2)
console.log(returnArr) //[2,4,6,8]
ES6中数组遍历的方法
for of
- 可以使用break终止循环,也可以使用continue跳出本次循环
let arr = [1,3,4,5,3,2]
for (let i of arr) {
if (i === 2) {
continue
}
console.log(i)
}
const Price = {
A : [1.5,2.3,4.5],
B : [3,4,5],
C : [0.5, 0.8,1.2]
}
for of 和for in的区别
- for of是为了遍历可迭代的对象
- for in只能遍历数组和对象
扩展运算符,只能将具有iterator接口的类数组转换为真正的数组:扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。
Aarry.from() 可以将没有iterator接口的类数组转换为真正的数组:Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
遍历数组的优点
遍历数组的缺点
var arr = [1,3,4,5]
arr.a = 9
for(item in arr){
console.log(item)
}
var arr = [1,3,4,5]
arr.a = 9
for(item in arr){
if(item === '2'){
break;
}
console.log(item)
}
var arr = [1,3,4,5]
arr.a = 9
for(item in arr){
if(item === '2'){
// if(item * 1=== 2){
continue
}
console.log(item)
}
批量复制和填充方法
fill()
批量复制方法,可以向一个数组中插入全部或者部分
相同的值
let arr = [0,0,0,0,0]
arr.fill(1)
let arr = [0,0,0,0,0,0]
arr.fill(8,1)
let arr = [0,0,0,0,0,0]
arr.fill(9,2,4)
copyWithin()
按照指定范围浅复制数组中的部分内容,然后将他们插入到指定索引开始的位置
let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(5)
let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(0,5)
let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(2,0,6)
let arr = [0,1,2,3,4,5,6,7,8]
arr.copyWithin(2,8,16)
转换方法
toString()
返回由数组中的每个值的等效字符串拼接而成的一个
逗号分隔的字符串
let colors = ['red','blue','yellow','gray']
colors.toString()
toLocalString()
返回由数组中的每个值的等效字符串拼接而成的一个
逗号分隔的字符串
let colors = ['red','blue','yellow','gray']
colors.toLocaleString()
valueOf()
返回数组本身
let colors = ['red','blue','yellow','gray']
colors.valueOf()
join()
let colors = ['red','blue','yellow','gray']
colors.join('--')
colors.join('')
colors.join()
colors.join(undefined)
- tips
如果数组中的某一项是null或undefined,则在join()、toString()、toLocalString()、valueOf()返回的结果中会以空字符串表示
栈方法
pop()
用于
删除数组的最后一项,同时减少数组的length,返回被删除的项。
push()
接受
任意的参数,并将它添加到数组末尾,返回数组的最新长度。
队列方法
shift()
删除数组的第一项并返回数组的第一项,数组长度减一
unshift()
在数组开头添加
任意多个值,返回新数组的长度
查找的方法
find((item,index,array)=>{},this)
返回第一个匹配的元素
findIndex()
返回第一个匹配元素的索引
indexOf(target,start)
返回要查到的元素在数组中的位置,找到就结束,不再继续查找,没找到返回-1
lastIndexOf(target,start)
返回要查到的元素在数组中的位置,找到就结束,不再继续查找,没找到返回-1
includes(target,start)
返回布尔值表示是否至少找到一个与指定元素匹配的项
tips
1.使用delete运算符可以将元素从数组中删除,但是数组的length不会发生变化
归并方法
reduce
- 获取元素中的最大值
let arr = [1,2,3,4,5]
function arrayMax(array){
return array.reduce(function(pre, cur){
return pre>cur ? pre : cur
})
}
arrayMax(arr) //
- 获取数组中重复出现数字的次数
let arr = [1,2,3,2,3,4,2,2,3,4,3,]
function arrayCount(array,item){
return array.reduce((total,cur)=>{
total += item === cur ? 1 : 0
return total
},0)
}
arrayCount(arr,3)