concat 连接两个或多个数组，并返回结果

concat()可以连接两个或多个数组，并将新的数组返回

不会改变原数组

  1.         var arr1 = [1, 2, 3]
  2.         var arr2 = [4, 5, 6]
  3.         var arr3 = arr1.concat(arr2)
  4.         console.log(arr3);//[1, 2, 3, 4, 5, 6]

join 数组转字符串

数组转字符串，不会改变原数组 将字符串返回

在join（）中指定一个字符串作为参数，这个字符串会成为连接符

不指定连接符，默认使用 逗号作为连接符

  1.   var arr1 = [1, 2, 3]
  2.         var arr2 = arr1.join()
  3.         console.log(arr2);//1,2,3

reverse 反转数组

会修改原数组

  1.     var arr1 = [1, 2, 3]
  2.         arr1.reverse()
  3.         console.log(arr1);// [3, 2, 1]

sort 排序

会改变原数组

a - b 升序

b - a 降序

  1.    var arr1 = [1, 2, 3]
  2.         arr1.sort((a, b) => b - a)
  3.         console.log(arr1);//[3, 2, 1]

Array.of 默认值

  1. var arr = Array.of(100)
  2.  console.log(arr)//100
  3.  console.log(arr.length)// 1

Array.fill填充默认值

  1. var arr = Array(100) //此时是100个空 length是100
  2. var arr = Array(10).fill(0) // 此时是10个0

字符串转数组的几种方法

  1. 方法一
  2. var  str = "hello,word"
  3. var arr = str.split(",")//['hello', 'word']
  5. 方法二  具有length属性才可以转化
  6. from可以将伪数组转化为真实数组
  7. var obj = {
  8.     0:"张三",
  9.     1:18,
  10.     length:2
  11. }
  12. console.log(Array.from(obj)) // ['张三', 18]

indexOf()查找元素

  1. var arr = [1,2,3,4]
  2. arr.indexOf(3) // 返回索引2
  4. var arr = [1,2,3,4,"5"]
  5. arr.indexOf(5) // 返回-1  查找不到返回-1 严格类型查找
  7. var arr = [5,1,2,3,4,5]
  8. arr.indexOf(5,1) //5  arr.indexOf(要查找的元素,查找的起始位置（索引）)

find 查找元素，把元素返回，适合引用 数据类型

  1. let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
  2.     let status = lessons.find(item => item.name === "js")
  3.         console.log(status);//{name: 'js'}

findIndex查找元素，把元素索引位置返回

  1. let lessons = [{ name: "js" }, { name: "css" }, { name: "java" }]
  2.     let status = lessons.findIndex(item => item.name === "js")
  3.         console.log(status);//0

every 监测数组所有元素是否符合条件

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。
  • 注意： every() 不会对空数组进行检测。
    注意： every() 不会改变原始数组 
  1.   var user = [
  2.             { name: "张三", js: 80 },
  3.             { name: "李四", js: 90 },
  4.             { name: "王麻子", js: 40 }
  5.         ]
  6.         const res = user.every(item => {
  7.             return item.js >= 60
  8.         })
  9.         console.log(res ? "全部及格" : '有同学不及格');//有同学不及格

some（）方法检测数组中的元素是否满足指定条件

some() 方法会依次执行数组的每个元素

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

  2.   var ages = [3, 10, 18, 20];
  3.         let res = ages.some(item => {
  4.             return item > 10
  5.         })
  6.         console.log(res);//true
  9.    var ages = [3, 10, 18, 20];
  10.         let res = ages.some(item => {
  11.             return item > 100
  12.         })
  13.         console.log(res);//false

filter() 过滤

注意：filter删选所有满足条配件的，find返回第一个满足条件的

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

  1.   let lesson = [
  2.             { name: "张三", age: 13 },
  3.             { name: "里斯", age: 13 },
  4.             { name: "王麻子", age: 14 }
  5.         ]
  6.         const res = lesson.filter(item => {
  7.             return item.age == 13
  8.         })
  9.         console.log(res);
  10. //0: {name: '张三', age: 13}
  11.   1: {name: '里斯', age: 13}

