起点低怕什么,大不了加倍努力。人生就像一场马拉松比赛,拼的不是起点,而是坚持的耐力和成长的速度。只要努力不止,进步也会不止。
ECMA(European Computer Manufacturers Association)欧洲计算机协会,研究的 JavaScript 语言语法规范,这个东西名称就叫做 ECMAScript 。
JavaScript 是 ECMAScript 的一种实现,完整的 JavaScript 由以下三部分组成:
var 与 let 和 const 区别总结:
var
let
const
可以重复定义
不能重复定义
不能重复定义
是变量,不能限制修改
是变量
只读常量,初始化时必须赋值
没有块级作用域
块级作用域,不能跨块访问
块级作用域,不能跨块访问
声明变量被提升,能引用
不会被初始化,不能引用
不会被初始化,不能引用
相关面试题:
var result = new Array();
for (var i=0; i<10; i++) {
result[i] = function() {
return i;
}
}
console.log(result[0]()) //10
它们之间的区别有:
注意点:箭头函数的 this 永远指向其上下文的 this ,任何方法都改变了其指向,如: call() 、apply() 、apply()
相关面试题:
var name="window name"
var obj = {
name:'obj name',
showName:()=>{
console.log(this.name) //运行结果 window name
}
}
obj.showName.call(obj)
我们说箭头函数不能当做构造函数,它没有 prototype ,也没有自己的 this 指向,不可以使用 arguments 参数,所以不能使用 new 。
new 操作符具体做了些什么?
所以上面的 第二步和第三步,箭头函数是无法执行的。
Promise 对象是异步编程的一种解决方案,最早由社区提出。
Promises/A+ 规范是 JavaScript Promise 的标准,规定了一个Promise 所必须具有的特性。
Promise 是一个构造函数,接收一个函数作为参数,返回一个Promise 实例。一个 Promise实例有三种状态,分别是 pending、resolved 和 rejected,分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态,并且状态一经改变,就凝固了,无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的,我们可以在异步操作结束后调用这两个函数改变 Promise 实例的状态,它的原型上定义了一个 then 方法,使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务,会在本轮事件循环的末尾执行。
相关面试题
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve();
console.log(2);
})
promise.then(() => {
console.log(3);
})
console.log(4);
/* 运行结果
1 2 4 3
*/
Async / Await ,其中 await 关键字存在async函数表达式中,用于等待 Promise 对象,暂停执行,等到异步操作完成后,恢复 async 函数的执行并返回解析值。如果把 await 放在 asnyc 函数体外,会报语法错误。
new Promise().then(),其中 then 是原型上的一个方法,接收两个参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败的回调,两个函数只会有一个被调用。
它两之间的区别:
Symbol 是一个新的原始数据类型,表示独一无二的值,它是 js 的第七种数据类型,类似于字符串的数据类型。
使用 Symbol 的注意点有:
ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,会通过 Object.is 方法自动去重。
WeakSet 结构与 Set 结构类似,也是不重复的集合。但是 WeakSet 的成员只能是对象,不能是其他类型的值,WeakSet 中的对象都是弱引用,因此能够被垃圾回收自动清理。
Object.assign 使用:
let outObj = {
a:1,
b:2
}
let newObj = Object.assign({},outObj)
newObj.a = 3;
console.log(newObj) //{a: 3, b: 2}
扩展运算符:
let outObj = {
a:1,
b:2
}
let newObj = { …outObj }
newObj.a = 3;
console.log(newObj) //{a: 3, b: 2}
Object.assign 和 扩展运算 都是浅拷贝。
Object.assign 方法接收的第一个参数作为目标对象,后面的对象作为源对象,然后把所有源对象合并到目标对象中,它会修改目标对象,因此会触发 setter 。
扩展运算符 … 使用时,数组或对象中的每一个值都会被拷贝到一个新的数组或对象中,它不复制继承的属性或类的属性,但它会复制 ES6 的 Symbols 属性。
为什么 0.1+0.2 != 0.3 ?
JS 中采用的 IEEE754 的双精度标准,计算机内部存储数据的编码时,0.1 在计算机内部根本不是精确的 0.1,而是有舍入误差的。
console.log(0.1+0.2) // 0.30000000000000004
正是有舍入,所以我们发现 0.1+0.2 并不等于0.3。
如何解决?
Number.EPSILON 是 javaScript 表示的最小精度,这个值就相当于 2 的 -52 次方。
console.log( Number.EPSILON ) // 2.220446049250313e-16
console.log( Number.EPSILON === Math.pow(2, -52) ) //true
引入 Number.EPSILON 目的在于:浮点计算时,设置一个误差范围,如果小于这个值就忽略不计。所以:
function isEqual( a, b ){
if( a-b < Number.EPSILON ){
return true
}else{
return false
}
}
console.log( isEqual( 0.1+0.2, 0.3 ) )
ES6 中新增 class ,它是为了补充 js 中缺少的一些面向对象语言的特性,本质上来说它只是一种语法糖,它的绝大多数功能 ES5 都可以实现,新的 class 写法让对象原型写法更清晰。添加 class 之后,有利于我们更好的组织代码,在 class 中添加方法,其实就是添加到类的原型上。
class 应用:
class Phone{
// 构造函数
constructor( brand, price ){
this.brand = brand;
this.price = price
},
call(){
console.log("可以打电话")
}
}
// 实例化对象
let hw = new Phone( '华为', 999 )
setTimeout 是异步执行函数,js 主线程运行到此函数时,不会等待 setTimeout 中的回调函数,回调函数会被压进消息队列,然后直接向下执行,当执行完当前事件循环的时候,回调函数会在下次事件循环中被执行。
console.log(1)
setTimeout(()=>{
console.log(2)
},0)
console.log(3)
// 运行结果:1 3 2
Promise 本身是同步的立即执行函数,当在执行体中执行 resolve 或 reject 的时候,此时是异步操作,会先执行 then / catch 等,等主栈完成后,才会执行 resolve reject 中的方法。
console.log(1)
var p =new Promise(( resolve, reject )=>{
console.log(2)
resolve(3)
})
p.then((res)=>{
console.log(res)
})
console.log(4)
// 运行结果:1 2 4 3
Async/Await 函数返回的是一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,在执行函数体后面的语句。
await的含义为等待,也就是 async 函数需要等待await后的函数执行完成并且有了返回结果(Promise对象)之后,才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。
async function a1(){
console.log( 1 );
await a2();
console.log( 2 )
}
async function a2(){
console.log( 3 )
}
console.log( 4 );
a1();
console.log( 5 )
// 运行结果 4 1 3 5 2
forEach 是数组的方法,进行遍历数组的。
for…in 不仅可以遍历数组,还可以对象。
for…of 进行遍历数组的。
for…in 与 for… of 遍历对象时,in 使用的是下标,而 of 使用的是 key。
export 命令用于规范模块的对外接口。
import 命令用于输入其他模块提供的功能。
export 对外暴露数据方式有三种:
方式1:分别暴露
export let person = "前端小姐姐"
export function showName(){
console.log( "倩倩" )
}
方式2:统一暴露
let person = "前端小姐姐"
function showName(){
console.log( "倩倩" )
}
export {
person,
showName
}
方式3:默认暴露
export default{
person = "前端小姐姐",
showName: function(){
console.log( "倩倩" )
}
}
import 引入方式有三种:
方式1:通用的导入方式
import * as m from "./src/js/m.js"
console.log( "m",m )
方式2:解构赋值
import { person, showName } from "./src/js/m.js"
// 重名时,可自定义名字
import { person as per, showName } from "./src/js/m.js"
// 针对默认暴露也可以这么写
import { default as m } from "./src/js/m.js"
方式3:简便形式,针对默认暴露
import m from "./src/js/m.js"
应用场景 Set 用于数组重组,Map 用于数据储存。
对于Set:
对于Map:
光说理论是不是都要困了,现在是时候大展拳脚了!看看你对 ES 知识掌握到底怎么样?
new Promise((resolve)=>{
console.log( 1 )
resolve()
}).then(()=>{
console.log( 2 )
new Promise(res=>{
res(1)
}).then(()=>{
console.log( 3 )
new Promise(res=>{
res(1)
}).then(()=>{
console.log( 4 )
})
}).then(()=>{
new Promise(res=>{
res(1)
}).then(()=>{
console.log( 5 )
})
})
}).then(()=>{
console.log( 6 )
})
答案: 1 2 3 6 4 5
name = "单身狗"
setTimeout(()=>{
console.log(this.name) //单身狗
},0)
function Job(){
this.name = "漂亮小姐姐"
setTimeout(()=>{
console.log(`我是天天敲代码的 ${this.name} !`) //漂亮小姐姐
},3000)
}
let j = new Job()
箭头函数没有自己的 this ,它的 this 是继承而来的,默认指向在定义它时所处的对象。
var name = 'window name'
var p1 = {
name:'p1 name',
showName:function(){
console.info(this.name)
}
}
var fn = p1.showName
fn()
p1.showName()
var p2 = {
name:'p2 name',
showName:function(fun){
fun()
}
}
p2.showName(p1.showName)
p2.showName = p1.showName
p2.showName()
/*
运行结果:
window name
p1 name
window name
p2 name
*/
call 和 apply 都是用来改变 this 指向的,它们会立即执行。
ES6 箭头函数的主要特性:
试试下面这个练习,你就知道了。
const obj1 = {
name:'张三',
}
const obj2 = {
name:'李四',
fun2 : function(){ //修改成箭头函数再试试
console.log(this);
}
}
obj2.fun2();
obj2.fun2.call(obj1);
尝试修改成箭头函数,然后再观察结果。
这个问题就留给读到最后,能够坚持学习的人,问问我们自己有什么是我们擅长的?在哪块领域是我们占据竞争优势的?
前端发展百花放,一技未熟百技出。未知何处去下手,关注小编胜百书。
愿你在前端的某一角能够深钻细研,能够拥有自己的竞争优势。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章