devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ES6常用知识点梳理（常用）_es6 ...

作者：很楠不爱3 | 2024-02-22 19:18:50

赞

踩

es6 ...

1,块级作用域

var 升明

        在函数作用域或全局作用域中通过关键字var声明的变量，无论实际上是在那里声明的，都会被当成在当前作用域顶部声明的变量，这就是我们常说的提升机制。

块级声明

块级声明用于声明在指定块的作用域之外无法访问的变量。块级作用域（也叫词法作用域）存在于函数内部或（字符和{}之间的区域）

 let声明

let声明的用法与var相同。用let代替var来声明变量，就可以把变量限制在当前的代码块中。

正常var 声明和 let声明的对比

  1.     //var声明
  2.     var results=true
  3.     if(results){
  4.         var cols='blue'
  5.     }
  6.     console.log(cols)//blue
  7.     //let声明后，不在被提升到顶部，执行流离开if语句之后cols会被销毁。所以是is not defined
  8.     var results=true
  9.     if(results){
  10.         let cols='blue'
  11.     }
  12.     console.log(cols)//cols is not defined

禁止重声明

在同一个作用域中不能声明两个同名的变量

  1.     //会提升results已存在
  2.     var results=true
  3.     let results=true

如果在当前作用域中内嵌另一个作用域，便可在内嵌的作用域中用let声明同名变量

  1.     //这样不会出现错误提示
  2.     var results=true
  3.     var cols='red'
  4.     if(results){
  5.         let cols='blue'
  6.     }

const声明

使用const声明的是常量，其值一段被设定不可更改。并且每个声明的常量必须要进行初始化，如果不进行会有错误提示。

  1.     //语法错误，未初始化
  2.     const str1;

const与let声明都是块级标识符，所以常量也只在当前代码块内有效，执行到块外会被立即销毁。常量也不会被提升到作用域顶部。另外在同一作用域中声明已经存在的变量会导致语法错误(var let都会出错)

  1.     var results=true
  2.     if(results){
  3.         const cols='blue'
  4.     }
  5.     console.log(cols)//cols is not defined

const声明的变量不可在赋值,在赋值会导致语法错误

  1.     const names='张三'
  2.     names='李四'//语法错误

用const声明对象。如果是对象，对象的中的值可以修改。

  1.     //只能修改对象的值，不能修改对象的绑定。
  2.     const obj={
  3.         name:'张三'
  4.     }
  5.     obj.name='李四'
  6.     console.log(obj.name)//李四

如果在全局作用域下用var可以通过window调用，但是let和const则不行，它们会在全局作用域下添加一个新的绑定，但该绑定不会添加为全书对象的属性。换句话说用let或const不会覆盖全局变量。

  1.     let l1=1
  2.     const l2=2;
  3.     var l3=3;
  4.     console.log(window.l1)//undefined
  5.     console.log(window.l2)//undefined
  6.     console.log(window.l3)//3

总结：默认使用const，如果需要改变变量的值使用let，如果window访问或跨iframe则用var

2,函数

只归纳了部分使用频率比较高的

函数中的默认参数(ES5)

  1.     function makeRquuest(url,timeout,callback){
  2.         timeout =(typeof timeout!=='undefined')?timeout:2000
  3.         callback=(typeof callback!=='undefined')?callback:function(){}
  4.     }

函数中的默认参数(ES6)

  1.     function makeRquuest(url,timeout=200,callback=function(){}){
  2.        
  3.     }

不定参数

1，在函数的命名参数前添加三个点（...）就表明这是一个不定参数，该参数为一个数组，包含着自定传入之后的所有参数，通过这个数组名即可访问里面的参数。

不定参数的写法

  1.     function funs(num,...num2){
  2.         
  3.     }

2，不定参数的使用限制，每个函数最多只能声明一个不定参数，而且一定要放在所有参数的最后面。不定参数不能用于对象字面段setter中

  1.     function funs(num,...num2,num3){//直接出现错误提示
  2.  
  3.     }

