ecs6 一些操作

json

// let a = 6;
// console.log(a)
let { foo, bar } = { foo: 'JSPang', bar: '张晓明' };
console.log(foo + bar); //控制台打印出了“JSPang张晓明”

对象扩展运算符

let arr1 = ['www', 'jspang', 'com'];
//let arr2=arr1;
let arr2 = [...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);

function jspang(...arg) {
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
jspang(1, 2, 3);

function jspang(first, ...arg) {
    // console.log(arg.length);
    for (let val of arg) {
        console.log(val);
    }
}
jspang(0, 1, 2, 3, 4, 5, 6, 7);

字符串模版

let jspang = '张晓明';
let blog = `非常高兴你能看到这篇文章，我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);

let a = 1;
let b = 2;
let result = `${a+b}`;
document.write(result);

查找是否存在:

let jspang = '张晓明';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友张晓明。这节课我们学习字符串模版。';
document.write(blog.includes(jspang));

// 判断开头是否存在：
blog.startsWith(jspang);

// 判断结尾是否存在：
blog.endsWith(jspang);

// 复制字符串
document.write('jspang|'.repeat(3));

整数

{
    let a = 11 / 4;
    console.log(Number.isFinite(a));
    console.log(Number.isFinite('dd'));
    console.log(Number.isFinite(NaN));
    console.log(Number.isFinite(undefined));

    console.log(Number.isNaN(NaN), 'NaN');
} {
    let a = 2.1;
    console.log(Number.isInteger(a));
} {
    let a = '2.1';
    console.log(Number.parseInt(a));
    console.log(Number.parseFloat(a));
}
let a = Math.pow(2, 3333) - 1;
console.log(a);
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MIN_SAFE_INTEGER);
console.log(Number.isSafeInteger(a));

Array

{
    let json = {
        '0': 'jspang',
        '1': '张晓明',
        '2': '大胖逼逼叨',
        length: 3
    }
    let arr = Array.from(json);
    console.log(arr)
} {
    let arr = Array.of(22, '张晓明', 'jspang', '大胖逼逼叨');
    console.log(arr);
}
{
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(arr.find(function(value, index, arr) {
        return value > 5; // 6
    }))
}

{
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    // 它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。
    arr.fill('jspang', 2, 5);
    console.log(arr);
} {
    let arr = ['jspang', '张晓明', '大胖逼逼叨']
        // 数组的索引
    for (let index of arr.keys()) {
        console.log(index);
    }
}
let arr = ['jspang', '张晓明', '大胖逼逼叨']
    // 同时输出数组的内容和索引
for (let [index, val] of arr.entries()) {
    console.log(index + ':' + val);
}

Error

function add(a, b = 1) {
    if (a == 0) {
        throw new Error('This is error')
    }
    return a + b;
}
console.log(add(0));

对象的函数解构

let json = {
    a: 'jspang',
    b: '张晓明'
}

function fun({ a, b = 'jspang' }) {
    console.log(a, b);
}
fun(json);
let arr = ['jspang', '张晓明', '免费教程'];

function fun(a, b, c) {
    console.log(a, b, c);
}
fun(...arr);
let obj = {
    a: 'jspang',
    b: '张晓明'
}
console.log('a' in obj); //true

数组判断

{
    let arr = [, , , , , ];
    console.log(0 in arr); //false
}
let arr1 = ['jspang', '张晓明'];
console.log(0 in arr1); // true

let arr = ['jspang', '张晓明', '前端教程'];
arr.forEach((val, index) => console.log(index, val));

数组操作

{
    let arr = ['jspang', '张晓明', '前端教程'];
    arr.filter(x => console.log(x));
} {
    let arr = ['jspang', '张晓明', '前端教程'];
    arr.some(x => console.log(x));
} {
    let arr = ['jspang', '张晓明', '前端教程'];
    console.log(arr.map(x => 'web'));
}{
    let arr = ['jspang', '张晓明', '前端教程'];
    console.log(arr.join('|'));
} {
    let arr = ['jspang', '张晓明', '前端教程'];
    console.log(arr.toString());
}

对象

{
    let name = "jspang";
    let skill = 'web';
    var obj = { name, skill };
    console.log(obj); //Object {name: "jspang", skill: "web"}
} {
    let key = 'skill';
    var obj = {
        [key]: 'web'
    }
    console.log(obj.skill);
} {
    var obj = {
        add: function(a, b) {
            return a + b;
        }
    }
    console.log(obj.add(1, 2)); //3
} {
    var obj1 = { name: 'jspang' };
    var obj2 = { name: 'jspang' };
    console.log(obj1.name === obj2.name); //true
    console.log(Object.is(obj1.name, obj2.name)); //true
}{
    // ===为同值相等，is()为严格相等
    console.log(+0 === -0); //true
    console.log(NaN === NaN); //false
    console.log(Object.is(+0, -0)); //false
    console.log(Object.is(NaN, NaN)); //true
}

对象操作

 {
    var a = { a: 'jspang' };
    var b = { b: '张晓明' };
    var c = { c: 'web' };
    let d = Object.assign(a, b, c)
    console.log(d);
}

Symbol

{
    var g = Symbol('jspang');
    console.log(g);
    console.log(g.toString());
} {
    var jspang = Symbol();
    var obj = {
        [jspang]: '张晓明'
    }
    console.log(obj[jspang]);
    obj[jspang] = 'web';
    console.log(obj[jspang]);
} {
    let obj = { name: 'jspang', skill: 'web' };
    let age = Symbol();
    obj[age] = 18;
    for (let item in obj) {
        console.log(obj[item]);
    }
    console.log(obj);
}

{
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    console.log(setArr); //Set {"jspang", "张晓明", "web"}
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    console.log(setArr); //Set {"jspang", "张晓明", "web"}
    setArr.add('前端职场');
    console.log(setArr, 'add');
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    console.log(setArr); //Set {"jspang", "张晓明", "web"}
    setArr.add('前端职场');
    console.log(setArr); //Set {"jspang", "张晓明", "web", "前端职场"}
    setArr.delete('前端职场');
    console.log(setArr, 'delete 前端职场'); //Set {"jspang", "张晓明", "web"}
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    console.log(setArr); //Set {"jspang", "张晓明", "web"}
    console.log(setArr.has('jspang'), 'has'); //true
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    console.log(setArr); //Set {"jspang", "张晓明", "web"}
    setArr.clear();
    console.log(setArr, 'clear'); //true
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    for (let item of setArr) {
        console.log(item, 'of');
    }
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    for (let item of setArr) {
        console.log(item);
    }
    console.log(setArr.size, 'size');
} {
    let setArr = new Set(['jspang', '张晓明', 'web', 'jspang']);
    setArr.forEach((value) => console.log(value, 'forEach'));
}

WeakSet

{
    let weakObj = new WeakSet();
    let obj = { a: 'jspang', b: '张晓明' }
    weakObj.add(obj);
    console.log(weakObj);
} {
    let weakObj = new WeakSet();
    let obj = { a: 'jspang', b: '张晓明' }
    let obj1 = obj;
    weakObj.add(obj);
    weakObj.add(obj1);
    console.log(weakObj);
}

map数据结构

{
    let json = {
        name: 'jspang',
        skill: 'web'
    }
    console.log(json.name);
    var map = new Map();
    map.set(json, 'iam');
    console.log(map);
    console.log(map.get(json), 'get');
    console.log(map.has('jspang'));
    map.clear();
    console.log(map.size, 'size');
    map.delete(json);
    console.log(map, 'delete')
}

用Proxy进行预处理

{
    var pro = new Proxy({
        add: function(val) {
            return val + 10;
        },
        name: 'I am Jspang'
    }, {
        // target：得到的目标值
        // key：目标的key值，相当于对象的属性
        // property：这个不太常用，用法还在研究中，还请大神指教。
        get: function(target, key, property) {
            console.log('come in Get');
            return target[key];
        },
        // target: 目标值。
        // key：目标的Key值。
        // value：要改变的值。
        // receiver：改变前的原始值。
        set: function(target, key, value, receiver) {
            console.log(`    setting ${key} = ${value}`);
            return target[key] = value;
        }
    });
    console.log(pro.name);
    pro.name = '张晓明';
    console.log(pro.name);
} {
    get = function() {
        return 'I am JSPang2';
    };
    var handler = {
        apply(target, ctx, args) {
            console.log('do apply');
            return Reflect.apply(...arguments);
        }
    }
    var pro = new Proxy(target, handler);
    console.log(pro());
}

Promis

let state = 1;

function step1(resolve, reject) {
    console.log('1.开始-洗菜做饭');
    if (state == 1) {
        resolve('洗菜做饭--完成');
    } else {
        reject('洗菜做饭--出错');
    }
}

function step2(resolve, reject) {
    console.log('2.开始-坐下来吃饭');
    if (state == 1) {
        resolve('坐下来吃饭--完成');
    } else {
        reject('坐下来吃饭--出错');
    }
}

function step3(resolve, reject) {
    console.log('3.开始-收拾桌子洗完');
    if (state == 1) {
        resolve('收拾桌子洗完--完成');
    } else {
        reject('收拾桌子洗完--出错');
    }
}
new Promise(step1).then(function(val) {
    console.log(val);
    return new Promise(step2);
}).then(function(val) {
    console.log(val);
    return new Promise(step3);
}).then(function(val) {
    console.log(val);
    return val;
});

class

class Coder {
    name(val) {
        console.log(val);
    }
    skill(val) {
        console.log(this.name('jspang') + ':' + 'Skill:' + val);
    }

    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    add() {
        return this.a + this.b;
    }
}
let jspang = new Coder(1, 2);
jspang.name('jspang');
jspang.skill('web');

console.log(jspang.add());

export

// export :负责进行模块化，也是模块的输出。
// import : 负责把模块引，也是模块的引入操作。
var a = 'jspang';
var b = '张晓明';
var c = 'web';
export { a, b, c }
export {
    x as a,
    y as b,
    z as c
}

import { a, b } from './temp.js';
console.log(a, b);

猜你喜欢