JavaScript语法

FrankieCao

于 2023-05-12 19:42:36 发布

阅读量132

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/FrankieCao/article/details/130608941

版权

3.JSON对象转字符串、JSON字符串解析为对象

1.引入方式

在HTML页面内编写JavaScript代码
引入外部JavaScript代码

<script type="text / javascript" src="script / out.js"></script>

注意：

不是单标签
负责引入外部JavaScript文件的script标签其内部不能写JavaScript代码，写了也没用。

2.数据类型

基本数据类型
- 数值类型：JavaScript 不区分整数和小数，都是数值
- 字符串：单双引号一样
- 布尔类型：true、false，其他类型都可以自动转换为布尔类型
对象类型
- 对象
- 函数，是一种特殊的对象
- 数组
- 正则表达式

if (100) {
    console.log("100会被转换为布尔类型的true");
}
if (0) {

} else {
    console.log("0会被转换为布尔类型的false")
}
if ("false") {
    console.log("false作为非空字符串，被转换为了布尔类型的true");
}

//创建对象方式1
var obj01 = new Object();
obj01.username = "tom";
obj01.userAge = 22;
obj01.subject = 'java';
console.log(obj01);

//创建对象方式2
var obj02 = {
    "stuname":"jerry",
    "stuAge":20,
    "stuSubject":"C++"
}
// 创建数组：方式一
let arr01 = new Array();
arr01[0] = "data01";
arr01[1] = "data02";
arr01.push("data03");
arr01.push(1000);

console.log(arr01);

var data = arr01.pop();
console.log(data);

console.log(arr01);

// 创建数组：方式二
let arr02 = ["value01", "value02", "value03"];
arr02.push("value04");
console.log(arr02);

3.变量

①语法规则

标识符严格区分大小写
声明变量不限定类型
给变量赋值也不限定类型
变量使用过程中，可以使用 typeof 关键字来判断变量的类型
声明变量的关键字 let

②示例代码

var a = 10;
var A = 20;
console.log("A+"+A);
console.log("a+"+a);
a = "卧嫩蝶";
console.log("a+"+a);
console.log(typeof a);

4.函数

①系统内置函数

alert()：弹出警告框
console.log()：打印在控制台
confirm()：弹出确认框

<body>
<button id="btnId" type="button">你点一个试试！</button>
</body>
<script type="text/javascript">
    //在页面加载过程中执行JavaScript程序
    alert("你点一个试试！");
    //调用系统函数 alert(),在页面上弹出一个警告框
    function showAlert(){
        //声明一个JavaScript函数，在用户点击后执行
        alert("I'm in a functionn");
    }

    /**
     * 获取按钮元素 <button> 对应的对象
     * var btnEle：是声明的一个JavaScript变量
     * document 是系统内置的一个对象，代表当前整个HTML文件，可以直接拿来用
     * getElementById("btnId")，根据id获取元素对象
     * @type {HTMLElement}
     */
    var btnEle = document.getElementById("btnId");
    /**
     * 在浏览器控制台打印 btnEle 对象
     * console也是系统内置对象，代表浏览器控制台，可以直接使用
     * log(***)表示在浏览器控制台打印内容
     */
    console.log(btnEle);
    /*script标签放在head标签内，打印值为null.因为 script
    标签加载且执行 JavaScript 代码时，button 尚未加载，所以获取不到
    所以要放在body标签后面*/
    /**
     * btnEle.onclick 是将按钮对象和专门的函数联系起来
     * **.onclick = showAlert(); 是将函数绑定到单击按钮事件上
     * 对象名.事件属性 = 函数名称
     */
    btnEle.onclick = showAlert();
</script>
</html>

②函数声明

1.声明有名称的函数

    function sum(m,n){
      return m+n;
    }
    let sumResult1 = sum(66,88);
    console.log("sumResult =" + sumResult1);

2.声明匿名函数赋值给变量

    let sumResult2 = function (a,b){
      return a+b;
    };

    console.log("sumResult2 =" + sumResult2(6,8));

    sumResult1 = (function (i,j){
      return i+j;
    })(6,8);
    console.log("sumResult =" + sumResult1);

3.函数调用

在JavaScript中函数也是一个对象，声明一个函数就是声明一个函数对象，在函数对象后面加（），就能调用这个函数。

let ref01 = function () {
    console.log("★函数执行了！" + Math.random());
}

// 调用函数
ref01();

// 让函数多一个引用
let ref02 = ref01;

// ref02 也是函数引用，加()也是调用
ref02();

4.this关键字

this关键字代表当前的函数对象

  <script type="text/javascript">
    //声明一个函数
    function showSubject(){
      console.log("subject = "+this.subject);
    }

    //创建一个对象，this表示当前调用方法的对象
    let stu01 = {
      "stuName":"jack",
      "subject":"Java",
      "showMySubject":showSubject
    }
    stu01.showMySubject();
    let stu02 = {
      "stuName":"rose",
      "subject":"Go",
      "showMySubject":showSubject
    }
    stu02.showMySubject();
  </script>

