Live2D

ES6一些常用的新增特性

一.变量的声明

ES6中新增加了变量的声明方式 let和const

 let 存在块作用域  不存在变量提升,即其在整个大括号 {} 之内可见  if语句和 for语句里面的{ }也属于块作用域

let不允许在同一作用域内重复声明同一个变量

var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。

const声明的常量不能改变,意味着const一旦声明常量,就必须同时初始化(即必须赋值)。而且不能修改  不能先声明,后初始化,这样会报错

与let一样。const声明的常量也只在块级作用域内有效
与let一样,必须先声明,后使用
与let一样,在同一作用域,const不能重复声明同一常量

特别说明:对于const和let都有暂时性死区

ES6规定,如果在区块中存在let和const声明的变量,则这个区块对这些声明的变量从一开始就形成一个封闭的作用域。不管在外部有没有声明这个变量。必须遵守“先声明,后使用”的原则,否则报错

暂时性死区的本质就是,只要一进入当前作用域,所使用的变量就已存在,但是不可获取,只有等到声明变量的哪一行代码的出现,在可以获取和使用该变量

二.解构赋值

所谓解构赋值就是 声明和赋值都放到了一起 一般都是数组 对 数组, 对象 对 对象, 数组能够设置默认值,对象也能够设置默认值,默认值必须采用等号的方式

let [zhan, si, xl = 5] = [3, 4];
console.log(zhan, si, xl) //3, 4, 5

let {name, age = 23} = {name: 'xl', bigAge: 24}
console.log(name, age) //xl, 23

通过解构赋值可以方便的交换两个变量的值。

var a = 1;
var b = 3;

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

三.模板字符串

在ES6之前,我们往往这么处理模板字符串:
通过 "+" 这种方式进行拼接

在ES6中通过`${}` 就可以完成字符串的拼接

四.箭头函数

箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

箭头函数最大的好处 箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题

五.函数的默认值

// ES6之前,当未传入参数时,text = 'default';
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6;
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

六.数组

  1. forEach()
var arr = [1,2,3,4];
arr.forEach((item,index,arr) => {
    console.log(item) //结果为1,2,3,4
})
// 数组的遍历方法,无返回值,不改变原数组

 

  1. map()
var arr = [1,2,3,4];
arr.map((item,index,arr) => {
    return item*10 //新数组为10,20,30,40
})
//map遍历数组,返回一个新数组,不改变原数组的值。

 

  1. filter()
var arr = [1,2,3,4];
arr.filter((item,index,arr) => {
    return item > 2 //新数组为[3,4]
})
//filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组的值。
  1. some()
var arr = [1,2,3,4];
arr.some((item,index,arr) => {
    return item > 3 //结果为true
})
//遍历数组每一项,有一项返回true,则停止遍历,结果返回true。不改变原数组

 

6 every()

var arr = [1,2,3,4];
arr.every((item,index,arr) => {
    return item > 1 //结果为false
})
//遍历数组每一项,每一项返回true,则最终结果为true。当任何一项返回false时,停止遍历,返回false。不改变原数组
// 与some()方法互补

七.对象属性的简写

const name='Ming',age='18',city='Shanghai';
        
const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
const name='Ming',age='18',city='Shanghai';
        
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

八模块化

ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
 





 

posted @ 2019-08-07 20:09  虎嗅蔷薇-小贺  阅读(307)  评论(0编辑  收藏  举报