JavaScript 基础(1)

发表于 更新于 分类于 ， 阅读次数：

行内式

<a href="javascript: alert('hello world')">点我</a>

<div onclick="alert('hello world')">点我</div>

内嵌式

可以放在页面任何位置

链入式

<script src="/xxx.js"></script>
此时写在标签内的内容不会执行

输出

  • alert()
  • console.log()
  • document.write()

变量

  • 定义变量：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var text = "hello world"
    var a = 1234
    b = 1234 //不建议不加 var 定义变量
    // 同时定义多个变量
    // 换行或分号表示结束
    var a, b, c
    var a = 123, b , c = "hello world"
    // 驼峰命名法：当多个单词组成变量名时，第二个字母开始首字母大写
    var getGoodList
  • 数据类型：
  1. 基本数据类型
    • Number数值
    • String
    • Boolean
    • Undefined
    • Null
  2. 复杂数据类型（地址数据类型、引用数据类型）
    • Object
    • Function
  3. 检测数据类型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var n1 = 100
    var n2 = 200
    var res
    res = typeof(n1) 
    console.log(res) // number
    res = typeof(n1+n2) // number
    res = typeof n1 + n2
    console.log(res) // number200
    res = typeof typeof(n1 + n2) // string
    // typeof()返回对象,只能准确地返回基本数据类型。返回值是一个字符串
    // undefined返回undefined
    // null返回object

数值类型转换

  • 转数值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // Number()把转换对象当成一个整体
    var n1 = "123"
    var res = Number(n1)
    console.log(res)
    n1 = "abc"
    res = Number(res)
    console.log(res) // NaN
    // parseInt()把转换对象一位一位地看，遇到不能转换的位置停止
    var n1 = '123abc'
    var res = parseInt(n1)
    console.log(res) // 123
    // 布尔值
    var b1 = true  
    Number(b1) // 1
    parseInt(b1)// NaN
    // parseInt()忽略小数点, 要用parseFloat
    //取正负值 与Number()相同
    var n1 = '100'
    var res1 = +n1 // 100
    var res2 = -n1 // -100
    // 非加法运算
    var n1 = '100'
    var res1 = n1 * 1 // 200
    var res2 = n1 / 1 // 200
    var res3 = n1 - 0 // 200
    var res4 = false / 1 // 0

  • 转字符串

    1
    2
    3
    4
    5
    // String()转换任何数据类型
    // toString() 
    var n1 = 100
    n1.toString()
    // undefined和null没有toString()方法

  • 加法运算

    • 加号其中一边是字符串时，字符串拼接
    • 两边都是数字或有布尔值时，加法运算

  • 转布尔值

    1
    2
    3
    4
    // 只有五个能转换为false
    0, '', NaN, , undefined, null
    console.log([] == '') // true
    Boolean([]) // true

运算符

  • 数值运算符
  • 赋值运算符（两个数据进行比较的符号）
    1
    2
    3
    4
    5
    6
    7
    8
    1 == '1' // true
    1 == true // true
    undefined == null // true
    NaN == NaN // false 
    !== //值和数据类型都要比较
    === //等等于：值和数据类型都要比较
    ！= //比较数值，不比较数据类型
    == //比较数值，不比较数据类型
    1
    2
    3
    4
    保留三位小数：
    var n = 100.2345678
    var res = parseInt(n * 1000) / 1000
    console.log(res) // 100.234
  • 逻辑运算符
    1
    ||, &&, !
  • 自增自减

条件分支语句

1
if(), switch(), while(),do{}while(), for(); do{}while和while的区别：不管条件是否成立，都先执行一次

函数

  • 定义式
    1
    2
    3
    function fun(){
        console.log("hello world")
    }
  • 赋值式
    1
    2
    3
    var fun = function(){
        console.log("hello world")
    }
  • 调用
  1. 函数名()
  2. 区别：生命式函数可在前后位置调用，赋值式函数只能在后面位置调用
  3. 实参和形参: 1. 从左到右顺序一一对应 2. 多出来的实参不能直接使用 3. 多出来的形参，没有实参赋值，为undefined
