JS ES6
2021-01-05 20:29
标签：还需要 new 结束 引号 efault 默认 fun timeout 抛出异常 跟大多数语言一样，形参可以有默认值。 还可以与解构赋值一起使用。 当然生成器也可以进行传参，而且还可以给yield传参数。 可迭代对象，可以使用 for of 进行遍历。 for of 是直接遍历后的值，for in 返回的是索引。 如果你不想一次性的遍历完，你可使用 next() 。生成器本身也是迭代器所以自带next () 静态方法属于类，而不属于实例化对象。 ES5 ES6 demo.js html.js 分别暴露 统一暴露 默认暴露 JS ES6 标签：还需要 new 结束 引号 efault 默认 fun timeout 抛出异常 原文地址：https://www.cnblogs.com/py-peng/p/13544367.htmllet
作用：
特性：
const
作用：
特性：
模板字符串
语法：
作用：
快速使用：
let name = "SPC"
let ele = `
`
console.log(ele)
解构赋值
数组的解构
const STUDENTS = ["小明", "小红", "小李"]
let [ming, hong, li] = STUDENTS
console.log(ming, hong)
对象的解构
const Dog = {
name: "旺财",
age: 6,
play: function () {
console.log("play football")
}
}
let {name, age, play} = Dog
console.log(name, age)
play()
简化对象写法
作用：
快速使用：
let name = "SPC"
let age = 18
let person = {
name,
age,
tip(){
return "这是一个简化的写法"
}
}
箭头函数
作用：
特征：
语法：
fn = () => {}
快速使用：
let add = (num) => {
return num + num
}
console.log(add(1))
省略写法：
let add = num => num + num
console.log(add(1))函数形参默认值
function person(name, age, gender="male") {
console.log(name)
console.log(age)
console.log(gender)
}
person("kidd", 18)
function person({name, age, gender}) {
console.log(name)
console.log(age)
console.log(gender)
}
const info = {
name: "kidd",
age: 18,
gender:"male"
}
person(info)
函数无限传参
快速使用：
function student(...args) {
console.log(args.length) // 4
console.log(args) // ["小明", "小红", "小军", "小李"]
}
student(...["小明", "小红", "小军"], "小李")
生成器
function * gen() { // 函数后加*,表示创建生成器
yield "Hello js"
yield "Hello world"
}
let generator = gen()
for(let g of generator){
console.log(g)
}
function * gen(...arg) {
console.log(arg)
let first = yield "1"
console.log(first)
let second = yield "2"
console.log(second)
}
let iter = gen(...["Hello Js", "Hello World"])
console.log(iter.next("A").value) // 如果第一次就给的next()传值，不会有任何效果，因为它并不知道把值传给那个yield
console.log(iter.next("B").value)
console.log(iter.next("C").value)
迭代器
可迭代对象：
let songs = ["勿忘心安", "最初的梦想", "你曾是少年"]
for (let song of songs){
console.log(song)
}
let songs = ["勿忘心安", "最初的梦想", "你曾是少年"]
let iter = songs[Symbol.iterator]() // 生成器对象
console.log(iter.next()) // 勿忘心安
console.log(iter.next()) // 最初的梦想
console.log(iter.next()) // 你曾是少年
console.log(iter.next()) // undefined
Promise
作用：
特征：
快速使用：
let p = new Promise((resolve, reject) => {
setTimeout(function () {
let random = Math.floor(Math.random() * 2)
if (random){
let data = "数据读取成功"
resolve(data) // 该方法表示成功
}else {
let data = "数据读取失败"
reject(data) // 该方法表示失败
}
}, 2000)
})
p.then(value => { // value 成功后的结果
console.log(value)
}, reason => { // reason 失败后的通知
console.error(reason)
})
then() 方法
const p = new Promise((resolve, reject) => {
resolve("第一次成功")
})
// 因为没写失败，then 也可以不接受失败值
let result = p.then(value => {
console.log(value)
return new Promise((resolve, reject) => {
resolve("第二次成功")
})
}).then(value => {
console.log(value)
return new Promise((resolve, reject) => {
reject("出错了！")
})
}).then(value => {}, reason => {
throw reason// 抛出异常
})
console.log(result) // 最终导致失败
Set
作用：
快速使用：
let studentID = new Set([1, 2, 3, 1])
for (let i of studentID){
console.log(i)
}
属性和方法：
let studentID = new Set([1, 2, 3, 1])
studentID.size // 数量
studentID.has(2) // 该值是否存在集合中
studentID.add(4) // 添加(只能单个加)
studentID.delete(4) // 删除(只能单个删除)
studentID.clear() // 清空集合
console.log(studentID)
实例：
let arr1 = new Set([1,2,3,3])
let arr2 = new Set([3,4,5,5])
// 交集
var result1 = [...arr1].filter(value => arr2.has(value))
console.log(result1) // [3]
// 并集
var result2 = [...new Set([...arr1, ...arr2])]
console.log(result2) // [1, 2, 3, 4, 5]
// 差集
var result3 = [...arr1].filter(value => !arr2.has(value))
console.log(result3) // [1, 2]
Class
作用：
快速使用：
class Phone{
// 在 constructor 中写初始化
constructor(brand, price) {
this.brand = brand
this.price = price
}
// 必须使用该语法
introduce(){
console.log(`品牌：${this.brand} 价格：${this.price}`)
}
}
XiaoMi = new Phone("小米", 3999)
XiaoMi.introduce()
静态方法：
class Phone{
static brand = "小米"
}
XiaoMi = new Phone()
console.log(XiaoMi.brand) // undefined
console.log(Phone.brand) // 小米
继承
function Phone(brand, price) {
this.brand = brand
this.price =price
}
Phone.prototype.call = function () {
console.log("我可以打电话了！")
}
function smartPhone(brand, price, color) {
this.color = color
Phone.call(this, brand, price)
}
smartPhone.prototype = new Phone
smartPhone.prototype.play = function () {
console.log("我可以玩游戏了")
}
xiaomi = new smartPhone("小米", 3999, "黑色")
console.log(xiaomi)
xiaomi.call()
xiaomi.play()
class Phone{
constructor(brand, price){
this.brand = brand
this.price = price
}
call(){
console.log("我可以打电话了！")
}
}
class SmartPhone extends Phone{
constructor(brand, price, color) {
super(brand, price);
this.color = color
}
play(){
console.log("我可以玩游戏了！")
}
}
xiaomi = new SmartPhone("小米", 3999, "黑色")
console.log(xiaomi)
xiaomi.call()
xiaomi.play()
get 与 set
class Phone{
set price(newVal){
if (typeof newVal == "number"){
console.log("价格被写入了")
}
}
get price(){
console.log("价格被读取了")
}
}
phone = new Phone()
phone.price = 3999
phone.price
数值扩展
// 1. 进制
let b = 0b1010 // 二进制
let o = 0o10 // 八进制
let d = 100 // 十进制
let x = 0xff // 十六进制
// 2. 判断
let num = 123
Number.isFinite(num) // 是否有限
Number.isInteger(num) // 是否为整数
Number.isNaN(num) // 是否为 NaN
// 3. 字符串转整数或浮点，你可以不使用 Number 进行调用
let str = "3.14圆周率"
Number.parseInt(str)
Number.parseFloat(str)
// 4. 将小数部分抹掉
let float = 3.14
Math.trunc(float)
// 5. 给一个数做标记。如果该数大于0，则返回1。如果该数小于0，则返回-1。如果该数等于0，则返回0。
let sign = 200
Math.sign(sign)
对象扩展
// 1. 判断两个值是否完全相等
Object.is(123, 456) // false, 相当于 ===
// 2. 对象的合并
let config1 = {
host: "localhost",
port: 3306,
user: "root",
password: "root",
}
let config2 = {
user: "peng",
password: "peng",
}
Object.assign(config1, config2)
模块导入
语法：
快速使用：
export let name = "SPC"
export let age = 18
export function Person(name, age) {
console.log(`${name}，今年${age}岁了。`)
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>导入title>
head>
body>
script type="module">
import * as demo from "./demo.js"
let person = demo.Person(demo.name, demo.age)
script>
body>
html>
export 方式
export let name = "SPC"
export let age = 18
export function Person(name, age) {
console.log(`${name}，今年${age}岁了。`)
}
let name = "SPC"
let age = 18
function Person(name, age) {
console.log(`${name}，今年${age}岁了。`)
}
export {
name,
age,
Person
}
let name = "SPC"
let age = 18
export default {
name: "SPC",
age: 18,
Person: function (name, age) {
console.log(`${name}，今年${age}岁了。`)
}
}
import 方式
script type="module">
// 通用写法
import * as demo from "./demo.js"
console.log(demo.name, demo.age)
// 解构赋值写法
import {name as name1, age} from "./demo.js"
console.log(name1, age)
script>