前端基础（JavaScript）——基础语法（变量，分支...）& Json对象【重要】& 函数定义 & 事件

已于 2023-10-29 18:19:25 修改
阅读量719 收藏
点赞数
分类专栏： Front-end 文章标签： 前端 javascript json
于 2023-06-06 21:07:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pireley/article/details/131074239
版权

目录

引出

JS是啥，基础语法是啥，常用的有啥；
JS能干啥，语言的特点和应用；

JS是啥，能干啥

1.JS 是一门前端语言，也是前端框架（VUE Angular React）的基础；

2.JS 能干啥：
（1）控制标签，操作元素；
（2）控制浏览器，前提是浏览器允许被控制；
（3）访问网络；

3.写在哪里？

内部的js：

	<script>
        alert("Hello World");
    </script>

外部的js：

<script src="/day06/js/axios.min.js"></script>

基础语法

0.数据类型

原始数据类型

1、number 数字 整数，小数，NaN

2、String 字符和字符串一样 “”和’'都可以

3、boolean true false

4、null:一个对象为空的占位符

5、undefined：从null演变过来的，未定义，如果一个变量没有初始化值，默认就是这个

	   var num = 123;
       var num1 = "123";
       var num3 = NaN;
       var num4 = 123.321;
       var num2 = null;
       alert(num5);

1.变量----let

let用的多：

<script>
    var s = "who i am"; // 作用域，重复定义
    const i = 100; // 常量 final
    let j = "123"; // 类似于java
</script>

2.怎么打印—console

console用的多：浏览器的控制台；还有alert：弹出窗口

<script>
    let i = 999*999;
    // // 弹出窗口
    alert("999*999"+i);
    // // 输出到页面上
    document.write("<h1>999*999"+i+"</h1>")
    // 控制台
    console.log("999*999="+i)
</script>

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

3.if条件分支–啥都可以是条件

如果是变量，0表示false，其他都为true；
如果变量不赋值，默认为false；
空字符串为false，其他正常对象都是true；

    let i = 10;
    if(i>=10){
        console.log("i大于等于10");
    }else{
        console.log("i小于10");
    }

    // 可以把变量传入if
    // 0表示false，其他都是true
    let j = -9
    if(j){
        console.log("i大于等于10");
    }

    // 如果没有赋值，默认为false
    let k;
    if(!k){
        console.log("hh")
    }

    // 空字符串为false，其他正常的对象都是true
    if("bac"){
        console.log("abc")
    }

例子：输入框，打印输入和未输入

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username">
<button id="btn">提交</button>
<script>
    let btn = document.getElementById("btn");
    btn.onclick = function (){
        let username = document.getElementById("username");
        if (!username.value)
        {
            console.log("无输入")
        }
        else
        {
            console.log("您输入的是:" + username.value)
        }
    }
</script>
</body>
</html>

4.数组push 和 splice

数组，自动扩容，未定义是undefined

let arr = ['a','b','c','d','e'];

（1）push方法：往最后添加元素

    // 数组常用操作 push,splice
    console.log('数组长度：'+arr.length);
    // 1.push,数组放元素,默认往最后一个添加
    arr.push('g');
    console.log(arr);
    console.log(arr.length);

（2）splice，3个参数，索引开始、删除几个，添加啥

2.1 进行添加，可以多个

	// 2.1 往最前面添加1个元素---添加
    arr.splice(0,0,'a1','a2');
    console.log(arr);
    
    // 2.2 往索引为xx加
    arr.splice(3,0,'b','a');
    console.log(arr)
    
    // 2.3 往最后加1个元素
    arr.splice(arr.length,0,'last');
    console.log(arr);

2.2 删除元素

    // 删除元素
    // 2.1 删除头部2个元素
    arr.splice(0,2);
    console.log(arr);
    
    // 2.2 删除最后1个元素
    arr.splice(arr.length-1,1);
    console.log(arr)

2.3 修改元素

    // 修改元素
    arr.splice(2,1,'ccc');
    console.log(arr);

5.循环语句—数组的打印

