javascript(一) Array對象, Object對象, this關鍵字，短路操作，Set集合，Map集合和String字符串操作

javascript基礎1，主要寫(==和===的區別), Array對象, Object對象, this關鍵字，短路操作，Set集合，Map集合和String字符串操作。

1. == , ===

1. === 在js中需要值相等類型相等
2. == 在js中值相等，類型不相等會自動轉換

2.Array

全部Array的接口可以查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

let nameList = ['Brian', 'Xiang', 'Shuang'];

// add item in the last
const len = nameList.push('Ella');
console.log(nameList, len);

// remove item in the last
const poped = nameList.pop();
console.log(nameList, poped);

// remove item in the first
const poped2 = nameList.shift();
console.log(nameList, poped2);

// add item in the first
const len2 = nameList.unshift(23);
console.log(nameList, len2);

// indexOf
console.log(nameList.indexOf('Shuang'));
console.log(nameList.indexOf('Neo'));

// include
console.log(nameList.includes('23'));
console.log(nameList.includes(23));

// at 按照下標返回索引的位置的值
console.log(nameList.at(1));
console.log(nameList.at(-1));

運行結果

3. Object

全部object的API可以查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

let staff = {
    name: 'Brian',
    age: 30,
    locations: 'ShenZhen',
    tags: ['manager', 'father', 'banker']
};
console.log(staff.skill);
console.log(staff['locations']);
//對象的解構賦值,解構賦值時設置默認值的好處時防止undefined
const { loves = [], tags: roles = [] } = staff;
console.log(loves, roles);
// Object.keys() get all key list
const keys = Object.keys(staff);
// Object.values() get all values list
const values = Object.values(staff);
for (const item of keys) {
    console.log(item);
}
for (const item of values) {
    console.log(item);
}
// Object.entries() get key-value list
const stas = Object.entries(staff);
for (const [prop, val] of stas) {
    console.log(prop, val);
}

const machine = {
    info0: {
        local: ['123.12', '78.43'],
        data: {
            blue: 775.3,
            green: 786.4
        }
    },
    info1: {
        local: ['123.12', '78.43'],
        data: {
            blue: 775.3,
            green: 786.4
        }
    }
}

const mcs = Object.entries(machine);
for (const [name, { local, data }] of mcs) {
    console.log(`${name} - local: ${local[1]} - data: ${data?.green}`)
}

運行結果

4. this關鍵字

箭頭函數的this指向全局this, 普通申明函數的this執行調用方，也就是誰調用這個方法，this就指向這個對象，如果是直接執行申明的普通函數， this是undefined的

console.log(this);

const fun = function () {
    console.log(this);
}
fun();

const fun2 = () => {
    console.log(this);
};
fun2();

var name = "rdc";
const rdc = {
    name: "RDC",
    type: "bank",
    location: "SG",
    do1: function () {
        console.log(this);
        const do3 = function () {
            console.log(this);
        }
        do3();
    },
    do2: () => {
        console.log(this);
        const do4 = () => {
            console.log(this.name);
        }
        do4();
    }
}
rdc.do1();
rdc.do2();

運行結果

5.短路操作

js的短路操作有 && || 和??

// OR 前面一項爲真(true，非0，非空，非null, 非undefined) 就返回第一項，否則返回第二項
console.log(5 || 'brian');
console.log('' || 'brian');
console.log(true || 'brian');
console.log(undefined || null);
console.log([] || NaN);

const obj = {
    names: "heshuang"
}
// obj.skill = obj.skill || 'full stack';
obj.skill ||= 'full stack';
console.log(obj);

// AND 前面一項真就返回第二項，否則返回第一項
console.log(5 && 'brian');
console.log('' && 'brian');
console.log(true && 'brian');
console.log(undefined && null);
let hongxiang = 'IOS developer';
console.log(hongxiang &&= 'Full Stack Developer');

// ?? Nullish: null and undefined 前面一項爲真 （非null, 非undefined）就返回第一項否則返回第二項
let hong;
const value = hong ?? 99;
console.log(value);
hong = 66;
const value2 = hong ?? 99;
console.log(value2);
hong ??= 999;
console.log(hong);

if (!hong.call?.(1, 2)) {
    console.log(`hong.call() method not exist`);
}

運行結果

6.Set集合

js的Set的API可以查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

const names = ['Brian', 'William', 'Kelvin', 'Brian', 'Neo'];
const ns = new Set(names);
console.log(ns.size);
console.log(new Set('KAWA'));
console.log(ns.has('wil'), ns.has('Neo'));
console.log(ns.add('Ella'));
console.log(ns.delete('Neo'), ns);

運行結果

7. Maps集合

js的Map的API可以查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

const mps = new Map();
mps.set('name', 'brian')
    .set('job', 'banker')
    .set('age', 30);

console.log(mps.get('job'));
for (const [key, val] of mps) {
    console.log(key, val);
}
const fm = new Map([
    ['father', '86kg'],
    ['me', '74kg'],
    ['mother', '53kg'],
    ['wife', '62kg']
]);
console.log(fm.get('me'), fm);
console.log([...fm.keys()]);
console.log([...fm.values()]);

運行結果

8. String字符串的操作

js的String的全部API可以查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

const message = `{
    'status': 500,
    'errorCode':'GFH-70006',
    'data':{},
    'message':'Application Error'
}`;
console.log([...message]);
console.log(message.length);
console.log(message.indexOf('0'));
console.log(message.lastIndexOf('0'));
console.log(message.slice(16, 19));
console.log(message.slice(message.indexOf('message') - 1, -1));

console.log(message.toUpperCase());
const na = 'hUanGLiang';
console.log(na[0].toUpperCase() + na.slice(1).toLowerCase());

const email = ' huanghuang @gmial.com \t\n';
console.log(email.trim());

const content = 'A is good, A is best';
console.log(content.replace('A', 'LaoChen'));
console.log(content.replaceAll('A', 'LaoChen'));
console.log(content.includes('good'), content.includes('bad'));
console.log(content.startsWith('A'), content.endsWith('bad'));
console.log(content.split(' '));

//Padding 填充字符 數據脫敏的時候會用到
console.log(na.padStart(20, '#'));
console.log(na.padEnd(20, '#'));

// Repeat 重複多次
const power = 'day day up!';
console.log(power.repeat(5));

運行結果

代碼地址: https://github.com/showkawa/H5C3/blob/master/js/basic/js_basic_01.js