js初认识第一天

最新推荐文章于 2024-04-22 17:25:46 发布

zwy1517

最新推荐文章于 2024-04-22 17:25:46 发布

阅读量208

点赞数

分类专栏：总结文章标签： js 第一天

本文链接：https://blog.csdn.net/zwy1231/article/details/103314362

版权

总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：js的书写的三种位置

1，标签内如下：举个例子

<button οnclick="alert('注册成功')">注册</button>
click 表示点击 on仅仅是前缀
onclick表示当你点击button时干什么
button叫事件源，click叫事件 alert叫监听器
alert表示弹出一个警告框

2，html内部如下：举个例子

3，html外部如下：举个例子

二：认识变量

1.JS中如何定义变量？

通过几个关键字来定义变量，var, let, const。

JS中的语句可以加分号，也可以不加分号。

2，全局变量和局部变量，如何声明变量？

在函数中声明的变量叫局部变量，在函数外声明的变量叫全局变量。
举个例子：var name = "zhangwanying";
定义一个变量，变量名是name，变量的值是"zhangwanying"

同时定义多个变量：

使用var一次定义一个变量，使用三个var来定义了三个变量，如下：
var name = "小可爱";
var age = 222;
var address = "beijing";一次性输出三个变量，name,age,address叫变量名，对变量名操作就是对变量值的操作
console.log(name,age,address)
------------------------------------------ 使用一个var就可以定义多个变量-------------------------------------------
var x = 100, y = 200, z = 300;
console.log(x, y, z)
// 等同于下面的定义方式
// var x = 100;
// var y = 200;
// var z = 300;

3，声明变量

var age;//undefined

表示声明了并没有赋值
var name=”小可爱“//小可爱

表示变量声明并且赋值了
定义与声明的区别是：

1）定义表示使用了var声明了一个变量并赋值了
2)声明仅仅表示定义了变量，但是没有赋值
其实还可以不使用var来声明变量：但是咱不推荐。

4，声明变量的三种方式

1）使用var 来声明变量（可以二次赋值，会覆盖前面的值）
2）使用let来声明变量（可以二次赋值，会覆盖前面的值）
3）使用const来声明变量（不能二次赋值：就是不能修改了，也就是像所谓的常量）

三数据类型

1，为什么需要数据类型？

基本上所有编程语言中都提供了数据类型的概念。因为计算机资源（内存）有限的，但是数据是有不同种类，为了更加合理使用内存空间，需要把数据进行分类，不同的数据，分配不同大小的空间。咱们这里学习的数据类型有：number string boolean null undefined。

2， JS中的数据类型？

基本数据类型：（存储在栈中）大概分为以下几种：
number数值型 string字符型 boolean布尔型 undefind未定义 null空

引用数据类型：（变量名和地址存储在栈中，在内存中开辟的空间在堆中）大概分为下面几种，还有其他的；

object对象 arr数组 function函数
小知识：如何查看一个数据的数据类型？
typeof 查看基本数据的数据类型是OK
不过要记住typeof 仅仅是一个运算符，不是函数

3，分别来讲一下这些数据类型吧

number（数值型）

number的应用场景：商品价格，年龄等等。下面来举个例子：

var age=100；

console.log(typeof age)

//这里的100是变量的值，用typeof可以看一下是不是number类型
这里有个小知识点：
number注意：
// 1，不分整数和小数，都是number类型
// 2，有最大值和最小值，通过Number.MAX_VALUE得到最大值，通过MIN_VALUE得到最小值
// 3，整型有多种进制表示十进制十六进制八进制
// 4，浮点数有多种表示
// 5，在JS中，对浮点数进行计算，不靠谱，原理后面说，面试题：在JS中为什么0.1+0.2不等于0.3？

答：这是js在设计的时候出现的bug，解决不了，避免就行了。
// 6，Not a Number (NaN) 不是一个数字
// 7，number数据类型对应了无数个数据

string（字符类型）

加引号就是，我就不列举了。

哈哈，举个例子

var name=“张三”；

