javascript ES6语法

Posted 2021-05-03

'use strict';

// Default Parameters for Function
const getProduct = (productId = 1000) => console.log(productId);
// Prints out 1000
getProduct();

const getTotal = (price, tax = price * 0.07) => console.log(price + tax);
// Prints out 5.35
getTotal(5);

const generateBaseTax = () => 0.07;
const getTotal2 = (price, tax = price * generateBaseTax()) => {
  console.log(price + tax);
}
getTotal2(5);

'use strict';

//  WITH ARRAYS
let salary = [3200, 5000, 8000];
let [ low, average, high ] = salary;
// Prints out 5000
console.log(average);

let salary2 = [3200, 5000, 8000];
let [ low2, ...remaining ] = salary2;
// Prints out [ 5000, 8000 ]
console.log(remaining);

// WITH OBJECTS
let salary3 = {
  low3: 3000,
  average3: 5000,
  high3: 7000
};
let { low3, average3, high3 } = salary3;
// Prints out 7000
console.log(high3);


let salary4 = {
  low4: 3000,
  average4: 5000,
  high4: 7000
};
let { low4: newLow, average4: newAvg, high4: newHigh } = salary4;
// Prints out 7000
console.log(newHigh);

'use strict';

// Use with strings and arrays
const categories = ['hardware', 'software', 'vaporware'];
for (let category of categories) {
  console.log(category);
}
// Prints out:
// hardware
// software
// vaporware

'use strict';

// Arrow Functions
const getPrice = () => 5.99;
console.log(getPrice());

const getPrice2 = count => count * 4;
console.log(getPrice2(2));

// With Return
const getPrice3 = (count, tax) => {
  let price = count * 4;
  price *= (1 + tax);
  return price;
}
console.log(getPrice3(2, 0.7));

// Returns the context of the code we're running
const invoice = {
  number: 123,
  process: () => console.log(this)
}
// Logs {}
invoice.process();


// Returns the context of the code we're running
const invoice2 = {
  number: 123,
  process: function() {
    return () => console.log(this.number)
  }
}
invoice2.process()();

'use strict';

const price = 5.99, quantity = 30;
const productView = {
  price,
  quantity
};

// Prints out { price: 5.99, quantity: 30 }
console.log(productView);

'use strict';

const showCategories = (productId, ...categories) => {
  console.log(categories);
}
// Displays [ 'search', 'advertising' ]
showCategories(123, 'search', 'advertising');

// Spread Operator ...
const prices = [12, 20, 18];
const maxPrice = Math.max(...prices);
// Logs out 20
console.log(maxPrice);

const prices2 = [12, 20, 18];
const newPrices = [...prices2];
// Logs out [ 12, 20, 18 ]
console.log(newPrices);


const maxCode = Math.max(..."43210");
// Logs out 4 because it breaks down the string
console.log(maxCode);


const codeArray = ["A", ..."BCD", "E"];
// Logs out [ 'A', 'B', 'C', 'D', 'E' ]
console.log(codeArray);

'use strict';

let invoiceNum = '12345';
console.log(`Invoice Number: ${invoiceNum}`);

'use strict';

// CONSTANTS
const CONST = 100;
if (CONST > 0) {
  const CONST = 10;
}

// It will print out 100 because the scope in a closure is
// only scoped to the block.
console.log(CONST);


// Example #1
let productId = 12;
{
  let productId = 2000;
}
// It will print out 12
console.log(productId);


// Example #2
function updateProductId() {
  productId2 = 18;
}
let productId2 = 15;
updateProductId();

// It will print out 18
console.log(productId2);


// Example 3
let productId3 = 42;
for (let productId3 = 0; productId3 < 10; productId3++) {
}

// It will print out 42
console.log(productId3);