JavaScript基础语法

ios_prestige

已于 2023-08-15 20:58:14 修改

阅读量104

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-08-04 19:17:43 首次发布

本文链接：https://blog.csdn.net/qq_43658148/article/details/131544581

版权

一、理解变量是存储数据的“容器”

1.JavaScript介绍

1）JavaScript是什么

a.JavaScript（是什么？）

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

b.作用（做什么？）

------网页特效（监听用户的一些行为让网页做出对应的反馈）

------表单验证（针对表单数据的合法性进行判断）

------数据交互（获取后台的数据，渲染到前端）

------服务器编程（node.js)

c.JavaScript的组成（有什么？）

----ECMAScript:

规定了js基础语法核心知识，比如变量、分支语句、循环语句、对象等等

---- Web APIs：

DOM 操作文档，比如对页面元素进行移动、大小、删除添加等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器

2）JavaScript书写位置

a.内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

拓展：alert('你好，js')页面弹出警告对话框

<body>
    <!-- 内部js -->
    <script>
        // 页面弹出警示框
        alert('你好,js')
    </script>
</body>

b.外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

js代码：

alert('我是外部的js')

html外部引入js代码：

<body>
    <script src="js/my.js">
        // 里面不要写任何的东西
    </script>
</body>

c.内联JavaScript

代码写在标签的内部

语法：

3）JavaScript的注释

目标：了解JavaScript注释写法以及结束符通俗写法

注释：

a.单行注释：

符号：//

作用：右边这一行的代码会被忽略

mac快捷键：command+/

b.块注释：

符号：/* */

作用：在/* 和 */之间的所有内容都会被忽略

mac中的快捷键：option+shift+A

4）JavaScript的结束符

a.作用：使用英文的;代表语句结束

b.实际情况：实际开发中，可写可不写，浏览器（JavaScript）可以自动推断语句的结束位置

c.现状：在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符

d.约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

5）输入和输出语句

a.目标：能写出常见JavaScript输入输出语法

b.什么是语法：

人和计算机打交道的规定约定

c.输入和输出也可理解为和和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程

d.输出语法：

        // 1.文档输出内容
        document.write('我的div标签');
        document.write('<h1>我的div标签</h1>');

      // 2.警示框输出内容
        alert('我是一个警示框')

e.输入语句

