JavaScript中的数组方法

01 创建一个数组

 const arr1 = new Array('dj','ld');
 const arr2 = [1,2,3]

02 Array.of( )方法创建

 let arr = new Array(6);
 console.log(arr.length); //6
 console.log(arr[1]); //undefined
 ​
 let arr2 = Array.of(6);
 console.log(arr2.length); //1
 console.log(arr2[0]); //6

03 类型检测与转换

 arr.toString() // 默认用,拼接
 arr.join('-') // 用-拼接数组成为一个字符串
 ​
 str.split("") // 将字符串拆分成数组
 Array.from(str)
 ​
 // 对于对象类型数据
 let obj = {
     0: 'asd',
     1: 'zxc',
     length: 2, //跟上length属性就能用Array.from方法将对象转成数组
 }
 console.log(Array.from(obj));

04 Array.from( )方法

第一个参数：想要转换成数组的伪数组对象或可迭代对象。

第二个参数：可以接收一个回调函数，数组中的每一个元素都会执行该回调。

第三个函数：可选参数，执行回调函数时 this 对象。

 console.log(Array.from([1, 2, 3], function(x){
     return x+1;
 })) // [2, 3, 4]

05 点操作符

 // 点操作符在等式右边表示打散拆开
 let arr3 = [...arr1, ...arr2]
 ​
 function sum(...args){
     console.log(args); // [1, 2, 3, 4]
 }
 sum(1,2,3,4)
 ​
 let [...arr] = 'asd';
 console.log(arr); // ['a', 's', 'd']
 ​
 console.log([...'hello']); // ['h', 'e', 'l', 'l', 'o']

06 解构语法

 let arr = ['dj','前端',18];
 let [name,address,age] = arr;
 console.log(name,address,age); // dj 前端 18
 ​
 let arr2 = ['2022','01', 23];
 let [,month] = arr2; //只想要月份
 console.log(month); // 01

07 追加元素

 let arr = ['asd', 'zxc'];
 arr[2] = 'qwe';
 arr[arr.length] = 'cms';
 arr.push('javaScript');
 arr.splice(arr.length,0,'jq');

08 出入栈与填充

 let arr = ['asd', 'zxc'];
 ​
 let length = arr.push('qwe'); //末位添加一个元素，方法返回数组的长度
 let value = arr.pop(); //弹出最后一个元素，返回值是弹出的元素
 let length = arr.unshift('qwe'); //首位添加一个元素，方法返回数组的长度
 let value = arr.shift(); //首位弹出一个元素，方法返回该元素

 // 完全填充数组
 let arr = new Array(5).fill('asd'); 
 console.log(arr); //['asd', 'asd', 'asd', 'asd', 'asd']
 ​
 // 选择位置填充数组
 console.log([1, 2, 3, 4].fill('asd', 1, 3)); //[1, 'asd', 'asd', 4]

09 截取方法 slice 和 splice

 // slice 从x开始截到y，不包括第y个（注意：方法返回一个新数组，不改变原数组）
 let arr = [1,2,3,4,5];
 console.log(arr.slice()); // [1, 2, 3, 4, 5]
 console.log(arr.slice(1,2)); // [2]
 console.log(arr.slice(1,)); // [2, 3, 4, 5]

 // splice 从x开始截，截取n个元素（注意：方法返回一个新数组，改变原数组）
 let arr2 = [1,2,3,4,5];
 console.log(arr2.splice(1,2)); // [2, 3]
 console.log(arr2.splice(1)); //只写一个参数就代表从那个位置开始截取到结束

10 替换方法 splice

 let arr = [1,2,3,4,5];
 arr.splice(0,3,'asd') // [1, 2, 3]    原数组变成 ['asd', 4, 5]
 arr.splice(1,1,'asd'); //将index为1的元素换成asd
 arr3.splice(1,0,'asd','zxc'); //从index为1的元素开始追加，原数组[1, 'asd', 'zxc', 2, 3, 4, 5]

11 自定义实现数组移动函数

 function move(arr, from, to) {
     if (from < 0 || to >= arr.length) {
         console.error('参数错误');
         return
     }
     const newArr = [...arr];
     let item = newArr.splice(from, 1);
     newArr.splice(to, 0, ...item);
     return newArr;
 }
 ​
 let arr = [1, 2, 3, 4, 5];
 let result = move(arr, 1, 3);
 console.log(result);

