2 篇博文 含有标签「javascript」

string、array是非常常用的数据类型。对下面的常用方法进行总结。

string​

说明：str表示某一个字符串

字符串长度：str.length

查找子字符串位置：str.indexOf(substr).可以接受第二个参数作为起始检索位置。

str.search()功能和indexOf一致，但是search不能接受第二个参数。

slice(), substring(), substr(): slice(切片)，三者都接收索引参数，截取子字符串。substr()第二个参数是要截取的字符串长度

replace(): 替换字符串，只替换首个。如果要全局替换，则要用正则表达式。

str.toUpperCase() 转化为大写

concat():concat(连接),和加号一样的功能。可以多加几个concat实现多个字符串拼接。

返回字符的安全方法：str.charAt()。 用 str[0] //h也能返回正确结果，但不安全。

str.split() split（分割） 根据分隔符返回数组

面试题：slice是干嘛的、splice是否会改变原数组

1. slice是来截取的
	参数可以写slice(3)、slice(1,3)、slice(-3)
	返回的是一个新的数组
2. splice 功能有：插入、删除、替换
	返回：删除的元素
	该方法会改变原数组

	array.splice(index, howmany, item1, ....., itemX)

	参数	描述
	index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
	howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
	item1, ..., itemX	可选。要添加到数组中的新项目。

补充方法​

转为字符串​

x.toString():转化为字符串 String(x):全局方法，转化为字符串 num.toFixed():数字转化为指定位数的小数字符串

转为数字​

parseInt(x): 全局方法，字符串->整数,直接去掉小数部分，类似于Math.floor(x) parseFloat(x): 全局方法，返回浮点数 Number(x): 全局方法，可以将字符串，日期，boolean转化为数字 +'100':一元+运算符，返回数字

其他​

x.valueOf():大多数情况下返回变量自身，日期调用本方法会返回毫秒数

array方法总结​

arr是某个数组

如何识别数组：因为typeof arr返回Object，所以用Array.isArray(arr)和arr instanceof Array来判断

数组转为字符串：arr.toString() 结果是逗号分隔的字符串。还可以通过arr.join('分隔符')来指定分隔符。

pop,push,shift,unshift:略

想在任意位置删除元素：arr.splice()

合并数组：arr1.concat(arr2)

返回子数组：arr.slice()

数组排序：自带接口：arr.sort() 注意点：1.默认按字符串顺序升序，也就是说数字排序会错。2.为了解决数字排序，需要传入一个参数函数。

查找最大、最小值：数组没有自带的api，需要借助Math对象。

let max = Math.max(...arr)
let min = Math.min(...arr)
注：...arr为扩展运算符

回调函数：其参数为上一步代码获得的结果

数组迭代：为数组的每一个元素执行操作

Array.forEach(callback) (callback为回调函数) forEach不会更改原数组，也不会返回任何东西，它只负责将元素交给回调函数处理。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {  // value, index, array来自数组,其中，index, array可省略
  txt = txt + value + "<br>"; 
}

Array.map(callback): 通过对每个数组元素执行函数来创建新数组。不改变原数组，返回新数组

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

filter() 方法创建一个包含通过测试的数组元素的新数组。

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

arr.indexOf()

其他数据类型（日期等）​

创建日期：new Date(str) str可省，则为当前时间

方法：getTime()：时间戳，毫秒值

Math类： Math.random() 0-1的随机数,小数点后17位

注：Array/String/Boolean可以用new的方式创建，但是没有意义且可能会带来错误，因为new出来数据类型都是对象

注：typeof的结果：

NaN 的数据类型是数字 数组的数据类型是对象 日期的数据类型是对象 null 的数据类型是 object 未定义变量的数据类型为 undefined * 未赋值的变量的数据类型也是 undefined *

为什么需要 promise​

首先，存在一次异步任务的需求。然后又有了多次异步任务的需求，而多次异步的书写存在函数瀑布问题，不利于阅读和维护：

setTimeout(function () {
  console.log("First");
  setTimeout(function () {
    console.log("Second");
    setTimeout(function () {
      console.log("Third");
    }, 3000);
  }, 4000);
}, 1000);

所以，出现了 promise 对象，将多次异步代码写成顺序格式而非嵌套格式：

function print(delay, message) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log(message);
      resolve();
    }, delay);
  });
}
print(1000, "First")
  .then(function () {
    return print(4000, "Second");
  })
  .then(function () {
    print(3000, "Third");
  });

因此，异步是异步，promise 是 promise，异步任务的实现靠的是 javascript 的事件循环机制，而不是 promise，promise 仅是改变了需要按顺序执行的多个异步任务的书写格式。

promise 的本质​

Promise 是一个构造函数，它接收一个函数作为形参，实例化一个 p 对象。相比于普通对象，p 对象有两个特殊属性：状态和结果。

状态​

通过在形参函数中调用 resolve()和 reject()改变状态，并且只能改一次.状态有三种，分别是 pending/fullfilled/reject.没执行 resolve() or reject()之前的状态是 pending。

结果​

通过 resolve/reject 函数传递参数，改变当前 promise 对象结果

const p = new Promise((resolve, reject) => {
  resolve("homo");
});
console.log(p); // state:fullfilled, result:'homo'

构造函数和 then 方法​

promise 是靠多个 then 完成多个异步任务的按顺序执行的。怎么实现的？then 可以注册 resolve 和 reject。若要嵌套，要写成下面这种形式,return 一个新的 promise，value 在异步代码中使用。

new Promise((resolve) => {
  // setTimeout(()=>{
  // 	resolve('1')
  // },500)
})
  .then((value) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(value + " 2");
      });
    });
  })
  .then((value) => {
    // console.log(value);
  });

把 promise 对象当作一个容器，里面装了一个异步事件，promise 对象保证了当前异步事件执行完毕才会执行下一个事件。

1. 构造实例 构造函数接受一个函数作为参数 调用构造函数得到实例 p 的同时，作为参数的函数会立即执行 参数函数接受两个回调函数参数 resolve 和 reject 在参数函数被执行的过程中，如果在其内部调用 resolve，会将 p 的状态变成 fulfilled，或者调用 reject，会将 p 的状态变成 rejected

2. 调用.then 调用.then 可以为实例 p 注册两种状态回调函数 当实例 p 的状态为 fulfilled，会触发第一个函数执行 当实例 p 的状态为 rejected，则触发第二个函数执行

如果代码执行出现错误，而没有 catch 或者 then 接受错误的话，控制台会报错。

下面的代码可以充分体现了，promise 对象解决了异步函数的多重回调问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script>
		function getData(url, data={}){
			return new Promise((resolve, reject)=>{
				$.ajax({
					type:'GET',
					url:url,
					data:data,
					success:function(res){
						const {result} = res
						console.log(res);
						resolve(result)
					}
				})
			})
		}

		getData('data1.json').then((value)=>{
			getData('data2.json', value)
		} )
	</script>
</body>
</html>

Promise.all()​

作用：一次接受多个异步事件，并保证他们的都得到结果了，才会执行 then 输入参数：数组、map 等 输出：一个新的 promise 对象，根据数组中所有 promise 的执行结果而进入不同的函数。若数组中所有的 promise 都是 fullfilled，则会执行 then。

Promise.any()​

作用：一次接受多个异步事件，其中有一个成功就行 输入参数：数组、map 等

Promise.resolve(p)/reject(p)​

返回一个状态为 fullfilled/rejected,结果为 p 的 promise 对象。