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 以跳过第一个参数(并使用默认值)来到达第二个参数。