JavaScript-1

基础认知

认识 JavaScript

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

做什么？
	网页特效（监听用户的一些行为，让网页做出对应的反馈）
	表单验证（针对表单数据的合法性进行判断）
	数据交互（获取后台的数据，渲染到前端）
	服务端编程（node.js）

JavaScript 组成

• ECMAScrpt：规定了js基础语法核心知识（比如：变量、分支语句、循环语句、对象等）
• Web APIs
  • DOM：操作文档（比如：对页面元素进行移动、添加、删除等操作）
  • BOM：操作浏览器（比如：页面弹窗、检测窗口宽度、存储数据到浏览器等等）

JavaScript 位置

内部 JavaScript

<body>
    <div class="box">
        <p>你好，世界</p>
    </div>

    
    <!-- 内部js -->
    <script>
        // 在这里书写Javascript代码

        alert("Hello World")    // 页面弹出警示框

    </script>
</body>

具体位置：直接写在html文件里，用script标签包围JavaScript代码

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

外部 JavaScript

<body>
    <div class="box">
        <p>你好，世界</p>
    </div>


    <!-- 引入外部js：标签的中间不要写内容！！写了也会被忽略！ -->
    <script src="./js/myTest.js"></script>
</body>

代码写在以.js结尾的文件里，通过script标签，引入到html页面中

内联 JavaScript

<body>
    <button onclick="alert('Hello WOrld')">
        按钮
    </button>
</body>

代码写在标签的内部

注意：此处作为了解即可，但是后面的vue框架会使用这种模式！

语法速查

MDN 官网：https://developer.mozilla.org/zh-CN/

注释

单行注释：
	符号：//
	VS Code快捷键：Ctrl + /
	
块注释：
	符号：/* */
	VS Code快捷键：Shift + Alt + A （注意：此快捷键可能与系统的截图快捷键冲突，可在VS Code中修改为其他快捷键）

结束符

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

JavaScript 的结束符是";"

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

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

现状：越来越多的人主张省略结束符

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

输入

prompt

<body>
    <script>
        prompt('请输入您的姓名')
    </script>
</body>

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

输出

write

<body>
    <script>
        // 输出内容到文档中
        document.write('<div>我是div标签</div>')
        document.write('<h1>我是一级标题</h1>')
    </script>
</body>

语法：document.write()

作用：向body内输出内容

注意：如果输出的内容写的标签，也会被解析成网页元素。

alert

<body>
    <script>
        alert("警示")
    </script>
</body>

作用：页面弹出警告对话框

console.log

<body>
    <script>
        console.log('输出内容到控制台')
    </script>
</body>

作用：输出到控制台，程序员调试时使用

变量

命名规范

规则：
	1.不能使用关键字
	2.只能用下划线、字母、数字、$组成，且不能数字开头
	3.字母严格区分大小写
	
规范：
	1.起名要有意义
	2.遵守小驼峰体命名法（例如：userName）

声明变量

<body>
    <script>
        // 声明变量
        let temp
        
        // 声明变量的同时，进行赋值
        let age = 18
        let name = 'Jack'
        
        // 一次性声明多个变量
        let a, b
        let c = 10, b = 'hello world'
        
        // 为了更好的可读性，一般声明多个变量采取"一行只声明一个变量"的形式
        let data1
        let data2
        let data3
        
    </script>
</body>

语法：
	let 变量名

更新变量

<body>
    <script>
        let age = 18
        age = 30
    </script>
</body>

更新变量：变量赋值后，还可以更新它的值

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

let 与 var

let 和 var 的区别：

• 在较旧的 JavaScript 中，使用关键字 var 来声明变量，而不是 let

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

• let 解决了 var 的一些问题，更加先进！

var 声明：

• 可以先使用，再进行声明（不合理）
• var 声明过的变量可以重复声明（不合理）
• 变量提升、全局变量、没有块级作用域等

数组

基础部分

<body>
    <script>
        // 定义数组
        let nums = []

        // 赋值操作
        nums[0] = 10
        nums[1] = 20

        // 定义并初始化
        let names = ['Jack', 'Tony', 'Peter']

        // 输出数组元素
        console.log(nums[0])
        console.log(nums[1])
        console.log(names[0])
        console.log(names[1])
        console.log(names[2])

        // 输出数组长度
        console.log(names.length)
    </script>
</body>

概念：一种将"一组数据存储在单个变量名下"的优雅方式

语法：
	let arr = []

进阶部分

push 方法

作用：
	push()方法将指定的元素添加到数组的末尾，并返回新的数组长度

    <script>
        const arr = ['red', 'blue', 'green']

        const count = arr.push('yellow')
        console.log(count);
        console.log(arr);
    </script>

splice 方法

作用：
	splice()方法用于添加或删除数组中的元素

    <script>
        const arr = ['red', 'blue', 'green']
        
        // splice(从索引?开始, 删除?个元素)
        // 返回值: 以数组的形式，返回被删除的元素
        const newArr = arr.splice(0, 3)
        console.log(arr);       // []
        console.log(newArr);    // ['red', 'blue', 'green']
    </script>

map 方法

使用场景：
	map()方法可以遍历数组处理数据，并且返回新的数组

    <script>
        const arr = ['red', 'blue', 'green']
        const newArr = arr.map(function (ele, index) {
            console.log(ele);       // 数组元素
            console.log(index);     // 数组索引号
            return ele + 'Color'
        })
        console.log(newArr);
    </script>

