分类 JavaScript 下的文章

ES6 learning(入门)第三记


循环对象

可迭代的对象

迭代的方法

let list = [10, 20, 30];
let str = '你好哦';
let map = new Map();
map.set('JS', 'JavaScript');
map.set('P', 'PHP');
map.set('PY', 'Python');

for(let val of list) {
    console.log(val);
}

for(let val of str) {
    console.log(val);
}

for(let [key, value] of map) {
    console.log(key, value);
}

循环对象1.png

let item = map.value();
let temp;
while(temp = item.next()) {
    if(temp.done){
        break;
    }else {
        console.log(temp);
    }
}

循环对象2.png

可迭代的对象

制作一个可迭代的对象

Symbol.iterator

class Player {
    constructor(list) {
        this.list = list;
    }
    [Symbol.iterator]() {
        let current = 0;
        let that = this;
        return {
            next() {
                return current < that.list.length ? {value: that.list[current++], done: false} : { done: true };
            }
        }
    }
}
let player = new Player(['fm', 'fj', 'cu']);
for (let temp of player) {
    console.log(temp);
}

可迭代的对象.png

简单迭代生成器

function* {} 迭代生成器

yield:迭代返回

function* generator() {
    yield 'f';
    yield 'm';
    yield 'j';
    yield 'i';
    yield 'e';
}

for(let val of generator()) {
    console.log(val);
}

简单迭代1.png

function* countdown(begin) {
    while(begin > 0) {
        yield begin--;
    }
}

for(let temp of countdown(5)) {
    console.log(temp);
}

简单迭代2.png

简单迭代类

建立一个简单的迭代类

class MyList {
    constructor(list) {
        this.list = list;
        this[Symbol.iterator] = function* () {
            let current = 0;
            let that = this;
            while (current < that.list.length) {
                yield that.list[current++];
            }
        }
    }
}

let mylist = new MyList([10, 20, 30]);
for (let val of mylist) {
    console.log(val);
}

简单迭代类.png

模块化设计

建立一个模块

调用模块功能

  • Player.mjs
