(三)ES6基础语法。。。freecodecamp笔记
ECMAScript6
ECMAScript 是 JavaScript 的标准化版本,它旨在统一语言的规范和功能。所有主流的浏览器或者 Javascript 的运行环境都支持这个规范,因此 ECMAScript 和 JavaScript 的术语是通用的。在2015年,ECMAScript 发布了被称为 ECMAScript 6 (ES6) 的最新版本。
- 箭头函数
- 类
- 模块
- Promises 对象
- 异步生成器 Generators
let
以及const
语法
一、探索var和let关键字之间的差异
- 使用
var
关键字来声明变量,会出现重复声明导致变量被覆盖却不会报错的问题。 - 当使用
let
的时候,同一名字的变量只能被声明一次。(和java一样,存在全局变量可以创建同名的局部变量) - 写明
"use strict"
。这代表着开启了严格模式,在函数内部声明是局部作用域 (只在函数内使用严格模式),外部则是全局作用域 - 使用
var
关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量。(var是可变的,同一块内存空间) - 如果你在代码块、语句或表达式中使用关键字
let
声明变量,这个变量的作用域就被限制在当前的代码块,语句或表达式之中。(let是不可变的)
二、用 const 关键字声明只读变量
const
拥有let
的所有优点,所不同的是,通过const
声明的变量是只读的。这意味着通过const
声明的变量只能被赋值一次,而不能被再次赋值。- 你应该使用
const
关键字来对所有不打算再次赋值的变量进行声明。一个最佳实践是对所有常量的命名采用全大写字母,并在单词之间使用下划线进行分隔。 - 对象(包括数组和函数)在使用
const
声明的时候依然是可变的。使用const
来声明只会保证它的标识不会被重新赋值。(你可以将const声明的变量指向一个对象,更改对象中的数据是可行的,但是不能建该变量指向另一个对象)
三、防止对象改变
- const并不会使得对象中的数据不能够改变,JavaScript 提供了一个函数
Object.freeze
来防止数据改变。(你不能再对它的属性再进行增、删、改的操作。出现增删改操作会被忽略,但不会报错)
Object.freeze(MATH_CONSTANTS);
四、使用箭头函数编写简洁的匿名函数
我们会经常遇到不需要给函数命名的情况,如下,代码不需要复用
const myFunc = function() {
const myVar = "value";
return myVar;
}
ES6 提供了其他写匿名函数的方式的语法糖,箭头函数
const myFunc = () => {
const myVar = "value";
return myVar;
}
当不需要函数体,只返回一个值的时候,箭头函数允许你省略return
关键字和外面的大括号。
const myFunc= () => "value"
给箭头函数,添加参数
const doubler = (item) => item * 2;
当箭头函数被用到需要用函数作为参数的高阶函数中时会很好用。
FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
//简写之后
//filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
demo
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
// 在这行以下修改代码
const squaredIntegers = arr.filter((num)=>num>0&&num%parseInt(num)===0).map((num)=>Math.pow(num,2));
// 在这行以上修改代码
return squaredIntegers;
};
// 测试你的代码
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
五、设置函数的默认参数
ES6 里允许给函数传入默认参数,来构建更加灵活的函数。
当参数没有被指定的时候,默认参数起作用,例子:
function greeting(name = "Anonymous") {
return "Hello " + name;
}
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous
六、一个变量来接受多个参数的函数
ES6 推出了用于函数参数的 rest 操作符帮助我们创建更加灵活的函数。你可以创建有一个变量来接受多个参数的函数。这些参数被储存在一个可以在函数内部读取的数组中。
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // 输出:You have passed 3 arguments.
console.log(howMany("string", null, [1, 2, 3], { })); // 输出:You have passed 4 arguments.
七、使用 spread 运算符展开数组项
ES6 允许我们使用 展开操作符 来展开数组,以及需要多个参数或元素的表达式。
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89
let arr2 = [...arr1];
...arr
返回了一个“打开”的数组。或者说它 展开 了数组。
然而,展开操作符只能够在函数的参数中,或者数组之中使用
八、使用解构赋值从对象中分配变量
普通ES5代码
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
ES6解构语法
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
我们可以将 嵌套的对象解构到变量中。
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
九:使用解构赋值从数组中分配变量
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
变量a
以及b
分别被数组的第一、第二个元素赋值。
我们甚至能在数组解构中使用逗号分隔符,来获取任意一个想要的值:
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5
十、使用解构赋值配合 rest 操作符来重新分配数组元素
在解构数组的某些情况下,我们可能希望将剩下的元素放进另一个数组里面。
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
十一、使用解构赋值将对象作为函数的参数传递
在某些情况下,你可以在函数的参数里直接解构对象。
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData;
// 对这些变量执行某些操作
}
这样的操作也可以直接在参数里完成:注意参数大括号
const profileUpdate = ({ name, age, nationality, location }) => {
/* 对这些参数执行某些操作 */
}
十二、使用模板字面量创建字符串
模板字符串是 ES6 的另外一项新的功能。这是一种可以轻松构建复杂字符串的方法。
const person = {
name: "Zodiac Hasbro",
age: 56
};
// string interpolation
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.
十三、使用简单字段编写简洁的对象字面量声明
const getMousePosition = (x, y) => ({
x: x,
y: y
});
ES6 提供了一个语法糖,消除了类似x: x
这种冗余的写法.你可以仅仅只写一次x,解释器会自动将其转换成x: x。
const getMousePosition = (x, y) => ({ x, y });
十四、用 ES6 编写简洁的函数声明
在 ES5 中,当我们需要在对象中定义一个函数的时候,我们必须如下面这般使用function
关键字:
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
在 ES6 语法的对象中定义函数的时候,你可以完全删除function
关键字和冒号。请看以下例子:
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
十五、使用 class 语法定义构造函数
在 ES5 里面,我们通常会定义一个构造函数,然后使用 new
关键字来实例化一个对象:
var SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');
class
的语法只是简单地替换了构造函数的写法:constructor
class SpaceShuttle {
constructor(targetPlanet){
this.targetPlanet = targetPlanet;
}
}
const zeus = new SpaceShuttle('Jupiter');
十六、使用 getter 和 setter 来控制对象的访问
function makeClass() {
"use strict";
class Thermostat{
constructor(farenheit){
this.farenheit= 5/9 * (farenheit - 32);
}
get temperature(){
return this.farenheit;
}
set temperature(farenheit){
this.farenheit=farenheit;
}
}
return Thermostat;
}
const Thermostat = makeClass();
const thermos = new Thermostat(76); // 使用华氏温度来初始化
let temp = thermos.temperature; // 摄氏温度24.44度
thermos.temperature = 26;
temp = thermos.temperature; // 摄氏温度26度
十七、了解 import 和 require 之间的差异
ES6 给我们提供了import
这个便利的工具。通过它,我们能够从外部的文件或者模块中选择我们需要的部分进行引入。
如math_array_functions
拥有大概20个函数,但是我只需要countItems
这一个函数在我当前的文件里
import { countItems } from "math_array_functions"
在大括号里的函数名的两侧加上空格是一个最佳实践——这可以帮助我们轻松的阅读import
语句。
十八、用 export 来重用(导出)代码块
const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } //如何导出函数。
export const foo = "bar"; //如何导出变量。
----------------------------------------
const foo = "bar";
export { capitalizeString, foo }//一行导出
十九、用 * 从文件中导入所有内容
import * as myMathModule from "math_functions";
myMathModule.add(2,3);
myMathModule.subtract(5,3);
你可以在import * as
之后添加任意的名称。这个方法接收到的值是一个对象,你可以使用点表示法来获取对象里具体的值。
二十、用 export default 创建一个默认导出
你还需要知道另外一种被称为默认导出的export
的语法。在文件中只有一个值需要导出的时候,你通常会使用这种语法。它也常常用于给文件或者模块创建返回值。
export default function add(x,y) {
return x + y;
}
二十一、导入一个默认的导出
import add from "math_functions";
add(5,4); //将会返回 9
这个语法只有一处不同的地方 —— 被导入的add
值,并没有被花括号{}
所包围。与导出值的方法不同,导入默认导出的写法仅仅只是简单的将变量名写在import
之后。