12 清空数组

 let arr = [1,2,3,4,5];
 ​
 arr.length = 0;
 arr.splice(0,arr.length);
 while(arr.pop()){};

 let a = [1, 2, 3, 4, 5];
 let b = a;
 ​
 // a = []; // 开辟了新空间，所以此时b还是有值的
 a.length = 0; // 操作的还是原空间，所以两个数组都变为空

13 拆分 split 与合并 concat

 let str = 'asd,zxc,qwe';
 let arr = str.split(',');
 ​
 console.log(arr); // ['asd', 'zxc', 'qwe']
 console.log(arr.join('-')); // asd-zxc-qwe

 let arr2 = ['asd', 'qwe'];
 let arr3 = ['zxc', 'jkl'];
 ​
 let arr4 = arr2.concat(arr3); // concat方法可以接收多个参数
 // let arr4 = [...arr2, ...arr3];

14 复制元素 copyWithin

 // copyWithin(to, start, end) 方法会改变原数组
 let hd = [1, 2, 3, 4, 5, 6];
 ​
 console.log(hd.copyWithin(2,0,2)); //[1, 2, 1, 2, 5, 6]
 console.log(hd.copyWithin(3, 1, 3)); //[1, 2, 3, 2, 3, 6]

15 查找元素 indexOf 和 includes

indexOf方法的第一个参数指定要查找的值，第二个参数指定了查找的起始位置。找不到则返回 -1。

lastIndexOf方法表示从末位开始找。

 let arr = [1,2,3,4,5,4,3,2,1];
 ​
 console.log(arr.indexOf(2)); // 1
 console.log(arr.indexOf(16)); // -1
 console.log(arr.indexOf(2,2)); // 7
 ​
 console.log(arr.lastIndexOf(2)); // 7
 console.log(arr.lastIndexOf(2,-3)); // 1

 console.log(arr.includes(2)); //true
 console.log(arr.includes(16)); //false

16 查找元素 find 和 findIndex 方法

 let arr = [1, 2, 3, 4];
 ​
 arr.find(function (item) {
     console.log(item);
 })
 // find方法返回查找到的元素
 let res = arr.find(function (item) {
     // return item == 2; //console.log(res); // 2
     return item == 200; //console.log(res); // undefined
 })
 console.log(res);

 // findIndex方法返回查找到的元素下标
 let index = arr.findIndex(function (item) {
     return item == 2; //console.log(index); // 1
 })

 let lessons = [
     { name: 'js' },
     { name: 'html' },
     { name: 'css' }
 ];
 ​
 console.log(lessons.includes({ name: 'html' })); //false 因为比较的是对象的地址
 ​
 let result = lessons.find(function (item) {
     return item.name == 'html'
 })
 console.log(result); // { name: 'html' }

 // 自定义find方法
 function myFind(array, callback) {
     for (const value of array) {
         if (callback(value)) {
             return value;
         }
     }
     return undefined;
 }
 ​
 let myValue = myFind(arr, function (item) {
     return item == 2;
 })
 console.log(myValue); // 2

17 数组排序 sort 方法

sort 方法会改变原数组

 let arr = [1,5,7,2,3,9];
 ​
 arr.sort((a,b)=>{
     // return a - b; //从小到大
     return b - a; //从大到小
 })

 //自定义排序方法
 function mySort(arr, callback) {
     for (const n in arr) {
         for (const m in arr) {
             if (callback(arr[n], arr[m]) < 0) {
                 const temp = arr[n];
                 arr[n] = arr[m];
                 arr[m] = temp;
             }
         }
     }
 }
 mySort(arr, function (a, b) {
     return a - b;
 });
 console.log(arr);

18 数组循环

 let arr = [1,2,3,4,5];
 ​
 for(let i=0 ; i<arr.length ; i++){
     console.log(arr[i]);
 }
 ​
 for(const value of arr){
     console.log(value); // forof循环的变量是值
 }
 ​
 for(const index in arr){
     console.log(index); // forin循环的变量是下标
 }
 ​
 arr.forEach((value,index,arr) => {
     console.log(index,value,arr);
 })

19 迭代器

 let arr = [1,2,3];
 ​
 let keys = arr.keys(); //取索引
 ​
 console.log(keys.next());
 console.log(keys.next());
 console.log(keys.next());
 console.log(keys.next());

 let values = arr.values(); //取值
 while(({value, done} = values.next()) && done === false){
     console.log(value);
 }

 let entries = arr.entries(); //综合以上两个
 while(({value, done} = entries.next()) && done === false){
     console.log(value); //此时的value是个数组，包括下标和值
 }
 for (const [key, value] of arr.entries()) {
     console.log(key, value);
 }