map() 映射

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

值类型不会改变原数组，引用类型会改变原数组因为是吧地址拿过去了

  1. #值类型 
  2. let arr = ['js', 'php', 'html']
  3.         const res = arr.map(item => {
  4.             return item = `${item}入门到放弃`
  5.         })
  6.         console.log(res);// ['js入门到放弃', 'php入门到放弃', 'html入门到放弃']
  7.         console.log(arr);//['js', 'php', 'html']
  10. #引用类型
  11.  let lesson = [
  12.             { name: "张三", age: 13 },
  13.             { name: "里斯", age: 13 },
  14.             { name: "王麻子", age: 14 }
  15.         ]
  16.         lesson.map(item => {
  17.             return item.sex = '男'
  19.         })
  21.         console.log(lesson);
  22. //输出结果 改变原数组了
  23. 0: {name: '张三', age: 13, sex: '男'}
  24. 1: {name: '里斯', age: 13, sex: '男'}
  25. 2: {name: '王麻子', age: 14, sex: '男'}
  27. #引用类型 浅拷贝方法
  28.    let lesson = [
  29.             { name: "张三", age: 13 },
  30.             { name: "里斯", age: 13 },
  31.             { name: "王麻子", age: 14 }
  32.         ]
  33.         const res = lesson.map(item => {
  34.           return  Object.assign({ sex: '男' },item)
  35.         })
  36.         console.log(res);
  37. // res输出结果
  38. 0: {sex: '男', name: '张三', age: 13}
  39. 1: {sex: '男', name: '里斯', age: 13}
  40. 2: {sex: '男', name: '王麻子', age: 14}
  41.         console.log(lesson);
  42. //lesson输出结果
  43. 0: {name: '张三', age: 13}
  44. 1: {name: '里斯', age: 13}
  45. 2: {name: '王麻子', age: 14}

Object.entries 可以将对象转换为二维数组

  1.  let hd = {
  2.       name: '你好啊',
  3.       year: 12312
  4.     }
  5.  console.log(Object.entries(hd));
  7. #[
  8.     [
  9.         "name",
  10.         "你好啊"
  11.     ],
  12.     [
  13.         "year",
  14.         12312
  15.     ]
  16. ]

记录一：扁平化 n 维数组

  1. [1, [2, 3]].flat(2);         // [1, 2, 3]
  2. [1, [2, 3, [4, 5]]].flat(3); // [1, 2, 3, 4, 5]
  4. Array.flat(n) 是 ES10 扁平化数组的 api， n 表示维度， n 值为 Infiniti 时维度为无限大。
  5. js 实现：利用递归和数组合并方法 concat 实现扁平
  6. function flatten(arr) {
  7.     while(arr.some(item => Array.isArray(item))) {
  8.         arr = [].concat(...arr);
  9.     }
  10.     return arr;
  11. }
  12. flatten([1, [2, 3]]); // [1, 2, 3]

记录二：去重

  1. let arr = [1,2,3,4,1,2,3,4]
  2. Array.from(new Set(arr));     // [1, 2, 3, 4]
  3. [...new Set(arr)];             // [1, 2, 3, 4]
  5. Set 是 ES6 新出来的一种定义不重复数组的数据类型。
  6. Array.from 是将类数组转化为数组。
  7. … 是扩展运算符，将 set 里面的值转化为字符串。
  • js 实现：可以根据双层循环过滤掉重复项。
  1. Array.prototype.distinct = function () {
  2.   var arr = this,
  3.     result = [],
  4.     i,
  5.     j,
  6.     len = arr.length;
  7.   for (i = 0; i < len; i++) {
  8.     for (j = i + 1; j < len; j++) {
  9.       if (arr[i] === arr[j]) {
  10.         j = ++i;
  11.       }
  12.     }
  13.     result.push(arr[i]);
  14.   }
  15.   return result;
  16. };
  17. [1, 2, 2, 3].distinct(); // [1, 2, 3];

