JavaScript学习笔记009-Json对象0解构赋值0扩展运算符

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

后端学院的老师来我们前端学院推广Python

为期一个星期的Python基础课

有些刚学html的学弟学妹们跑来问

老师,没学js的也能学Python吗

老师说,没关系,我们后端学院也教js

速度过来报名

老师,您在前端学院的讲师房里说这样的话

真的不怕他们群殴您吗

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<script>
// 字面量:键值对
let obj = {
a: 1,
b: 2
};

// new 对象
let obj2 = new object();

// json:对象的字符串表示法
let obj3 = "{/"a/": /"1/"}"; // 转译格式法
let obj4 = "{'a': '1'}";

// in操作符:检测对象里是否有某一个属性
console.log("a" in obj);

// for in:对象迭代器
for(var key in obj){
console.log(key); // a  b
console.log(obj[key]); // 1  2
}

// js的灵活性:对象变成类数组
let obj5 = {
0: 1,
1: 2,
2: 3,
lenght: 3
}
for (let a =0; a < obj5.length; a++){
console.log(obj[a]);
}

// json格式对象的序列化和反序列化
JSON.stringify(obj); // 对象序列化:转字符串
JSON.parse(obj); // 对象反序列化:字符串转对象

// es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,称为解构赋值
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1, 2, 3

let obj6 = {
aa: 1,
bb: 2,
cc: 3
}
let {aa: a, bb: b, cc: c} = obj6;
console.log(a, b, c); // 1, 2, 3

// 解构赋值的应用
Math{
......
}
let {PI} = Math;
console.log(PI);

// 数组的维度
let arr1 = [1, 2, [3]]; // 一维 二维 ...
console.log(arr1[2][0]); // 3
let [a, b, [c]] = arr1; // 解构
console.log([a, b, [c]]); // 1, 2, 3

// 扩展运算符(延展操作符)
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [a, b, ...c] = arr2;
console.log([a, b, ...c]); // 1, 2, [3, 4, 5, 6, 7, 8, 9]

function yz(...nums){
let result = 0;
for (let value of nums){
result += value;
}
return result;
}
yz(10, 20, 30, 9);

// 复制数组
let arr3 = [1, 2, 3];
let arr4 = [...arr3]; // 复制一个全新的数组

let box = document.getElementsByClassName('box');
let arr5 = [...box];
let box = [...document.getElementsByClassName('box')];

function fn(){
return [1, 2, 3, 4];
}
let [a, b, c, d] = fn();
console.log([a, b, c, d]); // 1, 2, 3, 4

</script>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C语言及其他语言

初学C语言的学习计划

背景:很多同学在学习C语言的过程中,常常会遇到这样的问题,即“教材看完了,知识点也懂,但写不出来程序”,这段时间,我们通过长期与有多年C语言研究经验的教授、教师...

3684
来自专栏专知

【 关关的刷题日记47】Leetcode 38. Count and Say

关关的刷题日记47 – Leetcode 38. Count and Say 题目 The count-and-say sequence is the sequ...

32210
来自专栏专知

关关的刷题日记05 —— Leetcode 219. Contains Duplicate II

关小刷刷题06 – Leetcode 219. Contains Duplicate II 题目 Given an array of integers and ...

3206
来自专栏编程

知道这几点你就学会了Python!

由于Python目前在各个领域都比较火,尤其是人工智能和量化金融方面的应用,更让人趋之若鹜,还不会Python的你是不是落伍了呢。下面就是我的不装逼教你学Pyt...

2295
来自专栏程序员互动联盟

怎样才能学好java?

Java是一种计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发,是目前用的最广的语言之一,在编程语言排行榜多次...

3025
来自专栏数据结构与算法

2924 数独挑战

2924 数独挑战  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果 题目描述 Descripti...

2953
来自专栏专知

关关的刷题日记10——Leetcode 1. Two Sum 方法1

关小刷刷题10 – Leetcode 1. Two Sum 方法1 题目 Given an array of integers, return indices ...

3089
来自专栏专知

关关的刷题日记85 – Leetcode 326. Power of Three

关关的刷题日记85 – Leetcode 326. Power of Three 题目 Given an integer, write a function t...

37310
来自专栏吴伟祥

学习数据结构的原因&方法 原

761
来自专栏斑斓

哲思片段 | 设计中的变与不变

古希腊哲学家巴门尼德认为:“人的思想和言语都有一个载体,如果你在这一时间和另外一个时间想到或者谈到同样一件东西,那就说明这件东西在这段时间内没有变化,如有变化的...

4007

扫码关注云+社区

领取腾讯云代金券