JavaScript 基础笔记 01

JavaScript 基础笔记 01

---

• JavaScript 变量

1. 变量组成：由数字、字母、下划线、$组成，并且不能以数字开头；严格区分大小写；不能是关键字（var for this等）；尽可能使用有意义的单词拼音

• JavaScript 注释

// 单行注释

/*
  多行注释
  可以换行书写
*/

• 浏览器输出方式

var num = 100       // 定义一个变量num 赋值为100
alert(num)          // 在浏览器弹窗显示 num 变量的值
console.log(num)    // 在控制台打印 num 的值
document.write(num) // 在页面是直接输出 num 的值

• JavaScript 数据类型

JS中的数据类型有：基本数据类型和引用数据类型

1. 基本数据类型 (Number、String、Boolean、symbol、undefined、Null)

   1. 数值类型
   2. 字符串类型
   3. 布尔类型
   4. 空类型 （undefined null）

2. 引用数据类型 (Array、Function、Object)

3. 基本类型和引用类型的区别：

   1. 储存位置不同

      基本数据类型：以栈的形式存储, 保存与赋值指向数据本身, 用typeof 来判断类型,存储空间固定。
      引用类型：以堆的形式存储, 保存于赋值指向对象的一个指针, 用instanceof 来判断类型, 存储空间不固定。
      

   2. 传值方式不同

       基本数据类型：基本数据类型的值不可以改变
       引用数据类型：引用类型值可以改变
      

• JavaScript 数据类型检测

1. typeof

   语法：typeof 要检测的变量

   结果：该变量储存的数据的数据类型

   缺点：不能用于判断引用类型数据

2. instanceof

   语法：要检测的数据 instanceof 要检测是数据的实例

   结果：如果是则返回 true ,不是则返回 false

   缺点：不能检测 null 和 undefine ；通过构造函数实例化和字面量生成的基本类型判断是有一定区别的

3. constructor

   语法：要检测的数据.constructor == 数据类型

   结果：如果是则返回 true ,不是则返回 false

   缺点：null 和 undefined 是无效的对象，因此是不会有 constructor 存在的；函数的 constructor 是不稳定的；（这个主要体现在把对象的原型进行重写，在重写的过程中很有可能出现把之前的 constructor 给覆盖了，这样检测出来的结果就是不准确的）

4. Object.prototype.toString.call()

   语法：Object.prptotype.toString.call(要检测的数据)

   结果：[object 对应的数据类型 ]

   优点：这个方式是最准确且最常用的方法

• JavaScript 数据类型转换

1. 转数值

   1. Number()
   2. parseInt() : 解析规则（转换的内容一位一位的查看，只有第一位不是合法的数字的时候会出现NaN,否则就是将前面的数字保留;只能转换到整数部分）
   3. parseFloat() : 解析规则和parseInt()类似，但是parseFloat()可以转换到小数部分

var str1 = '123'
var str2 = 'abc'
var str3 = '123abc'
var str4 = 'abc123'

console.log(Number(str1),typeof Number(str1)) // 控制台输出 123 Number
console.log(Number(str2),typeof Number(str2)) // 控制台输出 NaN Number

console.log(parseInt(str1),typeof parseInt(str1)) // 控制台输出 123 Number
console.log(parseInt(str2),typeof parseInt(str2)) // 控制台输出 NaN Number
console.log(parseInt(str3),typeof parseInt(str3)) // 控制台输出 123 Number
console.log(parseInt(str4),typeof parseInt(str4)) // 控制台输出 NaN Number

2. 转字符串

   1. String()

   2. toString()

var str1 = true
console.log(String(str1),typeof String(str1)) // 控制台输出 true String
console.log(str1.toString()),typeof str1.toString()) // 控制台输出 true String

3. 转布尔值

   1. Boolean() : 转为 false 的情况：0、NaN、“”、undefined、null

var str1 = 'abc'
console.log(Boolean(str1),typeof Boolean(str1)) // 控制台输出 true boolean

• JavaScript 运算符

1. 算数运算符 (进行 数学运算 的符号)

   1. "+" ： 当符号两边都是数字或者布尔的时候，会进行数学运算；只要符号的任意一边是字符串的时候，就会进行字符串拼接。
   2. "-" ： 进行减法运算且只能进行数学运算
   3. "*" ： 进行乘法运算且只能进行数学运算
   4. "/" ： 进行除法运算且只能进行数学运算
   5. "%" ： 进行取余运算且只能进行数学运算

2. 赋值运算符 (进行 赋值操作 的符号)

   1. "=" ： 进行赋值操作
   2. "+=" ： 加等于运算符
   3. "-=" ： 减等于运算符
   4. "*=" ： 乘等于运算符
   5. "/=" ： 除等于运算符
   6. "%=" ： 取余等于运算符

3. 比较运算符 (进行 比较运算 的符号)

   1. ">" ： 大于比较
   2. "<" ： 小于比较
   3. ">=" ： 大于等于比较
   4. "<=" ： 小于等于比较
   5. "==" ： 等于比较
   6. "===" ： 全等于比较
   7. "!=" ： 不等于比较
   8. "!==" ： 不全等于比较

