ES6 知识点总结(学生)

Posted 2021-11-03 三千翎羽渡凡尘

变量声明关键字

var：全局作用域和函数作用域，会变量提升

let：局部作用域，不会变量提升，不能重复声明

const：值类型不能修改，声明必须赋值 ，一般大写

---

let与const 关键字

可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。

for (let i=0;i<2;i++)console.log(i);//输出: 0,1

console.log(i);//输出：undefined,严格模式下会报错

ES6 中，const 声明的常量类似于指针，它指向某个引用，也就是说这个「常量」并非一成不变的，如：

{

  const ARR = [5,6];

  ARR.push(7);

  console.log(ARR); // [5,6,7]

  ARR = 10; // TypeError

}

---

let与const关键字

let 和 const 声明只在最靠近的一个块中（花括号内）有效；

let 不能重复声明；

当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING；

const 在声明时必须被赋值

---

解构

数组

定义: 把数组或对象解析为单独变量
        1. 基本格式var [a,b,c="default",...rest]=arr
        2.逗号代表下一位
        3.  ...rest 剩余的所有（只能放在最后）
        4.可以有默认值
        5.交换变量[a,b]=[b,a]

对象

var {name,age,say="love you",...rest}=obj
对象解构没有顺序

---

自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中

var [x,y]=getVal(),//函数返回值的解构

    function getVal() {

    return [ 1, 2 ];

}

console.log('x:'+x+', y:'+y);//输出：x:1, y:2

[name,,age]=['wayou','male','secrect'];//数组解构 长度为三  中间键值为空

console.log('name:'+name+', age:'+age);//输出： name:wayou, age:secrect

---

...不定参

{

let a, b, rest;

[a, b, ...rest] = [1, 2,3,4,5,6];

console.log(a,b,rest);

// rest 值是 [3,4,5,6]

 }

默认值

{

  let  a, b, c ;

  [a, b, c=5] = [4, 8];

  console.log(a, b, c);

                  // 没有默认参数 c 是undefine

}

变量交换

{

     let a = 1,   b = 2 ;

         [a, b]=[b, a]

     console.log(a,b);  

}

---

函数返回

{

     function f() { return [1, 2] }

     let a,b;

     [a,b]=f();

     console.log(a,b);

}

{

     function f() { return [1, 2, 3, 4]}

     let a,b;

     [a,,,b]=f();

     console.log(a,b);

}

 {

     function f() { return [1, 2, 3, 4]   }

     let a,b;

     [a,...b]=f();

     console.log(a,b);

   }

---

对象解构

//变量名必须和对象键名一致

 {

     let o = {p:42, q:true};

     let {p,q} = o;

     console.log(p,q);

   }

{

     let {a=10,b=5} = {a:3};

     console.log(a,b);

   }

---

字符串

字符串模板

 `${js变量}`可以换行，可以加特殊符号

遍历     for of  
  

检测

includes(sub)是否包含
startsWith(sub)以什么开头
endsWith(sub)以什么结尾
  

去空白

tirm()去掉两端空白
tirmLeft()去掉左边空白
tirmRight()去掉右边空白

重复

repeat(n)字符串重复n次

填充

“22”.padStart(4,"0")
"0022"
.padEnd(次数，填充字符串)

---

数组高阶方法
  

 forEach遍历

格式arr.forEach(function(item,index.self){})
item：当前遍历的元素
index：当前元素的下标
self：当前数组

map映射

arr.map{function(item,index,self){
//返回一个，映射数组
}}

filter过滤

arr.filter{function(item,index,self){
//返回真，当前遍历元素保留
//返回假，当前变量的元素过滤掉
}}

reduce累计

arr.reduce{function(a,b){
//a是上一次返回的结果
}}

some有一个

有一个返回结果为true最终结果为true

every每一个

每个返回结果为true最终结果为true

find查找元素

查找符合条件的元素

findindex查找下标

查找符合条件的元素下标

sort((a,b)=>a-b)排序

---

箭头函数

        //01 箭头函数省略function
        //02 =>左边参数
        //03 箭头右边 函数体 返回值
        //04 传参0个或2个以上 参数加上括号
        //05 如果函数体有多行需要加上{} 如果需要返回值return
        //06 如果返回的是一个对象则用（）  包裹对象({})
        //07 箭头函数this指向上一层作用域的this

---

函数

    默认参数function fn(a=10,b=20){}
    调用：扩展参 fn{...arr}
    定义：不定参function(...args){}

---

对象

    1.对象简写

        变量和值简写
        函数function简写
        var name=“胡图图”
        var obj={
        name,
        say(){alert(this.name)}
        }

    2.对象动态属性

        {[nick+“msg”]:"你好"}

---

类

面向对象基本特点：封装；继承；多态；接口
单词：

extends继承
constructor构造函数
super 超类
static 静态

定义类类方法

class Person{
    constructor(name,age){
    this.name=name;
    this.age=age;
   }
    say(){
    alert(“你好”)
   }
}

实例化类

var p1=new Person()

类中的this 

Person类中的this指向、当前类的实例(p1)

继承

class Teach extends Person{
constructor(name,age,major){
super();
this.major=major;
   }
}

---

模块module

导入

import{name,fun,Square} from './api.js'
import Square from './api.js'
import Sq from ''./api.js
别名as  *代表所有
import * api from './api.js'
api.name;api.fun()
别名import Square,{name,fun as fn} from './api.js'
    

导出

export{name,fun,Square}导入多次
export default Square;默认只能导出一次

---

set

定义：没有重复元素的集合（数组）
初始化：
var s1=new Set()
var s2=new Set([1,2,5])
添加：s1.add()
删除：s1.delete()
情况：s1.clear()
检测：s1.has()
长度：s1.size
转数组：Array.from(s1)[...s1]
数组去重：arr1=[...new Set(arr)]