ES6 核心学习

       由于机缘巧合(前端太忙碌了),之前用  vueelement-ui  开发了公司项目的后台,了解了基本的写法,但是其中很多语法并不太清楚,只是依葫芦画瓢,所以在空闲时,在学习了一下 ES6的语法

主要的途径:


1、let 和 const 命令

let:声明变量,是块级作用域,不能被外部调用,不允许重复声明,并且变量不能提升
const: 声明一个只读属性的变量,不可更改,不可先声明后赋值,生成块级作用域 (和let一样 不能被外部调用,不允许重复声明,不允许变量提升)

2、字符串扩展方法

for of: 可以遍历字符串了
例:
    var a='lang' 
    for (item of a){
         console.log(item);
    }
// l // a // n // g

codePointAt: 字符串查询

includes(): 只存在判断, 相比之前的indexof 对于NaN判断时更 准确 includes 值为 true|false

repeat(): 字符串重复: 将字符串重复n遍
例:
    var a='lang' 
    console.log(a.repeat(3));//langlanglang

startwith,endwith: 表示字符串是否在原字符串的头部/尾部
例:
        var str='hello world'
        console.log(str.startsWith('hello',0)); //true
        console.log(str.startsWith('world',6)); //true
        console.log(str.startsWith('world',0)); //false

padStart(),padEnd(): 在字符串前后追加

模板字符串(``):使用这个模板符号,中间支持各种格式的输出,包括换行, 空格, 变量, 表达式,调用函数等
模板字符串中 使用 ${}可以写任意表达式

3、数值扩展方法

Number.isNaN() :检测数据是否是NaN类型,只有NaNtrue ,其余类型皆返回 false

Number.parselnt(),Number.parseFloat()

Number.isInterger() 判断数字是否是整数,例如3.00 或者是超多精度返回的值,会被视为整数
例:
var a=3.00 
var b=10;
 var c=false; 
var d=4.00000000000000000000000000000002
console.log(Number.isInteger(a));//true 
console.log(Number.isInteger(b));//true 
console.log(Number.isInteger(c));//false 
console.log(Number.isInteger(d));//true

3、函数扩展

函数可以指定默认值(原来不支持)
注:
    参数名不能重复
    不能使用let,const 重复

rest参数 在函数形参中使用...扩展运算符,可以将不定形参传入rest数组中 (rest就是为解决传入的参数数量不一定, rest参数本身就是数组)

箭头函数(重点)
例:
    var f=(x,y)=> {return x+y }
注:当只有一个参数时,我们可以忽略()

尾调用:在函数中的最后一步(存在return 的最后一步),没有return的不是尾调用
例:
function g(){}
function f(){
    return g() //这是尾调用
    console.log('121');
}
f()
注: 返回的必须是函数,如果是表达式,也不是尾调用

尾递归 :尾递归是在最后一步调用只是,必须给一个终止条件,不然就会产生死循环

4、数组扩展

扩展运算符(...):把数组或类数组对象展开成一系列逗号隔开的值
    可以用于数组拼接
    例:
    var arr=[1,2,3]
    var arr2=[4,5,6]
    var str='12121' 
    var a=[1,...arr,2,...arr2];

Array.from() 将伪数组转换为数组

fill:填充初始化数组,可用于数组初始化(已有数据的数组会被覆盖),也可以选择填充的起始位置和结束位置


5、对象扩展

1、属性的简写 (属性的值是一个变量 并且 变量名称和键名是一致时)
例:
var name ='lang' 
var age=22;
var obj={ name:name, age:age }
简化为:
var obj={ name, age }

2、方法的简化
例: var obj={ say:function(){} }
简化为:
var obj={ say() {}}

3、精细化设置对象的属性
属性有四个特征:
1.configurable: 是否可以删除。 默认为true 可以删除:
2.writable: 是否可以修改。 默认为ture, 可以修改:
3.enumerable: 是否可以枚举。可以使用 for in 默认为ture, 可以枚举:
4.value: 值。 默认值为undefined

