Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、新增静态方法
- Array.of() 将参数中所有值作为元素形成数组。
console.log(Array.of(1, '2', true)); // [1, '2', true]
Array.from(arrayLike, mapFn?, thisArg?) 将类数组对象或可迭代对象转化为数组。
arrayLike 想要转换的类数组对象或可迭代对象（含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符）。
mapFn 可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。
thisArg 可选，用于指定 map 函数执行时的 this 对象。
let map = { do:function(n){ return n * 2 } } let arrayLike = [1,2,3] console.log(Array.from(arrayLike,function(n){ return this.do(n);//this指向map对象 },map));// [2, 4, 6]
二、新增实例方法
- map() 映射 - 一个对一个
// 一、返回开平方之后的数组 let arr = [1, 2, 4]; let result = arr.map(v => Math.sqrt(v)); console.log(result);// => (3) [1, 1.4142135623730951, 2] // 二、根据成绩返回对应的结果数组 let scores = [24, 56, 87, 100]; let result2 = arr.map(v => v >= 60 ? '及格' : '不及格');
filter() 过滤
// 一、过滤大于 60 的值并返回符合条件的数组 let arr = [10, 30, 50, 70, 90] let result = arr.filter(v => v > 60); console.log(result); // => (2) [70, 90] // 二、 商品价格过滤 let goods = [{ good: '男士衬衫', price: 100 }, { good: 'LV', price: 12345 }, { good: '腰包', price: 40 }, { good: '香奈儿', price: 25610 } ] let result = goods.filter(obj => obj.price >= 10000); console.log(result)
forEach() 迭代
let arr = ['apple', 'banana', 'orange', 'kiwi fruit']; arr.forEach((v, i, arr) => console.log("v:", v, "i:", i, "arr:", arr));
reduce() 统计 （如：购物车商品求总价）
let arr = [1,2,3,4,5,6,7,8,9,10]; // 一、求和 let result = arr.reduce((temp, item, index) => { console.log("temp:",temp,"item:",item,"index:",index); // temp 每一次计算的临时结果（第一次将第一个数作为初始结果），作为下一次的初始结果 // item 数组中每一项的值 // index 数组中每一项值对应的索引，索引从第二个值开始（索引为1） return temp + item; }) console.log(result);// // => 55 二、 求平均数 let average = arr.reduce((temp, item, index) => { if (index !== arr.length - 1) { return temp + item; } else { return (temp + item) / arr.length; } }) console.log(average); // => 5.5
find(callback) 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
findIndex(callback) 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
fill(value,startIndex?,endIndex?) 将一定范围索引的数组元素内容填充为单个指定的值。
value 用来填充数组的值
startIndex 可选。被填充数组的起始索引。默认为0
endIndex 可选。被填充数组的结束索引。默认为数组最后一个索引
copyWithin() 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4] // 参数1为负数表示倒数 console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]
entries() 遍历键值对
for(let [key, value] of ['a', 'b'].entries()){ console.log(key, value); } // 0 "a" // 1 "b" // 不使用 for... of 循环 let entries = ['a', 'b'].entries(); console.log(entries.next().value); // [0, "a"] console.log(entries.next().value); // [1, "b"]
keys() 遍历键名
for(let key of ['a', 'b'].keys()){ console.log(key); } // 0 // 1
values() 遍历键值
for(let value of ['a', 'b'].values()){ console.log(value); } // "a" // "b"
- includes(value,startIndex) 数组是否包含指定值
- value 包含的指定值
- startIndex 可选。搜索的起始索引，默认为0
- flat(number) 嵌套数组转一维数组
- number 可选。指定转换的嵌套层数
console.log([1 ,[2, 3]].flat()); // [1, 2, 3] // 指定转换的嵌套层数 console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]] // 不管嵌套多少层 console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5] // 自动跳过空位 console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
- flatMap(callback,thisObj) 先对数组中每个元素进行了的处理，再对数组执行 flat() 方法
- callback 遍历函数。该遍历函数可接受三个参数：当前遍历的元素、当前遍历元素对应的索引、原数组
- thisObj 可选。指定遍历函数中 this 的指向
三、拓展运算符
扩展运算符又叫三点运算符，可以用来展开与合并
3.1 作为展开运算符
- 使用方式1：利用展开运算符进行拼接数组
var arr = [1,2,3,4,5] var changeArr = [...arr,7,8,9] console.log(arr) //[1,2,3,4,5] console.log(changeArr) //拼接为[ 1, 2, 3, 4, 5, 7, 8, 9 ]
使用方式2：利用展开运算符进行拼接对象
let obj1 = { a: 1, b: 2, c: {changeName: 'd'}}; let obj2 = { ...obj1,d:4,f:789}; console.log(obj1); // { a: 1, b: 2, c: { nickName: 'd' } } console.log(obj2); // { a: 1, b: 2, c: { nickName: 'd' }, d: 4, f: 789 }
如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性
let obj1 = { a: 1, b: 2, c: {changeName: 'd'}}; let obj2 = { ...obj1,c:{changeName:"被改变的内容"}}; console.log(obj1); // { a: 1, b: 2, c: { changeName: 'd' } } console.log(obj2); // { a: 1, b: 2, c: { changeName: '被改变的内容' } } ,同名所以后面覆盖前面
使用方式3：可以用在给函数传递参数
var arr3 = [1,2,3] function fn (a,b,c){ console.log(a,b,c); } fn(...arr3) // 等价于fn(1,2,3)
使用方式4：展开数组获取最大值
var arr4 = [123,456,333,999] var maxNumber = Math.max(...arr4) console.log(maxNumber); // 获取最大值，999
使用方式5：把字符串转为数组
let stringData ='hello world' let newArray = [...stringData] console.log(newArray); // [ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd' ]
扩展运算符对对象实例的拷贝属于一种浅拷贝
javaScript数据类型分为基本数据类型和引用数据类型
基本数据类型有Number、String、Boolean、Undefined、Null
引用数据类型有Object、 Array、Function
但是需要注意的是，修改对象的部分属性，要注意数据类型
因为扩展运算符对对象实例的拷贝属于一种浅拷贝，这基本数据类型的拷贝会完整的复制一份；当类型是引用数据Object，如果拷贝的时候拷贝的是对象的引用，当原对象发生变化的时候，拷贝对象也会跟着变化，比如：
let obj1 = { a: 1, b: 2, c: {changeName: 'd'}}; let obj2 = { ...obj1}; obj2.b = 888; console.log(obj1); //{ a: 1, b: 2, c: { changeName: 'd' } } console.log(obj2); //{ a: 1, b: 888, c: { changeName: 'd' } } 没有影响原对象 obj2.c.changeName = "Excubile" console.log(obj1); //{ a: 1, b: 2, c: { changeName: 'Excubile' } } console.log(obj2); //{ a: 1, b: 888, c: { changeName: 'Excubile' } } 影响了原对象
3.2 作为合并运算符
- 使用方式1：可以将传入的参数合并为数组
// 这是将传入add函数的参数合并为数组 function add(...arr){ console.log(arr); } add(9,9) //[ 9, 9 ] add(1,2,3) //[ 1, 2, 3 ] add(4,5,6,7) //[ 4, 5, 6, 7 ]
使用方式2：与解构赋值结合起来，用于生成数组
let oldArr = ["海绵宝宝","派大星","章鱼哥","珊迪","蟹老板","痞老板"] let [First,Second,...newArr] = oldArr; console.log(First); //海绵宝宝 console.log(Second); //派大星 console.log(newArr); //[ '章鱼哥', '珊迪', '蟹老板', '痞老板' ]
注意点：扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
let oldArr = ["海绵宝宝","派大星","章鱼哥","珊迪","蟹老板","痞老板"] let [First,...newArr,Second] = oldArr; // 或者：let [...newArr,First,Second] = oldArr; console.log(First); //报错 console.log(Second); //报错 console.log(newArr); //报错
四、for…of 语句
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31
如果你不想修改语句块中的变量 , 也可以使用const代替let。
ES6中数组拓展