class Player {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello ${this.name}`)
    }
}

export default Player;
  • main.mjs
import Player from './Player.mjs';

let curry = new Player('curry');
curry.sayHello();

类模块设计.png
ES6入门系列说明:本系列仅仅作为ES6入门教学视频的归纳总结与记录,在此感谢小马视频ORYouTube地址


ES6 learning(入门)第二记


解构赋值

解构赋值的写法

  • 数组赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c);

数组赋值.png

let [x, y, ...other] = [1, 2, 3, 4, 5];
console.log(x, y, other);

数组赋值2.png

  • 对象赋值
let {name, age} = {name: 'fmujie', age: 18};
console.log(name, age);

  • 函数赋值
function test() {
    return [10, 20];
}
let [num1, num2] = test();
console.log(num1, num2);

函数赋值.png

  • 函数参数名指定
function test({x=3, y=3}) {
    return x + y;
}
console.log(test());
console.log(test({x:10}));
console.log(test({y:10}));
console.log(test({x:10, y:20}));

函数参数名指定.png

数组循环(for...of)

新的数组循环方式

let list = [10, 20, 30];
Array.prototype.Len = function() {};//给数组的属性增加一个方法

for(let val of list) {//ES6 val为值 list当作数组使用 for...of仅仅取出数组的值
    console.log(val);
}
for(let val in list) {//ES5 val为下标 list当作变量使用 for...in取出所有属性(循环对象使用)
    console.log(val, list[val]);
}

数组循环.png

函数的默认值

定义函数时给出参数的默认值

  • 字符参数
function sayHello(name = "fmujie") {
    console.log(`hello ${name}`);
}
sayHello();
sayHello('billy');

字符传参.png

  • 数值计算
function add(a = 1, b = a) {
    return a + b;
}
console.log(add());
console.log(add(10));
console.log(add(10, 20));

数值传参.png

  • 必须指定参数
function required() {
    throw new Error("参数未指定");
}

function sayBye(name = required()) {
    console.log(`${ name } bye!`);
}
sayBye(fmujie);
sayBye();

指定参数.png

箭头函数

通过箭头函数简化代码

let list = [10, 20, 30];
//ES5
let newList = list.map(function(value, index) {
    return value * value;
});
console.log(newList);
//ES6
newList = list.map((value, index) => {
    return value * value;
});
console.log(newList);
newList = list.map(value => {
    return value * value;
});
console.log(newList);

箭头函数.png

map()语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数描述
function(currentValue, index,arr)必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

可变长参数

定义参数时,可以将参数指定为可变长的数组

function sum(...args) {
    let result = 0;
    args.forEach(val => {
        result += val;
    })
    return result;
}
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4, 5));

可变长参数.png

基本对象定义

JS基本对象定义

let title = "ES6从入门到放弃";
let price = -250;
let publish = "怎么也学不会出版社";

let book = {
    title, price, publish,
    toString() {
        console.log(`<<${this.title}>> is ${this.price}RMB`)
    }
}
book['lang'] = "简体中文";

console.log(book);
book.toString();

基本对象定义.png

类定义

ES6的类定义

class Player {
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    show() {
        console.log(`${this.name}的性别是${this.sex}`);
    }
    static info() {//不用实例化就能使用的方法
        console.log("这是一个球员类,您可以使用它建立自己的球员。");
    }
}
let player = new Player("库里", "男");
console.log(player.name, player.sex);
player.show();
Player.info();//只有类名才能引用到静态方法
player.info();//引用不了

类定义.png

setter/getter的定义

在类中定义setter/getter方法

class Player {
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    get age() {
        return this.age;
    }
    set age(val) {
        this.age = val;
    }
}
let player = new Player("库里", "男");
player.age = 18;
console.log(player);

gettersetter.png

类继承

ES6面向对象的编程之类继承

class Car {
    constructor(brand) {
        this.brand = brand;
    }
    show() {
        console.log(`本车品牌为${this.brand}`);
    }
}

class Lexus extends Car {
    constructor(brand, lineup) {
        super(brand);
        this.lineup = lineup;
    }
    getPrice() {
        switch(this.lineup) {
            case "RX":
                return 60;
            case "NX":
                return 40;
            default:
                throw new Error("未知车类");
        }
    }
}

let mycar = new Lexus("Lexus", "RX");
mycar.show();
console.log("价格:", mycar.getPrice(), "万");

类继承.png

ES6入门系列说明:本系列仅仅作为ES6入门教学视频的归纳总结与记录,在此感谢小马视频ORYouTube地址


ES6 learning(入门)第一记


let命令

用let命令限定作用域

变量 i 的作用域
//ES5
if (true) {
    var i = 1;
}
console.log(i);

var.png

//ES6
if (true) {
    let i = 1;
}
console.log(i)

let定义.png

重复定义
var i = 0;
switch (i) {
    case 0:
        let value = "hello";
    case 1:
        let value = "world";
}

重复定义.png

常量定义

const关键字

const data = 10;
console.log(data);
//data = 100 //执行错误

constdata.png

const list = [10, 20, 30];
console.log(list);

list[0] = 100;
console.log(list);

list = [1, 2, 3];//错误

list.png

常量指的是数组本身,而不是数组里每个元素的值!!!
list = [1, 2, 3];//list等于一个新数组,变的是list变量,当然与const定义矛盾
还可插入等
const list = [10, 20, 30];
console.log(list);

list.push(99);
console.log(list);

listpush.png

进制转换

  • 0b:二进制

  • 0o:八进制

  • 0x:十六进制

console.log(0b10);//2
console.log(0o10);//8
console.log(0x10);//16

console.log(0b11 === 3);//true
console.log(0o10 === 8);//true
console.log(0x10 === 16);//true

let num = 10;
console.log(num.toString(8));//8进制转化
console.log(num.toString(2));
console.log(num.toString(16));
console.log(num.toString(5));

进制转换.png

嵌入字符串

  • 字符串嵌入方式

  • 字符串模板定义

let name = "fmujie"
let mystr1 = "Hello, ${ name }!"
let mystr2 = `Hello, ${ name }! 再见。`

console.log(mystr1)
console.log(mystr2)

function tagged(formats, ...args) {
    console.log(formats);
    console.log(args);
}

tagged` 你好,${ name }! 再见。` //反单引号
  • 代入使用
  • 解析后使用
tagged两个参数,一个是格式化的所有的内容,另一个是参数变量所有的值
反单引号:https://blog.csdn.net/qq_42517195/article/details/80844935

嵌入字符串.png

模板的延长线

  • 活用字符串模板

标准的模板使用

模板标准使用.png

扩展文字模板
let name = "fmujie"
let address = "公园"
let str = `你好,${ name }! 晚上一起去${ address }玩吧!`
console.log(str)
let fmtstr = markdown`你好,${ name }! 晚上一起去${ address }玩吧!`
console.log(fmtstr)

function markdown(formats, ...args) {
    console.log(formats)
    console.log(args)
    var result = "# 信息标题\n";
    for(var i = 0; i< formats.length; i++) {
        result += formats[i] + "**" + (args[i] || '') + "**"
    }
    return result
}

模板延长.png

Symbol新类型

  • ES6增加了Symbol新的原始类型

let str1 = "Hello World!"
let str2 = "Hello World!"
console.log(str1 == str2)//true
console.log(str1 === str2)//true

let str3 = Symbol("MySymbol")
let str4 = Symbol("Mysymbol")
console.log(typeof str3)
console.log(str3.toString())
console.log(str3 == str4)//false
console.log(str3 === str4)//false
为啥不一样,值虽然一样,但是Symbol内部分配了一个id(哈希值),比较的时候比较的是id值。

symbol.png

Symbol的用法

  • 作为常量

const Java = Symbol()
const PHP  = Symbol()

var lang = PHP

if(lang === PHP) {
    console.log("PHP")
}

作为常量.png

  • 作为属性

let str1 = Symbol("mySymbol")
let str2 = Symbol("mySymbol")

var obj = {}
obj[str1] = "Hello"
obj[str2] = "World"

console.log(obj)
console.log(obj[str1])
console.log(obj[str2])

作为属性.png

  • 半隐藏属性

const MyKey = Symbol()
class User {
    constructor(key, name, age) {
        this[MyKey] = key
        this.name = name
        this.age = age
    }

    checkKey(key) {
        return this[MyKey] == key;
    }
}

let user = new User(123, 'fmujie', 18)
console.log(user.name, user.age, user[MyKey])
console.log(user.checkKey(123))
console.log(user.checkKey(456))
console.log(Object.keys(user))
console.log(JSON.stringify(user))

隐藏属性.png

ES6入门系列说明:本系列仅仅作为ES6入门教学视频的归纳总结与记录,在此感谢小马视频ORYouTube地址


召唤看板娘