>语法：prompt('请输入您的姓名")

> 作用显示一个对话框，对话框包含一条文字信息，用来提示用户输入文字

        // 4.输入语句
        prompt('请输入您的年龄')

f.案例作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('你好 JS~')
        document.write('JavaScript 我来了!')
        console.log('它~会魔法吧~')
    </script>
</body>
</html>

g.JavaScript代码执行的顺序

按HTML文档流顺序执行JavaScript代码

alert()和prompt()他们会跳过页面渲染先被执行（目前作为了解）

6）字面量

a.目标：能说出什么是字面量

b.在计算机科学中，字面量(literal）是在计算机中描述事/物

比如：我们的工资是：1000 此时1000就是字面量

'prestige'字符串字面量

还有接下来我们学的[]数组字面量 {}对象字面量等等

2.变量

2.1变量是什么

1）问题1:用户输入的数据我们如何存储起来？

答：变量

2）变量是什么？

a.目标：能够理解变量是计算机存储数据的“容器”

b.变量：

白话：变量就是一个装东西的盒子

通俗：变量是计算机中用来存储数据的“容器”，他可以让计算机变得有记忆

注意：变量不是数据本身，他们仅仅是一个用于存储数据的容器，可以理解为一个一个用来装东西的纸箱子

3）总结：

变量是怎么理解的？

计算机中用来存储数据的“容器”，简单理解是一个个的盒子

变量有什么作用？

用来存储数据的，注意变量指的是容器而不是数据

你还能想到哪些生活中的变量？

HTML标签、教室、宿舍.....

2.2变量基本使用

1）目标：能够声明一个变量并完成赋值操作

2）变量的声明

a.要想使用变量，首先需要创建变量（也称为声明变量或者定义变量)

b.语法：

let 变量名；

c.声明变量由两部分构成：声明关键字、变量名（标识）

d.let即关键字（let 允许、许可、让），所谓关键字是系统提供的专门用来声明（定义）变量的词语

e.举例：

let age

3）变量的赋值

a.定义了一个变量后，你就能够初始化它（赋值），在变量名之后加一个“=”，然后是数值。

b.简单点，也可以声明变量的时候直接完成赋值操作，这种操作也称为变量初始化

    <script>
        //1.声明一个年龄变量
        let age

        // 2.赋值 =
        age = 18
        console.log(age)

        // 3.声明的同时直接赋值， 变量的初始化
        let sum = 200
        console.log(sum)
    </script>

c.练习

需求：

声明1个变量，用于存放用户购买的商品数量(num）为20件

声明1个变量，用于存放用户的姓名（uname）为"张三“

依次控制台打印输出两个变量

    <script>
        let num = 20;
        let uname = '张三'
        console.log(num)
        console.log(uname)
    </script>

4）更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

    <script>
        let age = 18;
        age = 19;
        console.log(age);
    </script>

注意：let不允许多次声明一个变量

5）声明多个变量：

变量赋值以后，还可以通过简单地给它一个不同的值来更新它。

语法：多个变量之间用逗号隔开。

let age = 18,uname = 'pink'

    <script>
        // 声明多个变量
        // let age = 18, uname = 'prestige'
        // console.log(age,uname)
        // 提倡声明的方式
        let age = 20
        let uname = 'prestige'
        console.log(age,uname)
    </script>

6）输出用户名案例

    <script>
        // 1.用户输入
        // 2.内部处理保存函数
        let uname = prompt('请输入姓名')
        // 3.打印输出
        document.write(uname)
    </script>

7）交互案例---交换两个变量的值

需求：有两个变量，num1里面放的值是10，num2里面放的值是20

最后变为num1里面放的值是20，num2里面放的值是10

    <script>
        let num1 = 10
        let num2 = 20
        let temp
        temp = num1
        num1 = num2
        num2 = temp
        console.log(num1,num2)
        let uname1 = 'prestige'
        let uname2 = '杨紫'
        temp = uname1
        uname1 = uname2
        uname2 = temp
        console.log(uname1,uname2)
        
    </script>

2.3变量的本质

1）目标：能够说出变量的本质是什么

2）内存：计算机中存储数据的地方，相当于一个空间

3）变量本质：是程序在内存中申请的一块用来存储数据的小空间

2.4变量命名规则与规范

1）目标：能写出符合规范的变量名

2）规则：必须遵守，不遵守报错（法律层面）

规范：建议，不遵守不会报错，但不符合业内通识（道德层面）

3）规则：

a.不能用关键字：关键字含义的字符，javaScript内置的一些英语词汇，例如：let,var,if,for等

b.只能用下划线、字母、数字、$组成，且数字不能开头

c.字母严格区分大小写，如Age和age是不同的变量

4）规范：

a.起名要有意义

b.遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写，例如：userName

5）案例：

    <script>
        let uname = prompt('请输入您的姓名')
        let age = prompt('请输入您的年龄')
        let gender = prompt('请输入您的性别')
        document.write(uname,age,gender)
    </script>

6）let和var的区别

a.在较旧的javaScript，使用关键字var来声明变量，而不是let

b.var现在开发中一般不再使用，只是我们可能在老版程序中看到它

c.let为了解决var的一些问题

d.var声明：

可以先使用在声明（不合理）

var声明过的变量可以重复声明（不合理）

比如变量提升、全局变量、没有块级作用域等等

e.结论：

var就是一个bug，别迷恋它，以后声明变量我们统一用let

7）数组的基本使用

a.数组(Array)----一种将一组数据存储在单个变量名下的优雅方式

b.声明语法

let 数组名 = [数据1，数据2，数据3]

数组是按顺序保存，所以每个数据都有自己的编号，计算机从0开始，依次类推，在数组中，数据的编号也叫索引或下标，数组可以存储任意类型的数据

c.取值语法

数组名[下标]

d.数据取值案例

需求：定义一个数组，里面存放星期一、星期二、直到星期日，打印出星期日

        let weeks = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
        console.log(weeks[6]);
        // 数组的长度等于索引号加1
        console.log(weeks.length)

e.一些术语

元素：数组中保存的每个数据都叫做数组元素

3.常量

1）概念：使用const声明的变量称为“常量”

2）使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

3）命名规范：和变量一致

4）常量使用：

    <script>
        // 常量 不允许更改值
        const PI = 3.14
        console.log(PI)
        PI = 3.15
        console.log(PI)
        // 常量声明的时候必须赋值
    </script>

5）注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

6）let - 现在实际开发变量声明方式

var-----以前的声明变量的方式，会有很多问题

const ---类似于let，但是变量的值无法被修改

4.数据类型

1）数据类型

a.目标：能说出JS中基本数据类型有哪些

b.JS数据类型整体分为两类

基本数据类型

引用数据类型

c.数据类型-----数字类型（Number）

》即我们数学中学习到的数字，可以是整数、小数、正数、负数

〉JavaScript中的正数、负数、小数等统一称为数字类型

》JS是弱数据类型，变量到底属于哪种类型，只有赋值以后才能确认

d.算术运算符-----包括加、减、乘、除、取余（求模）

乘、除、取余优先级相同

乘、除、取余优先级大于加、减

e.计算圆的面积，对话框输出圆的半径，算出圆的面积并显示到页面

    <script>
        let r = prompt('请输入圆的半径')
        let s = 3.14 * r * r
        document.write(s)
        // 当计算错误的时候会报这个错误
        // NaN not a number
        // NaN 是粘性的，跟任何的数据进行操作都是NaN
    </script>

f.数据类型---字符串类型（string)

> 通过单引号('')，双引号("")或反引号（‘）包裹的数据都叫做字符串，单引号和双引号没有本质的区别，推荐使用单引号。

> 注意事项

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自己嵌套自己（口诀：外双内单，或者外单内双）

必要时可以使用转义字符\，输出单引号或者双引号

    let str = 'prestige'
        console.log(11)
        console.log(str)
        console.log('str')
        console.log('11')
        // 空字符串
        let st1 = ''
        // 如果外面是单引号的里面要放双引号
        console.log('我是"prestige"')
        console.log('我是\'prestige\'')

> 字符串拼接

场景：+运算符可以实现字符串的拼接

口诀：数字相加，字符相连

        // 字符串拼接
        console.log(1 + 3)
        console.log('pink'+'prestige')
        let uname = '刘德华'
        let water = '水'
        let age = 18
        // 有一个字符串+就是拼接，数字可以和字符串进行拼接
        document.write('我今年'+age+'岁了')

》模版字符串

拼接字符串和变量

在没有他之前，要拼接变量比较麻烦

语法

a.反引号（``）

在英文输入模式下按键盘的tab键上方的那个键（1的左边的那个键，这个键就是反引号）

内容拼接变量时，用${}保住变量

        // 模版字符串  字符串用反引号包裹
        document.write(`我今年${age}岁了`)

> 模版字符串案例

    <script>
        let name = prompt('请输入您的姓名')
        let age = prompt('请输入您的年龄')
        document.write(`大家好，我叫${name}，今年${age}岁了`)
    </script>

g.布尔类型(boolean)

    <script>
        // true false 是布尔类型字面量
        let isCool = false
        console.log(isCool)
        
    </script>

h.数据类型----未定义类型（undefined)