3,不定参数对arguments的影响

    不定参数代码了arguments对象。如果声明函数时使用了不定参数，则在函数被调用时，arguments对象包含了所有传入函数的参数。(不管是不是不定参数，arguments对象总是包含所有传入函数的参数)

  1.     function funs2(...nums) {
  2.         console.log(nums[0])//1
  3.         console.log(nums[1])//2
  4.         console.log(nums[2])//3
  5.         return nums[0]+nums[1];
  6.     }
  7.     console.log(funs2(1,2,3))//3

 箭头函数

箭头函数的特别

1，没有this,super,arguments和new.target绑定，是由外围最近的一层非箭头函数决定；

2，不能通过new关键字调用（箭头函数没有construct方法，所以不能用作构造函数）；

3，没有原型；

4，不可以改变this的绑定；

5，不支持arguments对象；

6，不支持重复的命名参数；

箭头函数语法

写法1

只有一个参数，可以直接写参数名，箭头跟在后面

  1.     //函数1
  2.     let fun1=value=>value;
  3.     console.log(fun1(2))//2
  4.     //函数2
  5.     let fun2=function (value) {
  6.         return value
  7.     }
  8.     console.log(fun2(3))//3
  9.     //这两个函数等价

写法2

如果需要在其中传入两个或两个以上的参数

  1.     //函数1
  2.     let sum1 =(num1,num2)=>num1+num2;
  3.     console.log(sum1(1,2))//3
  4.     //函数2
  5.     let sum2=function(n1,n2){
  6.         return n1+n2
  7.     }
  8.     console.log(sum2(1,2))//3

写法3

没有参数

  1.     //函数1
  2.     let sum1 =()=>'hh';
  3.     console.log(sum1())//hh
  4.     //函数2
  5.     let sum2=function(){
  6.         return 'hh';
  7.     }
  8.     console.log(sum2())//hh

写法3

传统函数体

  1.     //函数1
  2.     let sum1 =(num1,num2)=>{
  3.         return num1+num2
  4.     }
  5.     console.log(sum1(1,1))//2
  6.     //函数2
  7.     let sum2=function(n1,n2){
  8.         return n1+n2
  9.     }
  10.     console.log(sum2(1,1))//2

写法4

向外返回一个对象字面量

  1.     //箭头函数
  2.     let obj1=id=>({id:id,name:'张三'})
  3.     //传统函数
  4.     let obj2=function(id){
  5.         return{
  6.             id:id,
  7.             name:'张三'
  8.         }
  9.     }

3,扩展对象的功能性

1,属性初始值的简写,当一个对象的属性与本地变量同名时，不必在写冒号和值，简单地只写属性名即可。如下

  1.     //ES5的写法
  2.     function persons(name,age){
  3.         return{
  4.             name:name,
  5.             age:age
  6.         }
  7.     }
  8.     //ES6简写法
  9.     function persons(name,age){
  10.         return{
  11.             name,
  12.             age
  13.         }
  14.     }

2,对象方法的简写消除了冒号和function关键字

  1.     let obj={
  2.         name:'张三',
  3.         sayName(){
  4.             console.log(this.name)
  5.         }
  6.     }

4,解构：便捷访问数据

   对象解构

   1,对象解构(就是把数据打平的一种方式)

  1. let node ={
  2.     name:'张三',
  3.     age:18,
  4. }
  5. let {name,age}=node;
  6. console.log(name,age);//张三，18

   上面这几行代码的意思是，将node.name和node.age分别存放在name和age中

   2,默认值

     使用解构表达式时，如果指定的局部变量名称在对象中不存在，这个局部变量就会是undefined

     注意点：当指定的属性不存在时，可以随意定义一个默认值，在属性名后面加一个等号和相应的默认值即可

  1. let node ={
  2.      name:'张三',
  3.      age:18,
  4. }
  5. let {name,age,height}=node
  6. console.log(name);//张三
  7. console.log(age);//18
  8. console.log(height)//undefined
  9.  
  10. //当指定的属性不存在时，可以随意定义一个默认值，在属性名后面加一个等号和相应的默认值即可
  11.  
  12. let node ={
  13.      name:'张三',
  14.      age:18,
  15. }
  16. let {name,age,height}=node
  17. console.log(name);//张三
  18. console.log(age);//18
  19. console.log(height)//180

  3，为非同名变更赋值

        如果不希望使用不同命名的局部变量来存储对象属性的值，可以使用下面的这种写法；

  1. let node ={
  2.     name:'张三',
  3.     age:18,
  4. }
  5. let {name:n1,age:a1}=node
  6. console.log(n1);//张三
  7. console.log(a1);//18