fori，forin，forof，foreach，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 用索引的方式
    let arr = ['a','b','c','d','e'];
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // 用增强型
    for (const s of arr) {
        console.log(s);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // 用forin
    for (const arrKey in arr) {
        console.log(arrKey+': '+arr[arrKey]);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // foreach
    arr.forEach(s=>console.log(s))

</script>

</body>
</html>

函数定义&值的比较

1.函数定义—啥都能传

不传的话，返回值为NaN，not a number

（1）方式一：function add(){}

    // 定义一个方法，返回值类型可不写
    function add(a,b) {
        return a+b;
    }
    console.log(add());// NaN,not a number
    console.log(add(1,2))
    console.log(add(1,2,3))
    console.log('aa','bb'); // 字符串也行
    console.log('1',2)

（2）把方法定义成一个常量【常用】

    // 定义添加方法，方法定义成一个变量
    // 常用，函数是一个对象
    let add1 = function (a,b) {
        return a+b;
    }
    console.log(add1(3,5))

2.值的比较—字符串和数字可以比较，===

===可以排除类型不同的情况，

    // 字符串和数字是可以比较的
    console.log('1'==1); // true
    console.log(1==1);
    // 排除类型相等的问题
    console.log('1'===1); // false

JSON对象【重要】—{} + []

s和其他语言通讯 用JSON对象：数组对象[] 和 普通对象{}，可以互相嵌套，甚至套本身

{} ====对应java中的实体类，或者map；
[] ====对应java中的List 和 数组；
{}表示一个对象，用键值对定义,用. 就可以获得— JSON对象

    // js和其他语言通讯 用JSON对象：数组对象[] 和 普通对象{}，可以互相嵌套，甚至套本身
    // {} ====对应java中的实体类，或者map；
    // [] ====对应java中的List 和 数组；
    // {}表示一个对象，用键值对定义,用. 就可以获得--- JSON对象
    let person = {
        "name":"peter","age":28,"gender":"男",
        "address":[{"1001":'南京'},{"1002":'背景'}]
    }
    console.log(person.name)
    // 获得第一套房子
    console.log(person.address[0])

    // 表示多个人
    let persons = [{"name":"p"},{"name":"s"}];
    console.log(persons);

在这里插入图片描述

js操作标签—控制html元素

方法函数
根据id获取元素document.getElementById(“username”)
用选择器获取document.querySelector(“#username”)
用name获取–多个ddocument.getElementsByName(“hobby”)

案例：让选择框 都变成未选择的状态：

在这里插入图片描述

    // 3.用name获取--多个
    let h = document.getElementsByName("hobby");
    h.forEach(ho=>ho.checked=false);

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="peter">
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="foot">足球
<input type="checkbox" name="hobby" value="code">编程


<script>
    // // 1.根据id获取一个元素
    let usernameInput = document.getElementById("username");
    console.log(usernameInput.value);
    // // 1.2 修改 也可以再控制台
    // usernameInput.value = "Sh";

    // 2.用选择器获取
    let u = document.querySelector("#username");
    console.log(u.value);

    // 3.用name获取--多个
    let h = document.getElementsByName("hobby");
    console.log(h);

    // 让三个框全选中
    for (const hKey of h) {
        hKey.checked = true;
    }

    // 用箭头函数
    h.forEach(ho=>ho.checked=false);

</script>
</body>
</html>

常用事件

1.鼠标单击事件–onclick–eat.innerText

鼠标单击一下，增加一个apple，eat.innerText

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="apple">peter eat Apple </span><br>
<button id="close">add</button>

<script>
    // 获取一个按钮
    let addBtn = document.getElementById("close");
    let eat = document.getElementById("apple");
    document.querySelector("#apple"); // 选择器

    // 给按钮注册一个点击事件
    // 如果按钮被鼠标单击，触发该函数
    addBtn.onclick = function (){
        console.log("hello~~~~~~~~~~~~");
        eat.innerText += " apple ";
    }
</script>
</body>
</html>

1.案例：开灯关灯案例—light.src.includes(“off.gif”)

思路，本质是监测鼠标单击，如果单击了就换一下图片

方法一：用includes方法，不能用==，猜测是对比引用指向同一对象？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" id="img">
<script>
    let light = document.getElementById("img");
    light.onclick = function () {
        if (light.src.includes("off.gif")){ // 可以实现
        // if (light.src=="imgs/off.gif"){ // 未实现
            console.log("if")
            light.src = "imgs/on.gif"
        }else {
            console.log("else");
            light.src = "imgs/off.gif"
        }
    }
</script>
</body>
</html>

方案二：顶一个Boolean类型的flag，每次取反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" id="img">
<script>
    let light = document.getElementById("img");
    let flag = true;
    light.onclick = function () {
        if (flag){
            light.src = "imgs/off.gif";
        }else {
            light.src = "imgs/on.gif";
        }
        flag=!flag;
    }
</script>

</body>
</html>

2.鼠标失去焦点时间–onblur

usernameInput.onblur

3.两个textarea同步–oninput

jianInput.oninput

3.案例：两个框同步，类似百度翻译

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username">
<br>
<textarea id="jian"></textarea>
<textarea id="fan"></textarea>

<script>
    // 实现鼠标挪走，如果框失去焦点，就输出一句话
    let usernameInput = document.getElementById("username");
    usernameInput.onblur = function () {
        // 一个失去焦点的事件
        console.log(usernameInput.value);

    }

    // 两个框同步，类似百度翻译
    let jianInput = document.getElementById("jian");
    let fanInput = document.getElementById("fan");
    jianInput.oninput = function () {
        fanInput.value = jianInput.value;
    }

</script>
</body>
</html>

4.案例：按钮弹框window.alert() + 二次确定confirm(“确定删除”);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<br>
<button id="del">删除</button>

<script>
    // window代表的是整个浏览器，windows可省略
    let btn = document.querySelector("#btn");
    let delBtn = document.querySelector("#del");
    btn.onclick = function(){
        window.alert();
    }

    delBtn.onclick = function(){
        // 进行操作的二次确定，返回true，false
        let flag = confirm("确定删除");
        console.log(flag);
    }

</script>
</body>
</html>

5.案例：操作页面—控制浏览器window.open(),close()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="open">访问百度</button>
<button id="close">关闭百度</button>
<br>
<script>
    let openBtn = document.querySelector("#open");
    let closeBtn = document.querySelector("#close");
    let openW

    openBtn.onclick = function () {
        console.log("open~~~~~~~~");
        openW = window.open("https://baidu.com")

    }

    closeBtn.onclick = function (){
        console.log("close~~~~~~~~");
        openW.close();
    }
</script>

</body>
</html>

6.案例：刷新页面—location.reload()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="open">跳转到百度</button>
<button id="reload">刷新页面</button>
<br>
<script>
    let openBtn = document.querySelector("#open");
    let reload = document.querySelector("#reload");

    openBtn.onclick = function () {
        console.log("open~~~~~~~~");
        location.href = "https://baidu.com";
    }

    reload.onclick = function () {
        console.log("reload");
        location.reload();
    }
</script>

</body>
</html>

7.案例：10s后跳转到百度—location.href = “https://www.baidu.com”;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<span id="span" style="color: red">10</span>秒后跳转到百度
<script>
  window.onload = function(){
    let element = document.querySelector("#span");
    function fun(){
      element.innerText--;
      if(element.innerText==0)
      {
        location.href = "https://www.baidu.com";
      }
    }
    setInterval(fun,1000)
  }
</script>
</body>
</html>

8.案例：购物网站首页图自动切换–setInterval(fun,1000)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="img" src="imgs/1.jpg">

<script>
    let img = document.getElementById("img");
    let i = 0;
    let imgList = ["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg"]
    let fun = function () {
        if (i>2){
            i=0;
        }
        img.src = imgList[i];
        i++;
    }

    // 第一个参数，准备循环执行的方法，第二个参数，间隔的毫秒数
    setInterval(fun,1000);

</script>

</body>
</html>

应用案例

1.支付完成后5,4,3,2,1,0跳转到界面

要点：
（1）setInterval(fun,1000);要放在后面；
（2）用document.write不好看，一行一行打印，要用span

document.write("<h1>支付完整后"+i+"s后跳转</h1>");

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">支付完成</button><br>
<span id="msg" style="color:red;"></span>
<script>
    let btn = document.getElementById("btn");
    let msg = document.getElementById("msg");
    let i = 5;
    btn.onclick = function (){

        let fun = function (){
            if (i<=0){
                alert("pay success！");
            }else{
                // document.write("<h1>支付完整后"+i+"s后跳转</h1>");
                // alert("after"+i+"s,while response");
                msg.innerText = " after "+i+"s, will response to alert";
                i--;
            }
        }
        // 第一个参数，准备循环执行的方法，第二个参数，间隔的毫秒数
        setInterval(fun,1000);
    }

</script>
</body>
</html>

2.做一个多选框效果

要点：
（1）如果下面的全选，上面的要自动勾选；
（2）如果全部勾选，则全部勾选，此时一个不勾选，全选就变成不勾选；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" name="all" id="selectAll">全选
<hr>
<input type="checkbox" name="hobby" value="game">游戏<br>
<input type="checkbox" name="hobby" value="foot">足球<br>
<input type="checkbox" name="hobby" value="code">编程<br>

</body>
<script>
    // 1.如果点了全选，让下面的全选
    let selectAll = document.querySelector("#selectAll");
    let h = document.getElementsByName("hobby");

    // 一个点击事件
    selectAll.onclick = function () {
        console.log("selectAll: "+selectAll.checked)
        if (selectAll.checked){
            h.forEach(ho=>ho.checked=true);
        }else {
            h.forEach(ho=>ho.checked=false);
        }
    }

    // 如果有一个function能够统计选中几个
    function check(h) {
        let result = 0;
        for (const ho of h) {
            if (ho.checked){
                result+=1;
            }
        }
        return result;
    }

    // 2.如果下面的全选，上面自动勾选
    for (const ho of h) {
        ho.onclick = function () {
            // 如果选中的数量等于框的数量
            if (h.length==check(h)){
                console.log("全选");
                selectAll.checked = true;
            }else{
                selectAll.checked = false;
            }
        }
    }
</script>

</html>

3.js网络请求初步案例：简体繁体转换—axios

在这里插入图片描述

ZhChangeServlet.java的代码如下，

易错点：
（1）req.getParameter(“jian”); 这里的参数，容易搞错；是前端get的/day06/zh/change?jian=中的jian；
（2）String jianStrs = req.getParameter(“jian”);只有这个输入不为null的时候才能进行简体繁体转换；

知识点：
（1）@Test注解的使用，把方法转成直接运行版；
（2）IOUtils.readLines()方法，更详细的参考下面博客：

Java基础（maven）——maven新建项目 & 常用IO工具 & Durid数据库工具 & 案例

package com.tianju.servlet;

import com.tianju.util.StringUtils;
import org.apache.commons.io.IOUtils;
import org.junit.Test;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.HashMap;
import java.util.List;

/**
 * 简体中文转成繁体中文的servlet
 */
@WebServlet("/zh/change")
public class ZhChangeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.调用方法获得hasMap;
        HashMap<String,String> map = zhMap();
        // 2.进行简体繁体转换，如果没有找到，为null，则用原来的简体
        // 获取前端传的值
        String jianStrs = req.getParameter("jian");
        System.out.println(jianStrs);
        if (!StringUtils.isBlank(jianStrs)){
            StringBuilder fanStrs = new StringBuilder();
            for (int i = 0; i < jianStrs.length(); i++) {
                String fan = map.get(jianStrs.charAt(i)+"");
                if (fan==null){
                    fanStrs.append(jianStrs.charAt(i));
                }else{
                    fanStrs.append(fan);
                }
            }
            // 3.resp到前端
            resp.getWriter().write(String.valueOf(fanStrs));
        }
    }

    private HashMap<String,String> zhMap() throws IOException {
        // 1.读取简体繁体对应的文件，转换成hasMap
        List<String> stringList = IOUtils.readLines(
                new FileInputStream("D:\\Myprogram\\idea-workspace\\javaweb0606\\javaweb0606\\src\\main\\resources\\jf_map_utf8.txt"),
                "UTF-8");
        HashMap<String,String> map = new HashMap<>();
        for(String s:stringList){
            map.put(s.split(":")[0],s.split(":")[1]);
        }
        return map;
    }

//    @Test
//    public void testZhDemo() throws IOException {
//        // 1.读取简体繁体对应的文件，转换成hasMap
//        List<String> stringList = IOUtils.readLines(
//                new FileInputStream("D:\\Myprogram\\idea-workspace\\javaweb0606\\javaweb0606\\src\\main\\resources\\jf_map_utf8.txt"),
//                "UTF-8");
//        HashMap<String,String> map = new HashMap<>();
//        for(String s:stringList){
//            map.put(s.split(":")[0],s.split(":")[1]);
//        }
//        System.out.println(map.get("万"));
//        System.out.println(map.get("wang"));
//        String strs = "我是一只小柯基";
//        StringBuilder fanStrs = new StringBuilder();
//        for (int i = 0; i < strs.length(); i++) {
//            String fan = map.get(strs.charAt(i)+"");
//            if (fan==null){
//                fanStrs.append(strs.charAt(i));
//            }else{
//                fanStrs.append(fan);
//            }
//        }
//        System.out.println(fanStrs);
//    }

}

zhChange.jsp代码如下：

易错点：
（1）相比jsp通过name在后端获取值不同，这里获取值用axios.get(“/day06/zh/change?jian=”+jianInput.value)，后端用req.getParameter(“jian”);来获取值；


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/day06/js/axios.min.js"></script>
</head>
<body>
简体：
<textarea id="jian" name="input" style="width: 200px;height: 50px"></textarea><br>
<hr>
繁体：
<textarea id="fan" name="output" style="width: 200px;height: 50px"></textarea><br>

<script>
    // 两个框同步，类似百度翻译
    let jianInput = document.getElementById("jian");
    let fanInput = document.getElementById("fan");
    // 监听一个输入的事件
    jianInput.oninput = function () {
        console.log(jianInput.value);
        // 发送ajax请求
        axios.get("/day06/zh/change?jian="+jianInput.value)
            .then(response=>{
                // 获得繁体字
                console.log(response);
                console.log(response.data);
                fanInput.value = response.data;
        })

    }
</script>

</body>
</html>

总结

JS是啥，基础语法是啥，常用的有啥；
JS能干啥，语言的特点和应用；

Arya's Blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端之JSON详解，大牛最佳总结
2401_84092483的博客
04-05 913
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
前端之json对象的使用
一步一个脚印_binding
04-10 924
前端json，全称：JavaScriptObjectNotation(JavaScript 对象表示法) 优点： JSON 比 XML 更小、更快，更易解析。 JSON 是纯文本,JSON 具有层级结构, JSON 可通过 JavaScript 进行解析 JSON 数据可使用 AJAX 进行传输等等 实例： myObj = { "name":"baidu", "alexa":10000, "sites": { "site1":"www.baidu....
前端JavaScript——json对象（重点掌握）
m0_48930261的博客
08-19 1519
1.json的定义： JSON全称是JavaScript Object Notation,是一种轻量级的数据交换格式 json对象： 1、下面这种格式一般用于数据的传输 2、格式：以{}括起来 3、json对象属性的定义：—— 属性名：属性值； 属性和属性之间用“，”逗号隔开 4、json对象的调用：直接【对象名称.属性名】就可以调用到属性值 2.JSON的语法规则： 1）数据以名称/值对的形式保存，如：{“key”: “value”}。 JSON的值value 可以使数字、字符串、null、tru
关于JSON对象和前端js对象
qq_44718039的博客
11-05 572
JSON对象
JavaScript处理JSON
weixin_33862188的博客
01-08 331
一、什么是JSON？　　 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#,...
a2z.zip_A2&loc_javascript
09-20
标题 "a2z.zip_A2&loc_javascript" 暗示了这是一个关于JavaScript编程的压缩文件，其中可能包含了与"A2"（可能是项目代号或特定概念）和"loc"（可能是局部变量或者地理位置定位）相关的代码或教程。描述中的 "loc ...
JavaScript对象共6页.pdf.zip
10-30
JavaScript对象是编程语言JavaScript中的核心概念，它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的动态类型语言，其对象系统是其灵活性和强大功能的基础。在深入理解JavaScript对象之前，我们需要先...
JavaScript01 基础.pdf_前端学习资料
09-01
总之，JavaScript作为前端开发的主要语言，涵盖了广泛的语法和概念，包括变量、数据类型、运算符、流程控制、函数、对象以及Web Console的使用，这些都是前端学习者需要掌握的基本技能。随着技术的不断发展，...
JavaScript基础语法，内含ppt，详细源码案例，node软件
06-27
"_4_ __.ppt"和"_5_ __.ppt"文件可能继续深化JavaScript语法的学习，可能包括对象和数组的操作，比如对象字面量、构造函数、数组方法（push、pop、shift、unshift、splice等），以及函数表达式、箭头函数、this指向...
javascript json 添加 修改 删除 的操作
掬水月在手，弄花香满衣
12-30 231
[code="java"] //下面的操作中可能需要这三个函数我先放到这 //转换为json function $parseJson(str){ try{ eval('var obj='+str); return obj; }catch(e){ return null; } } //数组转换为字符串 function $ArrayToString...
【JSON】基本使用
Awt_FuDongLai的博客
10-26 140
文章目录1 概述23参考资料 1 概述 json是一种轻量级的数据交换格式 （1）轻量级指的是与XML做比较 （2）数据交换指的是客户端和服务器之间业务数据的传输格式 2 3 参考资料 【1】尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 ...
javascript中json的使用
weixin_43194854的博客
03-17 591
json的使用场景String互转JSONJSON数据处理JSON多维数据 场景 在开发中，需要对部分信息进行阶段性保存，后续也需要读取，为方便使用，决定将信息转换为json，在使用中方便利用json的特性进行添加与修改 String互转JSON String转换JSON时采用JSON.parse 方法 JSON转换String时采用JSON.stringify方法 let str= ""; let str_json = JSON.parse(str); console.log("str_jso
小案例：javascript实现对json文件的增删改查
weixin_46682277的博客
02-18 5407
下面为books.json格文件的数据 [{ "id": 1, "bookName": "完美世界", "author": "辰东", "hero": "石昊" }, { "id": 2, "bookName": "武庚纪", "author": "沈乐平", "hero": "武庚" }, { "id": 4, "bookName": "天行九歌", "author": "陈岚", "hero": "韩非" }
javascript json对象操作（基本增删改查）
qingyanhuan的博客
11-03 4121
/** * Json对象操作，增删改查 * * @author lellansin * @blog www.lellansin.com * @version 0.1 * * 解决一些常见的问题 * get/set 解决获取和设置时，无节点中断的问题 * create 可以创建多级节点，若存在则覆盖新值 * delete 删除节点及其子节点 * print_r 格式化
JavaScript操作JSON对象
OneFine的技术博客
05-03 4540
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
JavaScript对Json的增删改属性
热门推荐
xerxes的专栏
10-15 10万+
原文地址：点击打开链接 使用JS对Json数据的处理，项目遇到需要对Json数据进行相关操作，比如增删改操作，本以为会比较难，网上搜索下，发现还是比较简单的，贴一段代码： var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中
Json详解（前端到后端）
qq_39380737的博客
08-10 4945
       小白谈对JSON的理解 Json有两种数据格式：前后台开发约定的一种数据格式，{key：value}类型的，key必须是字符串类型的，value是Object类型(也就是任意类型) 第一种： 对象格式{key:value} 第二种： 数组格式[{key:value,key1:value1},{key2:value2,key3:value3}] 注意：数...
前端js遍历json对象方法
山鬼谣的专栏
06-07 1万+
环境操作系统： win7情形最近遇到这么一个情况，后台使用LinkedHashMap处理好数据，在使用renderJson()返回数据的时候发现，数据的原有顺序没有了，后来才知道renderJson()方法底层使用Gson据网上说是使用HashMap，所以是无序的。后来，我后台处理采用List<Map>的方式来返回数据，顺序有了，前端遍历的时候，遇到困难。 最开始我是这么遍历的：for(var l
json.stringify &
最新发布
09-13
例如，我们可以定义一个 JavaScript 对象 obj，然后使用 JSON.stringify() 方法将其转换为 JSON 字符串： ``` var obj = { "name": "John", "age": 30 }; var jsonString = JSON.stringify(obj);``` 在这个例子中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Arya's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值