博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECMAScript6基本介绍
阅读量:6342 次
发布时间:2019-06-22

本文共 6030 字,大约阅读时间需要 20 分钟。

一、声明方式let:

在ES中引入了新的声明方式let,let类似于var,let区别于其他的声明方式主要在于let,仅在他所作用的代码块中有效。

1.块作用域

let声明的变量会作用于块作用域中,外部无法调用。

for(var i=0;i<5;i++){}console.log(i)//输出结果:5for(let i=0;i<5;i++){}console.log(i)//输出结果:i is not defined复制代码

2.let不能提升

var声明的变量可以提升,而let声明的变量不能提升。

console.log(a)    var a = 123    //输出结果:undefined        console.log(a)    let a = 123    //输出结果:a is not defined复制代码

3.不能重复声明

var重复声明变量会覆盖之前声明过的变量的值,而let拒绝重复声明变量,使用let重复声明的话即会报错。

var a = 123var a = 456console.log(a)//输出结果:456let a = 123let a = 456console.log(a)//输出结果:Identifier 'a' has already been declared复制代码

4.暂时性死区

在块作用域中,let声明的变量即会成为暂时性死区。暂时性死区:外部声明的变量无法在内部使用,内部声明的变量外部亦无法使用。

var a = 123for(let i=0;i<5;i++){    let a =456}console.log(a)  //输出结果:123var a = 123for(let i=0;i<5;i++){    console.log(a)      let a =456}输出结果:a is not defined复制代码

二、常量声明方式Const

ES中引入了声明方式Const,被Const声明的变量存在栈区的内存地址是不能改变的。数值、字符串、布尔值存在于栈区,所以被const声明后,这些值是无法改变的;对象、数组的内存地址是不能改变的,但内存地址指向的数据是可以改变的。

1.只读常量

const声明为只读常量,改变const声明的简单类型(数值,字符串,布尔值)的变量会报错,改变复合类型(数组,对象)的变量的值则可进行修改,改变符合类型变量的内存地址则会报错。

const a = 123a = 345//输出结果:Assignment to constant variableconst b = [1,2,3]b.push(4,5,6)coosole.log(b)//输出结果:[1,2,3,4,5,6]const c = [1,2,3]c = []//输出结果:Assignment to constant variable复制代码

2.使用说明:

(1)不能提升

console.log(a)const a = 123//输出结果:a is not defined复制代码

(2)暂时性死区

for(let i=0;i<5;i++){    const a = 123}console.log(a)//输出结果:a is not defined复制代码

(3)不可重复声明

const a = 123const a = 456//输出结果:Identifier 'a' has already been declared复制代码

三、解构赋值

在ES6中,添加了解构赋值,解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。

1.数值解构赋值

var [a,b,c] = [1,2,3]console.log(a)console.log(b)console.log(c)//输出结果:123复制代码

2.字符串解构赋值

var [a,b,c,d,e] = "Hello"console.log(a)console.log(b)console.log(c)console.log(d)console.log(e)//输出结果:Hello复制代码

3.对象解构赋值

var {first,second} = {first:"Hello",second:"World"}console.log(first)console.log(second)//输出结果:HelloWorld复制代码

4.函数解构赋值

function f(x,y){    console.log( x + y)}f(1,2)//输出结果:3复制代码

四、模板字符串

模板字符串使用反引号(` `)来代替普通字符串的单引号和双引号。模板字符串中包含特定语法(${})的占位符。占位符中的表达式和周围的文本组成了模板字符串。

1.加入变量

模板字符串加入变量需要将变量嵌套在${}中。

var name = "小王"var age = 18console.log(`你好,我是${name},今年${age}岁。`)//输出结果:你好,我是小王,今年18岁。复制代码

在模板字符串中可以对调用的函数进行运算。

var a = 1var b = 2console.log(`1+2=${a+b}`)输出结果:1+2=3复制代码

2.调用函数

在模板字符串中,${}可以调用函数。

function f(){return "Hello World"}console.log(`${f()}`)//输出结果:Hello World复制代码

五、数组扩展

1.扩展运算符

(1)合并数组

扩展运算符可以实现数组的合并,如下:

var a = [1,2,3]var b = [...a,4,5,6]console.log(b)//输出结果:[1,2,3,4,5,6]复制代码

(2)复制数组

扩展运算符可以复制数组,如下:

var a = [1,2,3]var b = [...a]console.log(b)//输出结果:[1,2,3]复制代码

(3)解构赋值

var [a,b,c] = [1,2,[3,4]]console.log(a,b,c)//输出结果:1 2 [3,4]复制代码

(4)将类数组转换为数组

扩展字符串是将类数组转换为数组的方法之一。

  • 1
  • 2
  • 3
  • 4
  • 5
////输出结果:ture复制代码

(5)将字符串转换为数组

var a = "hello"var b = [...a]console.log(b)//输出结果:["h", "e", "l", "l", "o"]复制代码

2. Array.from和 Array.of

(1)Array.from

作用:将类数组转化为真正的数组。

  • 1
  • 2
  • 3
  • 4
  • 5
//输出结果:ture复制代码

(2)Array.of

作用:将一组值转化为数组

Array.of(1,2,3)//输出结果:[1,2,3]复制代码

3. find 和 findIndex

(1)find

作用:寻找数组中的是否存在符合要求的值,存在则返回该值,如果不存在符合要求的值则返回undefined。