这种写法与传统的对象字面量写法相反，现在变量名在右，属性名在左

当使用变更名进行赋值时也可以添加默认值，只需要在变量名和等号后添加默认值即可

  1.     let node ={
  2.         name:'张三',
  3.         age:18,
  4.     }
  5.     let {name:n1,age:a1,height:h1=180}=node
  6.     console.log(n1);//张三
  7.     console.log(a1);//18
  8.     console.log(h1)//180

4,嵌套对象解构

      解构嵌套对象与对象字面量语法一样，可以将对象拆解以获取有用的信息

  1.     let node ={
  2.         name:'张三',
  3.         age:18,
  4.         address:{
  5.             home:'210',
  6.             road:'金融港',
  7.             class1:{
  8.                 name:'赵二',
  9.                 age:100
  10.             }
  11.         }
  12.     }
  13.     let {name,address:{road,class1}}=node
  14.     console.log(name)//张三
  15.     console.log(road)//金融港
  16.     console.log(class1.age)//100
  17.     console.log(class1.name)//赵二

使用非同名变量赋值(其实和上面一样)

  1.     let node ={
  2.         name:'张三',
  3.         age:18,
  4.         address:{
  5.             home:'210',
  6.             road:'金融港',
  7.             class1:{
  8.                 name:'赵二',
  9.                 age:100
  10.             }
  11.         }
  12.     }
  13.     let {name:n1,address:{road:r1,class1:{name:n11,age:a22}}}=node
  14.     console.log(n1)//张三
  15.     console.log(r1)//金融港
  16.     console.log(n11)//赵二
  17.     console.log(a22)//100

数组解构

1，它使用的是数组字面量，且解构操作全部在数组内完成，

  1.     let arr1=[1,2,3,4,5,6,7,8,9,10];
  2.     //下面这行代码的意思是将1和2分别存储在变更a1和a2中
  3.     let [a1,a2]=arr1;
  4.     console.log(a1)//1
  5.     console.log(a2)//2

另一种使用方法，可以直接省略元素，为感觉兴趣的元素提供变量名如下(F2前的逗号是前方元素的点位符)，可以通过这种方式取到任何想要的元素。

  1.     let arr1=[1,2,3,4,5,6,7,8,9,10];
  2.     //现在想要数字3
  3.     let [,,f2]=arr1
  4.     console.log(f2)//3

2，交换变量

  1.     let a=1,b=2;
  2.     [a,b]=[b,a];
  3.     console.log(a)//2
  4.     console.log(b)//1

3，默认值

也可以在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定的值不存在或undefined时使用

  1.     let arr2=[1,2];
  2.     let [a1,a2,a3=3]=arr2;
  3.     console.log(a1)//1
  4.     console.log(a2)//2
  5.     console.log(a3)//3

4,嵌套数组解构

在原有的数组模式中插入另个数组，深入下一层

  1.     let arr2=[1,2,[4,5,[6,7]]];
  2.     let [a1,a2,[a3,a4,[a5]]]=arr2
  3.     //这里的第二个数组引用的就是4，第三个为5，依次类推
  4.     console.log(a1)//1
  5.     console.log(a2)//2
  6.     console.log(a3)//4
  7.     console.log(a4)//5
  8.     console.log(a5)//6

5,不定元素（一般使用...语法将数组中的特定元素赋值给另一个特定的变量）

  1.     //用法1
  2.     let arr2=[1,2,[4,5,[6,7]]];
  3.     let [a1,...a2]=arr2;
  4.     console.log(a1)//1
  5.     console.log(a2[0])//2
  6.     console.log(a2[1])//4,5,6,7
  7.     console.log(a2[1][0])//4
  8.     console.log(a2[1][1])//5
  9.     console.log(a2[1][2][0])//6
  10.     console.log(a2[1][2][1])//7
  11.     //用法2
  12.     let arr3=['张三','李四','王五','赵六']
  13.     let [b1,...b2]=arr3;
  14.     console.log(b1)//张三
  15.     console.log(b2[0])//李四
  16.     console.log(b2[1])//王五
  17.     console.log(b2[2])//赵六

