阅读:6529回复:3
前端常见面试题总结——ES6部分(三)
1.es6熟悉吗,说几个es6的新增方法
(1)新增声明命令let和const 在es6中通常用 let 和 const 来声明,let 表示变量、const 表示常量。 特点: let 和 const 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用。 不存在变量提升,只能先声明再使用,否则会报错。在代码块内,在声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。 在同一个代码块内,不允许重复声明。 const声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。) (2)模板字符串(Template String) |
|
沙发#
发布于:2020-03-17 23:04
原文链接:https://blog.csdn.net/sinat_36174237/article/details/82378891
(2)模板字符串(Template String) 用一对反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,也可以在字符串中嵌入变量,js表达式或函数,变量、js表达式或函数需要写在${ }中。 var str = `abc def gh`; console.log(str); let name = "小明"; function a() { return "ming"; } console.log(`我的名字叫做${name},年龄${17+2}岁,性别${'男'},游戏ID:${a()}`); 3)函数的扩展
function A(a,b=1){ console.log(a+b); } A(1); //2 A(2+3); //5 箭头函数 在es6中,提供了一种简洁的函数写法,我们称作“箭头函数”。 写法:函数名=(形参)=>{……} 当函数体中只有一个表达式时,{}和return可以省略,当函数体中形参只有一个时,()可以省略。 特点:箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数,如果没有最近的函数就指向window。 //省略写法 var people = name => 'hello' + name; var getFullName = (firstName, lastName) => { var fullName = firstName + lastName; return fullName; (4)对象的扩展
var foo = 'bar'; var baz = {foo}; //等同于 var baz = {foo: foo};
var o = { method() { return "Hello!"; } }; // 等同于 var o = { method: function() { return "Hello!"; } };
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); //3 console.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' }; //源对象1 var source2 = {sex : '女'}; //源对象2 var source3 = {sex : '男'}; //源对象3,和source2中的对象有同名属性sex Object.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 对象在成功或失败时。 var promise = new Promise((resolve, reject) => { var success = true; if (success) { resolve('成功'); } else { reject('失败'); } }).then( (data) => { console.log(data)}, (data) => { console.log(data)} ) promise的执行过程 setTimeout(function() { console.log(0); }, 0); var promise = new Promise((resolve, reject) => { console.log(1); setTimeout(function () { var success = true; if (success) { resolve('成功'); } else { reject('失败'); } },2000); }).then( (data) => { console.log(data)}, (data) => { console.log(data)} ); console.log(promise); //<pending> 进行中 setTimeout(function () { console.log(promise); //<resolved> 已完成 },2500); console.log(2); //1 //Promise {<pending>} //2 //0 //成功 //Promise {<resolved>: undefined} (8)解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
var [name, pwd, sex]=["小周", "123456", "男"]; console.log(name) //小周 console.log(pwd)//123456 console.log(sex)//男
var obj={name:"小周", pwd:"123456", sex:"男"} var {name, pwd, sex}=obj; console.log(name) //小周 console.log(pwd)//123456 console.log(sex)//男 //如果想要变量名和属性名不同,要写成这样 let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" }; console.log(foz) // "aaa" console.log(foo) // error: foo is not defined |
|
板凳#
发布于:2020-03-18 16:05
(8)解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
var [name, pwd, sex]=["小周", "123456", "男"]; console.log(name) //小周 console.log(pwd)//123456 console.log(sex)//男
var obj={name:"小周", pwd:"123456", sex:"男"} var {name, pwd, sex}=obj; console.log(name) //小周 console.log(pwd)//123456 console.log(sex)//男 //如果想要变量名和属性名不同,要写成这样 let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" }; console.log(foz) // "aaa" console.log(foo) // error: foo is not defined (9)set数据结构 Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。 属性和方法: size 数据的长度 add() 添加某个值,返回 Set 结构本身。 delete() 删除某个值,返回一个布尔值,表示删除是否成功。 has() 查找某条数据,返回一个布尔值。 clear() 清除所有成员,没有返回值。 应用:数组去重。 var arr = [1,1,2,2,3]; var s = new Set(arr); console.log(s); //{1, 2, 3} console.log(s.size); //3 console.log(s.add(4)); //{1, 2, 3, 4} console.log(s.delete(4)); //true console.log(s.has(4)); //false s.clear(); (10)Spread Operator 展开运算符(...)
var str="abcd"; console.log([...str]) // ["a", "b", "c", "d"]
var a1=[1,2,3]; var a2=[4,5,6]; console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]
rest 参数是一个数组 ,它的后面不能再有参数,不然会报错 function func(...args){ console.log(args);//[1, 2, 3, 4] } func(1, 2, 3, 4); function f(x, ...y) { console.log(x); console.log(y); } f('a', 'b', 'c'); //a 和 ["b","c"] f('a') //a 和 [] f() //undefined 和 [] |
|
地板#
发布于:2020-03-18 16:06
|
|