码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript ES6

❮ 上一节 下一节 ❯

ECMAScript 2015 是 JavaScript 的第二次重大修订。

ECMAScript 2015 也称为 ES6 和 ECMAScript 6。

本章介绍 ES6 最重要的特性。

ES6 的新特性

ES6 的浏览器支持 (2015)

Safari 10 和 Edge 14 是首批完全支持 ES6 的浏览器：

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript 让

这个let关键字允许您声明具有块作用域的变量。

示例

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10
亲自试一试 »

阅读更多关于let在章节中：JavaScript 让。

JavaScript 常量

这个const关键字允许您声明常量（具有常量值的 JavaScript 变量）。

常量与 let 变量类似，只是其值不能更改。

示例

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10
亲自试一试 »

阅读更多关于const在章节中：JavaScript 常量。

箭头功能

箭头函数允许使用简短的语法来编写函数表达式。

你不需要function关键字，return关键字，以及大括号。

示例

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;
亲自试一试 »

箭头函数没有自己的this。它们不太适合定义对象方法。

箭头函数不会被提升。它们必须被定义前他们被使用了。

使用const比使用更安全var，因为函数表达式始终是常量值。

您只能省略return如果函数是单个语句，则包含关键字和大括号。正因为如此，始终保留它们可能是一个好习惯：

示例

const x = (x, y) => { return x * y };
亲自试一试 »

在本章中了解有关箭头函数的更多信息：JavaScript 箭头函数。

扩展 (...) 运算符

... 运算符将可迭代对象（如数组）扩展为更多元素：

示例

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
亲自试一试 »

... 运算符可用于将可迭代扩展为函数调用的更多参数：

示例

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);
亲自试一试 »

For/Of 循环

JavaScriptfor/of语句循环遍历可迭代对象的值。

for/of允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等。

这个for/of循环具有以下语法：

for ( variable of iterable) {
  // code block to be executed
}

多变的- 对于每次迭代，下一个属性的值都会分配给变量。多变的可以声明为const,let， 或者var。

可迭代的- 具有可迭代属性的对象。

循环数组

示例

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}
亲自试一试 »

循环字符串

示例

let language = "JavaScript";
let text = "";

for (let x of language) {
    text += x + " ";
}
亲自试一试 »

在本章中了解更多信息：JavaScript 循环 For/In/Of。

JavaScript 地图

能够使用对象作为键是一个重要的 Map 功能。

示例

const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
亲自试一试 »

在本章中了解有关 Map 对象以及 Map 和 Array 之间的区别的更多信息：JavaScript 地图。

JavaScript 集

示例

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
亲自试一试 »

在本章中了解有关 Set 对象的更多信息：JavaScript 集。

JavaScript 类

JavaScript 类是 JavaScript 对象的模板。

使用关键字class创建一个类。

始终添加一个名为constructor()：

语法

class ClassName {
  constructor() { ... }
}

示例

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

上面的示例创建了一个名为"Car" 的类。

该类有两个初始属性："name" 和 "year"。

JavaScript 类是不是一个东西。

它是一个模板对于 JavaScript 对象。

使用类

当你有一个类时，你可以使用该类来创建对象：

示例

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

亲自试一试 »

在本章中了解有关类的更多信息：JavaScript 类。

JavaScript 承诺

Promise 是一个链接 "Producing Code" 和 "Consuming Code" 的 JavaScript 对象。

"Producing Code" 可能需要一些时间，并且 "Consuming Code" 必须等待结果。

Promise 语法

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

使用 Promise 的示例

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

亲自试一试 »

在本章中了解有关 Promise 的更多信息：JavaScript 承诺。

符号类型

JavaScript 符号是一种原始数据类型，就像数字、字符串或布尔值一样。

它代表一个唯一的"hidden" 标识符，其他代码无法意外访问该标识符。

例如，如果不同的编码人员想要将 person.id 属性添加到属于第三方代码的 person 对象，他们可以混合彼此的值。

使用Symbol()创建唯一标识符，解决了这个问题：

示例

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
亲自试一试 »

笔记

符号总是独一无二的。

如果您创建两个具有相同描述的符号，它们将具有不同的值：

Symbol("id") == Symbol("id"); // false

默认参数值

ES6 允许函数参数有默认值。

示例

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // will return 15
亲自试一试 »

功能 其余参数

剩余参数 (...) 允许函数将不定数量的参数视为数组：

示例

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
亲自试一试 »