不定元素语法还有另外一个功能，就是对数组实现复制类似于concat()方法所干的事

6，混合解构

  1.     //解构一
  2.     let arr4=[
  3.         {
  4.             name:'张三',
  5.             age:22,
  6.             height:[170]
  7.         },
  8.         {
  9.             name:'李四',
  10.             age:19
  11.         }
  12.  
  13.     ]
  14.     let [h1,h2]=arr4
  15.     console.log(h1.name)//张三
  16.     console.log(h1.age)//22
  17.     console.log(h1.height)//170
  18.     console.log(h2.age)//19
  19.     console.log(h2.name)//李四
  20.     //解构二
  21.     let obj4={
  22.         type:'1',
  23.         name:'la',
  24.         arr:{
  25.             str:{
  26.                 a:1,
  27.                 b:2
  28.             }
  29.         },
  30.         arr2:[1,2,3]
  31.     }
  32.     let {name,arr:{str},arr2:[a1,...a2]}=obj4
  33.     console.log(name)//la
  34.     console.log(str.a)//1
  35.     console.log(str.b)//2
  36.     console.log(a1)//1
  37.     console.log(a2[0])//2
  38.     console.log(a2[1])//3

5,symbol和symbol属性

es6中引入了第6种数据类型Symbol，Symbol的值是唯一不重复的

1,创建一个symbol

  1.     let firstName=Symbol();
  2.     let person={};
  3.     person[firstName]='asdf';
  4.     console.log(person[firstName])

注意：不能使用new Symbol会导致出错

2，Symbol接收一个可选参数，其可以让你添加一段文本描即将创建的Symbol,这段描述不可用于属性访问。方便阅读代码和调试。

  1.     let firstName=Symbol('青青的湖水');
  2.     let person={};
  3.     person[firstName]='asdfghjkl';
  4.     console.log('青青的湖水' in person)//fase
  5.     console.log(person[firstName])//asdfghjkl
  6.     console.log(firstName)//Symbol(青青的湖水)

3,Symbol类型检测

  1.     let sym = Symbol("javascript");
  2.     console.log(typeof sym)//symbol

6,Set集合与Map集合

1，set集合是一种无重复元素的列表，一般不会像访问数组那样访问每一个元素，通常的做法是检测给定的值在某个集合中是否存在。

2，map集合内含多组键值对，集合中每个元素分别存放着可访问键名和它对应的值，map集合通常被用来缓存频繁取用的数据。

Set集合

1，创建set集合并添加元素使用add方法

  1.     let set1=new Set()
  2.     set1.add(4)
  3.     set1.add('5')
  4.     console.log(set1.size)//
  5.     //添加对象
  6.     let set2 = new Set()
  7.     let obj1={name:"张三"}
  8.     let obj2={name:"李四"}
  9.     set2.add(obj1)
  10.     set2.add(obj2)
  11.     console.log(set2.size)//2

2，判断是否存在某个值使用has方法

  1.     let set1=new Set()
  2.     set1.add(4)
  3.     set1.add('5')
  4.     console.log(set1.has(5))//true
  5.     console.log(set1.has(6))//false
  6.     console.log(set1.size)//2

3,移除元素鬟delete方法

  1.     let set1=new Set()
  2.     set1.add(4)
  3.     set1.add('5')
  4.     set1.delete(5)
  5.     console.log(set1.has(5))//false
  6.     console.log(set1.size)//2

4，forEach方法的使用

     forEach方法接受3个参数
     1，set集合中下一次索引的位置

     2，与第一个参数一样的值

     3，被遍历的set集合本身

注意：set集合的forEach方法与数组中的forEach方法有所不同，回调函数前两个参数的值是一样的。

  1.     let set3=new Set([1,2,3])
  2.     set3.forEach((value,key,owner)=>{
  3.         //value和key相同，owner是set3本身  owner等于set3
  4.         console.log(value,key,owner)
  5.     })

5，将set集合转化为数组(可用于数据元素去重)

  1.     let set4 = new Set([1,2,3,4,5])
  2.     //需要用到展开运算符(...)
  3.     let changeArray=[...set4]
  4.     console.log(changeArray)

