ES6部分知识点总结
注:本文通过yck前端面试小册学习整理而得,记录下来供自己查阅
1.var 变量提升
使用var声明的变量,声明会被提升到作用域的顶部
举几个例子:
eg1:
console.log(a) // undefined
var a = 1
可以看做这样
var a
console.log(a)
a=1
eg2:
var a = 10
var a
console.log(a) //
可以看作
var a;
var a;
a=10;
console.log(a)
eg3,函数声明也会提升,函数提升会把整个函数挪到作用域顶部:
console.log(a) // ƒ a() {}
var a = 1
function a() {}
看作:
var a;
function a() {}
console.log(a) // ƒ a() {}
a = 1
2.var,let,const对比
1.在全局作用域下,var声明的变量,会挂载到window上,其他二者不会
2.三者都存在提升,但是let,const的提升和var不同:虽然变量在编译的环节中就被告知在这块作用域中可以访问,但是访问是受限制的(形成暂时性死区):
所以let const必须先声明后使用
var a = 1;
function test1(){
console.log(a);
} function test2(){
console.log(a);
let a; // 执行到上一步时就已经知道该作用域内有a,所以不会再往外层作用域找,但是形成了暂时性死区,这里的a无法访问
} test1() //
test2() // error, a is undefined
3.let
和 const
作用基本一致,但是后者声明的变量不能再次赋值
3.模块化
3.1为什么要模块化?
1、解决命名冲突
2、易于复用
3、增强可维护性
3.2实现模块化的方法有哪些?各有什么特点?
1、立即执行函数
通过函数作用域解决了命名冲突和污染全局作用域的问题
return出对外接口
(function(val){
function aaaa (){}
return {
a: aaaa
}
})(value)
2.CMD和AMD
// AMD 异步加载模块
define(['./a', './b'], function(a, b) {
// 加载模块完毕可以使用
a.do()
b.do()
})
// CMD
define(function(require, exports, module) {
// 加载模块
// 可以把 require 写在函数体的任意地方实现延迟加载
var a = require('./a')
a.doSomething()
})
3.CommonJS 仍在广泛使用
关键字 require module.exports
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1 // b.js
var module = require('./a.js')
module.a // -> log 1
4.ES Module
// 导出模块 API
export default function() {} // a.js 整块导出
export function b() {} // b.js 导出多个部分,每块有自己的名字 // 引入模块 API
import X from './a.js'
import { b } from './b.js'
4.Proxy
let proxy = new Proxy(target, handler)
拦截,代理。用于自定义对象中的操作
vue3.0中用Proxy来代替原有的Object.defineProperty来实现数据响应式
简版例子
// 用Reflect上的静态方法确保原有的set,get行为,用setBind, getLogger部署额外的监听功能
let onWatch = (obj, setBind, getLogger) => {
let handler = {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver)
},
set(target, property, value, receiver) {
setBind(value, property)
return Reflect.set(target, property, value)
}
}
return new Proxy(obj, handler)
} let obj = { a: 1 }
let p = onWatch(
obj,
(v, property) => {
console.log(`监听到属性${property}改变为${v}`)
},
(target, property) => {
console.log(`'${property}' = ${target[property]}`)
}
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2
5.数组方法map, filter, reduce
map:生成新数组。遍历原数组,将原数组的每个元素拿出来做出一些变换后,放入新数组并返回
filter:生成新数组。遍历原数组时,将返回值为true的元素放入新数组,并返回。用于删除一些不需要的元素
它们都接收三个参数:当前元素,索引,原数组
reduce:累加器
const arr = [1, 2, 3]
const sum = arr.reduce((acc, current,index,arr) => acc + current, 0)
console.log(sum) //
const reduceArray = arr.reduce((acc, current) => {
acc.push(current * 2)
return acc
}, [])
console.log(mapArray, reduceArray) // [2, 4, 6]
reduce接收两个参数:回调函数和初始值
回调函数有4个参数:累计值(不限数据类型),当前元素,当前索引,原数组
ES6部分知识点总结的更多相关文章
- ES6重点知识点总结(2)
ES6重点知识点总结(2) call和apply的作用是什么?区别是什么? call和apply的功能基本相同,都是实现继承或者转换对象指针的作用: 唯一不通的是前者参数是罗列出来的,后者是存到数组中 ...
- ES6面试 知识点汇总(全)
近期在复习ES6,针对ES6新的知识点,以问答形式整理一个全面知识和问题汇总.(全干货,适合对ES6有一定理解的同学复习,以及ES6面试.) 一.问:ES6是什么? 答: ES6是新一代的JS语言标准 ...
- ES6 常用知识点总结
ES6常用知识总结 之前总结了es5中js的一些知识点.这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家.内容还是es6主要的知识点,基本没有 ...
- ES6常用知识点小结
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...
- es6 总结知识点
1. let 和 const 只在代码块中有效 {} js块级作用域. const 定义的对象是可以改变其属性的 const a =[], b={} ; a.push(1); b.a=1; / ...
- ES6常用知识点
一.变量 var:定义的变量有时候会成为全局变量 let:定义的变量严格,只在代码块内有效 const:声明的变量是常量,不能被修改 二.数据类型 字符串 @定义:~字符串定义标记,支持换行. #常 ...
- JavaScript易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JavaScript 易错知识点整理
本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...
- es6 module + webpack
其实在之前本人就看了 es6 里面的一部分内容,当然是阮一峰大神的 ECMAScript 6 入门. 最近闲来无事又来看下,其中 Module 的语法 这章时候,用里面代码跑的时候,理所当然的报错 S ...
随机推荐
- Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- 实战项目中Java heap space错误的解决
部标GPS通讯系统在上线之后,经过不断调试,终于稳定运行一段时间,后来又遇到了Java heap space错误异常!日志如下: 说明系统中有未释放的对象.如何找出这些未释放对象以及监控JVM堆内存, ...
- Eclipse编写代码时设置属于自己的注释
翻看硬盘文件,偶然发现以前存的这么一个小操作,给大家分享一下 1.打开Eclipse,按照以下步骤进行设置: Window -->Preferences->Java->Editor- ...
- Java多线程——中断机制
前言:在Java多线程中,中断一直围绕着我们,当我们阅读各种关于Java多线程的资料.书籍时,“中断”一词总是会出现,笔者对其的理解也是朦朦胧胧,因此非常有必要搞清楚Java多线程的中断机制. 1.J ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- 第五章:Realm
一,UserRealm 1,UserRealm父类AuthorizingRealm将获取Subject相关信息分成两步: 1.1,获取身份验证信息(doGetAuthenticationInfo): ...
- Django学习笔记之表单验证
表单概述 HTML中的表单 单纯从前端的html来说,表单是用来提交数据给服务器的,不管后台的服务器用的是Django还是PHP语言还是其他语言.只要把input标签放在form标签中,然后再添加一个 ...
- 使用Fabric Node SDK进行Invoke和Query
前面的文章都是在讲解Fabric网络的搭建和ChainCode的开发,那么在ChainCode开发完毕后,我们就需要使用Fabric SDK做应用程序的开发了.官方虽然提供了Node.JS,Java, ...
- 三:OVS+GRE之完整网络流程
知识点一:linux网桥提供安全组 知识点二:每新建一个网络,在网络节点都会新建一个namespace,只要为该网络建立子网,那么该namespace里就新增dhcp来为该子网分配ip,也可以为该网络 ...
- iOS开发基础-序列帧动画之Tom猫
新建一个Single View Application,向该工程中导入Tom猫的图片资源,本示例演示Tom猫喝牛奶的动作.图片的名字为 drink_00.jpg.drink_01.jpg.....dr ...