JavaScript基础

JS是什么#

---

是运行在浏览器的编程语言，由ECMAscript（基础语法）+ DOM + BOM 组成。

导入方式#

---

导入方式有三种，内部导入、外部导入、行内导入

注意：script便签加在/body前为妙，因为读取是顺序下读的，在html前可能会读不到js语句

• 行内插入 <button onclick="alert('hi')">点我</button>
• 外部插入 <script src="">中间不能有东西</script>
• 内部插入 <script>中间写代码</script>

JavaScript输入输出#

---

输入: prompt()
输出：alert()、document.write()、console.log()

模板字符串#

---

必须在esc下面的点括里${name}

let name = prompt('名字')
let age = prompt('年龄')
document.write(`我叫${name},今年${age}`)

数据转换#

• 隐式转换
  加号 字符和数字相加等于字符 '1'+2
  加号 加号在字符前会让字符变数字 + '11'
  减号/乘/除 字符和数字相减等于数字 '2'-1

• 显示转换
  转为数字 Number()
  转为字符 String()
  只要整数parseInt('1.5px')
  要浮点数parseFloat('1.5px')

表达式和语句的区别#

---

• 表达式: 是可以求值的，无论如何都有值 x=2+1、3<2...
• 语句: 不一定有值， break、for、if...
  
  

三元#

• 三元运算符 条件 ? 条件为true返回的值 : 条件为false返回的值
• 三元表达式 3>2 ? aa : bb → 这里是打印出值aa

流程控制#

• switch分支控制

用法：switch(里面是值)，在case里找对应值，配对则执行该case下的代码

let name = prompt('请输入您要做的事情，1取钱 2转账，3存钱')

switch(+name){
    case 1:
        alert('取走了100万')
        break
    case 2:
        alert('转账给别人1亿');
        break
    case 3:
        alert('存钱2块');
        break
    default:
        alert('请输入正确数值');
}

• while循环

注意1：只要是true条件下就无限循环
注意2：while循环三要素：起始变量、终止条件、变量自增
基本用法

let i = 0
while (i <= 5){
    console.log("打印五次")
    i ++
}

• for循环

注意1：循环三要素：起始变量、终止条件、变量自增
注意2：注意它的执行步骤， ① let i = 1 循环变量初始化； ② i <= 3 条件; ③ for的函数体； ④i++ 循环变量迭代
基本用法

for(let i=1; i<=3; i++){
    if(i===2){
        continue
    }
    console.log(i);
}

• do .. while循环

执行顺序与其他循环不同，①循环变量初始化； ②do..while的函数体; ③i++ 循环变量迭代； ④条件

定义全局函数#

用法

function fn(x,y){
   return x + y
}

fn(1,2)

注意

• 定义函数时候，x，y是形参
• 调用函数时候，1,2是实参
• return 返回的是值，调用时要赋值 let re = return 111
• return是结束函数用的，break是结束循环用的
• 匿名函数是立即执行的，存在意义是防止变量的污染 (function(){alert('123'；let num =10)})()

匿名函数#

没有名字的函数，后期用定义在事件event上，ul.onclick = function (e) {}

// 直接调用匿名函数,()()

(function (){})()
;
(function (x, y) {console.log(x+y)} ) (1, 2)

箭头函数#

ES6+ 新特性， 是函数的新写法

const fn = (x, y)  => {
    return x + y
}
console.log(fn(1,2));

注意
箭头函数的this指向

• 箭头函数的this值会指向它上一级的作用域（函数），直接定义箭头函数，它的this就直接指向window了， 注意在DOM事件的时候避免用箭头函数
  

多参数#

动态参数 argument#

剩余参数 ...other#

一般使用...other, 因为argument是个伪数组

注意： 区分在数组里的...是展开运算符

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1, ...arr2]  
console.log(arr3) // 结果是 [1,2,3,4,5,6]

闭包函数#

注意
因为函数是复杂数据，其数据在堆区， 当函数调用完后应该被清理数据，但是闭包函数最后用变量赋值给包函数，导致出现内存泄漏

定时器函数#

定时器有两种

• 间隔函数setinterval（function(){},1000） 设置一个时间（以毫秒为单位），等待数秒后再次执行回调函数
• 延时函数setTimeout（function(){},1000） 设置一个时间（以毫秒为单位），等待数秒后执行一次

间隔函数

<script>
  const jiange = setInterval(function(){
      console.log(123);
  },1000)

  //第二种方式
  const jiange  = setInterval(() => {
     console.log('11111');
  }, 1000);

  // 关闭定时器
  clearInterval(n)
</script>

回调函数#

