js常用简写归纳

toString()

JavaScript中的toString()方法是用于将一个对象转换为字符串的方法。它是Object对象的一个方法，因此可以被所有的JavaScript对象继承和使用。

使用toString()方法时，它会返回一个表示对象的字符串。默认情况下，toString()方法返回的是 “[object Object]”，这并不是我们通常期望的结果。为了得到更有用的字符串表示，我们可以重写对象的toString()方法。

以下是一个示例：

const person = {
  name: 'John',
  age: 30,
  toString() {
    return `Name: ${this.name}, Age: ${this.age}`;
  }
};

console.log(person.toString()); // 输出: "Name: John, Age: 30"

在上面的示例中，我们重写了person对象的toString()方法，使其返回一个包含姓名和年龄的字符串。当我们调用person.toString()时，它会返回 “Name: John, Age: 30”。

需要注意的是，toString()方法返回的是一个字符串，而不是一个函数。因此，在调用toString()方法时，不需要使用括号。

数组使用中的toString方法可以将数组转换为字符串。在JavaScript中，可以使用以下方式使用toString方法：

const array = [1, 2, 3, 4, 5];
const string = array.toString();
console.log(string); // 输出: "1,2,3,4,5"

includes()

参数：
searchString：要搜索的字符串。
position（可选）：从当前字符串的指定位置开始搜索，默认为0。
返回值：
如果当前字符串包含指定的字符串，则返回true。
如果当前字符串不包含指定的字符串，则返回false。
示例：

const str = 'Hello, world!';
console.log(str.includes('Hello')); // true
console.log(str.includes('hello')); // false
console.log(str.includes('world', 7)); // true，从索引为7的位置开始搜索

实际开发中判断条件太长，就可以通过includes方法简写

if(obj === 0 || obj === "" || obj === false || obj === null || obj === undefined
){
  // ...
}

// 使用includes简化
if([0, '', false, null, undefined].includes(obj)){
  // ...
}

parseInt()

parseInt()方法用于将字符串转换为整数。它会解析字符串中的数字部分，并返回整数值。

语法：parseInt(string, radix)
参数：
string：要转换为整数的字符串。
radix（可选）：指定要解析的数字的基数。默认为10。
返回值：
如果解析成功，则返回解析后的整数值。
如果解析失败，则返回NaN。

console.log(parseInt('123')); // 123
console.log(parseInt('10', 2)); // 2，将二进制字符串'10'转换为十进制整数
console.log(parseInt('hello')); // NaN，解析失败，返回NaN

parseFloat()

parseFloat()方法用于将字符串转换为浮点数。它会解析字符串中的数字部分，并返回浮点数值。
参数：
string：要转换为浮点数的字符串。
返回值：
如果解析成功，则返回解析后的浮点数值。
如果解析失败，则返回NaN。
示例：

console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('10.5')); // 10.5
console.log(parseFloat('hello')); // NaN，解析失败，返回NaN

数组转为字符串

你可以使用JavaScript的join()方法将数组转换为字符串。以下是一个示例代码：

const array = [1, 2, 3, 4, 5];
const string = array.join(', ');
console.log(string);//1,2,3,4,5,6

字符串转为数组

例如，如果你有一个字符串"Hello,World"，你可以使用split()方法将其转换为数组：

var str = "Hello,World";
var arr = str.split(",");
console.log(arr); // 输出 ["Hello", "World"]

在这个例子中，我们使用逗号作为分隔符将字符串分割成两个子字符串，并将它们存储在一个数组中。

你可以根据你的需求选择不同的分隔符，比如空格、逗号、分号等等。如果你想将字符串按照每个字符分割成一个数组元素，你可以将空字符串作为分隔符：

var str = "Hello";
var arr = str.split("");
console.log(arr); // 输出 ["H", "e", "l", "l", "o"]

防止崩溃的可选链(?.)

在JavaScript中，可选链操作符（?.）是一种用于防止访问可能为空或未定义的属性或方法的语法。它可以在访问对象的属性或调用对象的方法之前检查对象是否为null或undefined。

例如，假设你有一个对象person，它有一个name属性，但可能为空。你可以使用可选链操作符来安全地访问name属性：