forEach 方法

介绍：
	forEach()方法用于调用数组的每个元素，并将元素传递给回调函数

使用场景：
	遍历数组的每一个元素

    <script>
        const arr = ['red', 'green', 'pink']
        arr.forEach(function (item, index) {
            console.log(item);      // red green pink
            console.log(index);     // 0   1   2
        })
    </script>

join 方法

作用：
	join()方法用于把数组中的所有元素转换一个字符串

    <script>
        const arr = ['red', 'blue', 'green']
        console.log(arr.join('---'));   // red---blue---green
    </script>

filter 方法

介绍：
	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

使用场景：
	筛选数组符合条件的元素，并返回筛选之后元素的新数组

    <script>
        const arr = [0, 10, 20, 30]
        const newArr = arr.filter(function (item, index) {
            return item >= 20
        })
        console.log(newArr);    // [20, 30]
    </script>

常量

<body>
    <script>
        const PI = 3.14
        console.log(PI);
    </script>
</body>

概念：使用 const 声明的变量称为"常量"

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

注意：常量不允许重新赋值，这意味着声明的时候就必须进行初始化

规范：英文全部大写（可以不遵守）

数据类型

基本数据类型

类型名称	Type Name
数字型	number
字符串型	string
布尔型	boolean
未定义型	undefined
空类型	null

引用数据类型

类型名称	Type Name
对象	object

数字类型

算术运算符

<body>
    <script>
        // 求余数：
        console.log(5 % 3);     // 结果为 2
    </script>
</body>

"数学运算符"也叫"算术运算符"，主要包括以下几个部分：
加(+)	减(-)	乘(*)	除(/)	取余(%)

优先级：
	1.括号
	2.乘、除、取余
	3.加减

NaN

NaN：not a number

NaN 代表计算错误！它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的，任何对 NaN 的操作都会返回 NaN（例如：NaN + 6 的结果还是 NaN）

字符串类型

认识字符串

<body>
    <script>
        let name = 'Jack'       // 使用单引号
        let gender = "male"     // 使用双引号
        let goods = `HUAWEI`    // 使用反引号
        let tel = '13636975625' // 字符串
        let str = ''            // 空字符串
    </script>
</body>

1.通过单引号、双引号、或反引号包裹的数据都是字符串

2.单引号和双引号没有本质上的区别，推荐使用单引号!

3.必要时可以使用转义符"\"，输出单引号和双引号

字符串拼接

<body>
    <script>
        let age = 30
        document.write('年龄：' + age + '岁')
    </script>
</body>

运行结果：
	年龄：30岁

模板字符串

<body>
    <script>
        let age = 30
        document.write(`Jack已经${age}岁了`)
    </script>
</body>

运行结果：
	Jack已经30岁了

语法：
	用"反引号"去包含字符串，遇到变量则使用 ${变量}

布尔类型

<body>
    <script>
        let isCool = true
        isCool = false
        console.log(isCool);
    </script>
</body>

未定义类型

基本介绍：
	"未定义"是比较特殊的类型，只有一个值 undefined

什么情况出现未定义类型？
	只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少（直接）为某个变量赋值为 undefined

使用场景：
	我们开发中经常生命一个变量，等待传送过来的数据，如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是 undefined，就判断用户是否有数据传递过来

空类型

<body>
    <script>
        let obj = null
        console.log(obj)
    </script>
</body>

null 和 undefined 的区别

• undefined 表示没有赋值
• null 表示赋值了，但是内容为空
• 计算有明显区别
  • undefined + 1 的结果为 undefined
  • null + 1 的结果为 1

检测数据类型

<body>
    <script>
        let num = 10
        console.log(typeof num)
    </script>
</body>

typeof 运算符可以返回被检测的数据类型，它支持两种语法格式
	1.作为运算符：typeof x	(常用的写法)
	2.函数形式：typeof(x)
	
提示：有括号和没有括号，得到的结果是一样的，所以我们直接使用"运算符"的写法

类型转换

隐式转换

规则：
	+ 号两边只要有一个是字符串，都会把另外一个转成字符串
	除了 + 以外的算术运算符，比如 - * / 等都会把数据转成数字类型

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

显示转换

<body>
    <script>
        let str = '123'
        console.log(Number(str))                // 123
        // ---------------
        console.log(parseInt('12px'))           // 12
        console.log(parseInt('12.78px'))        // 12
        console.log(parseInt('13.14Love'))      // 13
        // ---------------
        console.log(parseFloat('12px'))         // 12
        console.log(parseFloat('12.678px'))     // 12.678
        console.log(parseFloat('13.14Love'))    // 13.14
        // ---------------
        console.log(parseInt('abc3.14'))        // NaN
        console.log(parseFloat('abc3.14'))      // NaN
    </script>
</body>

为了避免"隐式转换"带来的问题，通常需要对数据进行显示转换

语法：
	Number(数据)
	// 转成数字类型
	// 如果字符串内容里面有非数字，转换失败时结果为 NaN（Not a Number）

	parseInt(数据)
	// 只保留整数（具有去除非数字部分字符的能力）
	
	parseFloat(数据)
	// 可以保留小数（具有去除非数字部分字符的能力）