华清远见重庆中心-JS个人总结

 

---

关于js的个人学习部分总结

---

1. 部分API 

(一)模拟弹窗：alert

`alert('hello world!')`

 

(二)确认对话框:confirm

`confirm('你确定吗')`//弹出窗口会有两个按钮

 

(三)弹窗输入框：prompt

`prompt('请输入姓名')`

 

(四)获取元素的方法

1.查询一个指定选择器的元素：document.querySelector

document.quertSelector('.box')
//只能查询到一个元素，如果有多个满足条件的元素，只会查询到第一个。

2.查询到所有指定选择器的元素：document.querySelectorAll

document.querySelectorAll('.box')
//可以查询到多个满足相同条件的元素。

3.通过id查询元素：document.getElementById

document.getElementById('idName')
//通过id名查询元素，全局id名是唯一的，所有只能查询到一个元素。

4.通过类名来查找元素：document.getElementsByClassName

document.getElementByClassName('.box')
//通过类名来查询元素，可以查询到拥有同一个类名的所有元素。

5.通过标签名来查询元素：document.getElementByTagName

document.getElementTagName('div')
//通过标签体可以查询元素，可以查询多个元素。

(五)修改查询到的元素的属性值

box.id = 'myId'//改id名
box.style.color='#000'//改样式

2.Javascript 基础语法：

变量：

<script>
    // 变量
    // 变量就是存储数据的容器
    // 变量是一个可以变化的量，数据可以发生变化
 
    // js 中预留了一些代表特殊含义的英文单词，这些单词我们称为关键字
 
    // 声明变量
    // 语法：var 变量名
 
    var a; // 声明后不赋初始值 默认都为 undefined
 
    // 声明变量并赋予初始值
 
    var b = 5;
 
    // 同时声明多个变量并赋予初始值
 
    var c, d = 10, e;
 
    // 修改变量
    // 变量在存储新值之前讲完全弃用原来的值
    c = 2
 
    // 还可以使用 let 来声明变量
    // let 声明变量和使用变量的方法和 var 没有区别
    let x, y, z = 88
 
    // let 变量不能重复定义 var 变量可以重复定义
 
    // 常量
    // 恒定不变的值为常量
    // 声明时必须赋初始值 且声明后无法修改
    const g = 10
    const pi = 3.1415926
 
    // 访问变量或常量
    // 变量值存进容器以后，我们需要从容器中取出来进行使用，这个过程就叫访问
 
    console.log(b);
    console.log(g);
    console.log(pi);
 
    // 声明json对象 （或叫做朴素对象 plain objcet）
    let obj = {
        // key: value 数据格式的键值对
        // key 我们称为 键、对象的属性名
        name: '张三',
        sex: 'male',
        age: 17
    }
 
    let obj2 = { a: 1, b: 2, c: 3 }
 
    // 访问对象和对象属性
    console.log(obj)
    // 使用 . 运算符读取对象中的属性
    console.log(obj.age)
    // 使用索引来读取对应的数据
    // 站在字典的角度来看，name 就是目录，"张三" 就是目录对应的内容
    // 目录是唯一的
    console.log(obj['name'])
 
 
    // 给对象属性赋值
    obj.name = '法外狂徒'
    // 通过索引赋值对象属性
    obj['sex'] = 'female'
    console.log(obj);
 
 
    // 变量的命名规范：
    // 	1，必须以字母开头，或者使用  $ 或者 _  开头  ,不能用数字，变量名建议不要使用中文
    // 	2,小驼峰命名法：  多个单词构成的名字，第一个单词全小写，后面的首字母大写
    // 	3，为了提高代码的可读性，命名规范，见名知意
    // 	4，不能使用关键字（有特殊功能的名字：class、var、this）
 
    let _a // 下划线开头的变量一般是局部变量出现在函数中作为形式参数
    let $body // $ 开头一般是jquery对象
    let bird // 用字母开头
    let blueBird // 多个单词，首个单词的首字母小写，其余单词的首字母大写
    let simpleDateFormat
    // let const // 由于const是关键字，所以不能用作变量名
</script>

js代码的执行顺序：

<!-- 若有多个script，那么从上而下依序执行 -->
    <script>
        console.log('hello world')
    </script>
 