> 未定义是比较特殊的类型，只有一个值underfined

> 什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值是undefined，一般很少【直接】为某个变量赋值为undefined

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

g.数据类型----null（空类型）

JavaScript中的null仅仅是一个代表“无”，“空”或“值未知”的特殊值

let obj = null

console.log(obj)

null和undefined区别：

undefined表示没有赋值

null表示赋值了，但是内容为空

》null开发中的使用场景

官方解释：把null作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

   <script>
        // 1.true false 是布尔类型字面量
        let isCool = false
        console.log(isCool)

        // 2.未定义类型  弱数据类型，声明一个变量未赋值就是undefined
        let num 
        console.log(num)

        // 3.null 空的
        let obj = null
        console.log(obj)

        // null和undefined的区别
        // 计算有区别
        console.log(undefined + 1)
        console.log(null + 1)
    </script>

2）监测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型，它支持两种语法格式

》作为运算符：typeof x（常用的写法）

> 函数形式：typeof(x)

    <script>
        let num = 10
        console.log(typeof num)
        let str = 'prestige'
        console.log(typeof str)
        let str1 = '10'
        console.log(typeof str1)
        let flag = false
        console.log(typeof flag)
        let un
        console.log(typeof un)
        let obj = null
        console.log(typeof obj)
    </script>