6，清空set元素方法clear

  1.     let set4 = new Set([1,2,3,4,5])
  2.     set4.clear()
  3.     console.log(set4)//{set:0}

map集合

1，创建map集合与获取值set和get方法

  1.     let map=new Map()
  2.     map.set("name","赵六")
  3.     map.set("age","18")
  4.     console.log(map.get("name"))//赵六
  5.     console.log(map.get("age"))//18

在这个示例中两组键值分别被存入到了集合Map中，键名分别对应着一个字符串，然后通过get方法获取，如果键名不存在会返回undefined

2，还可以用对象做为属性的键名,如下所示

  1.     let map2=new Map()
  2.     let obj_1={}
  3.     let obj_2={}
  4.     map2.set(obj_1,1)
  5.     map2.set(obj_2,2)
  6.     console.log(map2.get(obj_1))//1
  7.     console.log(map2.get(obj_2))//2

3，map集合支持的方法

        1，has(key)查检指定的键名在map集合中是否已经存在

        2，delete(key)从map集合中移除指定键名及其对应的值

        3，clear(）移除map集合中的所有键值对

        4，size长度检查

  1.     let map=new Map()
  2.     map.set("name","赵六")
  3.     map.set("age","18")
  4.     console.log(map.get("name"))//赵六
  5.     console.log(map.get("age"))//18
  6.     console.log(map.has("name"))//true 存在键
  7.     console.log(map.has("height"))//false 不存在
  8.     console.log(map.size)//2 长度为2
  9.     map.clear()//清除全部
  10.     console.log(map.size)//0

4，map中forEach方法都接收以下三个参数

        1，map集合中下一次索引的位置

        2，值对应的值名

        3，map集合本身

  1.     let map2=new Map([["name","张三"],["age","18"],["height","180cm"]])
  2.     map2.forEach((value,key,owner)=>{
  3.         console.log(value,key)//对应的每个键值 张三 name    18 age 180cm height
  4.         console.log(owner==map2)//owner始终和map2相等
  5.     })

7，迭代器和生成器

8，javascript中的类

ES5中的近类结构

  1.     function PersonTypeName(name){
  2.         this.name=name;
  3.     }
  4.     PersonTypeName.prototype.sayName=function(){
  5.         console.log(this.name)
  6.     }
  7.     let person = new PersonTypeName('张小飞')
  8.     person.sayName();//张小飞
  9.     console.log(person instanceof PersonTypeName)//true
  10.     console.log(person instanceof Object)//true
/*详解：PersonTypeName是一个构造函数，执行后创建一个名为name的属性;并给personTypeName的原型添加一个sayName的方法，所以personTypeName对象的所有实例都共享这个方法。然后使用new操作符创建一个personTypeName的实例person,并最终证明了person对象确实是personTypeName的实例。且由于存在原型继承的特性，因而它也是object的实例.*/

类的声明

基本的类声明

  1.      class PersonClass{
  2.         //等价于PersonTypeName
  3.         constructor(name) {
  4.             this.name=name
  5.         }
  6.         //PersonTypeName.prototype.sayName
  7.         sayName(){
  8.             console.log(this.name)
  9.         }
  10.     }
  11.     let Person2=new PersonClass('李小四');
  12.     Person2.sayName();//李小四
  13.     console.log(Person2 instanceof PersonClass);//true
  14.     console.log(Person2 instanceof Object);//true
  15.     console.log(typeof PersonClass);//function
  16.     console.log(typeof PersonClass.prototype.sayName)//function

类表达式

  1.     let PersonClass=class {
  2.         constructor(name) {
  3.             this.name=name
  4.         }
  5.         sayName(){
  6.             console.log(this.name)
  7.         }
  8.         say(){
  9.             return 'haha'
  10.         }
  11.     }
  12.     let user2=new PersonClass('name')
  13.     console.log(user2.say())//haha
  14.     console.log(user2 instanceof PersonClass)//true
  15.     console.log(user2 instanceof Object)//true

命名类表达式

  1.     let PersonClass = class PersonClass2 {
  2.         constructor(name) {
  3.             this.name=name
  4.         }
  5.         sayName(){
  6.             return this.name
  7.         }
  8.     }
  9.     console.log(typeof PersonClass)//function
  10.     console.log(typeof PersonClass2)//undefined

用类实现继承

  1.     //类一般用来创建实例对象,里面可以定义属性和方法
  2.     class Person{
  3.         //构造器中的this,就是类的实例对象
  4.         constructor(name,age) {
  5.             this.name=name
  6.             this.age=age
  7.         }
  8.         //通过Person实例调用introduce时，introduce中的this就是person的实例
  9.         introduce(){
  10.             console.log("我的名字是"+this.name,"年纪是"+this.age)
  11.         }
  12.     }
  13.     let p = new Person("张三",18)
  14.     console.log(p)
  15.     p.introduce()
  16.     //创建另一个类，继承Person类
  17.     class Student extends Person{
  18.         //子类中添加constructor则一定要有super,并且super一定要改在属性的前面
  19.         constructor(name,age,height) {
  20.             super(name,age);
  21.             this.height=height
  22.         }
  23.         //重写父类introduce方法
  24.         introduce() {
  25.             console.log("我的名字是"+this.name,"年纪是"+this.age+"我的身高是"+this.height)
  26.         }
  27.         //定义子类独有的方法
  28.         special(){
  29.             console.log(this.height)
  30.         }
  31.     }
  32.     let s1 = new Student("小赵",30,180)
  33.     s1.special()//180
  34.     s1.introduce()//我的名字是小赵 年纪是30我的身高是180
  35.     console.log(s1)//返回一个实例对象
  36.  
  37.     let s2 = new Student("小王",40,176)
  38.     s2.special()//176
  39.     s2.introduce()//我的名字是小王 年纪是40我的身高是176
  40.     console.log(s2)

以上代码定义了一个Person类和Student类，然后让Student类继承自Person类。

总结:

1,类中的构造器不是必须要写的，要对实例进行一些初始化的操作才写，比如添加指定属性

2,如果A类继承了B类，并且B类中写了构造器，那么A类构造器中的super是必须要有的，用它放父类构造器中的参数

3,类中所定义的方法，都是放在了类的原型对象上，供实例去调用

4,通过当前类去调用它里面的方法时，当前的this指向就是当前类的实例

9，改进的数组功能

         1，Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数，最终返回一个数组。

  1. //1,将类数组对象转换为真正的数组：
  2. const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
  3. const newArray = Array.from(arrayLike);
  4. console.log(newArray); // ['a', 'b', 'c']
  5.  
  6. //2,使用映射函数对数组进行处理：
  7. const numbers = [1, 2, 3, 4, 5];
  8. const doubledNumbers = Array.from(numbers, x => x * 2);
  9. console.log(doubledNumbers); // [2, 4, 6, 8, 10]
  10.  
  11.  
  12. //3,从字符串生成数组：
  13. const str = 'hello';
  14. const charArray = Array.from(str);
  15. console.log(charArray); // ['h', 'e', 'l', 'l', 'o']

2,find()和findIndex()这两个数组方法，用于在数组中查找满足条件的元素。

(1),find()方法的使用

  1. //1,查找数组中的第一个满足条件的元素：
  2. const numbers = [1, 2, 3, 4, 5];
  3. const evenNumber = numbers.find(num => num % 2 === 0);
  4. console.log(evenNumber); // 2
  5.  
  6.  
  7. //2,查找对象数组中符合条件的对象：
  8. const products = [
  9.   { id: 1, name: 'Apple', price: 1.5 },
  10.   { id: 2, name: 'Banana', price: 0.5 },
  11.   { id: 3, name: 'Orange', price: 0.8 }
  12. ];
  13. const product = products.find(item => item.name === 'Banana');
  14. console.log(product); // { id: 2, name: 'Banana', price: 0.5 }
  15.  
  16.  
  17. //3,使用箭头函数查找指定条件的字符串：
  18. const fruits = ['apple', 'banana', 'orange'];
  19. const matchingFruit = fruits.find(fruit => fruit.startsWith('a'));
  20. console.log(matchingFruit); // 'apple'
  21.  
  22. //4，查找字符串数组中满足条件的第一个长度大于5的字符串：
  23. const words = ['apple', 'banana', 'orange', 'watermelon'];
  24. const longWord = words.find(word => word.length > 5);
  25. console.log(longWord); // 'banana'

(2),findIndex()方法用法和find()相同，只是它返回的是一个索引；

(3)fill()方法可以用指定的值填充一至多个数组元素。当传入一个值时，fill方法会用这个值重写数组中的所有值。

  1. 1，数组元素的替换:
  2.     let numbers=[1,2,3,4];
  3.     console.log(numbers.fill(1))//1，1，1，1
  4.  
  5. 2，将数组 arr 中从索引 2 开始的所有元素都设置为 1。
  6.     let arr = [1, 2, 3, 4, 5];  
  7.     arr.fill(1, 2); // [1, 2, 1, 1, 1]
  8.  
  9. 3，我们将数组 arr 中从索引 2 开始，到索引 4（不包括）为止的元素都设置为 1。
  10.     let arr = [1, 2, 3, 4, 5];  
  11.     arr.fill(1, 2, 4); // [1, 2, 1, 1, 5]

（4）copyWithin()方法，用法和fill相似。

10，Promise

主要作用解决回调函数中嵌套回调

基本语法

new Promise(( resolve, reject ) =>{})

1，promise接受一个函数作为参数，在函数中有两个参数resolve成功函数，reject失败函数; 

2，promise实例有两个属性 state状态和result结果;

3，promise有三种状态pending等待中，fulfilled成功，rejected拒绝；

4，promise状态改变

  1. const p = new Promise((resolve, reject) => {
  2.   resolve("promise");
  3. })
  4. console.dir(p) // 状态为fulfilled结果为promise
  5.  
  6. const p1 = new Promise((resolve, reject) => {
  7.   resolve("promise");
  8. })
  9. console.dir(p1) // 状态为fulfilled结果为promise

5，promise中的then方法

  1.     //成功
  2.     const p1 = new Promise((resolve,reject)=>{
  3.         resolve("成功")
  4.     })
  5.     p1.then((res)=>{
  6.         //成功的回调  进入到res
  7.         console.log(res)
  8.     },(error)=>{
  9.         //失败的回调
  10.         console.log(error)
  11.     })
  12.     
  13.     //失败
  14.     const p2 = new Promise((resolve,reject)=>{
  15.         resolve("失败")
  16.     })
  17.     p2 .then((res)=>{
  18.         //成功的回调
  19.         console.log(res)
  20.     },(error)=>{
  21.         //失败的回调  进入到error
  22.         console.log(error)
  23.     })

6，Promise的状态不改变,不会执行then里的方法

  1. // 如果Promise的状态没有改变,then里的方法不会执行
  2. const p = new Promise((resolve, reject) => {
  3.   
  4. }).then((value) => {
  5. 	console.log("成功")
  6. },(reason) => {
  7. console.log("失败")
  8. })

7，通过return改变状态

  1.     const p = new Promise((resolve,reject)=>{
  2.         resolve()
  3.     })
  4.     const t = p.then((res)=>{
  5.         console.log("成功")
  6.         //使用reutrn可以将t实例的状态改成fulfilled
  7.         return 'sucess'
  8.     },(err)=>{
  9.         console.log("失败",err)
  10.     })
  11.  
  12.     t.then((res)=>{
  13.         console.log("成功",res)
  14.     },(err)=>{
  15.         console.log("失败",err)
  16.     })

8,promise的串联

  1.     const p = new Promise((resolve,reject)=>{
  2.         resolve('123')
  3.     })
  4.     p.then((value)=>{
  5.         console.log(value)
  6.     }).then(()=>{
  7.         console.log("finish")
  8.     })
  9.     //拆解之后的写法
  10.     let p1=new Promise((resolve,reject)=>{
  11.         resolve("1234")
  12.     })
  13.     let p2=p1.then((res)=>{
  14.         console.log(res)
  15.     })
  16.     p2.then((res)=>{
  17.         console.log("finish")
  18.     })

9，在promise链中返回promise

  1.     let p1 = new Promise((resolve,reject)=>{
  2.         resolve("100")
  3.     })
  4.     let p2 = new Promise((resolve,reject)=>{
  5.         resolve("200")
  6.     })
  7.     p1.then((res)=>{
  8.         console.log(res)
  9.         return p2
  10.     }).then((res)=>{
  11.         console.log(res)
  12.     })
  13.     //另一处写法,等价于上面的写法
  14.     
  15.     let p1 = new Promise((resolve,reject)=>{
  16.         resolve(100)
  17.     })
  18.     let p2 = new Promise((resolve,reject)=>{
  19.         resolve(200)
  20.     })
  21.     let p3=p1.then((res)=>{
  22.         console.log(res)
  23.         return p2
  24.     })
  25.     p3.then((res)=>{
  26.         console.log(res)
  27.     })

当其中的某一个被拒绝

  1.     //由于p2是reject，因此p3不会被调用，如果p1是reject都不会被调用
  2.     let p1 = new Promise((resolve,reject)=>{
  3.         resolve(100)
  4.     })
  5.     let p2 = new Promise((resolve,reject)=>{
  6.         reject(200)
  7.     })
  8.     let p3=p1.then((res)=>{
  9.         console.log(res)
  10.         return p2
  11.     })
  12.     p3.then((res)=>{
  13.         console.log(res)
  14.     })

10，promise.all()方法

用于将多个 Promise 对象包装成一个新的 Promise 对象。它的作用是等待所有的 Promise 对象都成功(resolve)，或者有一个失败(reject)，然后返回一个包含所有 Promise 结果的新 Promise 对象。

  1.     //创建了p1,p2,p3都完成之后p4才会完成
  2.     //完成的值是一个包含1，2，3的数组
  3.     let p1 = new Promise((resolve,reject)=>{
  4.         resolve("1")
  5.     })
  6.     let p2 = new Promise((resolve,reject)=>{
  7.         resolve("2")
  8.     })
  9.     let p3 = new Promise((resolve,reject)=>{
  10.         resolve("3")
  11.     })
  12.     let p4=Promise.all([p1,p2,p3])
  13.     p4.then((res)=>{
  14.         console.log(Array.isArray(res))
  15.         console.log(res)
  16.     })

被拒绝的情况

  1.     let p1 = new Promise((resolve,reject)=>{
  2.         resolve("1")
  3.     })
  4.     let p2 = new Promise((resolve,reject)=>{
  5.         reject("2")
  6.     })
  7.     let p3 = new Promise((resolve,reject)=>{
  8.         resolve("3")
  9.     })
  10.     let p4=Promise.all([p1,p2,p3])
  11.     p4.then((res)=>{
  12.         console.log(Array.isArray(res))
  13.         console.log(res)//返回拒绝值2
  14.     })

11，Promise.all()方法。它也接受含多个受监视promise的可迭代对象作为唯一参数并返回一个promise,但只要有一个promise被解决返回的promis就被解决。不需要等到所有的Promise都被完成。一旦数组中的某个promise被完成，promise.race方法也会像promise.all方法一个返回一个特定的promise。

  1.     //无视其它其它promise，只返回1
  2.     let p1 = new Promise((resolve,reject)=>{
  3.         resolve("1")
  4.     })
  5.     let p2 = new Promise((resolve,reject)=>{
  6.         resolve("2")
  7.     })
  8.     let p3 = new Promise((resolve,reject)=>{
  9.         resolve("3")
  10.     })
  11.     let p4=Promise.race([p1,p2,p3])
  12.     p4.then((res)=>{
  13.         console.log(Array.isArray(res))//false
  14.         console.log(res)//返回1
  15.     })

注：promise会解决最先完成的,如果最先完成的reject，其它的resolve就不会在执行。

12，promise中的catch方法

  1.     const p2 = new Promise((resole,reject)=>{
  2.         //reject("失败")
  3.         throw new Error("出错了")
  4.     })
  5.     //只要有错误就会进入到catch里面来
  6.     p2.catch(reason=>{
  7.         console.log("失败",reason)
  8.     })
  9.     console.log(p2)

11，用模块封装代码

导入和导出（当然还有导入单个，导入多个，导入整个模块）

  1. //导出数据
  2. export let age=100;
  3. //导出函数
  4. export function all(a,b){
  5.     return a+b
  6. }
  7.  
  8. //导入 import from 
  9. import { all } from "./vue";

未完待续......

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/131172
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号