详解JavaScript(ECMAScript与DOM)(中)

简介: 详解JavaScript(ECMAScript与DOM)(中)

九.数组

9.1数组的创建方式

①通过new关键字创建数组

代码演示如下:

//创建数组arrs
var arrs=new Array();

ps:

不必担心数组的长度限制问题,以及数组的数据类型问题,你往数组里加多少元素,它的长度就有多少个且它可以存放任意类型的元素,不局限单一元素类型

②通过[]创建数组(常用)

代码演示如下:

//创建数组arrs并同时添加元素
var  arrs=[10,"java",12.5,true];

9.2 数组的基本操作

①添加数据

代码演示如下:

arrs[0]=10;
arrs[1]="java";
//压入数据
arrs.push(12);
arrs.push("mysq1");

②取值

//打印数组arrs[0]的值
console.log(arrs[0]);

③获取数组长度

//获取数组arrs的长度
arrs.length;

④遍历数组

代码演示如下:

for(var i=0;i<arrs.length;i++){
  console.log(arrs[i]);
}

⑤数组的反转

语法:

数组名.reverse();

其返回值是一个数组

代码演示如下:

console.log("arrs反转如下:")
 var reverse = arrs.reverse();
 console.log(reverse);

⑥数组元素的拼接

语法:

arrs.join(分割符);

代码演示如下:

console.log(arrs)
 //以"-"作为拼接符拼接数组arrs的所有元素并返回string类型的结果
 var s = arrs.join("-");
 console.log(s);

⑦数组元素的删除

语法:

//在数组arrs中从位序为start的位置开始删,删count个元素,并返回删去元素后的数组
arrs.splice(start,count);

代码演示如下:

//打印数组arrs的信息
 console.log(arrs)
 //在数组arrs中从位序为1开始,删除2个元素(自1开始且包含1)并返回一个数组
 var splice = arrs.splice(1,2);
 //打印返回结果,返回结果是个数组
 console.log(splice);


十. JSON

用途:

跨平台数据传输

JSON的格式:

  • JSON数据两端要么是{},要么是[]
  • {}定义JSON对象
  • [] 定义JSON数组

10.1 创建JSON对象

语法:

{key:value,key:value,...,key:value}

①创建简单json对象

代码演示如下:

//创建简单的json对象
var jsone1={
id:103,
name:"王五",
age:18,
address:"北京"
}
console.log(json01.id)
console.log(json01.name)
console.log(json01.age)
console.log(jsone1.address)

②创建稍微复杂的json对象

代码演示如下:

//创建稍微复杂的json对象
   var json2 = {
            id: 103,
            name: "王五",
            age: 18,
            address: "北京",
            computer: {
                id: 501,
                brand: "联想",
                price: 5000
            }
        };
        console.log(json2.name);
        console.log(json2.computer.id);
        console.log(json2.computer.brand);
        console.log(json2.computer.price);
}

10.2 创建JSON数组

语法:

[value,value,...,value]

①创建json数组

代码演示如下:

var json3=[1,"hsj",45.78,true];
for (var i = 0; i < json3.length ; i++) {
    console.log(json3[i])
}

②创建稍微复杂的json数组

代码演示如下:

var json4=[
    {
        id: 1,
        name: "jack",
        age: 34
    },
    {
        id: 2,
        name: "rose",
        age: 31
    },
    {
        id: 3,
        name: "tom",
        age: 35
    }
    ];
for (var i = 0; i <json4.length ; i++) {
    console.log("第"+(i+1)+"位员工信息:");
    console.log(json4[i].id);
    console.log(json4[i].name);
    console.log(json4[i].age);
}

③创建复杂的json数组(对象数组)

代码演示如下:

var json5={
    id:1234,
    name:"张三",
    age:12,
    Computer:[
        {
            id:1,
            brand:"华为",
            price:5000
        },
        {
            id:2,
            brand:"华硕",
            price:6000
        }
    ]
}
console.log(json5.id);
console.log(json5.name);
console.log(json5.age);
console.log("-----------------------------------------")
for (var i = 0; i < json5.Computer.length; i++) {
    console.log("第"+(i+1)+"个电脑的详细信息:");
    console.log(json5.Computer[i].id);
    console.log(json5.Computer[i].brand);
    console.log(json5.Computer[i].price);
}

json对象如何转成json字符串(符合json格式的字符串)?

代码演示如下:

//定义json对象
var jsonObj = {"stuName":"tom","stuAge":20};
//将其转换为json字符串jsonStr
var jsonStr = JSON.stringify(jsonObj);
console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

json字符串如何转换成json对象?

代码演示如下:

//将刚才的json字符串jsonStr转换为json对象parse
var parse = JSON.parse(jsonStr);
console.log(parse);


相关文章
|
1天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
1天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
1天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
9天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
12天前
|
JavaScript 前端开发
JavaScript Dom方法
JavaScript Dom方法
36 2
|
13天前
|
JavaScript 前端开发 API
JavaScript DOM 文档对象模型
JavaScript DOM 文档对象模型
|
16天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0
|
16天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
16 4
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
15 0