YK菌

@[toc]

# 1. 数组

  • 数组也是一个对象，是一个用来存储数据的对象和Object类似，但是它的存储效率比普通对象要高
  • 数组中保存的内容我们称为元素
  • 数组使用索引（index）来操作元素
  • 索引指由0开始的整数

# 2. 数组的操作

# 2.1 创建数组

var arr = new Array();  
var arr = [];

# 2.2 向数组中添加元素

数组对象[索引] = 值;

arr[0] = 123;  
arr[1] = "hello";

# 2.3 创建数组时直接添加元素

var arr = [元素1,元素2....元素N];

var arr = [123,"hello",true,null];

# 2.4 获取和修改数组的长度

  • 使用length属性来操作数组的长度
  • 获取长度： 数组.length
  • length获取到的是数组的最大索引+1
  • 对于连续的数组，length获取到的就是数组中元素的个数

# 2.5 修改数组的长度

  • 数组.length = 新长度
  • 如果修改后的length大于原长度，则多出的部分会空出来
  • 如果修改后的length小于原长度，则原数组中多出的元素会被删除
  • 向数组的最后添加元素
  • 数组[数组.length] = 值;

# 3. 数组的方法

方法 作用
push() 用来向数组的末尾添加一个或多个元素，并返回数组新的长度
pop() 用来删除数组的最后一个元素，并返回被删除的元素
unshift() 向数组的开头添加一个或多个元素，并返回数组的新的长度
shift() 删除数组的开头的一个元素，并返回被删除的元素
reverse() 可以用来反转一个数组，它会对原数组产生影响
concat() 可以连接两个或多个数组，它不会影响原数组，而是新数组作为返回值返回

# 3.1 slice(sart,[end])

  • 可以从一个数组中截取指定的元素
  • 该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回
  • 参数：
    1.截取开始位置的索引（包括开始位置）
    2.截取结束位置的索引（不包括结束位置）
    第二个参数可以省略不写，如果不写则一直截取到最后
    参数可以传递一个负值，如果是负值，则从后往前数

# 3.2 splice()

  • 可以用来删除数组中指定元素，并使用新的元素替换
  • 该方法会将删除的元素封装到新数组中返回
    参数：
    1. 删除开始位置的索引
    2. 删除的个数
    3. 三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边

# 3.3 join([splitor])

  • 可以将一个数组转换为一个字符串
  • 参数：
  • 需要一个字符串作为参数，这个字符串将会作为连接符来连接数组中的元素
  • 如果不指定连接符则默认使用,

# 3.4 sort()

  • 可以对一个数组中的内容进行排序，默认是按照Unicode编码进行排序
  • 调用以后，会直接修改原数组。
  • 可以自己指定排序的规则，需要一个回调函数作为参数：
  • 我们可以自己来指定排序的规则
  • 我们可以在sort()添加一个回调函数，来指定排序规则，
  • 回调函数中需要定义两个形参,
  • 浏览器将会分别使用数组中的元素作为实参去调用回调函数
  • 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
  • 浏览器会根据回调函数的返回值来决定元素的顺序，
  • 如果返回一个大于0的值，则元素会交换位置
  • 如果返回一个小于0的值，则元素位置不变
  • 如果返回一个0，则认为两个元素相等，也不交换位置
  • 如果需要升序排列，则返回 a-b
  • 如果需要降序排列，则返回b-a
function(a,b){  
	//升序排列  
	//return a-b;  
	  
	//降序排列  
	return b-a;  
}

# 4. 遍历数组

  • 遍历数组就是将数组中元素都获取到

# 4.1 一般情况我们都是使用for循环来遍历数组

for(var i=0 ; i<数组.length ; i++){  
    //数组[i]  
}

# 4.2 使用forEach()方法来遍历数组（不兼容IE8）

数组.forEach(function(value , index , obj){  
  
});
  • forEach()方法需要一个回调函数作为参数，
  • 数组中有几个元素，回调函数就会被调用几次，
  • 每次调用时，都会将遍历到的信息以实参的形式传递进来，
  • 我们可以定义形参来获取这些信息。
  • value:正在遍历的元素
  • index:正在遍历元素的索引
  • obj:被遍历对象

# 数组创建

  1. new Array
  2. Array
  3. 字面量
  4. Array.from() [类数组] -> [数组] 【ES6】
  5. Array.of() [参数] -> [数组] 【ES6】

# 数组属性

length 数组长度

# 检测数组

  1. instanceof Array
  2. Array.isArray()

# 遍历数组