<script>
    console.log('next script')
 
    // 在同一个script标签中，js的执行顺序
 
    // 以一句话为单位，基本顺序：从上到下，从左到右，每句话用分号隔开“;”
 
    console.log('this is a'); console.log('this is b'); console.log('this is c');
    console.log('this is d'); console.log('this is e'); console.log('this is f');
 
    // 若代码中每一行只有一句js，那么句尾的分号可以省略
    console.log('这句话没有打分号')
 
    // 赋值运算的顺序: 先执行赋值符右侧代码，再赋值给左侧
    let a = 3 + 4 * 2
 
    console.log('a: ', a);
 
    // 函数调用顺序
    let fn1 = (x, y, z) => {
        console.log(x)
        console.log(y)
        console.log(z)
        return x + y + z
    }
 
    let fn2 = () => {
        return 1
    }
 
    let fn3 = () => {
        return 2
    }
 
    // debugger 的作用：可以给代码加断点（breakpoint），程序运行到断点处，会停下来，开发人员可以查看此时变量的值，且可以手动一步一步运行程序进行调试
    console.log('debugger前');
 
    debugger
 
    console.log('debugger后');
 
    // 以下代码执行顺序：
    // 从左到右执行，若存在函数，先执行函数
    // 若在执行的函数中存在其他函数，例如下面的fn1的调用，那么会先执行内部的函数，如 fn3 fn2，最后执行 fn1
    c = fn2() + 4 + fn1(fn3(), fn2(), 11)
 
</script>

3.数据类型

BigInt：

<script>
    // BigInt 长整型
    // 用来描述一个位数非常长的整型数字
    let a = 1n;
    console.log(a);
    console.log(typeof a); // => bigint
 
    // bigint 类型的数只能和另一个 bigint 类型的数进行运算
    // 否则会抛出异常
    console.log(124n / 2n);
</script>

Boolean：

<script>
    //  boolean 布尔型数据
    // 该类型数据用于描述对错真假，只有两个值 true（真） false（假）
    let a = true
 
    // 判断数据类型
    console.log(typeof a); // => boolean
</script>

 Null：

<script>
    // null 空类型
    // 空类型唯一的值就是 null
    // null的含义：用来代表对象类型的空引用(空指针)
 
    let a = null
 
    console.log(a); // => null
 
    // 由于 null 代表的是 引用地址(指针) 又因为 js 把引用地址理解为对象，所以此处输出 object
    console.log(typeof a); // => object
</script>

Object：

<script>
    // Object 类型
    // 对象是一组数据的集合
    // 所有能被构造的（包含constructor构造器）类型都是对象
    // 所以 函数 数组 本质上也是对象
 
    // 朴素对象    也叫做 json 对象
    let obj = {
        name: '张三',
        sex: 'male',
        age: 17
    }
 
    // 什么是 json？
    // json 是 js 的轻量化数据结构
 
    // json 文件特点
    // 1.json 文件中，根节点只能有一组 {} 花括号或 一组 [] 方括号
    // 2.属性 key 必须由双引号包裹 value 若是字符串，则必须是双引号
    // 3.每个属性由逗号隔开，最后一个属性后面的逗号必须省略
 
    // 那么如何声明一个 json 对象呢？
    // 1.直接使用json格式
    let user = {
        "name": "张三",
        "sex": "男",
        "age": 17
    }
 
    // 2.key 不包含空白符和其他特殊符号时 可以不加引号
    user = {
        // 字符串可以不用双引号
        name: '张三',
        sex: 'male',
        age: 17
    }
 
    let name = '法外狂徒男枪'
    let sex = 'other' 
    let age = 17
 
    // 3.变量名若和对象的属性名相同，则可以省略 如下：
    user = {
        // 完整写法
        // name: name,
        name,
        sex,
        age
    }
    console.log(user);
 
    // 数组和函数都属于对象类型
    let arr = [1, 2, 3]
    function fn() { }
    console.log(typeof arr);
    console.log(typeof fn);// => function 虽然 typeof 检测函数结果为 functiong 但由于函数包含constucktion
 
    // 学习面向对象的时候再介绍类实例
</script>

 String：

