ES6语法


const 与 let 变量

let与const声明的变量解决了这种问题,因为他们是块级作用域, 在代码块(用{}表示)中使用let或const声明变量, 该变量会陷入暂时性死区直到该变量的声明被处理.

关于使用let与const规则:

使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明

使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.

模板字面量

在ES6之前,将字符串连接到一起的方法是+或者concat()方法,

模板字面量本质上是包含嵌入式表达式的字符串字面量.

模板字面量用倒引号( `` )(而不是单引号( '' )或双引号( "" ))表示,可以包含用${expression}表示的占位符

解构

在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量

[]表示被解构的数组,x,y,z表示要将数组中的值存储在其中的变量, 在解构数组是, 还可以忽略值, 例如const[x,,z]=point,忽略y坐标.

使用和所分配的变量名称相同的名称初始化对象时如果属性名称和所分配的变量名称一样,那么就可以从对象属性中删掉这些重复的变量名称。

简写方法的名称:

for...of循环

for...of循环是最新添加到 JavaScript 循环系列中的循环。

它结合了其兄弟循环形式for循环和for...in循环的优势,可以循环任何可迭代(也就是遵守可迭代协议)类型的数据。默认情况下,包含以下数据类型:String、Array、Map和Set,注意不包含Object数据类型(即{})。默认情况下,对象不可迭代

for循环

constdigits=[0,1,2,3,4,5,6,7,8,9];for(let i=0; i<digits.length ; i++){console.log(digits[i]);}

for循环的最大缺点是需要跟踪计数器和退出条件。

虽然for循环在循环数组时的确具有优势,但是某些数据结构不是数组,因此并非始终适合使用 loop 循环。

for...in循环

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constindexindigits){console.log(digits[index]);}

依然需要使用 index 来访问数组的值

当你需要向数组中添加额外的方法(或另一个对象)时,for...in循环会带来很大的麻烦。因为for...in循环循环访问所有可枚举的属性,意味着如果向数组的原型中添加任何其他属性,这些属性也会出现在循环中。

forEach 循环 是另一种形式的 JavaScript 循环。但是,forEach() 实际上是数组方法,因此只能用在数组中。也无法停止或退出 forEach 循环。如果希望你的循环中出现这种行为,则需要使用基本的 for 循环。

for...of循环

for...of循环用于循环访问任何可迭代的数据类型。

for...of循环的编写方式和for...in循环的基本一样,只是将in替换为of,可以忽略索引。

constdigits=[0,1,2,3,4,5,6,7,8,9];for(constdigitofdigits){console.log(digit);}

建议使用复数对象名称来表示多个值的集合。这样,循环该集合时,可以使用名称的单数版本来表示集合中的单个值。例如,for (const button of buttons) {…}。

for...of循环还具有其他优势,解决了 for 和 for...in 循环的不足之处。你可以随时停止或退出 for...of 循环。

for(constdigitofdigits){if(digit%2===0){continue;}console.log(digit);}

不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。

展开运算符

展开运算符

(用三个连续的点 (...) 表示)是 ES6 中的新概念,使你能够将字面量对象展开为多个元素

展开运算符的一个用途是结合数组。

如果你需要结合多个数组,在有展开运算符之前,必须使用Array的concat()方法。

使用展开符来结合数组

剩余参数(可变参数)

使用展开运算符将数组展开为多个元素, 使用剩余参数可以将多个元素绑定到一个数组中.

剩余参数也用三个连续的点 (...) 表示,使你能够将不定数量的元素表示为数组.

用途1: 将变量赋数组值时:

用途2: 可变参数函数

对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:

ES6箭头函数

ES6之前,使用普通函数把其中每个名字转换为大写形式:

箭头函数表示:

constupperizedNames=['Farrin','Kagure','Asser'].map(name=>name.toUpperCase());

普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用,包括:

存储在变量中,

当做参数传递给函数,

存储在对象的属性中。

如果函数的参数只有一个,不需要使用()包起来,但是只有一个或者多个, 则必须需要将参数列表放在圆括号内

一般箭头函数都只有一个表达式作为函数主题:

这种函数表达式形式称为简写主体语法:

在函数主体周围没有花括号,

自动返回表达式

但是如果箭头函数的主体内需要多行代码, 则需要使用常规主体语法:

它将函数主体放在花括号内

需要使用 return 语句来返回内容。

javascript标准函数this

new 对象

sundae这个构造函数内的this的值是实例对象, 因为他使用new被调用.

指定的对象

函数使用call/apply被调用,this的值指向指定的obj2,因为call()第一个参数明确设置this的指向

上下`文对象

函数是对象的方法, this指向就是那个对象,此处this就是指向data.

全局对象或 undefined

此处是this指向全局对象,在严格模式下,指向undefined.

javascript中this是很复杂的概念, 要详细判断this,请参考this豁然开朗

箭头函数和this

对于普通函数, this的值基于函数如何被调用, 对于箭头函数,this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的.

传递给setTimeout()的函数被调用时没用到new、call()或apply(),也没用到上下文对象。意味着函数内的this的值是全局对象,不是dessert对象。实际上发生的情况是,创建了新的 scoops 变量(默认值为undefined),然后递增(undefined + 1结果为NaN);

解决此问题的方式之一是使用闭包(closure):

greet() 函数中混乱的前两行的作用是什么?它们的作用是当所需的参数未提供时,为函数提供默认的值。但是看起来很麻烦, ES6引入一种新的方式创建默认值, 他叫默认函数参数:

默认值与解构

默认值与解构数组

函数预期传入的是数组。它通过解构将数组中的第一项设为 width,第二项设为 height。如果数组为空,或者只有一项,那么就会使用默认参数,并将缺失的参数设为默认值 5。

出现错误,因为createGrid()预期传入的是数组,然后对其进行解构。因为函数被调用时没有传入数组,所以出现问题。但是,我们可以使用默认的函数参数!

默认值与解构函数

就像使用数组默认值解构数组一样,函数可以让对象成为一个默认参数,并使用对象解构:

数组默认值与对象默认值

默认函数参数只是个简单的添加内容,但是却带来很多便利!与数组默认值相比,对象默认值具备的一个优势是能够处理跳过的选项。看看下面的代码:

在createSundae()函数使用对象默认值进行解构时,如果你想使用scoops的默认值,但是更改toppings,那么只需使用 toppings 传入一个对象:

将上述示例与使用数组默认值进行解构的同一函数相对比。

对于这个函数,如果想使用 scoops 的默认数量,但是更改 toppings,则必须以这种奇怪的方式调用你的函数:

因为数组是基于位置的,我们需要传入 undefined 以跳过第一个参数(并使用默认值)来到达第二个参数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • #Node课程大纲V10(一周) ##目录 *1day -基本介绍 -环境配置(nodenvm,cnpm) -RE...
    lint_b7d1阅读 230评论 0 0
  • ##**理解对象**## --- ###**属性类型** > JavaScript中有两种属性类型 分别是 数据属...
    nullunde阅读 368评论 0 0
  • [toc] ##1、基础知识>ECMAScript(ES):规定了JS的一些基础核心的知识(变量、数据类型、语法规...
    Bazinga2019阅读 203评论 0 0
  • 最常用的ES6特性 let, const, class, extends, super, arrow functi...
    ldlecit阅读 176评论 0 0
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,866评论 16 22

友情链接更多精彩内容