5.类型转换

5.1为什么要进行类型转换

1）JavaScript是弱数据类型，JavaScript也不知道变量到底属于哪一种数据类型，只有赋值了才清楚

2）坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能简单的进行加法运算

3）此时需要转换变量的数据类型，通俗来说就是把一种数据类型转换成我们需要的数据类型

5.2隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

1）+号两边只要有一个是字符串，都会把另外一个转成字符串

2）除了+号以外的算术运算符，比如-*/等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验才能总结

小技巧：

+号作为正号解析可以转换成数字型

任何数字与字符串相加结果都是字符串

5.3显式转换

1）编程的时候过度依赖系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律，为了避免因隐式转换带来的问题，通常需要对数据进行显示转换

2）自己写代码告诉系统该转成什么类型

3）转换为数字

a.Number（数据）

转成数字类型，如果字符串内容里有非数字，转换失败时结果为NaN(Not a Number）即不是一个数字。NaN也是number类型的数据，代表非数字

b.parseInt（数据）

只保留整数

c.parseFloat（数据）

可以保留小数部分

    <script>
        // 一般都是把数字的字符串转换为数字类型
        let str = '123'
        console.log(Number(str))
        console.log(Number('pink'))
        let num = prompt('输入年薪')
        console.log(Number(num))
        let num1 = +prompt("请输入您的年薪")
        console.log(num1)
        //把字符串转换成数字，不要px
        console.log(parseInt('12px'))  //12
        // 不会四舍五入，直接取整数部分
        console.log(parseInt('12.85px'));  //12
        console.log(parseFloat('12.94'))
    </script>

4)计算两数之和

    <script>
        let num = Number(prompt('请输入第一个数:'))
        let num1 = +prompt('请输入第二个数:')
        alert(`两个数之和为:${num + num1}`)
    </script>