1
2
3
4
5
6
7
8
9
10
11
// 例子：
// 判断质数
function fn(a){
    var flag = true
    for (i = 2; i<=parseInt(a/2); i++){
        if (a % i == 0){
            flag = false;break;
        }
    }
    console.log(flag);
    }
  1. return 可以打断函数；返回值。
  2. 封装
    1
    2
    3
    4
    5
    <script src="./util.js"></script>
    <script>
    // 可以直接使用封装的函数
    var a = getReturn()
    </script>
  • 预解析

    在所有代码执行之前，对整体代码作为文档进行通读并解析
  1. var关键字

    定义的变量代码执行之前声明 （变量没有赋值，在变量前面的console.log()，声明式函数提示错误，变量提示undefined
  2. 声明式函数

    在所有代码执行之前声明，并赋值为函数
    1
    2
    3
    4
    5
    6
    7
    8
    // 例子: 
    fn()
    var fn = 100
    fn() // 提示错误--fn()不是一个函数
    function fn(){
        console.log("fn 函数")
    }
    fn()
  • 注
  1. if条件不管是否成立，里面的代码都会进行预解析，不赋值
  2. return后面的代码 不执行，但会预解析
    • 声明式函数尽量不要先调用
    • 尽量使用赋值式函数
  • 作用域

