let
ES6新增的用于声明变脸的关键字
1)let声明的变量不允许重复声明
var a = 1;
var a = 2;
console.log(a); //输出 2
let b = 1;
let b = 2; //报错
console.log(b) ;
2)let声明的变量存在块级作用域
function f1() {
let n = 5;
if (true) {
let n = 10;
console.log(n); //输出 10
}
console.log(n); // 输出 5
}
注:上面的两个代码块中拥有各自的变量n,不会相互影响。
/ 使用 var /
var printNumTwo;
for (var i = 0; i < 3; i++) {
if(i === 2){
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 3
/ 使用 let /
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
3)let声明不存在变量提升
变量提升:在使用var声明变量时,变量可以放在声明之前使用,只不过使用还没有声明的变量时,其值为undefined。
但是使用let声明变量时,如果使用放在声明之前则会报错。
console.log(a); //输出 undefined
var a = 1;
console.log(b); //报错
let b = 1;
const
const 声明的变量,不允许重复声明,有块作用域且是只读的
注:const实际保证的,并不是变量的值不得改动,而是变量指向的内存地址不得改动。即能保证简单类型的数据(数值、字符串、布尔值)等同于常量;对于复合类型(主要是对象和数组),变量指向的内存地址保存的只是指针,const只能保证指针固定,指向的数据结构不能保证不变
"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // 报错
s[2] = 45; // 正常工作
console.log(s); // returns [5, 6, 45]
Object.freeze
Object.freeze 保证复合类型的只读性
let person = {
name:"XiaoMing",
review:"yes"
};
Object.freeze(person);
person.review = "no"; //这条命令将会被忽略,因为此时person对象是只读的
person.newProp = "age"; // 这条命令也将会被忽略
console.log(obj);
// { name: "XiaoMing", review:"yes"}
箭头函数(Arrow Functions) 类似lamb
旧标准:
const myFunc = function() {
const myVar = "value";
return myVar;
}
FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
使用箭头函数;
const myFunc = () => {
const myVar = "value";
return myVar;
}
简化方式:
const myFunc = () => "value"
// 将输入的数乘以2,并返回
const doubler = (item) => item * 2;
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
函数默认值
function greeting(name = "Anonymous") {
return "Hello " + name;
}
console.log(greeting("John")); // 输出 Hello John
console.log(greeting()); // 输出 Hello Anonymous
rest 参数(Rest Operator)
形式为:….变量名
。
通过使用rest参数,可以向函数传入不同数量的参数
注:rest参数之后不能再有其他参数,否则程序报错
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // 传入三个参数
console.log(howMany("string", null, [1, 2, 3], { })); // 传入四个参数
注:
rest参数中的变量代表一个数组,所有数组特有的方法都可以用于这个变量
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
console.log(a) //输出 [1, 2, 3]
扩展运算符 (Spread Operator)
扩展运算符其实就是rest参数中的那三个点…,其作用是将数组打散
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
求数组最大值:
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89
注:Math.max()方法只接受由逗号分隔的参数序列,比如Math.max(1, 2, 3),所以我们需要apply()进行转化
解构赋值(Destructuring Assignment)
1)变量与对象简单映射
保持赋值的变量与对象属性名称一致
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
赋值变量与对象属性不一致
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54
2)对嵌套对象解构赋值
const a = {
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
3)获取数组特定元素
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5
4)搭配扩展运算符使用
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
5)将对象当参数传入
不用讲整个对象都传入函数,只传入需要的部分
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData;
// 函数操作
}
const profileUpdate = ({ name, age, nationality, location }) => {
// 函数操作
}
模板字符串 (Template String)
ES6中引入了一种更强大的字符串写法,被称为模板字符串,用反引号( ` )标识
const person = {
name: "Zodiac Hasbro",
age: 56
};
//用模板字符串方式书写的字符串,并将其赋给greeting变量
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
console.log(greeting);
// 输出:
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.
注:
- 模板字符串的标识符是反引号(`) 而不是单引号(’)
- 输出的字符串是多行的,也不需要\n了
- 语法${}可以用来获取变量,化简了之前用+来进行字符串拼接的写法
class
class关键字只是语法糖
创建构造函数
var Person = function(name){
this.name = name;
}
var person1 = new Person('Jim');
class Person {
constructor(name){
this.name = name;
}
}
const person1 = new Person('Jim');
注:在由class定义的对象中,添加了构造函数constructor(),构造函数在new被调用时唤醒,创建一个新的对象。
get/set
在由class定义的对象中,存值函数和取值函数现在有了自己的关键字get和set
class Book {
constructor(author) {
this._author = author;
}
// getter
get writer(){
return this._author;
}
// setter
set writer(updatedAuthor){
this._author = updatedAuthor;
}
}
const lol = new Book('anonymous');
console.log(lol.writer); // anonymous
lol.writer = 'wut';
console.log(lol.writer); // wut
注:调用存值和取值函数的方式是lol.writer