6.实战案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
        
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
           
        }
        
        th {
            padding: 5px 30px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h2>订单确认</h2>
   

    <script>
        // 1.用户输入
        let price = +prompt('请输入商品的价格:')
        let num = +prompt('请输入商品数量:')
        let address = prompt('请输入收货地址:')
        // 2.计算总额
        let total = price * num

        // 3.页面打印渲染
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>

        <tr>
            <th>小米手机青春PLUS</th>
            <th>${price}元</th>
            <th>${num}</th>
            <th>${total}</th>
            <th>${address}</th>
        </tr>

    </table>
        `)
    </script>
</body>
</html>

二、理解什么是数据并知道数据的分类

1.运算符

1）赋值运算符

a.目标：能够使用赋值运算符简化代码

b.赋值运算符：对变量进行赋值的运算符

已经学过的赋值运算符：= 将等号右边的值赋值给左边，要求左边必须是一个容器

其他赋值运算符：+= -= *= /= %=

    <script>
        let number = 1;
        console.log(number)
       number = number + 1
       number += 1
       console.log(number)
    </script>

2）一元运算符

a.目标：能够使用一元运算符做自增运算

b.众多javaScript的运算符可以根据所需表达式的个数，分为一元

3）比较运算符

4）逻辑运算符

5）运算符优先级

2.语句

3.综合案例

三、知道JavaScript数据类型转换的特征

四、函数的使用

1.为什么需要函数

代码复用

1）函数：

function，是被设计为执行特定任务的代码块

2）说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

比如我们之前学的alert(),prompt()和console.log()都是一些js函数，只不过已经封装好了，我们直接使用。

2.函数使用

1）目标：掌握函数语法，把代码封装起来

2）函数的声明语法

函数的命名规范：

和变量名命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

3）函数的调用

函数名()

4）案例

    <script>
        // 1.求俩个数的和
        function getSum() {
            let num1 = +prompt('请输入第一个数：')
            let num2 = +prompt('请输入第二个数：')
            console.log(num1+num2)
        }
        getSum()
        // 2.求1～100之间的和
        function getSum1() {
            let sum = 0
            for(let i = 0; i <= 100; i++) {
                sum += i
            }
            console.log(sum)
        }
        getSum1()
    </script>

3.函数传参

1)声明语法

参数列表：

传入数据列表，声明这个函数需要传入几个数据，多个数据用逗号隔开

2）调用语法

方法名（参数）

3）参数

a.参数分为实参和形参

b.形参可以理解为是在这个函数内声明的的变量，实参可以理解为是给这个变量赋值

c.开发中尽量保持形参和实参个数一致

        function getSum(start,end) {
            console.log(end);
            let sum = 0
            for(let i = start; i <= end; i++) {
                sum += i
            }
            console.log(sum)
        }
        // getSum(50)
        // getSum(100)
        getSum(1,50)  //实参 -- 实际的参数     调用的小括号里面
        getSum(100,101)     //实参

d.如果一个函数有两个参数，但是没有传值，那么就会是undefined+undefined,是NAN，那么可以给形参默认值，可以默认为0

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数不会被执行


        // 两数求和
        function getTwoAdd(num1,num2) {
            document.write(num1+num2)
        }
        getTwoAdd(10,20)
        getTwoAdd()

        function getAdd(x = 0, y = 0) {
            document.write(x + y)
        }

        getAdd()

4）案例---求一个学生的成绩

    <script>
        // 学生的分数是一个数组，计算每个学生的总分
        // 给一个参数的默认值
        function addScore(arr = []) {
            let sum = 0;
            for(let i = 0; i < arr.length; i++) {
                 sum += arr[i]
            }
            console.log(sum)
        }
        addScore([123,145,80,30,60])
        addScore([11,22,33])
        addScore()
    </script>

4.函数返回值

1）其实我们前面已经接触了很多的函数具备返回值

let result = parseint('111)

只是这些函数已经内置好了，我们直接使用就可以

2）当函数需要返回数据出去时，用return关键字

return 数据

    <script>
        // 函数的返回值
        function fn() {
            return 20
        }
        // 相当于执行了 fn() = 20
        fn()
       
        console.log(fn())
        let result = fn()
        console.log(result)
    </script>

a.在函数体内使用return关键字能将内部的执行结果交给函数外部使用

b.return后面的代码不会被执行，会立即结束当前函数，所以retuen后面的数据不要换行写

c.return函数可以没有return，这种情况函数默认返回值为undefined

d.两个相同的函数后面的函数会覆盖掉前面的函数

e.在javaScript中，实参的个数和形参的个数可以不一致

如果形参过多，会自动填上undefined（了解即可）

如果实参过多，那么多余的实参会被忽略（函数内部有一个arguments，里面装着所有的实参）

f.函数一旦碰到return就不会在往下执行了，函数的结束用return

3）求最大值和最小值，如果返回的话那么就需要返回一个数组

    //   2.求任意数组中最大值和最小值并返回最大值和最小值
    function getMaxArr(arr = []) {
       let max = arr[0]  //最大值
       let min = arr[0]  //最小值
       for(let i = 1; i < arr.length; i++) {
        if(max < arr[i]) {
            max = arr[i]
        }
        if(min > arr[i]) {
            min = arr[i]
        }
       }
       return [max,min]
    }

    // 返回值
   let maxArr = getMaxArr([1,5,3,7,4])
   console.log(maxArr)

4）断点调试

在网页中打开检查，然后选择sources，点击网页，然后给要加断点的地方加断点，点击上面的执行就可以执行

5.作用域

1）定义

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域

2）作用域的使用提高了程序的局部性，增强了程序的可靠性，减少了名字冲突

    <script>

        // 全局变量
        let num = 10
        console.log(num)
        function fn() {
            console.log(num)
        }

        // 局部变量
        function fun() {
            let str = 'pink'
        }
        console.log(str)
    </script>

3）变量的特殊情况

> 变量有一个坑，特殊情况：

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看作是局部变量

4）变量的访问规则

a.只要是代码，就至少有一个作用域

b.写在函数内部的局部作用域

c.如果函数中还有函数，那么在这个作用域中就又诞生一个作用域

d.访问原则：在能够访问到的情况下，先局部，局部没有在找全局

e.访问规则：采取就近原则的方式来查找最终的值

6.匿名函数

1）匿名函数

没有名字的函数，无法直接调用

2）使用方式

a.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

语法：

    <script>
        // 无参匿名函数
       let fn = function() {
            console.log('我是函数表达式')
        }
        fn()

        // 有参匿名函数
       let fn1 = function(x, y) {
        console.log(x + y)
        return x + y
       }

       fn1(4, 5)
       let sum = fn1(4,5)
       console.log(sum)

    //    函数表达式和具名函数的不同   function fn() {}
    // 具名函数的调用可以写到任何位置，函数表达式必须先声明函数表达式后调用

    // 
    </script>

b.立即执行函数

场景介绍：避免全局变量之间的污染

语法：

注意：多个立即执行函数要用；隔开，要不然会报错

    <script>

        // 第一种写法
        (function() {
            console.log(11);
        })();

        (function(){
            console.log('我是立即执行函数');
        })();
       
        (function(x,y){
          console.log(x + y)
        })(1,3);

        // 第二种写法
       (function(x,y){
        console.log(x + y)
       }(1,3))
    </script>

7.逻辑中断

1）逻辑运算符里的短路

短路：只存在于&&和||中，当满足一定条件会让右边的代码不执行

原因：通过左边能得到整个式子的结果，因此没必要再判断右边

运算结果：无论&& 还是||，运算结果都是最后被执行的表达式值，一般用在变量赋值

    <script> 
        function fn(x, y) {
            // undefined + undefined是NaN
            // undefined当做假看
            x = x || 0
            y = y || 0
            console.log(x + y)

        }
        fn(1,2)
        fn()
        console.log(false && age++) //age++不执行，一假则假，后面就不执行了
        console.log(11 || age ++)  // 一真则真,11是真值，后面就不再执行了
        console.log(11 && 22)  //输出22，两个都为真，执行最后的
        console.log(11 || 22)  //输出11，第一个为真，后面不执行
    </script>

8.转换为Boolean

1.显示转换

记忆：‘’、0、undefined、null、false、NaN转换为布尔值之后都是false，其余则为true

    <script>
        // 空字符串为假，其余字符串为真
        console.log(Boolean('prestige'))
        console.log(Boolean(''))

        console.log(undefined && 20)  //undefined
        console.log(null && 20)     //null
        console.log(0 && 20)  // 0
    </script>

2.隐式转换

1）有字符串的加法""+1,结果为1

2）减法（像大多数数学运算一样）只能用于数字，他会使所有字符串“”转换为0

3）null经过数字转换之后会变为0

4）undefined经过数字转换之后会变为NaN

五、对象

知道对象数据类型的特征，具备对象数组数据渲染页面的能力

学习路径：

1.什么是对象？

1.1 对象是什么？

对象（Object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

1.2 对象有什么特点？

1）无序的数据的集合

2）可以详细的描述某个事物

2.对象使用

2.1对象声明语法

{}是对象字面量

2.2 对象使用

对象由属性和方法组成

1）属性：信息或叫特征（名词），比如手机尺寸、颜色、重量等

2）方法：功能或者行为（动词），比如手机打电话、发短信、玩游戏

2.3属性

1）数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般都是名词性的。

2）属性都是成对出现的，包括属性名和值，他们之间使用英文：分隔

3）多个属性之间使用英文,隔开

4）属性就是依附在对象上的变量（外面是变量，对象内是属性）

5）属性名可以使用““或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

2.4 对象增删改查

1）属性-查

》声明对象，并添加了若干个属性后，可以使用.获得对象中属性对应的值，称之为访问属性

〉语法：对象名.属性

》简单理解就是获得对象里面的属性值

   <script>

    // 1.声明对象
    let pink = {
        uname: 'pink',
        age: 18,
        gender: '女'
    }
    console.log(pink)
    console.log(typeof pink)

    //1.声明
    let goods = {
        name:'小米10 青春版',
        num: '100012816024',
        weight: '0.55kg',
        address:'中国大陆'

    }
    console.log(goods)

    //2. 使用属性 查 对象名.属性名
    console.log(goods.address)
    console.log(goods.name)
   </script>

2）属性-改

》语法：对象名.属性 = 新值

 // 1.声明对象
    let pink = {
        uname: 'pink',
        age: 18,
        gender: '女'
    }

    // 把性别的女改为男
    pink.gender = '男'

3）属性-增

》语法：对象名.新属性 = 新值

    // 1.声明对象
    let pink = {
        uname: 'pink',
        age: 18,
        gender: '女'
    }

    // 把性别的女改为男
    pink.gender = '男'
    pink.hobby = '足球'

4）属性-删

语法：delete 对象名.属性名

    // 1.声明对象
    let pink = {
        uname: 'pink',
        age: 18,
        gender: '女'
    }

    // 把性别的女改为男
    pink.gender = '男'
    pink.hobby = '足球'
    delete pink.age

改和增语法一样，判断标准就是对象有没有这个属性，没有进行新增，有就是改

2.5 查的两种写法

1）对象名.属性名

  // 1.声明对象
    let pink = {
        uname: 'pink',
  
    }
   pink.uname

2) 对象名['属性名']

    let goods = {
        'goods-name':'小米10 青春版',

    }
    // 查的另外一种属性 对象名【属性名】
    console.log(goods['goods-name'])

2.6 对象中的方法

1）数据行为性的信息称为方法，如跑步、唱歌等，一般都是动词性的，其本质是函数

2）方法是由方法名和函数两部分构成的，他们之间使用：隔开

3）多个属性之间使用,分隔

4）方法是依附在对象中的函数

5）方法名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

6) 声明对象，并添加了若干个方法后，可以使用、调用对象中的函数，我们称之为方法调用

7）也可以添加形参和实参

8）注意：千万别忘了给方法名后面加小括号

    <script>
        let obj = {
            uname: '刘德华',
            song:function(x,y) {
                console.log('冰雨')
                console.log(x + y)
            }
        }

        // 方法的调用
        obj.song(1,2)
        document.write()

    </script>

3.遍历对象

1）一般不用这种方式遍历数组，主要是用来遍历对象

2）for in语法中的k是一个变量，在循环的过程中依次代表对象的属性名

3）由于k是变量，所以必须使用[]语法解析

4）一定记住：k是获得对象的属性名，对象名[k]是获得属性值

    <script>
        let arr = ['pink','red','blue']

        // 很少用字符串遍历数组，不推荐遍历数组
        for(let k in arr) {
            // k打印的是数组的下标，是字符串类型的
            console.log(k)
            console.log(arr[k])
        }

        // 遍历对象 for in
        let obj = {
            uname: 'prestige',
            age: 18,
            gender:'男'
        }
        for(let k in obj) {
            // k是属性名
            console.log(k); //'uname' 'age'
            console.log(obj[k]);
        }
    </script>

5）遍历数组对象