原生js常用方法记录

下载阿里云oss文件(解决txt文件下载)

利用Blob对象

记得在阿里云oss控制台，处理跨域问题

该方法较上面的直接使用a标签download这种方法的优势在于，它除了能利用已知文件地址路径进行下载外，还能通过发送ajax请求api获取文件流进行下载。毕竟有些时候，后端不会直接提供一个下载地址给你直接访问，而是要调取api。 利用Blob对象可以将文件流转化成Blob二进制对象。该对象兼容性良好，需要注意的是

IE10以下不支持。 在Safari浏览器上访问Blob Url或Object URL当前是有缺陷的，如下文中通过URL.createObjectURL生成的链接。caniuse官网有指出

Safari has a serious issue with blobs that are of the type application/octet-stream

进行下载的思路很简单：发请求获取二进制数据，转化为Blob对象，利用URL.createObjectUrl生成url地址，赋值在a标签的href属性上，结合download进行下载。

handleDownload(record) {
    const xhr = new XMLHttpRequest();
    xhr.open('get', record.url);
    xhr.responseType = 'blob';
    xhr.send();
    xhr.onload = function () {
      if (this.status === 200 || this.status === 304) {
        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
        if ('msSaveOrOpenBlob' in navigator) {
          navigator.msSaveOrOpenBlob(this.response, name);
          return;
        }
        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
        // const url = URL.createObjectURL(blob);
        console.log('3333', this);
        const url = URL.createObjectURL(this.response);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = record.fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }
    };
  }

转载：前端下载文件的5种方法的对比(附加获取文件名

js判断数据

方法一

const isArray = (something)=>{
    return Object.prototype.toString.call(something) === '[object Array]';
}

cosnt a = [];
const b = {};
isArray(a);//true
isArray(b);//false

方法二

const a = [];
const b = {};
Array.isArray(a);//true
Array.isArray(b);//false

兼容老ie

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

转载 在JavaScript中，如何判断数组是数组？

js判断数组中是否存在某个值

1. array.indexOf()

判断数组中是否存在某个值，如果存在返回数组元素的下标，否则返回-1 let arr = ['something', 'anything', 'nothing', 'anything'];

let index = arr.indexOf('nothing');

结果：2

2. array.includes(searchElement[, fromIndex])

判断一个数组是否包含一个指定的值，如果存在返回 true，否则返回false

参数	说明	值
searchElement	需要查找的元素值

thisArg（可选）从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let numbers = [12, 5, 8, 130, 44];

let result = numbers.includes(8);
// 结果： true

result = numbers.includes(118);
// 结果： false

3. array.find(callback[, thisArg])

返回数组中满足条件的第一个元素的值，如果没有，返回undefined

参数callback	说明	值
element	当前遍历到的元素。
array	当前遍历到的元素。

参数：thisArg（可选） 指定 callback 的 this 参数。 // ---------- 元素是普通字面值 ----------

let numbers = [12, 5, 8, 130, 44];

let result = numbers.find(item => {
    return item > 8;
});

结果： 12

// ---------- 元素是对象 ----------
let items = [
    {id: 1, name: 'something'},
    {id: 2, name: 'anything'},
    {id: 3, name: 'nothing'},
    {id: 4, name: 'anything'}
];

let item = items.find(item => {
    return item.id == 3;
});

结果： Object { id: 3, name: "nothing" }

4. array.findIndex(callback[, thisArg])

返回数组中满足条件的第一个元素的索引（下标）, 如果没有找到，返回-1

参数callback	说明	值
element	当前遍历到的元素。
index	当前遍历到的索引。
array	数组本身。

参数：thisArg（可选） 指定 callback 的 this 参数。

// ---------- 元素是普通字面值 ----------
let numbers = [12, 5, 8, 130, 44];

let result = numbers.findIndex(item => {
    return item > 8;
});

结果： 0

// ---------- 元素是对象 ----------
let items = [
    {id: 1, name: 'something'},
    {id: 2, name: 'anything'},
    {id: 3, name: 'nothing'},
    {id: 4, name: 'anything'}
];
let index = items.findIndex(item => {
    return item.id == 3;
});

结果： 2

array.push

拷贝数组

数组是引用类型

与原始类型（number、string）不同，数组是引用类型。这意味着当你把一个数组赋值给一个变量，你是将数组的内存地址而非数组本身赋给变量。

浅拷贝...拓展运算符

一般潜拷贝拷贝的只是指向数组内存空间的指针。引用类型不包含值，它们是指向内存中值的指针。

let array = [1,2,3];
let arrayCopy = [...array]; // create TRUE copy

深拷贝JSON.parse(JSON.stringify())

深拷贝，拷贝的是数组的值而不是指针

let nestedArray = [1, [2], 3];
let arrayCopy = JSON.parse(JSON.stringify(nestedArray));

数组中的相同元素的个数

array.filter()

数组的filter函数

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

function checkArray(para, arr) {
    // 根据判断条件value == para ，返回一个新的数组
    let processArr = arr.filter(function(value) {
        return value == para;
    });
    // 返回[1, 1]
    return processArr.length;  // 这里返回数组长度,就是2
}

console.log(checkArray(1, [1,2,3,4,1]));
// 这样我们就知道数组内含有1的给个数为 2个

数组去重

Array.from 和 new Set()

Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

Array.from('foo'); 
// [ "f", "o", "o" ]

ES6 新增了 Set 这一数据结构，类似于数组，但 Set 的成员具有唯一性

基于这一特性，就非常适合用来做数组去重了

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
var a = [1,2,3], b = [3,4,5]
distinct(a, b)

// 结果为[1,2,3,4,5]

判断数据是否为数组

Array.isArray()

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

创建一个新的数组实例

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

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

合并多个数组

array.concat()

concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

测试一个数组内的所有元素是否都能通过某个指定函数的测试

array.every()

every()方法返回一个布尔值。

检测所有数组元素的大小 下例检测数组中的所有元素是否都大于 10。

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

箭头函数为上面的检测过程提供了更简短的语法。

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

array.fill()

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

array.filter()

筛选排除所有较小的值

下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 

JSON.stringify报错cyclic object value

引用数组处理会报错,而这个问题是 循环引用引发的. 可以这么处理数组

var seen = [];

var replacer = function(key, value) {
  if (typeof value === "object" && value !== null) {
    if (seen.indexOf(value) >= 0) {
      return;
    }
    seen.push(value);
  }
  return value;
};

JSON.stringify(a, replacer);