<script>
    // String 字符串类型
    // 将很多的字符串起来就是字符串
 
    // 可以使用单双引号来定义字符串
    let str = 'hello world'
    console.log(typeof str);
    str = ''// 空字符串
    console.log(typeof str);
    str = "hello world"
    console.log(typeof str);
 
    // 什么叫转义？
    // 转变字符原有的含义就成为转义
    // 转义后的字符就是转义字符
    // 常见转义字符：\n 换行  \t 制表符
    str = '你好\n世界'
    console.log(str);
    str = 'hello\tworld'
    console.log(str);
    // 单引号的字符串显示单引号的方法
    str = 'ac\'dc'
    console.log(str);
    // 双引号的字符串显示双引号的方法
    str = "ac\"dc"
    console.log(str);
    // 通常可以在双引号中直接书写单引号
    // 单引号的字符串中直接书写双引号
    str = 'abc"d'
    console.log(str);
 
    // 若两个值通过加法运算符连接，任意一个值为字符串类型，则加法运算符会直接进行拼接字符串
    let a = 'hello',b = 123
    console.log(a + b);
 
</script>

 Symbol：

<script>
    // mdn数据类型：
 
    // Symbol 的意思为符号，专用来创建类中的匿名属性或函数
 
    // Symbol.for Symbol.keyFor 可以访问全局Symbol注册表
    // 全局注册表上可以存放全局可访问的 Symbol 值
 
    // Symbol 作为 key 声明的对象属性 无法被枚举
    // Symbol 作为 key 声明的对象属性 只能通过相同的 Symbol 值访问
 
    // 定义一个Symbol类型的值
    let s = Symbol()
    let s2 = Symbol('abc')
 
    console.log(s);
    console.log(s2);
 
    class A { }
 
    let a = new A
    for (const key in a){}
</script>

 Undefined：

<script>
    // undefined 未定义类型
    // 一个变量声明后不赋值，则它的值为 undefined
    // 未定义类型中只有一个值叫做 undefined
 
    // let a = undefined
    let a
    console.log(typeof a);// => undefined
 
    a = 123
    console.log(typeof a);
 
    // 赋值 undefined
    a = undefined
    console.log(a);
    console.log(typeof a); // => undefined
</script>

Number：

<script>
    // 数字类型用于描述数字
    let a = 234
    // 代表无限大的数字，是数字类型的值
    a = Infinity
    // 代表不是数字，是数字类型的值 NaN(Not a Number)
    a = NaN
 
    console.log('abc' / 123);// 运算结果不是数字 所以显示 NaN
 
    // 有时需要判断一个值是否是NaN
    // 可以使用以下方法
    // 如果是NaN则返回true，否则返回false
    console.log(isNaN(a));
 
    // 浮点数
    a = 0.618
 
    console.log(typeof a);
 
    // 科学计数法
    a = 3e3
    a = 3e-3
 
    console.log(a);
 
    console.log(typeof a);
 
    // 单双精度浮点数是什么意思
    // 单精度浮点数就是32位的小数
    // 双精度浮点数就是64位的小数
</script>

序列化和反序列化：

<script>
    // 序列化和反序列化是什么？
    // 序列化就是将对象转换成字符串
    // 反序列化就是将字符串转换成对象
 
    let obj = {
        name: '张三的母亲',
        sex: 'other',
        age: 40
    }
 
    // 序列化
    let str = JSON.stringify(obj)
    console.log(str);
 
    // 通过json格式声明一个字符串
    str = '{"name": "英雄的母亲","child":"张三","score": 88,"isOk": false}'
    // 反序列化
    obj = JSON.parse(str)
    console.log(obj);
</script>

数据类型的转换：