var person = {
  // name: "John" // 如果name属性存在，取消注释这一行
};
var name = person?.name;
console.log(name); // 输出 undefined

在这个例子中，由于person对象的name属性为空，使用可选链操作符访问name属性会返回undefined。

可选链操作符还可以用于调用对象的方法。例如，假设你有一个对象calculator，它有一个add方法，但可能为空。你可以使用可选链操作符来安全地调用add方法：

var calculator = {
  // add: function(a, b) { return a + b; } // 如果add方法存在，取消注释这一行
};
var result = calculator?.add(2, 3);
console.log(result); // 输出 undefined

在这个例子中，由于calculator对象的add方法为空，使用可选链操作符调用add方法会返回undefined。

可选链操作符可以帮助你避免在访问可能为空或未定义的属性或方法时出现错误。它在处理复杂的对象结构或链式调用时特别有用。

同样数组也可以使用

const arr = [1, 2, 3, 4]

console.log(arr[0]) // 输出：1
console.log(arr[4]) // 输出：undefined

// 使用可选链运算符
console.log(arr?.[0]) // 输出：1
console.log(arr?.[4]) // 输出：undefined
console.log(arr?.[0]?.toString()) // 输出：'1'

逻辑空赋值(??=)

在JavaScript中，逻辑空赋值（??=）是一种用于将变量赋值为null或undefined时，才进行赋值操作的语法。它可以用于简化代码并避免重复赋值的情况。

例如，假设你有一个变量x，你只想在x为null或undefined时才将其赋值为一个默认值：

var x = null;
x ??= "default value";
console.log(x); // 输出 "default value"

在这个例子中，由于x的初始值为null，使用逻辑空赋值操作符将x赋值为"default value"。

逻辑空赋值操作符还可以用于避免重复赋值的情况。例如，假设你有一个变量count，你只想在count为null或undefined时才将其赋值为0：

var count = null;
count ??= 0;
console.log(count); // 输出 0
// 后续的代码可能会修改count的值，但不会再次赋值为0

在这个例子中，由于count的初始值为null，使用逻辑空赋值操作符将count赋值为0。如果后续的代码修改了count的值，逻辑空赋值操作符不会再次赋值为0。

逻辑空赋值操作符可以帮助你简化代码并避免重复赋值的情况。它在处理变量赋值时特别有用。

快速生成1-10的数组

生成0-9，利用了数组的下标值

// 方法一
const arr1 = [...new Array(10).keys()]
// 方法二
const arr2 = Array.from(Array(10), (v, k) => k)

生成1-10，通过map的特性

const arr2 = [...Array(10)].map((v, i) => i + 1)

快速生成10个0的数组

const arr = new Array(10).fill(0)

检验数据类型

export const typeOf = function(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

示例

typeOf('诚诚城')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

防抖

export const debounce = (() => {
  let timer = null
  return (callback, wait = 800) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()

vue中的使用：

methods: {
  loadList() {
    debounce(() => {
      console.log('加载数据')
    }, 500)
  }
}

节流

export const throttle = (() => {
  let last = 0
  return (callback, wait = 800) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})()

文件下载

参数：
api 接口
params 请求参数
fileName 文件名

const downloadFile = (api, params, fileName, type = 'get') => {
  axios({
    method: type,
    url: api,
    responseType: 'blob', 
    params: params
  }).then((res) => {
    let str = res.headers['content-disposition']
    if (!res || !str) {
      return
    }
    let suffix = ''
    // 截取文件名和文件类型
    if (str.lastIndexOf('.')) {
      fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))
      suffix = str.substring(str.lastIndexOf('.'), str.length)
    }
    //  如果支持微软的文件下载方式(ie10+浏览器)
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([res.data]);
        window.navigator.msSaveBlob(blobObject, fileName + suffix);
      } catch (e) {
        console.log(e);
      }
    } else {
      //  其他浏览器
      let url = window.URL.createObjectURL(res.data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName + suffix)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(link.href);
    }
  }).catch((err) => {
    console.log(err.message);
  })
}`

使用：

downloadFile('/api/download', {id}, '文件名')