1.es6相熟吗,说几个es6的新增办法
(1)新增申明命令let和const
在es6中通常用 let
和 const
来申明,let
示意变量、const
示意常量。
特点:
let
和const
都是块级作用域。以{}代码块作为作用域范畴 只能在代码块外面应用。- 不存在变量晋升,只能先申明再应用,否则会报错。在代码块内,在申明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
- 在同一个代码块内,不容许反复申明。
- const申明的是一个只读常量,在申明时就须要赋值。(如果
const
的是一个对象,对象所蕴含的值是能够被批改的。形象一点儿说,就是对象所指向的地址不能扭转,而变量成员是能够批改的。)
(2)模板字符串(Template String)
用一对反引号(`)标识,它能够当作一般字符串应用,也能够用来定义多行字符串,也能够在字符串中嵌入变量,js表达式或函数,变量、js表达式或函数须要写在${ }中。
var str = `abcdefgh`;console.log(str);let name = "小明";function a() { return "ming";}
- console.log(
我的名字叫做${name},年龄${17+2}岁,性别${'男'},游戏ID:${a()}
);
(3)函数的扩大
- 函数的默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时应用。
function A(a,b=1){ console.log(a+b);}A(1); //2A(2+3); //5
- 箭头函数
在es6中,提供了一种简洁的函数写法,咱们称作“箭头函数”。
写法:函数名=(形参)=>{……} 当函数体中只有一个表达式时,{}和return能够省略,当函数体中形参只有一个时,()能够省略。
特点:箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数,如果没有最近的函数就指向window。
//省略写法var people = name => 'hello' + name;var getFullName = (firstName, lastName) => { var fullName = firstName + lastName; return fullName;}
(4)对象的扩大
- 属性的简写。ES6 容许在对象之中,间接写变量。这时,属性名为变量名, 属性值为变量的值。
var foo = 'bar';var baz = {foo}; //等同于 var baz = {foo: foo};
- 办法的简写。省略冒号与function关键字。
var o = { method() { return "Hello!"; }};// 等同于var o = { method: function() { return "Hello!"; }};
- Object.keys()办法,获取对象的所有属性名或办法名(不包含原形的内容),返回一个数组。
var obj={name: "john", age: "21", getName: function () { alert(this.name)}};console.log(Object.keys(obj)); // ["name", "age", "getName"]console.log(Object.keys(obj).length); //3console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]
- Object.assign (),assign办法将多个原对象的属性和办法都合并到了指标对象下面。能够接管多个参数,第一个参数是指标对象,前面的都是源对象。
var target = {}; //指标对象var source1 = {name : 'ming', age: '19'}; //源对象1var source2 = {sex : '女'}; //源对象2var source3 = {sex : '男'}; //源对象3,和source2中的对象有同名属性sexObject.assign(target,source1,source2,source3);console.log(target); //{name : 'ming', age: '19', sex: '男'}
(5)for...of 循环
是遍历所有数据结构的对立的办法。for...of循环能够应用的范畴包含数组、Set 和 Map 构造、某些相似数组的对象(比方arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。
var arr=["小林","小吴","小佳"];for(var v of arr){ console.log(v); }//小林 //小吴 //小佳
(6)import和export
ES6规范中,JavaScript原生反对模块(module)了。这种将JS代码宰割成不同性能的小块进行模块化,将不同性能的代码别离写在不同文件中,各模块只需导出公共接口局部,而后通过模块的导入的形式能够在其余中央应用。
export用于对外输入本模块(一个文件能够了解为一个模块)变量的接口。
import用于在一个模块中加载另一个含有export接口的模块。
import和export命令只能在模块的顶部,不能在代码块之中。
//导入局部//全副导入import Person from './example'//将整个模块所有导出内容当做繁多对象,用as起别名import * as example from "./example.js"console.log(example.name)console.log(example.getName())//导入局部import { name } from './example'//导出局部// 导出默认export default App// 局部导出export class User extend Component {};
(7)Promise对象
Promise是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来,防止了层层嵌套的回调函数。
它有三种状态,别离是pending-进行中、resolved-已实现、rejected-已失败。
Promise 构造函数蕴含一个参数和一个带有 resolve(解析)和 reject(回绝)两个参数的回调。在回调中执行一些操作(例如异步),如果所有都失常,则调用 resolve,否则调用 reject。对于曾经实例化过的 promise 对象能够调用 promise.then() 办法,传递 resolve 和 reject 办法作为回调。then()办法接管两个参数:onResolve和onReject,别离代表以后 promise 对象在胜利或失败时。
1. var promise = new Promise((resolve, reject) => { 2. var success = true; 3. if (success) { 4. resolve('胜利'); 5. } else { 6. reject('失败'); 7. } 8. }).then( 9. (data) => { console.log(data)}, 10. (data) => { console.log(data)} 11. )
promise的执行过程
1. setTimeout(function() { 2. console.log(0); 3. }, 0); 4. var promise = new Promise((resolve, reject) => { 5. console.log(1); 6. setTimeout(function () { 7. var success = true; 8. if (success) { 9. resolve('胜利'); 10. } else { 11. reject('失败'); 12. } 13. },2000); 14. }).then( 15. (data) => { console.log(data)}, 16. (data) => { console.log(data)} 17. ); 18. console.log(promise); //<pending> 进行中 19. setTimeout(function () { 20. console.log(promise); //<resolved> 已实现 21. },2500); 22. console.log(2); 24. //1 25. //Promise {<pending>} 26. //2 27. //0 28. //胜利 29. //Promise {<resolved>: undefined}
(8)解构赋值
ES6 容许依照肯定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
- 数组的解构赋值
数组中的值会主动被解析到对应接管该值的变量中,数组的解构赋值要一一对应 如果有对应不上的就是undefined
1. var [name, pwd, sex]=["小周", "123456", "男"]; 2. console.log(name) //小周 3. console.log(pwd)//123456 4. console.log(sex)//男
- 对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按秩序排列的,变量的取值由它的地位决定;而对象的属性没有秩序,变量必须与属性同名,能力取到正确的值。
1. var obj={name:"小周", pwd:"123456", sex:"男"} 2. var {name, pwd, sex}=obj; 3. console.log(name) //小周 4. console.log(pwd)//123456 5. console.log(sex)//男 7. //如果想要变量名和属性名不同,要写成这样 8. let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" }; 9. console.log(foz) // "aaa" 10. console.log(foo) // error: foo is not defined
(9)set数据结构
Set数据结构,相似数组。所有的数据都是惟一的,没有反复的值。它自身是一个构造函数。
属性和办法:
- size 数据的长度
- add() 增加某个值,返回 Set 构造自身。
- delete() 删除某个值,返回一个布尔值,示意删除是否胜利。
- has() 查找某条数据,返回一个布尔值。
- clear() 革除所有成员,没有返回值。
利用:数组去重。
1. var arr = [1,1,2,2,3]; 2. var s = new Set(arr); 3. console.log(s); //{1, 2, 3} 5. console.log(s.size); //3 6. console.log(s.add(4)); //{1, 2, 3, 4} 7. console.log(s.delete(4)); //true 8. console.log(s.has(4)); //false 9. s.clear();
(10)Spread Operator 开展运算符(...)
- 将字符串转成数组
1. var str="abcd"; 2. console.log([...str]) // ["a", "b", "c", "d"]
- 将汇合转成数组
1. var sets=new Set([1,2,3,4,5]) 2. console.log([...sets]) // [1, 2, 3, 4, 5]
- 两个数组的合并
1. var a1=[1,2,3]; 2. var a2=[4,5,6]; 3. console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]
- 在函数中,用来代替arguments参数
rest参数 …变量名称
rest 参数是一个数组 ,它的前面不能再有参数,不然会报错
1. function func(...args){ 2. console.log(args);//[1, 2, 3, 4] 3. } 4. func(1, 2, 3, 4); 6. function f(x, ...y) { 7. console.log(x); 8. console.log(y); 9. } 10. f('a', 'b', 'c'); //a 和 ["b","c"] 11. f('a') //a 和 [] 12. f() //undefined 和 []