数字化管理平台

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());// [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中数组拓展