JavaScript基础：常用方法1.blob---file 2.数组常用的方法总结 2.1 reduce() 参数：

1.blob---file

// 多个块blob转为一个blob
let blobData = new Blob([blob1,blob2,blob3],{type:'pdf'})
// 将一个blob转为file
let fileData = new File([blob],name,{type:'pdf'})
// 将file 分块
let blobArray = Array.from({length:Math.ceil((file.size/chunkSize))},(_,idx)=>{
    file.slice(idx*chunkSize,(idx+1)*chunkSize)
})

2.数组常用的方法总结

2.1 reduce()

参数：reduce(function(**previousValue**,**currentValue**,**currentIndex**,**arr**),**initialValue**)

previousValue必须，currentValue必须，剩下的都是可选的 arr表示原始数组 ,当initialValue不给值时，previousValue初始值为数组的第一项，最终返回值

let listArr = [1,2,3,4]
//求取数组之和
listArr.reduce((previousValue,currentValue)=> previousValue+ currentValue,0);
listArr.reduce((previousValue,currentValue)=> previousValue+ currentValue)
// 求数组中最大的值
listArr.reduce((max,currentValue)=> Math.max(max,currentValue))
// 数组去重
listArr.reduce((newArr,currentValue)=>{
    newArr.indexOf(currentValue) === -1 && newArr.push(currentValue);
    return newArr
},[])

2.2 filter()参数function(val,idx,arr) 返回符合条件的新数组原数组无影响

参数：filter(function(**currentValue**,currentIndex,arr),thisValue)

currentValue是必须，剩下的可选，arr表示原始数组，最终返回符合条件的数组

作用：创建一个新的数组，数组中的元素时通过检查数组中符合条件的所有元素

注意：原数组不受影响，不对空数组进行

2.3 push() 尾部操作

作用：在数组的尾部追加数组元素

注意：a.返回值是修改后数组的长度 b.原数组被改变

2.4 pop() 尾部操作

作用：删除数组尾部的数组元素（一次只能删除一个元素）

注意：a.返回值是被删除的数组元素 b.原数组被改变

2.5 unshift() 头部操作

作用：在数组的头部添加元素

注意：a.返回值时修改后数组的长度 b.原数组被改变

2.6 shift() 头部操作

作用：删除数组头部的元素（一次只能删除一个）

注意：a.返回值是被删除的数组元素 b.原数组被改变

2.7 concat()

作用：实现俩个或多个数组的拼接

注意：a.返回的是拼接后的新数组b.原数组不受影响c.concat方法参数可以是value也可以是多个数组

2.8 join() 数组转字符串 (传参否则默认逗号)

作用：将数组的每个源于以指定的字符连接成新字符串返回

注意：a.返回值是数组元素组成的字符串，b.参数可选，指定用使用的分隔符，否者使用逗号作为分隔符 c.原数组不受影响

2.9 toString() 数组转字符串（无参数，默认逗号）

作用：数组转换为字符串，并返回结果

注意：原数组不受影响，b.数组中的元素使用逗号分隔

2.10 slice() 获取子元素

作用：从已有的数组中返回选定的元素

使用：arr.slice(begin,end);begin表示开始位置的下标，end表示结束位置的下标

注意：

返回值为截取出来的新数组
原数组不受影响
在截取时包含begin但是不包含end即含头不含尾
如果省略end,表示从begin一直截取到最后
如果begin和end同时省略，表示复制数组（生成一个独立新数组）
参数可以是负数，如果时负数，那么-1表示数组中的最后一个元素
如果第二个参数，即end的值大于等于数组的长度，表示从begin一直截取到数组的最后

2.11 splice() 增、删、改操作

作用：对数组进行增、删改操作

使用：arr.splice(idx1,howmany,item1,item2...)

注意：

增的格式：arr.splice(index,0,插入的值)；返回值为一个空数组，0的话表示不会删除项
删的格式：arr.splice(index,个数)，返回值为被删除的数组元素所形成的新的数组，注意，delete删除的是元素的值，而splice删除的是值和空间
改的格式：arr.splice(index,个数，新的值)；返回北行该的元素所形成的新数组

2.12 reverse() 无参数

作用：颠倒数组中的元素顺序

注意：原数组被改变

2.13 sort() 参数：function(a,b)/空

作用：对数组的元素进行排序

注意：

函数的返回值为原数组
没有参数时，默认按字母顺序（字符编码的顺序）对数组中的元素进行排序
升序： arr.sort(function(a,b){return a-b})
降序： arr.sort(function(a,b){return b-a})

2.14 includes()

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

注意：原数组不受影响

2.15 find() 参数function(value,index,arr)

作用：返回满足函数中条件的数组的第一个元素值