5.对象

①创建对象

使用 new Object
{ }

②给对象的属性赋值

设置方式

通过对象的引用来设置；在{ }内设置
数据类型
1. 基本数据类型
2. 对象类型
  1. 对象
  2. 数组
  3. 函数

    let obj01 = new Object();
    let obj02 = {
      "userName":"jack",
      "pwd":"123456"
    };
    obj01.userAge=26;
    obj01.empSalary = 8500;
    obj01.printMySalary = function (){
      console.log(this.empSalary);
    }
    obj01.subjectArr = ["aaa", "bbb", "ccc"];
    obj01.family = {
      "members":["uuu", "vvv", "ttt"]
    };
    console.log(obj01);
    obj02.userAge = 58;
    console.log(obj02);

6.数组

  <script type="text/javascript">
    //1.创建数组
    let arr01 = new Array();
    let arr02 = [];
    //2.给数组赋值
    arr01[0] = "hello";
    arr01[1] = "my";
    arr01[2] = "son";
    arr01.push("666");
    console.log(arr01);
    arr02[0] = "hello";
    arr02[1] = "my";
    arr02[2] = "daughter";
    arr02.push("888");
    console.log(arr02);
    //3.从数组弹出一个元素
    let popValue = arr01.pop();
    console.log("数组值还有"+popValue);
    console.log(arr01);
    //4.颠倒数组元素的顺序
    arr02.reverse();
    console.log(arr02);
    //5.遍历数组
    for (let i = 0;i < arr01.length;i++){
      console.log(arr01[i]);
    }
    //6.把数组元素连成一个字符串，并用指定的符号分隔
    let strArr = arr02.join("<==>");
    console.log("strArr="+strArr);
    //7.把字符串拆分成数组
    let arrStr = strArr.split("<==>");
    console.log(arrStr);
    //8.删除元素,后方元素自动向前补位
    arr02.push("my");
    arr02.push("888");
    console.log(arr02);
    arr01.splice(1,2);
    console.log(arr01);
  </script>

7.JSON

1.JSON的意义

跨平台传输数据，需要借助

HTTP协议通用规范
JSON数据格式

2.JSON的格式

边界符号
- { }：定义json对象
- [ ]：定义json数组
json对象格式：包含一组用逗号分开的键值对
- key：固定就是字符串类型
- value：可以是任意类型
- key和value之间用：分开
json数组格式：包含一组用逗号分开的值
- value：任意类型
由于value可以是任意类型的，也包括引用类型，所以理论上可以无限嵌套
- value可以是一个json对象
- value可以是一个json数组

        //定义JSON对象
        let jsonObj01={
            "userName":"jerry",
            "userAge":23
        };
        console.log(jsonObj01);
        //类型
        console.log(typeof jsonObj01);

        //定义JSON对象
        let jsonArr=["w666","ni88","oo"];
        console.log(jsonArr);
        console.log(typeof jsonArr);

        //嵌套json对象
        let jsonObj02 = {
            "userId":255,
            "userName":"frankie",
            "userSchool":{
                "schoolId":"001",
                "schoolName":"尚硅谷",
                "schoolAddress":"北京"
            }
        }
        console.log(jsonObj02);

        //嵌套JSON数组
        let jsonArr02=[
            {
                "stuId":11,
                "stuName":"cao",
                "stuSex":"male"
            },
            {
                "stuId":12,
                "stuName":"li",
                "stuSex":"male"
            },
            {
                "stuId":13,
                "stuName":"jiang",
                "stuSex":"female"
            }
        ];
        console.log(jsonArr02);

3.JSON对象转字符串、JSON字符串解析为对象

JSON对象是泛指，包括JSON对象和JSON数组。

        //JSON对象生成json字符串
        let jsonStr01 = JSON.stringify(jsonObj02);
        console.log("jsonObj02的类型是"+typeof jsonObj02);
        console.log("jsonStr01的类型是"+typeof jsonStr01);
        console.log(jsonStr01);
        //转换之前是object，抓转换之后是String（逻辑上没变，变了数据类型）
        console.log("访问jsonStr01属性"+jsonStr01.userId);//转换后无法直接访问属性
        console.log("访问jsonObj02属性")+jsonObj02.userId;//对象才可以访问属性

        //json字符串解析出json对象,
        let jsonObj03 = JSON.parse(jsonStr01);
        console.log("jsonObj03的类型为"+typeof jsonObj03);
        console.log("访问属性"+jsonObj03.userAge);
        console.log(jsonObj03);

FrankieCao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语法

在JavaScript中函数也是一个对象，声明一个函数就是声明一个函数对象，在函数对象后面加（），就能调用这个函数。--使用 src 属性指定外部 JavaScript 文件的路径-->JSON对象是泛指，包括JSON对象和JSON数组。通过对象的引用来设置；this关键字代表当前的函数对象。跨平台传输数据，需要借助。
复制链接

扫一扫