var a = [1,2,3,4]console.log(a.find((index)=>index > 2))//输出结果:3复制代码

(2)findIndex

作用:寻找数组中是否寻在符合要求的值,存在则返回该值所在的位置,不存在的话则返回-1。

var a = [1,2,3,4]console.log(a.findIndex((index)=>index > 2))//输出结果:2复制代码

3.includes

判断元素是否在数组中存在,存在返回ture,不存在则返回false。

var a = [1,2,3]a.includes(1)//得到结果:turea.includes(4)//得到结果:false复制代码

4.fill

作用:给数组填充某个指定的值,若已存在值则会被覆盖。 fill可以有第二参数和第三参数,表示填充的起点和终点(起点为闭区间,终点为开区间)。

var a = [1,2,3]console.log(a.fill("*",0,2))//输出结果:["*","*",2]复制代码

六、函数拓展

1.设置默认值

在ES6之前,函数的参数不能设默认值,在ES6中进行了更改,我们可以在函数参数中为函数设定默认值。

function f(x,y=2){    console.log(x,y)}f(2)//输出结果:2 2复制代码

2.箭头函数

在ES6中,允许使用箭头(=>)构造函数。如果函数只有一行指令,在箭头函数中即可省略大括号。

var f = function(a,b){
return a+b}var f = (a,b) => a+b//上面两个函数相等,箭头函数即可实现上述函数的功能复制代码

七、对象拓展

1.Object.getOwnProertyDescriptor()

获取对象中的自身属性。

var a = 1;console.log(Object.getOwnPropertyDescriptor(window,"a"))//输出结果:{value: 1, writable: true, enumerable: true, configurable: false}复制代码

2.Object.assign

Object.assign就去用于对象的合并,将源对象的所有的可枚举属性,复制到目标对象。

var obj1 = {a:"hello"}var obj2 = {b:"world"}console.log(Object.assign(obj1,obj2))//输出结果:{a: "hello", b: "world"}复制代码

3.Object.keys、Object.values、Object.entries

(1)Object.keys

Object.keys返回一个数组,包括参与对象键值对中的键。

var obj = {a:"hello",b:"world"}console.log(Object.keys(obj))输出结果:["a", "b"]复制代码

(2)Object.values

Object.values返回一个数组,包括参与对象键值对中的值。

var obj = {a:"hello",b:"world"}console.log(Object.values(obj))输出结果:["hello", "world"]复制代码

(3)Object.entries

Object.entries返回一个数组,包括参与对象键值对数组。

var obj = {a:"hello",b:"world"}console.log(Object.entries(obj))输出结果:[["a", "hello"]  , ["b", "world"]]复制代码

八、Class

类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

1.class创建对象

格式:

class 类名{    constructor(参数){        this.属性 = 参数;    }    mothod(){}}复制代码

使用class创建一个类:

class NBAPlayer{    constructor(name,age,stature){        this.name = name;        this.age = age;        this.stature = stature;    }    say(){        console.log(`我是${this.name},今年${this.age}岁,身高${this.stature}cm。`)    }}var curry = new NBAPlayer("curry","30",191)console.log(curry.say())//输出结果:我是curry,今年30岁,身高191cm。复制代码

2.使用extends继承class

格式:

class 子类 extends 父类{    construtor(参数){        super(参数)        this.属性 = 值    }}复制代码

使用extends实现继承

class NBAPlayer{    constructor(name,age,stature){        this.name = name;        this.age = age;        this.stature = stature;    }}class MVP extends NBAPlayer{    constructor(name,age,stature,year){        super(name,age,stature)        this.year = year    }    say(){         console.log(`我是${this.name},今年${this.age}岁,身高${this.stature}cm,是${this.year}年的MVP。`)    }}var curry = new MVP("curry",30,191,2015)console.log(curry.say())//输出结果:我是curry,今年30岁,身高191cm,是2015年的MVP。复制代码

3.静态方法static

可直接通过类名来访问的方法就叫做静态方法,我们可以通过ststic来为类创建静态方法。

class NBAPlayer{    constructor(name,age,stature){        this.name = name;        this.age = age;        this.stature = stature;    }    static jump(){        console.log("jump:90cm")    }}NBAPlayer.jump()//输出结果:jump:90cm复制代码

转载地址:http://ecyla.baihongyu.com/

你可能感兴趣的文章
牛腩新闻发布系统 (3) 存过过程或函数""需要""参数,但未提供该参数
查看>>
ORM框架Hibernate (四)MyEclipse Hibernate Tool 逆向生成实体类
查看>>
js中substr与substring的区别
查看>>
去掉iphone连接电脑时会出现的弹出窗口
查看>>
【python】-- web开发之HTML
查看>>
vs2015 去除 git 源代码 绑定
查看>>
解决firefox的button按钮文字不能垂直居中
查看>>
网络协议端口号详解
查看>>
大话数据结构读后感——第一章
查看>>
各种排序
查看>>
ts 格式化日期输出
查看>>
Optional
查看>>
sed 命令编辑文本
查看>>
LRUCache 具体解释
查看>>
Activity调用isDestroyed()方法报出,java.lang.NoSuchMethodError
查看>>
使用AFNetworking第三方下载类
查看>>
fhq-treap小结
查看>>
SAP BDC 交货增强无法进入
查看>>
about porting
查看>>
MySQL事务及ACID特性
查看>>