4. 逻辑运算符 (进行 逻辑运算 的符号)

   1. && : 与 运算 (符号两边都为 true，结果才是 true; 符号两边任意一个为 false，结果就为 false)
   2. || ：或 运算 (符号两边任意一个为 true，结果都是 true; 符号两边都为 false, 结果才为 false)
   3. ！ ： 非 运算 (取反运算符)

5. 自增自减运算符 (单独对一个变量进行 加1或者减1 的符号)

   1. "++" ： 自增运算符（在自身的基础上加1）

      • 前置加加（++变量）与 后置加加（变量++）的区别

        • 相同点：都能让自身变量值加1

        • 不同点：前置加加：先把变量的值改变了再用改变后的值参与运算；后置加加：先把变量的值用来参与计算，然后再把变量的值改变；

   2. "--" ： 自减运算符（在自身的基础上减1）;

      • 前置减减（--变量）与 后置减减（变量--）的区别

        • 相同点：都能让自身变量值减1

        • 不同点：前置减减：先把变量的值改变了再用改变后的值参与运算；后置减减：先把变量的值用来参与计算，然后再把变量的值改变；

• JavaScript 函数

1. 函数定义阶段

   1. 语法：

function fn(a,b) { // a,b  是形参(一个特殊的变量); 特殊：只能在函数内部使用; 值：函数调用时，由实参确定
    // 定义的代码
    return result // 函数返回值
}

2. 函数调用阶段

   1. 函数名（）

fn(10,20)
// 实参：给形参进行赋值；规则：按照从左到右依次赋值；

• JavaScript 作用域 作用域：一个变量可以在什么范围内使用；

1. 范围：全局作用域（一个页面就是一个全局作用域）和私有作用域（只有函数生成私有作用域）

2. 使用：定义、访问、赋值

   1. 定义：声明在什么位置的变量就是那个作用域的变量
   2. 访问：自己有的变量就用自己的；没有就用父级的；依次类推；到全局作用域没有就会报错
   3. 赋值：自己有变量就给自己赋值；没有就给父级赋值；依次类推；到全局作用域都没有，就定义为全局变量再赋值

• JavaScript 对象数据类型

1. 创建一个对象 (键值对的集合)
2. 对象的 增、删、改、查

var obj = {} // 创建一个对象

obj.name = 'smiling' // 增加对象成员
obj['age'] = 22      // 增加对象成员

delete obj.name    // 删除一个键值对
delete obj['age']  // 删除一个键值对

obj.name = 'ling' // 如果对象里面有要改的属性那么就是修改；没有的话就是新增
obj['age'] = 22   // 如果对象里面有要改的属性那么就是修改；没有的话就是新增

• JavaScript 数组数据类型

数组：有序的 数据 集合

1. 创建一个数组 var arr = [1,2,3]
2. 排列：索引从0开始
3. 长度操作：数组长度:访问 arr.length ；设置 arr.length = 数字
4. 数据操作：访问 ：数组 [索引]；设置 ：数组 [索引] = 值

• JavaScript 数组常用方法

1. push()

   • 语法：数组.push(数据)
   • 作用：将数据追加到数组的末尾
   • 返回值：追加数据后的数组的最新长度

2. pop()

   • 语法：数组.pop()
   • 作用：将删除数据的最后一个数据
   • 返回值：指就是被删除的数据

3. unshift()

   • 语法：数组.unshift(数据)
   • 作用：将数据添加到数组的最前面
   • 返回值：添加数据后的数组最新长度

4. shift()

   • 语法：数组.shift()
   • 作用：删除数组最前面的一个数据
   • 返回值：被删除的数据

5. reverse()

   • 语法：数组.reverse()
   • 作用：将数组反转
   • 返回值：被反转的数组

6. splice()

   • 语法：数组.splice(开始索引，多少个，要插入的数据) // 开始索引：默认是0；多少个：默认是0；要插入的数据：默认是 没有
   • 作用：删除数组中的若干数据，并且选择是否要插入新的数据
   • 返回值：以新数组的形式返回被删除的数据

7. sort()

   • 语法：数组.sort()；数组.sort(function(a,b){ return a -b })；数组.sort(function(a,b){ return b - a })
   • 作用：将数组进行排序
   • 返回值：排序好的新数组

8. join()

   • 语法：数组.jion(连接符)
   • 作用：将数组用连接符连接成一个字符串
   • 返回值：连接好的字符串

9. concat()

   • 语法：数组.concat(其他数组)
   • 作用：将其他数组和数组拼接在一起
   • 返回值：拼接好的新数组

10. slice()

    • 语法：数组.slice(开始索引，结束索引) // 开始索引：默认是 0 ；结束索引：数组的长度
    • 作用：截取数组中的某些数据
    • 返回值：以新数组的形式返回截取出来的数据

11. indexOf()

    • 语法：数组.indexOf(数据)
    • 作用：查找数据在数组中的索引位置
    • 返回值：有数据，返回第一次出现的索引的位置；没有该数据，返回 -1