<script>
    // 不同类型之间的数据是可以互相转换类型的，这个过程叫数据转换
 
    // 数据转换的方法分为两种：显式转换，隐式转换
    // 显式转换：在代码中有明确的代码用于转换类型
    // 隐式转换：在代码中没有明确的代码用于转换类型
 
 
    // Boolean转换成其他类型
    let b = true
    // 转换数字
    b = Number(b)
    // 除了 Number 以外，还能使用 parseInt parseFloat 进行转换
    console.log(b);// => 1
    b = false
    b = Number(b)
    console.log(b);// => 0
 
    // true 转换数字为 1，false 转换数字为 0
 
    // 转换成字符串
    b = true
    b = String(b)
    console.log(b);// => true 的字符串
    b = false
    b = b + ''// 连接字符串时，js 会自动转换数据格式为字符串，这是一个隐式转换
    console.log(b);// => false 的字符串
 
 
    // 数字类型转其他类型
    let num = 123
    // 转boolean
    num = Boolean(num)
    console.log(num);// => true
    num = 0
    num = Boolean(num)
    console.log(num);// => false
 
    // 数字为0 结果为false，否则为true
 
    // 转字符串
    num = 1314
    num = String(num)
    console.log(num);// => 1314
    console.log(typeof num);// => String
 
 
    // 字符串转其他类型
    let str = 'hello world'
    // 转 boolean 值
    str = Boolean(str)
    console.log(str);// => true
    str = ''
    str = Boolean(str)
    console.log(str);// => false
 
    // 转空字符串为 false 其余为 true
 
    // 转数字
    str = 'hello world'
    str = Number(str)
    console.log(str);// => NaN
    str = '6e+2'
    str = Number(str)
    console.log(str);// => 600
    // 加法运算符直接写在字符串前，可以产生转换成数字的效果
    str = '6e+2'
    str = +str
    console.log(str);// => 600
 
    // 若字符串代表的是合法数字则转换为对应数字 否则为NaN
 
 
    // 对象转其他类型
    let obj = { a: 1, b: 2 }
    // 转 boolean 值
    obj = Boolean(obj)
    console.log(obj);// => true
 
    obj = null // 此处赋值 undefined 效果一样
    obj = Boolean(obj)
    console.log(obj);// => false
 
    // 变量是 null 或 undefined 时 转换结果为false
    // 对象只要存在 结果就为 true
 
    // 转数字
    obj = { a: 1, b: 2 }
    obj = Number(obj)
    console.log(obj);// => NaN
 
 
    // 转字符串
    obj = { a: 1, b: 2 }
    obj = String(obj)
    console.log(obj);// => [object Object]
    // 对象强转字符串结果始终为 [object Object]
 
    // 若希望将对象转换成字符串后能够查看其数据，则可以使用序列化
</script>

Reflect：

<script>
    // Reflect 反射
    // 反射是用来操作对象的方法
 
    // 文档：
 
    let obj = { a: 1, b: 2 }
 
    // obj.c = 3
    // obj['e1_!'] = 4
 
    // 定义对象属性
    // 作用和 Object.defineProperty 相同
    // Object.defineProperty(obj, 'c', {
    //     // 属性值
    //     value: 3,
    //     // 是否可写
    //     writable: false
    // })
 
    // 第一个参数：要定义属性的对象
    // 第二个参数：要定义的属性名称
    // 第三个参数：配置对象
    // 默认情况下用此方法添加的属性值是不可修改的
    Reflect.defineProperty(obj, 'c', {
        value: 5,
        writable: true
    })
 
    // 删除属性
    // 等价于 delete obj['b']
    // delete obj.a
    // delete obj['b']
    // 第一个参数：要删除属性的对象
    // 第二个参数：要删除的属性名称
    Reflect.deleteProperty(obj, 'a')
 
    // 返回对象的所有 key 数组
    let r = Reflect.ownKeys(obj)
    console.log(r);
 
    // 判断对象是否存在某属性
    // 第一个参数：要判断属性是否存在的对象
    // 第二个参数：要判断是否存在的属性名称
    r = Reflect.has(obj, 'e')
    console.log(r);
    r = Reflect.has(obj, 'c')
    console.log(r);
 
    // 判断一个对象是否存在某属性的其他方法
    // 1. 使用if的隐式转换
    if (obj.e) {
        // obj.e 若等于以下值：null undefined '' 0 ==> false  其余情况为true
        // if 语句将隐式转换数据为 boolean 值
        // 存在e
        console.log('e存在');
    }
    // 2. 使用typeof
    console.log(typeof obj.e);
</script>

 

 

数据类型转换

数据转换的方法分为两种：

（1）显示转换：在代码中有明确的代码用于转换类型；

（2）隐式转换：在代码中没有明确的代码用于转换类型。

1.Boolean 类型转换为数字

   true 为 1，false 为 0

b = Number(b)
    console.log(b); // => 1
    b = false
    b = Number(b)
    console.log(b) // => 0

//也可以使用 parseInt parseFloat 进行转换；

转换为字符串

 console.log(b);
    b = String(b)
    console.log(b); // => true 的字符串
    b = false
    b = b + '' // 连接字符串时，js会自动转换数据格式为字符串，这是一个隐式转换
    console.log(b); // => false 的字符串

 

2.数字类型转换其他类型

   除了0以外的所有数字转换后都是true，0为false；

let num = -123
num = Boolean(num)

num = 1314
num = String(1314)
console.log(num); // => 1314

3.字符串转其他类型
   空字符串为false，其余字符串都为true；

let str = 'hello world'
str = Boolean(str)
console.log(str); // => true
str = ''
str = Boolean(str)
console.log(str); // => false