for(let i = 0; i < nums.length; i++) {
	// nums[i]
}

for(i in nums){
	// nums[i]
}

nums.forEach((item)=>{
	// item
})

for(item of nums){
	// item
}

# 转换方法

  1. toString() [逗号分隔的字符串]
  2. toLocaleString()
  3. valueOf() [数组本身]

# 栈方法【改变原数组】

  1. push() [栈顶]推入 【返回新数组的长度】
  2. pop() [栈顶]弹出 【返回删除的项】

# 队列方法【改变原数组】

  1. push() [队尾]入队 【返回新数组的长度】

  2. shift()[队头]出队 【返回删除的项】

  3. unshift() [队头]入队 【返回新数组的长度】

  4. pop() [队尾]出队 【返回删除的项】

# 排序方法【改变原数组】

  1. reverse() 【返回调用数组引用】
  2. sort() [调用String()转型] 【返回调用数组引用】[对数字数组从小到大排序sort((a,b)=>a-b)]

# 操作方法【不改变原数组】

  1. concat() [连接数组，会打平参数数组]【返回新构建的数组，不改变原数组】
  2. slice([begin[, end]]) [截取数组]【返回新构建的数组，不改变原数组】
  3. splice(start[, deleteCount[, item1[, item2[, ...]]]]) [删除，插入，替换] 【返回被删除的元素，不改变原数组】 删除 (开始位置, 删除个数) 插入 (开始位置, 0, 要插入的元素) 替换 (开始位置, 删除个数, 要插入的元素)
  4. flat([depth])扁平化数组 【ES10】【返回新构建的数组，不改变原数组】
const arr = [0, 1, 2, [3, 4]];
const newArr = arr.flat();
console.log(newArr); // [ 0, 1, 2, 3, 4 ]
console.log(arr); // [ 0, 1, 2, [ 3, 4 ] ]

const arr2 = [0, [1, 2], [3, [4, 5]]];
const newArr2 = arr2.flat(1);
console.log(newArr2); // [ 0, 1, 2, 3, [ 4, 5 ] ]

# 归并方法【不改变原数组】

  1. reduce()
  2. reduceRight()

【JS】JavaScript数组-归并方法-reduce-reduceRight (opens new window)

25个你不得不知道的数组reduce高级用法 (opens new window)

let values = [1, 2, 3, 4, 5]
let sum = values.reduce((prev, cur, index, array) => prev + cur)
console.log(sum) // 15

# 搜索和位置方法【不改变原数组】

  1. indexOf(要查找的元素, [起始搜索位置]) 【返回位置】
  2. lastIndexOf()【返回位置】
  3. includes()【返回布尔值】【ES7】
  4. find() 【返回第一个匹配的元素】 【ES6】
  5. findIndex() 【返回第一个匹配元素的索引】 【ES6】
const evens = [2, 4, 6]
let result = evens.find((element, index, array) => element === 4) 
let result2 = evens.findIndex((element, index, array) => element === 4) 
console.log(result) // 4
console.log(result2) // 1

# 迭代方法【不改变原数组】

  1. every() [每一项都为真，则返回真]
  2. some()[有一项为真，则返回真]
  3. filter() [返回为真的项组成的数组]
  4. forEach() [没有返回值]
  5. map() [返回每一项运行结果组成的新数组]

【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach() (opens new window)

const evens = [2, 4, 6]
let result = evens.every((element, index, array) => element % 2 === 0) 
console.log(result) // true

# 迭代器方法【ES6】

  1. keys()
  2. values()
  3. entries()

【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach() (opens new window)

# 复制填充方法 【改变原数组】【ES6】

  1. copyWith(target[, start[, end]]) [复制数组的一部分到同一数组中的另一个位置] 【返回修改后的数组】

  2. fill(target[, start[, end]]) [固定值填充一个数组] 【返回修改后的数组】

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.copyWithin(0, 3, 6);
console.log(arr); //[4, 5, 6, 4, 5, 6, 7, 8, 9]

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const a = arr1.fill(0, 1, 5);
console.log(arr1); // [1, 0, 0, 0, 0, 6, 7, 8, 9]
console.log(a); // [1, 0, 0, 0, 0, 6, 7, 8, 9]

# 拓展运算符...【ES6】

const colors = ['green', 'red', 'pink'];
const colors1 = ['white', 'grey'];
const colors2 = [...colors, ...colors1];
console.log(colors2); // [ 'green', 'red', 'pink', 'white', 'grey' ]
上次更新: 2022/4/21 22:21:34

常用类