常用的JavaScript 知识点总结-数组

常用的数组方法

Array.from

Array.from(arrayLike, mapFn, thisArg)
不改变原来的类数组，返回一个真实数组

arrayLike是类数组
mapFn：转化的新数组中的每个元素会执行该回调函数
thisArg：执行回调函数 mapFn 时 this 对象

返回一个真实数组1

let s = new Set(['foo', window]); // 去重
Array.from(s); // 转化成数组（将类数组转成数组），可以转化Nodelist集合
// 不改变原类数组，返回一个真实数组

返回一个真实数组2

类数组转化成真数组（可以转化Nodelist集合）

let arr = Array.prototype.slice.call(arguments);// 将类数组转换成真正的数组
Array.prototype.forEach.call(arguments,function(item){
    console.log(item) // 让类数组调用forEach方法，将元素打印输出
    }

Array.of

创建一个具有可变数量参数的新数组

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

copyWithin

用于从数组的指定位置拷贝元素到数组的另一个指定位置中，改变原数组

var fruits = ["Banana", "Orange", "Apple", "Mango",'555'];
fruits.copyWithin(3, 0, 2);
console.log（fruits） // Banana,Orange,Apple,Banana,Orange
// 复制数组的前面两个元素（0，2）到数组下标为3
//也就是Mango的位置，Mango被代替为Banana

Array.find

返回通过测试（函数内判断）的数组的第一个元素的值(非数组)，不改变数组的原始值,如果没有符合条件的元素返回 undefined

// find函数原理
Array.prototype.find = function(fn){
    for(let i=0; i<this.length;i++){
        let flag = fn(this[i]);
        if(flag){
            return this[i];
        }
        
        
    }
}

Array.findIndex

Array.findIndex()返回满足条件的第一个元素的下标,如果没有符合条件的元素返回 -1

var itemObj = students.find(item => {
   return Number(item.id) === Number(id) // 一定要return
})

Array.fill

Array.fill(value, start, end) 填充，将value作为填充数组元素的值，改变原数组

const array1 = [1, 2, 3, 4];
array1.fill(0, 2, 4)
console.log(array1); // [1, 2, 0, 0]
// 0作为填充数组array1的值，从数组的下标2开始


//2.创建一个长度为9的空数组
const array = new Array(9).fill('')

Array.map

Array.map()本身不改变原数组(但是可以重新赋值，改变原数组)，返回一个新数组，新数组中元素为原始数组元素调用函数处理后的值(也说明新数组中的元素项和原数组一样，不满足条件也会返回undefined项)。

// 手写一个js的map函数
var arr = [1, 2, 3, 4, 5]
Array.prototype.myMap = function(fn){
    var len = this.length;
    //创建新数组
    var arr = [];
    for(var i = 0; i < len; i ++){
        arr.push(fn(this[i],i))
    }
    return arr;
}
var aa = arr.myMap(function(ele, index){
    return ele * 2;
})
console.log(aa);

var fruits = [1, "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.map(function(item){
		return item + 1 // 必须retrun/ 或者用单句的箭头函数，默认返回
	}); 
	console.log(delell) //(4) [2, "Orange1", "Apple1", "Mango1"]
     // 不改变原数组，但是可以重新赋值，改变原数组
	console.log(fruits) //(4)[1, "Orange", "Apple", "Mango"]
 }		
 /**对比一**/

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
});

console.log(map1); // [undefined, 8, undefined, undefined]

/**对比二**/
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
});
console.log(map1); // [2,8,18,32]

/**对象数组去除特定值并且变成数组**/ 
把数组 [{id:undefined,name:'s'},{id:1,name:'2'}]
变成 [1]
 
     const roles = this.myForm.value.role
      ? [this.myForm.value.role]
      : this.groupPropertyRoles
          .filter((res) => {
            return res.id !== undefined;
          })
          .map((res) => {
            return res.id;
          });

Array.forEach

Array.forEach()本身不改变原数组(不可以通过赋值，改变原数组)，没有返回值，是将原数组中的每一个元素执行传进提供的函数。类似for,但是不能break.

var content = ''
        fsDir.forEach(res => {
            // 没有返回值，不需要return，有返回值需要return
          content += `<h3>${res}</h3>`
        })

// 原理
Array.prototype.forEach = function(callback,thisArg){
  var len = this.length;
  for(var i = 0; i < len; i++){
   callback.call(thisArg,this[i], i, this);
  }
}

Array.filter

