ES6 知识点总结(学生)

Posted 三千翎羽渡凡尘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 知识点总结(学生)相关的知识,希望对你有一定的参考价值。

变量声明关键字

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)]

以上是关于ES6 知识点总结(学生)的主要内容,如果未能解决你的问题,请参考以下文章

es6 知识点总结

ES6 新特性知识点总结

ES6常用知识点总结一

ES6中的常用知识点总结

es6知识总结

ES6知识点整理之第5篇----声明变量总结与global