对象数据类型

  • 字面量创建对象

    1
    2
    3
    4
    5
    6
    var o = {}
    var o2 = {
        num: 100,
        str: 'hello world',
        fn: function(){console.log('我是 o 的 fn 函数)}
    }

  • 内置构造函数创建对象

    1
    var o = new Object()

  • 对象操作

    • 点语法操作对象
      1
      2
      3
      4
      5
      6
      7
      8
      9
      1. 添加成员
      o.par = 'hello'
      o.par1 = 100
      2. 删除成员
      delete o.par
      3. 修改成员
      o.par1 = 200
      4. 查询成员
      console.log(o.par1)
      控制台展开对象数据类型之后，是最终的样子。
      解决办法：直接打印成员；console.table(o)
    • 数组关联语法
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      var o = new Object()
      1. 添加
      o['name'] = 'Jack'
      o['age'] = 100
      console.log(o['name'])
      2. 删除
      delete o['name']
      3. 修改
      o['age'] = 18
      4. 查询
      console.log(o['name'])
    • tips
      1
      2
      3
      4
      // 这里相当于obj['abc'] = 'hello world'
      var obj = {}
      obj.name = 'Jack'
      obj[name] = 'hello world'
    • 遍历对象
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var obj = {
          name: 'jack',
          age: 18,
          gender: 'male',
          score: 100
      }
      for (var key in obj){
          console.log(key) // 依次打印出成员名 类型 String
          console.log(obj[key]) // 依次打印值
      }
    1
    2
    3
    //判断一个成员是不是在这个对象里面
    console.log(name in obj) // false
    console.log('name' in obj) // true\

数据类型存储区别

  • 基本数据类型与复杂数据类型存储上是有区别的
  • 浏览器的一段存储空间
    • 栈内存
    • 堆内存
  • 数据类型赋值之间的区别：
    1. 基本数据类型：就是把变量存储的值直接赋值给另一个变量。
    2. 复杂数据类型：把变量地址给另一个变量
    3. 函数形参和实参的关系：调用的时候实参给形参赋值
    4. 函数返回值也是一种赋值
  • 函数也是对象 
    1
    2
    3
    4
    5
    6
    7
    function fn(){
        console.log('fn 函数')
        console.log(param) // 出错
    }
    fn.param = 100 
    fn() //出错
    // fn() 和 fn.param 互不干扰

数组

  1. 字面量创建
    1
    var arr = []
  2. 内置构造函数创建
    1
    var arr = new Array()
  3. 字面量添加变量
    1
    var arr = ['hello', 'world', '123']
  4. 内置函数添加变量
    1
    2
    var arr = new Array(100) // 一百个空值
    var arr = new Array(10, 20, 30) //[10, 20, 30]
  • 数组操作
    1
    2
    3
    4
    5
    var arr = ['a', 'b']
    console.log(arr[0])
    console.log(arr[99]) //undefined
    arr.length = 100 // 数组长度强制设置为100，不够补空
    arr.length = 1 // 保留第一个，剩下的删除
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var arr = ['a', 'b' ]
    arr.name = 'Jack'
    arr.age = 10
    // name, age 不影响遍历
    for(var i = 0; i<arr.length; i++){
        console.log(arr[i])
    }
    // 打印成员名包括name, age
    for(var key in arr){
        console.log(key)
    }
    常用方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    //按顺序追加到末尾
    arr.push('add1', 'add2', 'add3')
    // 删除数组最后一个数据，返回值：被删除的数据
    arr.pop()
    // 从数组前面插入一些数据，返回值：插入数据后数组长度
    arr.unshift('add1', 'add2', 'add3')
    // 删除数组的最前面的一个数据，返回值：被删除的数据
    arr.shift()
    // 反转数组，返回值：反转的数组
    arr = [1,2,3,4,5,6,7,8,10]
    arr.reverse()
    // 按每一位数据的ASCII码数组排序，返回值：排序后的数组
    arr.sort()
    var res = [1,2,5,7,8,20,30,40,100]
    var res2 = res.sort(function(a,b){return a-b}) // 升序排序，b-a则是降序排序
    // 返回截取的数据，并删除
    arr.splice(0, 1) //截取前2个
    // 返回值：如果截取一个或多个数据，返回一个或多个数据；如果一个都不截取，返回空数组
    arr.splice(开始索引，截取个数，替换数据1，替换数据2，替换数据3， 替换数据4......)
    // 返回值：追加好的数组，不改变原来的数组
    arr.concat(数组1，数组2)
    // 返回值：获取的数组，不改变原来的数组，参数2可以不写也可以全不写
    arr.slice(开始索引，结束索引) 
    // 用连接字符连接数组中的元素，不改变原数组 返回值：字符串
    // 正向查找，返回索引，如果没有返回-1
    var i = indexOf(数据)
    var i = indexOf(数据，1) // 从1开始找
    //反向查找，类似上
    var i = lastIndexOf(数据)
    var i = lastIndexOf(数据，开始索引)
    // 取代for循环遍历数组，没有返回值
    arr.forEach(function(item, index, arr){})
        // item 数组的每一项
        // index 每一项的索引
        // arr 原始数组
    // 映射数组，返回新数组，新数组长度和原数组一致
    var res = arr.map(function(item, index, arr){ return item*1.3 }) // 原理回看
    console.log(res)
    // 过滤原数组的数据，返回满足条件的项
    var res = arr.filter(function(item, index, arr){ return item > 30 })
    // 判断原数组中是否每一个都满足条件，返回值：一个布尔值
    var res = arr.every(function(item, index, arr){ return item > 30 })
    // 判断原数组中是否有一个满足条件，返回值：一个布尔值
    var res = arr.some(function(item, index, arr){ return item > 30 })
    // 用数组里面的数据替换数组里面的数据，返回值：
    var res = arr.copyWithin(目标位置，开始索引，结束索引)
    // 用指定内容填充数组，返回值：
    var res = arr.fill(填充内容，开始索引，结束索引)
    //查看数组里又没有该数据，返回值：一个布尔值
    var res = arr.includes(数据)
    // 拍平数组 降维，返回值：新数组
    var arr = [10, 20, 30,
    [40, 50, 60,
    [60]]
    var res = arr.flat(2)
    // var res = arr.flat(Infinity) // 无限
    // 将原数组展平为新数组，该方法首先利用映射函数映射每个元素，然后将输入数组元素展平为一个新数组，返回值：新数组
    var arr = [10, 20, 30, 40]
    arr.map(function(item, index, arr){ return [item] }) // [[10], [20], [30], [40]]
    var res = flatMap(function(item, index, arr){ return [item] }) // [10, 20, 30, 40]
    // 找到第一个满足条件的数据，返回值：找到的数据
    var res = arr.find(function(item) { return item > 20 }) // 40
    // 找到第一个满足条件的数据，返回值：数据索引
    var res = arr.findIndex(function(item) {return item >30 }) // 7

字符串

  1. 创建
    1
    2
    3
    // 两种方式除了在控制台上打印没有任何区别
    str1 = 'hello world'
    str2 = new String('hello world')
  2. 字符串一个包装数据类型，一个数据当你的使用的时候会转换成复杂数据类型，使用完毕自动转换成基本数据类型，开辟的堆栈的临时空间自动销毁。
    点语法： 
    1
    2
    str.length
    str.toString()
  3. 字符串操作
    1
    2
    3
    4
    5
    6
    7
    // 拼接
    var str = 'abc'
    str += 'd'
    // 遍历
    for(var i = 0; i < str.length; i++ ){
        console.log(str[i])
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    var str = 'abcdefg'
    // 返回值：字符
    var res = str.charAt(索引)
    // 返回值：该字符的编码（utf-8）
    var res = str.charCodeAt(索引)
    // 返回值：截取出来的字符串
    var res = str.substr(开始索引，个数)
    // 返回值：截取的字符串
    var res = str.substring(开始索引，结束索引)
    // 返回值：转换好小写字母的字符串
    var res = str.toLowerCase
    // 返回值：转换大写字母
    var res = str.toUpperCase()
    // 返回值：替换好的字符串 只能替换第一个
    var res = str.replace(被替换字符，替换字符)
    // 返回值：拼接字符串
    var res = str.concat(字符串)
    // 返回值：截取字符串，可以加负整数 = length + 负整数
    var res = str.slice(开始索引，结束索引)
    // 返回值：分割的字符串，个数选填
    var res = str.split(分割字符，个数)
    // 返回值：字符串索引，没有返回-1
    var res = str.indexOf(字符串)
    var res = str.indexOf(字符串，开始索引)
    // 从后往前找，没有返回-1
    var res = str.lastIndexOf(字符串)
    // 返回值：布尔值，字符串里是否有该字符串
    var res = str.includes(字符串)
    //  返回值：指定索引，没有则返回-1
    var res = str.search(字符串)
    // 匹配字符串，作用是传递正则，返回一个数组，包含索引，原字符串等
    var res = str.match('o')
    // 去除首尾空格
    var res = str.trim()
    // 去除开头空格
    var res = str.trimStart()
    // 去除尾部空格
    var res = str.trimEnd()
    // 从前面补全字符串
    var str1 = "1234"
    var res = str1.padStart(目标长度，填充字符)
    // 从后面补全字符串
    padEnd()
    // 返回值：布尔值，判断是否是以这个字符串开始
    var res = str.startsWith(字符串)
    // 相反的
    endswith()
    // 转换成小号字符串,返回值：<small>字符串<small>
    var res = str.small()
    // 相反的
    big()
    // 加粗显示
    blod()
    // 指定字符串大小
    var res = str.fontSize(尺寸) 
    // 只当字符串颜色
    var res = str.fontColor(颜色)
    // 拼接字符串方案
    // 隐藏关键字方案
    // 字符串计数
  4. 模板字符串

    反引号括起来的字符串
    • 单引号和双引号定义的字符串不能换行，模板字符串可以换行，可以写和HTML结构
    • 解析变量
      模板字符串添加 ${变量}
    • 兼容性
      ES6语法，IE低版本不支持

json格式

  • 把JS数组或对象转换成json格式
    1
    var jsonStr = JSON.stringigy(转换对象)
  • 把JSON格式的字符出转换成JS的数组或对象
    1
    var obj = JSON.parse(要转换的JSON字符串)
    • json文件

本地缓存

  • localStorage

    永久缓存，除非手动删除
    1
    2
    3
    4
    5
    6
    7
    8
    // 存储一条数据
    localStorage.setItem(键，值)
    // 获取key的数据
    var res = localStorage.getItem(键)
    // 删除
    localStorage.removeItem(键)
    // 清除
    localStorage.clear()
  • sessionStorage

    会话缓存，关闭浏览器就没了
    1
    2
    3
    4
    5
    6
    7
    8
    // 存储一条数据
    sessionStorage.setItem(键，值)
    // 获取key的数据
    var res = sessionStorage.getItem(键)
    // 删除
    sessionStorage.removeItem(键)
    // 清除
    sessionStorage.clear()

数学方法

  • Math 方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 0~1 之间的随即小数
    var res = Math.ramdom()
    // 四舍五入取整
    var res = Math.round(数字)
    // 向上取整后的数字
    var res = Math.ceil(数字)
    // 向下取整
    var res = Math.floor(数字)
    // 取幂
    var res = Math.pow(数字，次幂)
    // 算术平方根
    var res = Math.sqrt(数字)
    // 绝对值
    var res = Math.absd(数字)
    // 最大值，传入多个数字，不适用于数组
    var res = Math.max(数字1，数字2，数字3，...)
    // 最小值，
    Math.min()
    //圆周率
    var res = Math.PI
  • 进制转换
    1
    2
    3
    4
    5
    6
    7
    8
    var num = 10
    // 十进制转其他进制
    // 转换为八进制
    var res = toString(num, 8)
    // 其他进制转十进制
    var num = 144 //八进制数
    // 八进制转十进制
    var num = parseInt(num, 8)
  • 保留小数
    1
    2
    var num = 123.4567890
    var res = toFixed(2) // 保留2位小数