console.log(name);//张三

console.log(typeof name)；//string
注意细节：
// 1，字符串需要使用单引号或双引号引起来 "" '' 只能使用英文的引号，不能使用中文的引号
// 2，引号要配对，不能一边是单引号，另一边是双引号
// 3，如果在一个字符串中，需要嵌套另一个字符串，只能在单引号或嵌套双引号，或者在双引号中去嵌套单引号
// 4，ES6中提供了模板字符串，方便字符串的拼接 `2345${a}6789`
// 5，可以在字符串中使用转义字符 \
// 6，字符串中可以使用+进行拼接，它不表示数学中的相加运算，也就是说+两侧，只要有一侧是字符串，就表示字符串的拼接
// 7，string数据类型对应的数据也是无数个。

boolean数据类型

true 表示真
false 表示假
注意细节：
1，boolean数据类型对应的值只有两个，一个是true，一个是false，还是区分大小写的
2，有些数据默认会转化成boolean数据类型
3，下面的几个数据默认会转化成false，一定要记住了。

其它的所有的数据都转化为true
// undefined null 0 -0 NaN ""
在if-else语句中：
如果是条件是true就表示执行()后面的{}中的内容
如果是false就执行else后面{}中的内容
if后面的（）里面一定是true或false
if(false){
console.log("lalala") // lalala
}else{
console.log("hehehe") // hehehe
}

undefined和null

undefined数据类型？
undefined是一种数据类型，undefined也是这种数据类型对应的值
第一种场景：
// let name;//声明了没有赋值结果就是undefined
// console.log 打印是这个变量名对应的变量值
// console.log(name) // undefined 是值
// console.log(typeof name) // undefined 是一种数据类型
// 没有给name赋值，那么name的值就是undefined
第二种场景：
函数没有明确返回值：
// function f(){
// console.log(110)
// 如果函数没有返回任何内容，默认情况下，函数返回undefiend
// return "hello"
// }
// 函数的返回值是返回到了函数的调用处
// console.log(f()) // undefined
空数据类型：
null 空
let a = null;
console.log(a) // null
console.log(typeof a) // object
null即表示一个值，它的数据类型是object：后面才会慢慢接触object
注意细节：
1，undefined这种数据类型对应的值只有一个，还是undefined
2，在一个变量声明了，但没有赋值，这个变量的值是undefined，值的类型也是undefiend
3，还有一些其它地方也会出现undefined，如一个函数没有返回值，默认返回undefiend
4，在JS中表示空的除了undefined，还有null，使用typeof打印出null的数据类型是object

引用数据类型

引用数据类型在JS中就表示对象，object。引用数据类型有：
真正的对象，数组，函数
数组变量里面只能存一个数据数组里面可以存多个数据
数组是引用数据类型，它是存储在堆区 0x123
let arr = ["a","b","c"]
// 定义了一个变量，变量名是arr，变量值是一个数组，数组里面存储了三个字符串，分别是"a","b","c"，这个数组就是一个容器，里面可以存储多个数据
console.log(arr); // ["a", "b", "c"]
console.log(typeof arr); // object

类型转换

不管是强制还是隐式转换，它们都不会去改变原来变量的数据类型。

在js中，如果是一个二元运算符，有个规则：就是要保证两边的操作数的数据类型一至。对于上面的a+s1，两边的数据类型没有保持一至，这个时候就违反了这个规则，如果还要遵循这个规则，就涉及到了js中的类型转换问题：

对于a+s1，我们要保证两边的操作数的数据类型一至，有两种方式：一种是让a转换成字符串，一种是让s1转换成数值。

关于类型转换，有两种方式：强制转换和隐式转换

一般只针对数据类型进行转换

强制转换（首字母一定要大写）：

使用Boolean()、Number()、String()或Object函数

在转换数值的时候，parseInt()和parseFloat()函数更加灵活

隐式转换（一般发现不了）

让变量参与运算，就可以实现隐式转换：

（1）如果+ 运算符的一个操作数是字符串，它将会把另外一个操作数转换成字符串

