前端(二十一):label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑

简介: label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑

label语句

let data = {
    a: 'a', b: 'b', c: 'c', d: 'd', e: 'e' }

// break 跳出switch循环,但是for循环继续
// no a => b => no c => no d => no e
for (key in data) {
   
    switch (key) {
   
        case "b":
            console.log(key);
            break;
        default:
            console.log('no', key);
    }
}

// label语句 当满足条件后跳出for循环
// no a => b
outloop: for (key in data) {
   
    switch (key) {
   
        case "b":
            console.log(key);
            break outloop;
        default:
            console.log('no', key);
    }
}

width 将作用域设置到特定的对象中

a = 'AAA';
b = 'BBB';
let data = {
    a: 'aaa' }
with(data){
   
    console.log(a); // aaa
    console.log(b); // BBB
}

JSON stringify

var foo = {
    name: "Lee", age: 24, sex: '男' };
var jsonString = JSON.stringify(foo, (key, value) => {
   
    console.log(key, value); // name Lee --- age 24 --- sex 男
    if (typeof value === 'number') {
   
        return undefined
    }
    return value
});
console.log(jsonString); // {"name":"Lee","sex":"男"}

const students = [
    {
   
        name: 'akira',
        score: 100,
    }, 
    {
   
        name: 'John',
        score: 60,
    }, 
    {
   
        name: 'Jane',
        score: 90,
    }
];
let jsonStudents = JSON.stringify(students, (key, value) => {
   
    if (key === 'score') {
   
        if (value === 100) {
   
            return 'S';
        } else if (value >= 90) {
   
            return 'A';
        } else if (value >= 70) {
   
            return 'B';
        } else if (value >= 50) {
   
            return 'C';
        } else {
   
            return 'E';
        }
    }
    return value;
});
console.log(jsonStudents); // [{"name": "akira","score": "S"},{"name": "John","score": "C"},{"name": "Jane","score": "A"}]

let jsonStudentsNames = JSON.stringify(students, ['name']);
console.log(jsonStudentsNames); // [{"name":"akira"},{"name":"John"},{"name":"Jane"}]

JSON parse

let json = '[{"name": "akira","score": "S"},{"name": "John","score": "B"},{"name": "Jane","score": "A"}]';
let arr = JSON.parse(json, (key, value)=>{
   
    if(key === 'score'){
   
        switch(value){
   
            case 'S':
                return '优';
            case 'A':
                return '甲';
            case 'B':
                return '乙';
        }
    }
    return value;
})
console.log(arr); // [{name: "akira", score: "优"},{name: "John", score: "乙"},{name: "Jane", score: "甲"}]

生成器

function* addCount(){
   
    let count = 0;
    while (true) {
   
        yield count++
    }
}
let add = addCount();

console.log(add.next()); // {value: 0, done: false}
console.log(add.next()); // {value: 1, done: false}
console.log(add.next()); // {value: 2, done: false}

解析赋值

var [name, age] = ['Lee', 24];
console.log(name);
console.log(age);

交换

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

对象解析赋值

let obj = {
   
    name: 'Lee',
}

let {
   name} = obj; // => let {name: name} = obj; 
console.log(name); // Lee

let {
   name: a} = obj;
console.log(a); // Lee
let obj = {
   
    name: 'Lee',
    age: 24
}
let {
   name: _name, age: _age} = obj;
console.log(_name); // Lee
console.log(_age);  // 24

pushState popstate

window.onload = function () {
   
    pushHistory();
    setTimeout(function () {
    
        window.addEventListener('popstate', function (event) {
   
            let e = event || window.event;
            console.log(e);
        }, false);
    }, 100);
}
function pushHistory() {
   
    window.history.pushState({
    name: "Lee" }, "----", "home.html");
}

页面可编辑

document.designMode = 'on'
目录
相关文章
|
28天前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分,它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法,包括减少HTTP请求、压缩代码、使用CDN等。
|
28天前
|
C++ Python
部分仍在编辑文章 - Python基础专题 - 深度解析python中的赋值与拷贝
部分仍在编辑文章 - Python基础专题 - 深度解析python中的赋值与拷贝
20 0
|
1月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
126 0
|
1天前
|
SQL JSON Apache
Flink问题之嵌套 json 中string 数组的解析异常如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
41 1
|
1天前
|
SQL JSON Apache
Flink SQL问题之复杂JSON解析如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
38 0
|
3天前
|
JSON fastjson 数据格式
几种Json工具包的解析速度对比
几种Json工具包的解析速度对比
|
3天前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
13天前
|
域名解析 网络协议 数据安全/隐私保护
DNS解析问题之授权RAM子账号管理指定域名如何解决
DNS解析是指将人类可读的域名转换成机器可读的IP地址的过程,它是互联网访问中不可或缺的一环;本合集将介绍DNS解析的机制、类型和相关问题的解决策略,以确保域名解析的准确性和高效性。
21 1
|
21天前
|
存储 监控 NoSQL
Redis 大键问题解析:如何管理和优化巨型数据【redis拓展】
Redis 大键问题解析:如何管理和优化巨型数据【redis拓展】
30 0
|
22天前
|
存储 前端开发 安全
无限连接:前端跨页面通信的实现与应用
在前端开发中,有时我们需要在不同的页面之间进行数据传递和交互。这种场景下,前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法,并提供一些代码示例和引用资料,帮助读者深入了解并应用这一重要的技术。

相关产品

  • 云迁移中心
  • 推荐镜像

    更多