20 every 和 some 方法

 // every方法: 当回调方法全都返回true时，该方法返回true
 let arr = ['asd','zxc','qwe'];
 let res = arr.every(function(value, index, arr){
     console.log(value,index,arr);
     return true;
 })
 console.log(res);

 // some方法: 当回调有一个返回true时,该方法返回true,并结束循环
 let res3 = arr.some(function(value, index, arr){
     console.log(value,index,arr);
     return false;
 })
 console.log(res3);

21 filter 过滤

 let array = [1, 2, 3, 4, 5];
 ​
 array.filter(function (value, index, arr) {
     console.log(value, index, arr);
 })

 // 实例
 let lesson = [
     { name: 'css' },
     { name: 'css' },
     { name: 'js' },
     { name: 'html' },
 ]
 let cssLesson = lesson.filter(function (item) {
     return item.name == 'css'
 })
 console.log(cssLesson);

 // 自定义一个filter
 function myFillter(arr, except) {
     let newArr = [];
     for (const value of arr) {
         if (except.includes(value) === false) {
             newArr.push(value);
         }
     }
     return newArr;
 }
 ​
 let arr2 = myFillter(array, [2]);
 console.log(arr2); // [1, 3, 4, 5]

 // 自定义一个filter
 function myFillter2(arr, callback) {
     let newArr = [];
     for (const value of arr) {
         if (callback(value)) {
             newArr.push(value);
         }
     }
     return newArr;
 }
 console.log(
     myFillter2(array, function (value) {
         return value > 2;
     })
 );

22 map 方法

 // map方法不改变原数组,但是数组的项是对象时,直接操作value可能会改变原数组
 ​
 let arr = [1, 2, 3, 4, 5];
 ​
 let newarr = arr.map(function (value, index, arr) {
     console.log(value, index, arr);
     return value + 1;
 })
 console.log(newarr); // [2, 3, 4, 5, 6]
 console.log(arr); // [1, 2, 3, 4, 5]

 let lesson = [
     { name: 'css' },
     { name: 'css' },
     { name: 'js' },
     { name: 'html' },
 ];
 ​
 let newlesson = lesson.map(function (value) {
     // return value.sum = 100; //会改变原数组
     // return Object.assign({ sum: 100 }, value) //不会改变原数组
     return {
         name: value.name,
         sum: 100
     } //不会改变原数组
 })
 ​
 console.log(lesson);
 console.log(newlesson); // newlesson数组的项多了一个sum属性

23 reduce 方法

 let arr = [1, 2, 3, 4, 5];
 ​
 arr.reduce(function (pre, value, index, array) {
     console.log(pre, value); //第一次的pre是第一个值,此后pre都是上一次的返回值
 }) //此时reduce只调用了四次
 ​
 arr.reduce(function (pre, value, index, array) {
     console.log(pre, value); //第一次输出的pre是reduce方法的第二个参数,此后pre都是上一次的返回值
 }, 36) //使用reduce方法的第二个参数,该参数表示第一次pre的值,此时reduce调用了五次

 // 实例-统计次数
 let arr2 = [1, 2, 3, 1, 1, 5];
 function arrayCount(arr, item) {
     return arr.reduce(function (total, cur) {
         return total += (item == cur ? 1 : 0);
     }, 0)
 }
 console.log(arrayCount(arr2, 1)); //3次

 // 实例-获取最大值
 function arrayMax(arr) {
     return arr.reduce(function (pre, cur) {
         return pre > cur ? pre : cur;
     })
 }
 console.log(arrayMax(arr2)); // 5

 // 实例-获取价格高于500的商品
 let cart = [
     { name: 'iphone', price: 8000 },
     { name: '牙刷', price: 8 },
     { name: '剃须刀', price: 100 },
     { name: '高达', price: 2333 },
 ]
 function getPrice(goods, price) {
     return goods.reduce(function (arr, cur) {
         if (cur.price > price) {
             arr.push(cur);
         }
         return arr;
     }, [])
 }
 console.table(getPrice(cart, 500));
 console.table(getPrice(cart, 500).map(function (item) {
     return item.name;
 }));