使用：arr.find(function(value,index,arr){return boolean;}) 返回value/undefined

注意：

原数组不受影响
为数组中每个元素调用一次函数执行；当数组中的元素在条件判断中返回true时，find返回符合条件的元素，之后的值不再调用执行函数，如果没有符合条件的元素返回undefind
空数组，函数不会运行

2.16 every() 参数function(value,index,arr)

作用：检测数组所有的元素是否都符合指定条件

注意：

原数组不受影响
如果数组中有一个元素不符合条件，则返回false，且剩余的元素不在检查，如果所有元素都符合条件返回true
不会对空数组进行检测

2.17 some() 参数function(value,index,arr)

作用：检测数组中的元素是否满足条件

注意：

原数组不受影响
如果有一个元素满足条件返回true,剩余的元素不在检测，如果所有的元素都不满足条件，则返回false
不会对空数组进行检测

2.18 forEach() 参数function(value,index,arr) 对数组进行遍历循环

作用：对数组进行遍历循环，对数组中的每一项运行给定函数

注意：没有返回值，不会对空数组进行遍历

forEach方法用于调用数组的每个元素，并将元素传递给回调函数；注意在回调函数中无法使用break跳出循环，也无法使用return返回值，可以使用throw Error退出循环

2.19 map() 参数function(value,index,arr) 不影响原数组，返回新数组

作用：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

注意：原数组不受影响,不会对空数组进行

3.字符串的常用方法总结

3.1 str.charAt(n) 返回字符串指定位置的字符

var str = 'hello'
str.charAt(3) // l
str.charAt(20) // ''

3.2 str.charCodeAt(n) 返回字符串指定位置的字符编码

var str = 'axkmw'
str.charCodeAt(3) // 109
str.charCodeAt(20) // NaN

3.3 str.concat() 犯法用于连接两个或多个字符串

var str = '123' str.concat('牵着手', '456', '抬起头') // "123牵着手456抬起头"

3.4 str.indexOf() 获取字符串str中首次出现的位置

str.indexOf(value,index)
返回 value 在字符串 str 中首次出现的位置,从 start 位置开始查找，如果不存在，则返回 -1。value必需。规定需检索的字符串值

3.5 str.lastIndexOf()

str.lastIndexOf(value,fromindex)
返回 value 在字符串 str 中最后出现的位置,从末尾向前开始查找，如果不存在，则返回 -1。

3.6 str.substring(start,stop)

一个新的字符串子内容是从 start处到 stop-1 处的所有字符，其length= stop-start

3.7 str.substr(start,length)

一个新的字符串内容从 start（包括 start 所指的字符）处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

3.8 str.split() 用于将一个字符串分割成字符串数组

str.split(separator,howmany)

3.9 str.toUpperCase()

3.10 str.toLowerCase()

3.11 str.includes()

3.12 str.trim() 去除字符串两端的空格

3.13 str.replace() 替换str的字符串

3.14 字符串切割和提取有三种方法

1. str.slice(start[,end])

var str = 'learning work'
str.slice(1, 3) // ea

2. str.substring(start[,end])

var str = 'learning work'
str.substring(1, 3) // ea

3. str.substr(start,length)

var str = 'learning work'
str.substr(1, 3) // ear

与第一种和第二种不同的是，substr()第二个参数代表截取的字符串最大长度

4. 异步数组的循环请求

问题： 希望每隔一秒钟，输出一个数字

var nums = [1,2,3]
var multi = num =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(num){
                resolve(num * num)
            }else{
                reject(new Error('error'))
            }
        },1000)
    })
}

问题分析： js中的循环数组遍历有四种：for, for-in, for-of,forEach

forEach方法用于调用数组的每个元素，并将元素传递给回调函数；注意在回调函数中无法使用break跳出循环，也无法使用return返回值

for-of 语句为各种collection集合对象专门定制的，遍历集合对象的属性值，注意和for-in的区别

分析问题：

for-of可以遍历各种集合对象的属性值，要求被遍历的对象需要实现迭代器（iterator）方法，一个拥有[Symbol.iterator]()方法的对象被认为是可遍历的

for-of遍历对象时，先调用遍历对象的迭代器方法[Symbol.iterator]()，该方法返回一个迭代器对象（迭代器对象中包含一个next方法）；然后调用迭代器对象上的next方法

var zeroesForeverIterator = {  
    [Symbol.iterator]: function () {    
        return this;  
    },  
    next: function () {    
        return {done: false, value: 0};  
    }
};

每次调用next方法都返回一个对象，其中done和value输赢用来遍历是否结束和当前的属性值当done的值为true时，遍历就停止了

等价于：

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {  
    VAR = $result.value;  STATEMENTS  $result = $iterator.next();
}