Array.filter()是将所有元素传递进提供的函数中进行判断，不改变原数组，返回一个由满足条件的元素构成的新数组。(过滤，过滤出满足条件的数组元素组成新数组，并返回)

let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(res => res > 3)
//newNum = [4, 5] 满足条件的元素返回为一个新的数组

过滤器原理：
满足fn函数条件，则在新数组中push这个数组元素。

Array.prototype.filter = function(fn){
    let newArr = [];
    for(let i=0;i<this.length;i++){
        let flag = fn (this[i]);
        flag&&newArr.push(this[i])
        return newArr;
    }
}

Array.push

Array.push()在数组的后面添加新加元素，改变原数组,并返回新的长度

Arr.unshift

Arr.unshift() 将一个或多个元素添加到数组的开头，改变原数组，并返回新的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
let newFruits = fruits.unshift("Lemon","Pineapple");
console.log(fruits) // Lemon,Pineapple,Banana,Orange,Apple,Mango
console.log(newFruits) // 6

Array.pop

每调用一次就删除数组中的最后一个元素改变原数组,返回删除的元素

Array.shift

每调用一次删除数组中的第一个元素，改变原数组，并返回被删除的第一个元素的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
let newFruits = fruits.shift()
console.log(fruits) // ["Orange", "Apple", "Mango"]
console.log(newFruits) // 'Banana'

Array.some

Array.some()将所有元素进行判断返回一个布尔值,只要有一个元素符合条件则返回true.不改变原数组。

Array.every

Array.every()每一个元素都要满足条件才返回true，改变原数组。

Array.reduceRight

Array.reduceRight()作用和reduce相同，区别是这个是从右向左操作的

Array.reduce

Array.reduce()所有元素调用返回函数，函数返回值为最后结果，用法reduce（函数，参数：表初始值 ）

累加

let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add)
   //sum = 15  相当于累加的效果
   与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

// reduce 有两个参数，可以传一个，也可以传两个
// 第一个参数是函数
// 第二个参数表示初始值
// 上一次的执行结果会成为下一次的初始值
// 如果没有给初始值的话，第一次执行函数的时候val= 第一个元素；item=第二个元素
// 第二次执行函数的时候val= 第一次的返回值；item=第三个元素
let arr4 = [1,2,3]
let result = arr4.reduce(function(val,item,index,origin){
// origin 数组本身
    let sum = val + item  
    if(index== origin.length - 1){
        return sum/origin.length;
    }else{
        return sum;
    }
    // return的返回值会成为下一次函数执行的时候的val
}

replace 替换

数组或者字符串等中的方法，不改变原数组或者原来的字符串，例如：

// 错误:
var AppHtml = '替换'
AppHtml.replace('替换', '用来替换的内容')
console.log(AppHtml)  // 打印输出'替换'，没有替换
// 修改：重新赋值改变原数组
var AppHtml = '替换'
AppHtml = AppHtml.replace('替换', '用来替换的内容')
console.log(AppHtml)  // 打印输出'用来替换的内容'，替换了

拼接数组

Array.concat(arr1,arr2,…arrn) // 拼接两个或者更多的数组，并返回拼接后的新数组，不改变原数组。

判断是不是数组

Array.isArray()判断一个对象是不是数组，返回的是布尔值

Array.isArray(fruits);

实现增删替换

Array.splice 万能方法，实现增删替换，能改变原数组

Array.splice(开始位置， 删除的个数，item1, item2, ...)  万能方法，实现增删替换，能改变原数组
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); //从数组下标1开始，删除0个元素，添加‘feb’
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

截取数组

Array.slice() 方法可从已有的数组中返回选定的元素构成的新数组，不改变原数组。包含从 start 到 end （不包括该元素）的 Array中的元素。end没有规定，则从开始到最后。

[1,2,3].slice() // 打印[1, 2, 3]
var domNodes=Array.prototype.slice.call(document.getElementsByTagName("p"))
//domNodes是一个真数组，call让类数组拥有了slice方法，调用slice方法返回一个数组。

start是必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

用slice取数组最后一个元素

const last = arr.slice(-1)[0];
console.log(last);

对数组解构取最后一项值

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3

将数组转化成字符串：

Array.join

Array.join(separator)方法用于把数组中的所有元素转换一个字符串。

• separator如果省略该参数，则使用逗号作为分隔符
• separator为""无缝拼接

var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.join(" "); //Banana Orange Apple Mango
    fruits.join(""); //BananaOrangeAppleMango
 	fruits.join(); //Banana,Orange,Apple,Mango

