美文网首页菜鸟前端工程师程序员我爱编程
JavaScript学习笔记009-json对象0解构赋值

JavaScript学习笔记009-json对象0解构赋值

作者: Mr柳上原 | 来源:发表于2018-08-16 16:12 被阅读1次

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]

// 复制数组
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>

相关文章

  • JavaScript学习笔记009-json对象0解构赋值

    Author:Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 后端学院...

  • ES6 — 解构

    【MDN】解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值...

  • 解构赋值 , 函数默认值 , 扩展运算符 , 计算属性名

    解构赋值 是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。...

  • 数组的解构赋值

    解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。...

  • 双语学习解构赋值、数组解构和对象解构

    解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性值从对象或数组中取出,赋值给其他变量。...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • ES6 2.解构赋值

    解构赋值 解构赋值的分类 数组解构赋值 对象解构赋值 字符串解构赋值 布尔值解构赋值 函数参数解构赋值 数值解构赋...

  • ECMAScript6 -- 解构赋值

    解构赋值 数组的解构赋值 对象的解构赋值 特殊: 数组的解构赋值 如果右边不是数组,默认转换为类数组 对象的解构赋...

  • ES6 语法(解构赋值)

    什么是解构赋值及用法 解构赋值分类:数组解构赋值对象解构赋值字符串解构赋值布尔值解构赋值函数参数解构赋值数值解构赋...

  • 什么是解构赋值?解构赋值的用途有哪些?

    什么是解构赋值?解构赋值的用途有哪些? 1.什么是解构赋值? ①定义: 解构赋值语法是一种 Javascript ...

网友评论

    本文标题:JavaScript学习笔记009-json对象0解构赋值

    本文链接:https://www.haomeiwen.com/subject/txdobftx.html