async function test(){
    var nums = [1,2,3]
    for(let x of nums){
        var res = await multi(x)
        console.log(res)
    }
}

5. 数学运算

1. Math.floor() 向下取整 floor （地板）

2. Math.ceil() 向上取整 ceil (天花板)

3. % 取余 / 取模获得的是小数

6. symbol

Symbol是JavaScript中的一种基本数据类型，引入了一种新的数据类型，用于表示独一无二的值。它在实际开发中有多种应用。

1. 创建对象的私有属性

使用Symbol作为对象的属性名，可以实现私有属性的效果。由于Symbol类型的值是唯一的，因此不会与其他属性名冲突。

2. 定义对象的枚举属性

通过在对象上使用Symbol作为属性名，可以定义不可枚举的属性。这意味着使用for…in循环或Object.keys()方法时，无法遍历到这些属性。

3. 实现类似于常量的值

由于Symbol值的唯一性，可以用作常量或者枚举值。多个模块可以使用相同的Symbol值，而不必担心冲突。

4. 实现迭代器和自定义数据结构

Symbol可以用于定义迭代器的接口，让对象可以通过for…of循环进行遍历。它也可以用于实现自定义的数据结构，如Set和Map。

手动实现一个简单的Symbol

虽然Symbol是JavaScript的内置类型，但我们可以手动实现一个简单的Symbol。以下是一个基本的Symbol类的手动实现示例

const MySymbol = (function() {
  let idCounter = 0;
  const symbolKey = '@@symbol';

  function MySymbol() {
    const symbolId = idCounter++;
    this[symbolKey] = symbolId;
  }

  MySymbol.prototype.toString = function() {
    return `Symbol(${this[symbolKey]})`;
  };

  return MySymbol;
})();

// 示例用法
const symbol1 = new MySymbol();
const symbol2 = new MySymbol();
console.log(symbol1.toString()); // Symbol(0)
console.log(symbol2.toString()); // Symbol(1)

**数组方法主要可以分为以下几类：增删方法、截取方法、顺序方法、迭代器方法和高级方法。**‌

1. 增删方法（5）

增删方法用于在数组中添加或删除元素。这些方法包括：

‌**push**‌：在数组的末尾添加一个或多个元素，并返回新的数组长度。
‌**pop**‌：删除数组的最后一个元素，并返回该元素。
‌**unshift**‌：在数组的前端添加一个或多个元素，并返回新的数组长度。
‌**shift**‌：删除数组的第一个元素，并返回该元素。
‌**splice**‌：可以在数组中添加、删除或替换元素，并返回被删除的元素组成的数组‌12。

2.截取方法（2）

截取方法用于获取数组的一部分，这些方法包括：

‌**slice**‌：返回数组的一个片段，不修改原数组。
‌**splice**‌：除了用于添加、删除或替换元素外，还可以用于截取数组的一部分‌12。

3.顺序方法（2）

顺序方法用于改变数组中元素的顺序，这些方法包括：

‌**reverse**‌：将数组的元素顺序颠倒，返回颠倒后的数组。
‌**sort**‌：对数组的元素进行排序，返回排序后的数组‌12。

4.迭代器方法（3）

迭代器方法用于遍历数组，这些方法包括：

‌**forEach**‌：遍历数组中的每个元素，对每个元素执行一次提供的函数。
‌**map**‌：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
‌**filter**‌：创建一个新数组, 包含通过所提供函数实现的测试的所有元素‌34。

5.高级方法（6）

高级方法包括一些不常见但非常有用的方法，这些方法包括：

‌**indexOf‌ 和 ‌lastIndexOf**‌：搜索数组中的元素，返回第一次或最后一次出现的索引。
‌**every‌ 和 ‌some**‌：测试数组的所有值或一部分值是否满足特定条件。
‌**find‌ 和 ‌findIndex**‌：查找数组中满足提供的测试函数的第一个元素的值或索引‌

IE8之前可以用的数组方法

Array.prototype.reverse()
Array.prototype.sort()
Array.prototype.shift()
Array.prototype.pop()
Array.prototype.unshift()
Array.prototype.push()
Array.prototype.splice()
Array.prototype.slice()
Array.prototype.concat()
Array.prototype.join()

es5新加的数组方法

Array.prototype.indexOf()
Array.prototype.lastIndexOf()
Array.prototype.every()
Array.prototype.some()
Array.prototype.forEach()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.isArray()

es2015(es6)新加的数组方法

Array.from() 传一个带length属性的参数，将它转换成数组
Array.of 传入多个参数，将它们合并成一个数组
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.fill()
Array.prototype.copyWithin()

es2016新加的数组方法

Array.prototype.includes()

es2018新加的数组方法

Arrray.prototype.flat()
Arrray.prototype.flatMap()

JavaScript基础：常用方法