let/count 在ES6之前,我们都是用var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } }
以上的代码实际上是:
function aa() { var test // 变量提升,函数最顶部 if(flag) { test = 'hello man' } else { //此处访问 test 值为 undefined console.log(test) } //此处访问 test 值为 undefined }
我们通常用 let 和 const 来声明,let 表示变量、const 表示常量。let 和 const 都是块级作用域。
只要在{}花括号内的代码块即可以认为 let 和 const 的作用域
let 的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
再来说说 const const 声明的变量必须提供一个值,而且会被认为是常量,意思就是它的值被设置完成后就不能再修改了。
还有,如果 const 的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。
解构赋值 解构(Destructuring):是将一个数据结构分解为更小的部分的过程。ES6中,从数组和对象中提取值,对变量进行赋值。
两种简写
{name:name,age=age} = {name,age}
{open:function(){ console.log(“kl”) }} = {open(){ console.log(“kl”) }}
let {对象属性名} = {对象属性名:对象属性}
let 对象属性名 = 对象属性
const people = { name: 'lux', age: 20 } const name = people.name const age = people.age console.log(name + ' --- ' + age)
const people = { name: 'lux', age: 20 } const { name, age } = people
虽然通过解构可以无需声明来赋值一个变量。
但最好还是使用声明解构
var people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith" }, age: 35 }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones" }, age: 25 } ]; for (var {name: n, family: { father: f } } of people) { console.log("Name: " + n + ", Father: " + f); } // "Name: Mike Smith, Father: Harry Smith" // "Name: Tom Jones, Father: Richard Jones"
import/export as
为命名空间别名
可以导出let var function class const
// 导出默认, 有且只有一个默认 export default App =2 export default function open(){ console.log(alphabets) } // 部分导出 export let a = 2; export function open(){ console.log(alphabets) } let opens = function (){ console.log(alphabets) } let s = 3 export {opens,s} //全部导入 import people from './example' //有一种特殊情况,即允许你将整个模块当作单一对象进行导入 //该模块的所有导出都会作为对象的属性存在 import * as example from "./example.js" console.log(example.name) console.log(example.age) console.log(example.getName()) //导入部分 import {name, age} from './example'
1.当用export default people导出时,就用 import people 导入(不带大括号)
2.一个文件里,有且只能有一个export default。但可以有多个export。
3.当用export name 时,就用import { name }导入(记得带上大括号)
4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age }
5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example
扩展运算符 ...
//数组 const color = ['red', 'yellow'] const colorful = [...color, 'green', 'pink'] console.log(colorful) //[red, yellow, green, pink] //对象 const alp = { fist: 'a', second: 'b'} const alphabets = { ...alp, third: 'c' } console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }
const first = { a: 1, b: 2, c: 6, } const second = { c: 3, d: 4 } const total = { ...first, ...second } console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
解构赋值中的剩余模式
当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。
var [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3]
剩余元素必须是数组的最后一个元素。…只能在数组最后一个变量
默认值 参数默认值
function action(num = 200) { console.log(num) } action(0) // 0 action() //200 action(300) //300
数组对象默认值
let oldArry =[1,2,3,4] let [a,b.c=2] = oldArry let ary = { name: "阿里", age: 18, money: 0 }; let { name ,age=12312,mo=4} = ary;
lambda ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
不需要 function 关键字来创建函数 省略 return 关键字 继承当前上下文的 this 关键字
()=> dosomething() data => data++ (a,b) => a+b data =>{ dosomething() return data++ }
Promise 在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。
setTimeout(function() { console.log(1) }, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5);
模板字符串 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//ES5 var name = 'lux' console.log('hello' + name) //es6 const name = 'lux' console.log(`hello ${name}`) //hello lux
async/await async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数,它的语法和结构会更像是标准的同步函数。
当调用一个 async 函数时,会返回一个 Promise 对象。当这个 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。
async 函数中可能会有 await 表达式,这会使 async 函数暂停执行,等待 Promise 的结果出来,然后恢复async函数的执行并返回解析值(resolved)。
注意, await 关键字仅仅在 async function中有效。如果在 async function函数体外使用 await ,你只会得到一个语法错误(SyntaxError)。
function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); var result = await resolveAfter2Seconds(); console.log(result); // expected output: 'resolved' } asyncCall();