Array.toString

Array.toString() 方法可把数组转换为字符串，并返回结果。toString强制转换其他类型

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString(); // Banana,Orange,Apple,Mango

判断是不是数组/对象/函数

/**方法一**/
Object.prototype.toString.call(value)==[object Array] // 判断是否数组
Object.prototype.toString.call(value)==[object Function] // 判断是否函数
Object.prototype.toString.call(value)==[object RegExp] // 判断是否正则
/**方法二**/
Array.isArray(vlaue)
/**方法三**/
value instanceof Array

indexOf与includes

indexOf与includes判断某一个数组中是否有该item

array.indexOf(item,start) // 可返回数组中某个指定的元素位置。
array.lastIndexOf(item,start) // 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
arr.includes(searchElement, fromIndex)//用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
[1, 2, NaN].includes(NaN); // true
[1, 2, NaN].indexOf(NaN); // -1

A对象是否包含B对象js

a:是对象，b是数组
取相同: a.filter(v => b.includes(v.id))
取不同: a.filter(v => !b.includes(v.id))
a,b都是普通数组
取不同:a.filter(item=>b.indexOf(item)==-1)

a,b都是数组对象
let add=arr2.filter(item=>!arr1.some(ele=>ele.id===item.id))

数组去重

function unique(arr) { 
    if (!Array.isArray(arr)) { // 判断是否是数组
    console.log("type error!"); return;
     }
 return Array.from(new Set(arr));  
 // new Set(arr) //得到一个无重复数据的集合
 //  Array.from(new Set(arr)) // 将集合转换成数组
 }

数组转成对象

const arr = [1,2,3]
const obj = {...arr}
console.log(obj)

Output:
{0: 1, 1: 2, 2: 3}

用js实现性能追踪

测试js在执行时的耗时，可以使用performance
let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
  sum += 1;
  // 需要测时间的代码
}
let end = performance.now();
console.log(start);
console.log(end);

短路运算

用||给默认值 ，例如 let name = null || '名字'
用&&代替if,例如 istrue&& name = '小红' // 只有istrue为真时，才执行name的赋值

实现数组扁平

用递归或者reduce实现数组扁平化，避免深层嵌套

// 递归
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

console.log(flatten(arr)); // [1, 2, 3, 4]

// reduce 
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
  return arr.reduce(function (prev, next) {
    return prev.concat(Array.isArray(next) ? flatten(next) : next);
  }, []);
}

console.log(flatten(arr)); // [1, 2, 3, 4]

或者用es6新方法flat(depth),参数depth代表展开嵌套数组的深度,默认是1
let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]

arr.flat(Infinity); // 不管数组多少层，全部展开成一层

// Infinity 是一个数值，表示无穷大

for in 迭代一个对象的属性

• for in遍历结果是key
• for of遍历结果是value
• for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name
• for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
• for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法

for (var key in myArr) {
  console.log(key); // 下标
}

for (var value of myArr) {
  console.log(value); // 值
}

var a=[1,2,3];
for(let i of a){
	console.log(i);//1 2 3
}

创建给定长度的空数组

1.方法
var arr = new Array(5); // [empty × 5]，但是不能用map等方法
console.log(arr.length) // 5
console.log([...arr]) // [undefined, undefined, undefined, undefined, undefined]，可以用map
2.方法
a.let counterArray = [...new Array(5)].map( (s, i) => i ); //可循环
b.Array.from({ length: 5}, (_, i) => i)
    .map(counter => {retun })
c.let counterArray = new Array(counter).fill(null);
d.用lodash库
import { range } from 'lodash'
<div>
  {
    range(5).map((item, index) => (
      <div key={index}>{index}</div>
    ))
  }
</div>

3.方法
var arr = Array.apply(null,{length:3}) // 创建一个长度为3的数组

翻转数组-reverse

reverse() 方法用于颠倒数组中元素的顺序。
arr.reverse()

常用的js判断

1.boolean（！undefined或者！null）都是true
2.undefined和null
(typeof null)
"object"
(typeof undefined)
"undefined"
(typeof undefined)==='undefined'
true
(typeof null)=='undefined'
false

数组克隆方法

const clone = (arr) => arr.slice(0);
const clone = (arr) => [...arr];
const clone = (arr) => Array.from(arr);
const clone = (arr) => arr.map((x) => x);
const clone = (arr) => JSON.parse(JSON.stringify(arr));
const clone = (arr) => arr.concat([]);
const clone = (arr) => structuredClone(arr);