设置方法:
(1Object.defineProperty(对象名,属性名, {上面的四个特征})        注:将对象中所有的参数设置属性
(2Object.defineProperties(对象名, {属性名:{四个特征}},{属性名:{四个特征}})  注:将对象中指定的的参数设置属性

4、获取精细化设置对象的属性
Object.getOwnPropertyDescriptor(obj,'name')

5Object.keys()  获取到一个对象的属性名
例:
    var obj={ name:'lang', age:22 }
    console.log(Object.keys(obj)); //["name", "age"]

6Object.values() 获取对象的值,放入数组中
    console.log(Object.values(obj)); //["lang", 22]

6、解构赋值

原理:结构语法是javascript 表达式,可以将数组中的值或 对象中的属性,提取到不同的变量中

1、数组的解构
例:
    var foo = ["one", "two", "three"]; 
    var [one, two, three] = foo; 
    console.log(one); // "one" 
    console.log(two); // "two" 
    console.log(three); // "three" 
    Link to section变量先声明后赋值时的解构

在解构赋值的情况下,可以对2个值互换
例:
        var a = 1;
        var b = 3;
        [a, b] = [b, a]
    console.log(a); // 3
    console.log(b); // 1

2、对象的解构
例:基本的赋值 ,属性名相同的将被赋值
    var o = {p: 42, q: true};
    var {p, q} = o;
    console.log(p); // 42
    console.log(q); // true

3、混合解构(嵌套对象和数组)

7、class类

使用class 声明类
constructor : 构造方法
function 关键字 定义方法
extends 继承方法

例:
    class NBAPlayer2 { 
        constructor(name, height) {
            this.name = name; 
            this.height = height;
        } 
        say() { 
            console.log(`name is${this.name} height is${this.height}`); 
        }
    } 
    class MVP2 extends NBAPlayer { 
        constructor(name, height, year) {
            super(name, height)    
            this.year = year
         } 
        say() { 
            console.log(`name is${this.name} height is${this.height} mvpyear is${this.year}`); 
        }
     } 
var n1 = new MVP2('老库里', '201', '2016') 
var m1 = new NBAPlayer2('老库里', '201') 
n1.say()
m1.say()

8、module 模块功能

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

模块功能只要由两个命令构成:exportimport

export: 固定模块的对外接口 (即:指定输出的代码)
import: 用户输入其他模块提供的功能 (即:引起外部代码)

1export
export命令是规定对外的接口,必须与模块内部的变量建立,不能直接输出 (functionclass 也要遵从这样的写法)
例:
    //  报错
    export 1;

    // 正确写法
    // 写法1
    export var m = 1;
    // 写法2
    var m = 1;
    export {m}
    // 写法3
    var n = 1;

2import
通过import 加载 模块
例:
    // 用于加载profile.js文件,并从中输入变量
    import {firstName, lastName, year} from './profile.js'   
    // 变量取重名
    imporr {lastName as lname } from './profile.js'
    ··    
    //模块整体加载
    import * as circle from './circle'
注:
    import 输入的变量都是只读的,不能进行修改

    //错误
    import {a} from './test.js'
    a.foo = 'test'

    import 是静态执行,不能使用表达式和变量
    //错误
    import { 'c' + 'foo' } from 'module'

    不能先调用变量,在使用import 输入变量
    //错误
    foo()
    import { foo } from 'my_module'

3、模块的整体加载
使用 * 指定一个对象,将所有输出值加载到这个对象
例:
    import * as circle from ‘./circle’

4export default 命令 :为模块指定默认输出

使用 import 输入时 ,可以指定任意名字,并且不需要 {}
export default 不仅用在 匿名函数前,也可以使用在 非匿名函数前
例:
    export default function crc32() {
    
    }
    import crc32 from ‘crc32’;