12. forEach()

    • 语法：数组.forEach(function(item,index,arr){}) // item：数组的每一项；index：索引；arr：原始数组
    • 作用：遍历数组
    • 返回值：无

13. map()

    • 语法：数组.map(function(item,index,arr){})
    • 作用：映射数组 (对数组的数据进行操作)
    • 返回值：映射后的新数组

14. filter()

    • 语法：数组.filter(function(item,index,arr){})
    • 作用：过滤数组
    • 返回值：过滤后的新数组

15. every()

    • 语法：数组.every(function(item,index,arr){ // 以 return 的形式书写条件 })
    • 作用：判断数组是不是每一项都满足条件
    • 返回值：是一个布尔值

16. some()

    • 语法：数组.some(function(item,index,arr){ // 以 return 的形式书写条件 })
    • 作用：判断数组是不是有某一项满足条件
    • 返回值：是一个布尔值

• JavaScript 字符串常用方法

1. chartAt()

   • 语法：字符串.chartAt(索引)
   • 作用：获取对应索引位置的字符
   • 返回值：对应索引位置的字符

2. toLowerCase()

   • 语法：字符串.toLowwerCase()
   • 作用：将字符串的字母全部转换成小写
   • 返回值：转换好的字符串

3. toUpperCase()

   • 语法：字符串.toLowwerCase()
   • 作用：将字符串的字母全部转换成大写
   • 返回值：转换好的字符串

4. replace()

   • 语法：字符串.replace(换下内容，换上内容)
   • 作用：将字符串内的第一个满足换下内容的片段替换成换上内容
   • 返回值：替换好的字符串

5. trim()

   • 语法：字符串.trim()
   • 作用：去除字符首尾的空格
   • 返回值：去掉空格的字符串

6. split()

   • 语法：字符串.split(分隔符)
   • 作用：按照分隔符将字符串切割成一个数组
   • 返回值：切割后的数组

7. substr()

   • 语法：字符串.substr(开始索引，多少个)
   • 作用：截取字符串
   • 返回值：截取出来的字符串

8. substring()

   • 语法：字符串.substring(开始索引，结束索引)
   • 作用：截取字符串
   • 返回值：截取出来的字符串

9. slice()

   • 语法：字符串.slice(开始索引，结束索引)
   • 作用：截取字符串
   • 返回值：截取出来的字符串

• JavaScript 数字常用方法

1. random()

   • 语法：Math.random()
   • 作用：获取0-1之间的随机小数，包含0，但不包含1
   • 返回值：0-1之间的随机小数

2. round()

   • 语法：Math.round(数字)
   • 作用：对数字进行四舍五入取整
   • 返回值：四舍五入后的整数

3. ceil()

   • 语法：Math.ceil(数字)
   • 作用：对数字进行向上取整
   • 返回值：向上取整后的整数

4. floor()

   • 语法：Math.floor(数字)
   • 作用：对数字进行向下取整
   • 返回值：向下取整后的整数

5. pow()

   • 语法：Math.pow(底数，指数)
   • 作用：对数字进行取幂运算
   • 返回值：取幂后的结果

6. sqrt()

   • 语法：Math.sqrt(数字)
   • 作用：对数字进行二次方根运算
   • 返回值：二次方根后的结果（算数平方根）

7. abs()

   • 语法：Math.abs(数字)
   • 作用：对数字进行绝对值运算
   • 返回值：绝对值运算后的结果

8. max()

   • 语法：Math.max(数字1,数字2，数字3,...)
   • 作用：获取若干个数字的最大值
   • 返回值：若干个数字中的最大值

9. min()

   • 语法：Math.min(数字1,数字2，数字3,...)
   • 作用：获取若干个数字的最小值
   • 返回值：若干个数字中的最小值

10. PI

    • 语法：Math.PI
    • 作用：获取一个近似于Π的值
    • 返回值：近似Π的值

• JavaScript 时间常用方法

创建时间 var time = new Date() 常用的时间方法有两类：获取时间 和 设置时间

获取时间：

1. 时间对象.getFullYear() // 获取年份
2. 时间对象.getMonth() // 获取月份
3. 时间对象.getDate() // 获取日期
4. 时间对象.getHours() // 获取小时
5. 时间对象.getMinutes() // 获取分钟
6. 时间对象.getSeconds() // 获取秒钟
7. 时间对象.getDay() // 获取星期
8. 时间对象.getTime() // 获取时间戳

设置时间：

1. 时间对象.setFullYear(数字) // 获取年份
2. 时间对象.setMonth(数字) // 获取月份
3. 时间对象.setDate(数字) // 获取日期
4. 时间对象.setHours(数字) // 获取小时
5. 时间对象.setMinutes(数字) // 获取分钟
6. 时间对象.setSeconds(数字) // 获取秒钟
7. 时间对象.setTime(数字) // 获取时间戳

---

• @Title: JavaScript 基础笔记 01
• @Content: JavaScript
• @Autor: ling.wang
• @StudyDate: 2022-03-24
• @WritingDate: 2022-03-24