字符串.includes()

这个includes()方法返回true如果字符串包含指定值，否则false：

示例

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true
亲自试一试 »

String.startsWith()

这个startsWith()方法返回true如果字符串以指定值开头，否则false：

示例

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true
亲自试一试 »

String.endsWith()

这个endsWith()方法返回true如果字符串以指定值结尾，否则false：

示例

var text = "John Doe";
text.endsWith("Doe")    // Returns true
亲自试一试 »

数组.from()

这个Array.from()方法从任何具有 length 属性的对象或任何可迭代对象返回一个 Array 对象。

示例

从字符串创建数组：

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]
亲自试一试 »

数组键()

这个keys()方法返回一个带有数组键的数组迭代器对象。

示例

创建一个数组迭代器对象，包含数组的键：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}
亲自试一试 »

数组查找()

这个find()方法返回通过测试函数的第一个数组元素的值。

此示例查找（返回 的值）第一个大于 18 的元素：

示例

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试 »

请注意，该函数有 3 个参数：

  • 值
  • 索引
  • 数组本身

数组查找索引()

这个findIndex()方法返回通过测试函数的第一个数组元素的索引。

此示例查找第一个大于 18 的元素的索引：

示例

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试 »

请注意，该函数有 3 个参数：

  • 值
  • 索引
  • 数组本身

新的数学方法

ES6 在 Math 对象中添加了以下方法：

  • Math.trunc()
  • Math.sign()
  • Math.cbrt()
  • Math.log2()
  • Math.log10()

Math.trunc() 方法

Math.trunc(x)返回 x 的整数部分：

示例

Math.trunc(4.9);    // returns 4
Math.trunc(4.7);    // returns 4
Math.trunc(4.4);    // returns 4
Math.trunc(4.2);    // returns 4
Math.trunc(-4.2);    // returns -4
亲自试一试 »

Math.sign() 方法

Math.sign(x)如果 x 为负、空或正则返回：

示例

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1
亲自试一试 »

Math.cbrt() 方法

Math.cbrt(x)返回 x 的立方根：

示例

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5
亲自试一试 »

Math.log2() 方法

Math.log2(x)返回 x 以 2 为底的对数：

示例

Math.log2(2);    // returns 1
亲自试一试 »

Math.log10() 方法

Math.log10(x)返回 x 以 10 为底的对数：

示例

Math.log10(10);    // returns 1
亲自试一试 »

新数字属性

ES6 向 Number 对象添加了以下属性：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

EPSILON 示例

let x = Number.EPSILON;
亲自试一试 »

MIN_SAFE_INTEGER 示例

let x = Number.MIN_SAFE_INTEGER;
亲自试一试 »

MAX_SAFE_INTEGER 示例

let x = Number.MAX_SAFE_INTEGER;
亲自试一试 »

新的数字方法

ES6 向 Number 对象添加了 2 个新方法：

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger() 方法

这个Number.isInteger()方法返回true如果参数是整数。

示例

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false
亲自试一试 »

Number.isSafeInteger() 方法

安全整数是可以精确表示为双精度数的整数。

这个Number.isSafeInteger()方法返回true如果参数是安全整数。

示例

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false
亲自试一试 »

安全整数是来自 -(253- 1) 至 +(253- 1).
这是安全的：9007199254740991。这是不安全的：9007199254740992。

新的全局方法

ES6 添加了 2 个新的全局编号方法：

  • isFinite()
  • isNaN()

isFinite() 方法

全球isFinite()方法返回false如果参数是Infinity或者NaN。

否则返回true：

示例

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true
亲自试一试 »

isNaN() 方法

全球isNaN()方法返回true如果参数是NaN。否则返回false：

示例

isNaN("Hello");       // returns true
亲自试一试 »

对象条目()

示例

创建一个数组迭代器，然后迭代键/值对：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}
亲自试一试 »

这个entries()方法返回一个带有键/值对的数组迭代器对象：

[0，"Banana"]
[1，"Orange"]
[2，"Apple"]
[3，"Mango"]

这个entries()方法不会改变原始数组。

模块

模块以两种不同的方式导入：

从命名导出导入

从文件 person.js 导入命名导出：

import { name, age } from "./person.js";

亲自试一试 »

从默认导出导入

从文件 message.js 导入默认导出：

import message from "./message.js";

亲自试一试 »

了解有关模块的更多信息：JavaScript 模块。


❮ 上一节 下一节 ❯