function fn() {
    console.log('我是回调函数')
}
setInterval(fn,1000)

数组#

• ？ 有序的数据集合[]，每个值都有下标

• use

  • 增 arr.push('尾部增加值') 、 arr.unshift('头部增加值')

  • 删 arr.splice(起始位置，删除个数），例 arr.splice(0,1)删除第一个值

  • 改 arr[2] = 值

  • 遍历 用索引方式的for循环

  let arr = [1,2,3,4,5,6]
        for(let i=0; i<arr.length; i++){
            console.log(arr[i]);
        }
  

数组的遍历方法#

• map 叫映射，可以重新赋值，拼接用+号，值+另外的值得新值
• filter 叫筛选数组， 可以重新赋值，用><=号，比较筛选值
• reduce 累加数组的值，可以重新赋值但得到是累加结果（一个数字）
• forEach 叫跟for循环一样， 不可以重新赋值

对象#

• ？ 无序的数据集合{key:'value',age:18}，用obj.key 或 obj['key'] 找值

• use

  • 有两类元素： 属性 and 方法(函数在对象里面叫方法)

  • 增、改 obj.uname = '新值' or obj['uname'] = '新值'

  • 删 delete obj.uname or delete obj['uname']

  • 遍历用for in，取值必须要用obj['key']

  let obj = {
            uname: 'jan',
            age:'18'
        }
        for(let key in obj){
            console.log(key);
            console.log(obj[key]);
        }
  

• notice

  null也是一个空对象

创建对象三种方法#

字面量创建#

创建对象 new Object#

Obj(){}构造函数创建对象#

注意：

• 构造函数其实就是创建一个函数的母亲，用 new 母亲() 可以创建很多儿子
• 构造函数必须以大写字母开头
• 构造函数的函数体不需要写return
• 只能用 new 来创建新儿子函数
• js中几乎所有的数据都可基于构造函数创建，专业名称叫“包装类型” （例如： const str = 'andy' ; console.log(str.length)）
  属性在构造里创建，方法在原型对象(prototype)里创建，如果非要在构造里创建方法，那么new一个新的对象就多一个方法在堆区，浪费堆区的存储空间

原型对象 (constructor构造器、prototype构造原型、实例对象) 三者关系#

• constructor 就是构造函数的名字，
• prototype 是原型对象，每个构造函数都必须有一个原型对象；构造函数要被继承的方法在这里存放才不会浪费堆区空间；

构造函数里面的this，无论在构造函数里，还是在原型对象里都得指向实例对象上面

通过原型对象实现继承#

Son.prototype = new Parent();
Son.prototype.constructor = Son

通过原型对象创建方法#

function Person(name){
    this.name = name
}
Person.prototype.sing = function(){     //在原型对象上创建方法（函数）
    console.log('我们都会唱歌')
}

var obj = new Person('张三')  //实例对象

obj.sing()  // 调用对象上的方法

改原型对象的值，新增一个数组的内置方法#

原型链是什么#

实例成员和静态成员#

• 实例成员就是儿子对象的 属性、方法
• 静态成员就是母亲对象的 属性、方法，静态成员只能构造函数自己访问

对象的内置方法 （常用）#

Math方法之制造随机数#

---

• 取小数的整 Math.floor(3.222) 返回是 3
• 随机取0~1之间的小数值 Math.random() 0.565652
  

浏览器本地存储#

数据能存储在用户浏览器中，两个数据库各5M,在浏览器Application上

• sessionStorage（关闭浏览器就消失）
• localStorage （同域名下不删除不会消失）

// 1.增和改都一样，无就增，有就改
localStorage.setItem('uname','jan')

// 2.查,注意加引号
console.log(localStorage.getItem('uname'));

// 3.删
localStorage.removeItem('uname')

注意 本地存储只能存字符串string， 如果存复杂类型必须用json格式

// json封
const info = {uname:'jan',password:'123'}
localStorage.setItem('obj',JSON.stringify(info))

// json 解
const obj = localStorage.getItem('obj')
console.log(JSON.parse(obj));

时间#

获取英文年月日

• console.log(new Date()) 返回 Mon Apr 03 2023 18:22:54 GMT+0800 (中国标准时间)

获取中文年月日

• console.log(new Date().toLocaleString()); 返回 2023/4/3 18:22:54

获取时间戳

• console.log(+new Date()) 返回毫秒时间戳 1680517591362
• console.log(parseInt(+new Date()/1000)); 返回秒 1680517767
• 可以加日期进去Date函数里 console.log(parseInt(+new Date('2022-05-02 18:00:59')/1000));

new Date的方法合集

毫秒计算时分秒公式