ES6
文章平均质量分 88
这里就记录我的成长吧
这个作者很懒,什么都没留下…
展开
-
函数与原型链
一、什么是原型原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。1.1 函数的原型对象 在JavaScript中,我们创建一个函数A( 就是声明一个函数 ), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性prototype 指向了这个对象( 即: prototype的属性的值是这个对象)。这个对象B就是函数A的原型对象,简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A (意思就是说:co原创 2021-11-12 19:15:45 · 392 阅读 · 0 评论 -
JS Proxy(代理)
Proxy概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。var obj = new Proxy({}, { get: function (target, p原创 2021-11-06 17:52:03 · 1835 阅读 · 0 评论 -
JS async 函数
async 函数含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。生成器function* foo() { yield setTimeout(()=>{console.log("第一步耗时操作 开始执行")},1000) yield setTimeout(()=>{console.log("第二步耗时操作 执行中")},2000) yield setTimeout(原创 2021-11-06 17:50:53 · 17185 阅读 · 1 评论 -
Module 的语法
Module 的语法概述历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在原创 2021-11-06 15:36:14 · 332 阅读 · 0 评论 -
JS Promise 对象的理解
为什么要用Promise在实际项目中,有下面应用场景,在手机上浏览电影网站,其中有个海报墙页面,里面有海量的电影节目,如下图所示。考虑到性能和用户体验,启动后,我们需要串行的加载10页数据(每页9张海报),即第一页加载完成后,启动第二页的加载,以此类推。于是不假思索的写下了下面的代码:$(document).ready(function () { //获取第一页数据 $.getJSON("json/poster.json?page=1", function (result) {原创 2021-11-05 20:33:56 · 132 阅读 · 0 评论 -
Iterator 和 for...of 循环
Iterator 和 for…of 循环Iterator(遍历器)的概念JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterato原创 2021-11-05 19:58:10 · 193 阅读 · 0 评论 -
Generator 函数的语法
Generator 函数的语法简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API。Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部原创 2021-11-05 19:56:24 · 140 阅读 · 0 评论 -
Class 的基本语法
Class 的基本语法简介类的由来JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。function Person(name,age) { this.name = name; this.age = age;}Person.prototype.sayHello = function(){ console.log(`i am ${this.name},今年${this.age}`)}var p = new Person("张全蛋",4原创 2021-11-05 19:54:51 · 352 阅读 · 0 评论 -
原型链与继承
一、什么是原型原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。1.1 函数的原型对象 在JavaScript中,我们创建一个函数A( 就是声明一个函数 ), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性prototype 指向了这个对象( 即: prototype的属性的值是这个对象)。这个对象B就是函数A的原型对象,简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A (意思就是说:co原创 2021-11-05 19:53:22 · 202 阅读 · 0 评论 -
对象的扩展
对象的扩展对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级,本章介绍数据结构本身的改变,下一章介绍Object对象的新增方法。属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面代码中,变量foo直接写在大括号里面。这时,属原创 2021-11-05 19:45:51 · 259 阅读 · 0 评论 -
数组的扩展
数组的扩展扩展运算符含义扩展运算符(spread)是三个点(...)。将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符主要用于函数调用。function push(array,原创 2021-11-05 19:43:21 · 130 阅读 · 0 评论 -
函数的扩展
函数的扩展函数参数的默认值基本用法ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello World上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World。原创 2021-11-05 19:42:14 · 86 阅读 · 0 评论 -
函数的扩展# Set 和 Map 数据结构
Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。Set函原创 2021-11-05 19:41:05 · 56 阅读 · 0 评论 -
正则表达式扩展
字符串的正则方法ES6 出现之前,字符串对象共有 4 个方法,可以使用正则表达式:match()、replace()、search()和split()。ES6 将这 4 个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上。String.prototype.match 调用 RegExp.prototype[Symbol.match]String.prototype.replace 调用 RegExp.prototype[Symbol.rep原创 2021-11-05 19:36:09 · 143 阅读 · 0 评论 -
字符串的扩展
字符串的扩展ES6 对字符串的改造和增强字符串的遍历器接口ES6 为字符串添加了遍历器接口),使得字符串可以被for...of循环遍历。for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o"模板字符串传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。$('#result').append( 'There are <b>' + ba原创 2021-10-19 17:37:57 · 139 阅读 · 0 评论 -
Symbol
Symbol概述ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(Strin原创 2021-10-19 17:35:48 · 69 阅读 · 0 评论 -
变量的解构赋值
变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值数组的解构赋值基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种原创 2021-10-19 14:44:43 · 83 阅读 · 0 评论 -
let 和 const 命令
let 和 const 命令let 命令块级作用域const 命令顶层对象的属性1.let 命令基本用法ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,原创 2021-10-19 14:41:55 · 67 阅读 · 0 评论 -
ES6是什么
ES6是什么ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。现在大部分的编写一般都是ES3.1语法,比如jQuery的语法就比较倾向ES3,但是现在的主流框架Vue.js和React.js的语法,就大量用的都是ES6语法,node全部都是ES6的语法,还有微信小程序也是ES6的语法。ES6的特性比较多,在 ES5 发布近原创 2021-10-19 11:59:20 · 3204 阅读 · 0 评论