记录三：排序

  1. [1, 2, 3, 4].sort();                 // [1, 2, 3, 4] 默认是升序
  2. [1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]
  3. sort 是 js 内置的排序方法，参数为一个函数
  • js 实现：冒泡排序
  1. Array.prototype.bubleSort = function () {
  2.   let arr = this,
  3.     len = arr.length;
  4.   for (let i = 0; i < len; i++) {
  5.     for (let j = i + 1; j < len; j++) {
  6.       if (arr[j - 1] > arr[j]) {
  7.         [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
  8.       }
  9.     }
  10.   }
  11.   return arr;
  12. }[(2, 1, 3)].bubleSort(); // [1, 2, 3]

记录四：最大值

  1. Math.max(...[1, 2, 3, 4]); // 4
  2. Math.max.apply(this, [1, 2, 3, 4]); // 4
  3. [1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
  4.   return Math.max(prev, cur);
  5. }); // 4

记录五：求和

  1. [1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
  2.   return prev + cur;
  3. }, 0); // 10

记录六：合并

  1. var a = [1, 2, 3, 4];
  2. var b = [5, 6];
  3. a.concat(b); // [1, 2, 3, 4, 5, 6]
  4. [...a, ...b]; // [1, 2, 3, 4, 5, 6]
  5. [].push.apply(a, b); // [1, 2, 3, 4, 5, 6]
  6. b.map((item) => {
  7.   a.push(item);
  8. }); // [1, 2, 3, 4, 5, 6]

记录七：判断是否包含

  1. [1, 2, 3].includes(4);     // false
  2. [1, 2, 3].indexOf(4);     // -1 表示没有
  3. [1, 2, 3].find(item => item === 3);         // 3 如果没有返回 undefined
  4. [1, 2, 3].findIndex(item => item === 3);     // 2 如果没有则返回 -1
  6. includes(), find(), findIndex() 是 ES6 的 api。

记录八：类数组转换

  1. 类数组：表示有 length 属性，但是不具备数组的方法。
  3. Array.prototype.slice.call(arguments);     // arguments 是类数组（伪数组）
  4. Array.prototype.slice.apply(arguments);
  5. Array.from(arguments);
  6. [...arguments];
  8. // 可运行示例
  9. function a () {
  10.     return [...arguments];
  11. }
  12. a(1, 2); // array
  14. Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
  16. // document.querySelectorAll('.color'); 返回的也是类数组
  17. var targets = document.querySelectorAll('.color');
  18. [].forEach.apply(targets, function(item){
  19.     // do something.
  20. });
  22. // slice 实现
  23. Array.prototype.slice = function(start, end) {
  24.   var result = new Array();
  25.   start = start || 0;
  26.   end = end || this.length;
  27.   for(var i = start; i < end; i ++){
  28.     result.push(this[i]);
  29.   }
  30.   return result;
  31. }
  34. call、apply：改变 slice 里面的 this 指向 arguments， 所以 arguments 也可以调用数组的方法。
  35. Array.from: 将类数组或可迭代对象创建为数组。
  36. … 将数组扩展为字符串，再定义为数组。

记录九：每项设置值

  1. [1, 2, 3].fill(false);                 // [false, false, false]
  2. Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
  4. fill 是 ES6 的方法。

记录十：单项处理

  1. // every 每项都满足返回 true
  2. [1, 2, 3].every(item => { return item > 2 }); // false
  4. // 有一项满足返回 true
  5. [1, 2, 3].some(item => { return item > 2 }); // true
  7. // 数组过滤
  8. [1, 2, 3].filter(item => { return item > 2 }); // [3]
  10. some、every、filter 是 ES5 的 api。

记录十一：对象、数组转化

  1. Object.keys({ name: "zhangsan", age: 14 }); // ["name", "age"]
  2. Object.values({ name: "zhangsan", age: 14 }); // ["zhangsan", 14]
  3. Object.entries(["zhangsan", 14]); // [["name", "zhangsan"], ["age", 14]]
  4. Object.fromEntries(["name", "zhangsan"], ["age", 14]); // ES10 的 api，Chrome 不支持，firebox 输出 { "name": "张三", "age": 14 }