（2）！运算符将其操作数转换为布尔值并取反，故可以使用！！来转换

（3）对于数值，如果转换结果无意义，则返回NaN

(4)==相等运算符，也会进行一个类型转换

js的内置对象以后再了解：

在JS中有一个内置的JS对象，也是引用数据类型，如Math, 如Date()...
Math是一个对象，这个对象中有很多的方法，random就是一个用于创建随机数的方法
let r = Math.random() // Math没有new 不用new的叫单体内置对象
console.log(r)
Math Data就是一个对象，对象也是引用数据类型，存储在堆区
console.log(typeof Math) // object

let d = new Date() // Thu Nov 28 2019 15:00:21 GMT+0800 (中国标准时间)
console.log(d)
console.log(typeof d) // object d是new出来的

// 注意细节：
// 1，数组是一个引用数据类型，存储在堆区，在栈区保存着数组这个数据的地址
// 2，函数也是引用数据类型，存储在堆区，在栈区保存着函数这个数据的地址，然后给栈区地址起一个别名，是函数名
// 3，JS中的单体内置对象就是不需要new的对象，如Math, Math.random()得到一个随机数
// 4，在JS中还有很多很多其它的对象，如Date....
# 运算符的概念

根据功能分类：

* 算术运算符：+ - * / % ++ --
* 关系运算符: == === != !== > < >= <=
* 逻辑运算符：&& 逻辑与 || 逻辑或 ! 逻辑非（取反）
* 位运算符：暂时不讲
* 赋值运算符：= += -= *= /= %=
* 其它运算符
* 逗号运算符
* 下标运算符
* 三元运算符
* typeof运算符
* delete运算符
* in运算符
* 字符串拼接运算符
* ...
*
* 根据操作数的个数分类：
* 运算符两边的数据或符号叫操作数。如果一个运算符的操作数有两个，那么这个运算符叫二元运算符，也叫二目运算符，也叫双目运算符。
* 如果说一个运算符的操作数就一个，叫这个运算符是一元运算符，或单目运算符。
* 如果说一个运算符的操作数有三个，叫这个运算符是三元运算符，也叫三目运算符。
* 一元：! let f = false; let k = !f;
* 二元：+ - * / % = < > >= <= == === != !== ...
* 三元：? : 操作数1 ？操作数2 ：操作数3
* 运算符的优先级：
* （）的优先级高
* 运算符的结合性：
* 左结合性： a + b + c - d
* 右结合性: var k = 111；

算数运算符

：了解a++和++a；
测试：
// let a = 1;
// a++;
// a++;
// a++;
// console.log(a); // 4
// 测试：
// var a = 10;
// var b = a--;
// console.log(a); // 9
// console.log(b); // 10
// 注意细节：
// 1，对于++，或--运算符来说，++在前，整体的值是一个新值，++在后，整体的值是一个旧值，--也一样。
// 2，特别是++在实际开发中，用的非常多，特别是在循环中用的相当多

赋值运算符？

* = += -= *= /= %=

// = 叫赋值运算符有右结合性
// let name = "wangcai";

// ------------- 赋值运算符有副作用：就是整体也有一个值
// 先把110赋值给了c c的值就是110
// c = 110 整体也是有值赋值运算符的副作用整体的值是一个左值
// 整体的值是c的值 c的值是110
// 又把110赋值给了b b = 110 整体也有一个值值是b的值是110
// 最后把110赋值给了a
// var a = b = c = 110;

// var m = 110;
// // 让m加上10
// m = m+10; // 把m中的数据取出来，是110，然后+10，得到120，最后把120赋值给m
// console.log(m)

// 像上面的操作，在计算机中用的也是非常多，计算机也封装了一些运算，如+= -= *= <div className=""></div>
var m = 110;
// m = m+10;
// m += 10; // m = m + 10;
// m -= 10; // m = m - 10;
// m *= 2; // m = m * 2;
console.log(m)
// 注意细节：
// 1，赋值运算符有副作用，整体也是有一个值，是左值