xixiNote

Appearance

JavaScript Basic ​

JavaScript是什么 ​

JavaScript的组成 ​

ECMAScript ​

规定了js基础语法的核心知识

  • 比如：变量、分支语句、循环语句、对象等

Web APIs ​

  • DOM:操作文档、比如对页面元素进行移动、大小、添加删除操作
  • BOM:操作浏览器，比如页面弹窗、检测宽度、存储数据到浏览器等

JavaScript书写位置 ​

  1. 内部JavaScript

直接卸载html里，用script标签包裹

规范:script标签写在</body>上面

拓展:alert("你好,js")页面弹出警告对话框

WARNING

注意:我们将<script>放在html文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载html。

如果先将在的js期望修改其下方的html，那么它可能由于html尚未被下载而失效。

因此，将js代码放在html页面的底部附近通常是最好的策略

  1. 外部JavaScript

代码写在以.js结尾的文件

语法：通过script标签，引入到html页面中

WARNING

  1. script标签内部无需写代码，会被忽略
  2. 外部js会使代码更加有序，更加易于复用，并且没有了脚本的混合，html也会更加易读
  1. 内联JavaScript

代码写在标签内部

语法:

WARNING

注意：此处作为了解即可，但是后面vue框架会用到这种模式

html
<body>
    <button onclick='alert("hh")'>点击</button>
</body>
<body>
    <button onclick='alert("hh")'>点击</button>
</body>

JavaScript输入输出语法 ​

输出和输入也可以理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户

  • 输出语法:

    • 语法1:
    javascript
    document.write('要出的内容')
    document.write('要出的内容')

    作用：

    向body内输出内容

    注意：

    如果输出的内容写的是标签，也会被解析成网页元素

    • 语法2：
    js
    alert("要出的内容")
    alert("要出的内容")

    作用:

    弹出警告框

    • 语法3：
    js
    console.log("控制台打印")
    console.log("控制台打印")

    作用：

    控制台输出语法，程序员调试使用

  • 输入语法:

    • 语法：
    js
    prompt("请输入您的姓名:")
    prompt("请输入您的姓名:")

    作用：

    显示一个对话框，对话框包含一条文字信息，用来提示用户输入文字

js代码执行顺序 ​

  • 按照html文档流顺序执行js代码
  • alert()和prompt()它们会跳过页面渲染先被执行

变量 ​

变量声明 ​

DANGER

规范大小写,严格区分大小写

语法:

js
let 变量名
let 变量名
  • 声明变量有两部分构成：声明关键字、变量名
  • let即关键字(let :允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语

变量拓展 ​

let和var区别

在旧的js，使用关键字var来声明变量，而不是let

var现在在开发中一般不再使用它，只是我们可能在老板程序中看到它

let为了解决var的一些问题

var声明:

  • 可以先使用再声明(不合理)
  • var声明过的变量可以重复声明(不合理)
  • 比如变量提升、全局变量、没有块级作用域等等

结论

声明变量统一使用let

数组 ​

语法声明 ​

js
let 数组名 = [数据1,数据2,...,数据n]
let nums = [1,2,3,4,7]
let 数组名 = [数据1,数据2,...,数据n]
let nums = [1,2,3,4,7]

常量 ​

  • 概念：使用const声明的变量称为常量

  • 使用场景：当某个变量永远不会改变的时候，就可以使用const来声明

  • 命名规范：和变量一致(一般全大写)

  • 常量使用：

    js
    const G = 9.8
console.log(G)
    const G = 9.8
console.log(G)

  • 注意：常量不允许重新赋值，声明的时候必须赋值(初始化)

  • 小技巧：不需要重新赋值的数据使用const

WARNING

const只是代表内存中所指的变量地址不能更改，但是变量内部可以进行更改，比如数组a你可以更改a相对应索引的值，但是不能把整个a变成另一个值

数据类型 ​

WARNING

js是弱类型数据，变量到底属于哪种类型，只有赋值后，我们才能确认

java是强数据类型 例如：int a =3 必须是整数

检测数据类型 ​

通过typeof关键字检测数据类型 typeof 运算符可以返回被检测的数据类型。它支持两种语法形式

  1. 作为运算符: typeof x (常用的写法)
  2. 函数形式: typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

js
let num = 10
console.log(typeof num)
let str = 'pink'
console.log(typeof str)
let str1 = '10'
console.log(typeof str1)
let flag = false
console.log(typeof flag)
let un
console.log(typeof un)
let obj = null
console.log(typeof obj)
let num = 10
console.log(typeof num)
let str = 'pink'
console.log(typeof str)
let str1 = '10'
console.log(typeof str1)
let flag = false
console.log(typeof flag)
let un
console.log(typeof un)
let obj = null
console.log(typeof obj)

基本数据类型 ​

Number 数字型 ​

即我们数学中学到的数字，可以是证书、小数、正数、负数

NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

js
console.log('老师'-2) //NaN
console.log('老师'-2) //NaN

NaN是粘性的。任何对NaN的操作都会返回NaN

js
console.log(NaN + 2) //NaN
console.log(NaN + 2) //NaN

string 字符串型 ​

字符串定义 ​

使用""、''、反引号(``)定义

js
let uname ='小明'// 使用单引号
let gender ="男" // 使用双引号
let goods = 小米 // 使用反引号
let tel =13681113456 // 看上去是数字，但是引号包裹了就是字符串let str =· // 这种情况叫空字符串
let uname ='小明'// 使用单引号
let gender ="男" // 使用双引号
let goods = 小米 // 使用反引号
let tel =13681113456 // 看上去是数字，但是引号包裹了就是字符串let str =· // 这种情况叫空字符串

WARNING

注意事项: 1.无论单引号或是双引号必须成对使用

2.单引号/双引号可以互相嵌套，但是不以自已嵌套自已 (口诀:外双内单，或者外单内双)

3.必要时可以使用转义符 ，输出单引号或双引号

字符串拼接 ​

用+相连

js
document.write('我叫'+'刘德华') // 我叫刘德华
let uname ='刘德华' // 刘德华
let song ='忘情水'// 忘情水
document.write(uname + song)
document.write('我叫'+'刘德华') // 我叫刘德华
let uname ='刘德华' // 刘德华
let song ='忘情水'// 忘情水
document.write(uname + song)
模板字符串 ​

WARNING

注意是反引号！！！

语法:

  • 反引号(`)

  • 在英文输入模式下按键盘的tab键上方那个键(1左边那个键)

  • 内容拼接变量时，用${}包住变量

js
let age = 20// 板字串 外面用、里面 变量名)
document.write(`我今年${age}岁了`)
let age = 20// 板字串 外面用、里面 变量名)
document.write(`我今年${age}岁了`)

boolean 布尔型 ​

表示肯定或否定时在计算机中对应的是布尔类型数据。 它有两个固定的值 true 和false，表示肯定的数据用 true(真)，表示否定的数据用false (假)。

js
// true false 是布尔型字面量
console.log(3 > 4)
let isCool =false
console.log(isCoo1)
// true false 是布尔型字面量
console.log(3 > 4)
let isCool =false
console.log(isCoo1)

undefined 未定义类型 ​

未定义是比较特殊的类型，只有一个值 undefined。 什么情况出现未定义类型? 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少[直接] 为某个变量赋值为 undefined.

js
let num
console.log(num)
let num
console.log(num)

工作中的使用场景: 我们开发中经常声明一个变量，等待传送过来的数据 如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是 undefined，就判断用户是否有数据传递过来

null 空类型 ​

js中的null仅仅代表无、空或者值未知的特殊值

js
let obj =null
console.log(obj)
let obj =null
console.log(obj)

null和 undefined 区别:

  • undefined 表示没有赋值
  • null表示赋值了，但是内容为空

null开发中的使用场景: 官方解释:把null作为尚未创建的对象

大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

js
// 计算有区别
console.log(undefined + 1) // NaN
console.log(null + 1) // 1
// 计算有区别
console.log(undefined + 1) // NaN
console.log(null + 1) // 1

引用数据类型 ​

  • object对象

类型转换 ​

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚

坑: 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

显示转换 ​

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

  • 转为数字型Number

    • Number(数据)
    js
    let str = '123'
console.log(Number(str))
    let str = '123'
console.log(Number(str))

    • parseInt(数据)

      只保留整数

    • parseFloat(数据)

      可以保留小数

  • 转为布尔型Boolean

    • Boolean(内容)

    记忆:

    ''、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

    Boolean隐式转换:

    1. 有字符串的加法 ""+1，结果是"1"
    2. 减法- (像大多数数学运算一样)只能用于数字，它会使空字符串""转换为0
    3. null经过数字转换之后会变为03
    4. undefined 经过数字转换之后会变为 NaN.

隐式转换 ​

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则:

  • +号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算术运算符 比如 - * /等都会把数据转成数字类型

缺点:

  • 转换类型不明确，靠经验才能总结

小技巧:

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串
js
console.log(11 + 11)
console.log('11'+ 11)
console.log(11 - 11)
console.log('11'- 11)
console.log(1*1)
console.log('1'* 1)
console.log(typeof '123')
console.log(typeof +'123')
console.log(+'11' + 11)
console.log(11 + 11)
console.log('11'+ 11)
console.log(11 - 11)
console.log('11'- 11)
console.log(1*1)
console.log('1'* 1)
console.log(typeof '123')
console.log(typeof +'123')
console.log(+'11' + 11)

运算符 ​

运算符由于稍简单便不详细记录 这里只记录个人觉得有必要记录的

比较运算符 ​

比较运算符也有隐式转换 比如下方代码，会将字符串2转换为数字型number的2,返回true

js
console.log(2=='2')
console.log(2=='2')

  • ==:左右两边值是否相等

    只判断值

  • ===:左右两边是否类型和值都相等

    判断值和数据类型都一样才可以

运算符优先级 ​

image-20231125145631022

INFO

  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

条件判断 ​

DANGER

  • 除了0所有的数字都为真

    js
    if(0){
  console.log("执行")
}
    if(0){
  console.log("执行")
}

  • 除了 ''(空字符串) 所有的字符串都为真

    js
    if("你好"){
  console.log("你好被执行")
}

if(""){
  console.log("空字符串被执行")
}
    if("你好"){
  console.log("你好被执行")
}

if(""){
  console.log("空字符串被执行")
}

Array数组 ​

数组操作 ​

  • 增

    • arr.push(新增的内容)

    将一个或者多个元素添加到数组的末尾，并返回该数组的新长度(重点)

    js
    let arr = [1,2,3,4,5]
arr.push('5',5)
console.log(arr)
    let arr = [1,2,3,4,5]
arr.push('5',5)
console.log(arr)
    • arr.unshift(新增的内容)

    将一个元素或者多个元素添加到数组的开头，并返回该数组的新长度

    js
    let arr = [1,2,3,4,5]
arr.unshift('5',5)
console.log(arr)
    let arr = [1,2,3,4,5]
arr.unshift('5',5)
console.log(arr)

  • 删

    • arr.pop()

    删除数组中最后一个元素，并且返回删除的元素的值

    js
    let arr = [1,2,3,4,5]
arr.pop()
console.log(arr)
    let arr = [1,2,3,4,5]
arr.pop()
console.log(arr)
    • arr.shift() 删除数组中开头一个元素，并且返回删除的元素的值
    js
    let arr = [1,2,3,4,5]
arr.shift()
console.log(arr)
    let arr = [1,2,3,4,5]
arr.shift()
console.log(arr)

    • arr.splice(操作的下标(start)，删除的个数(deleteCount))

      删除指定元素

      start:

      • 指定修改的开始位置(索引)

      deleteCount:

      • 表示要移除的数组元素个数
      • 可选的。如果省略则默认从指定的起始位置删除到最后
      js
      let arr = [1,2,3,4,5]
arr.shift()
console.log(arr)
      let arr = [1,2,3,4,5]
arr.shift()
console.log(arr)

  • 排序 arr.sort(匿名函数)

    js
    let arr = [1,77,3,4,4,5]
arr.sort()
    let arr = [1,77,3,4,4,5]
arr.sort()
    • 升序
    js
    let arr = [1,77,3,4,4,5]
arr.sort(function(a, b) {
   return a - b
})
console.log(arr)
    let arr = [1,77,3,4,4,5]
arr.sort(function(a, b) {
   return a - b
})
console.log(arr)
    • 降序
    js
    let arr = [1,77,3,4,4,5]
arr.sort(function(a, b) {
   return b - a
})
console.log(arr)
    let arr = [1,77,3,4,4,5]
arr.sort(function(a, b) {
   return b - a
})
console.log(arr)

函数 ​

WARNING

  • 函数实参多于形参。剩余的实参不参与运算

  • 实参少于形参，剩余的实参不参与运算

函数声明 ​

语法:

js
function funcName(parmas参数列表){
  //函数体
}
function funcName(parmas参数列表){
  //函数体
}

函数命名规范 ​

  • 和变量命名基本一致

  • 尽量小驼峰命名法

  • 前缀应为动词

  • 命名建议：常用动词约定

    动词含义
    can判断是否可执行某个动作
    has判断是否含义某个值
    is判断是否为某个值
    get获取某个值
    set设置某个值
    load加载某些数据

函数传参-参数默认值 ​

js
function getSum(x=0,y=0){
  document.write(x+y)
}

getSum() //结果为0,而不是NaN
getSum(1,2) //结果为3
function getSum(x=0,y=0){
  document.write(x+y)
}

getSum() //结果为0,而不是NaN
getSum(1,2) //结果为3

函数返回值 ​

js
function fn(){
  return 20
}

console.log(fn())
function fn(){
  return 20
}

console.log(fn())

多数据返回 ​

用数组装载返回

js
function fn(){
  return [20,30]
}
console.log(fn())
function fn(){
  return [20,30]
}
console.log(fn())

函数细节补充 ​

  • 两个相同的函数后面的会覆盖前面的函数

  • 在JavaScript中，实参的个数和形参的个数可以不一致

    • 如果形参过多，会自动填上underfined(了解)
    • 如果实参过多，那么多余的实参会被忽略(函数内部有一个arguments，里面装着所有的实参)

  • 函数一旦碰到return就不会往下执行了，函数的结束用return

匿名函数 ​

没有名字的函数，无法直接使用 使用方式：

函数表达式 ​

必须先声明表达式后调用 将匿名函数赋值给一个变量，并通过变量名称进行调用，我们称之为函数表达式

语法:

js
let fn = function(){
  //函数体
}
let fn = function(){
  //函数体
}

立即执行函数 ​

不需要调用，立即执行

WARNING

注意：立即执行函数后必须加;号

场景介绍：避免全局变量之间的污染

语法：

  • 方式一
js
( function(){console.log(11)})();
( function(){console.log(11)})();
  • 方式二
js
( function(){console.log(11)}());
( function(){console.log(11)}());

示例

js
(function(x,y){
  console.log(x+y)
})(1,2) //3
(function(x,y){
  console.log(x+y)
})(1,2) //3

对象 Object ​

对象声明 ​

js
let 对象名 ={
  属性名: 属性值,
  方法名: 函数
}
let 对象名 ={
  属性名: 属性值,
  方法名: 函数
}

对象操控 ​

查 ​

  • 第一种

    js
    let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
console.log(xixi.username)
    let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
console.log(xixi.username)

  • 第二种 必须加上引号

    js
    let xixi = {
  'user-name':'xixi',
  age:20,
  gender:'男'
}
//
console.log(xixi['user-name'])
    let xixi = {
  'user-name':'xixi',
  age:20,
  gender:'男'
}
//
console.log(xixi['user-name'])

增 ​

js
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
xixi.address='地址'
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
xixi.address='地址'

改 ​

js
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
xixi.age=21
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
xixi.age=21

删(了解) ​

js
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
delete xixi.gender
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}
//
delete xixi.gender

对象方法 ​

js
let person = {
  name:'andy',
  sayHi: function(){
    document.write('dsb')
  }
}

person.sayHi()
let person = {
  name:'andy',
  sayHi: function(){
    document.write('dsb')
  }
}

person.sayHi()

遍历对象 ​

js
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}

for (let key in xixi){
  console.log(key) //打印属性名
  console.log(xixi[key]) //打印属性值
}
let xixi = {
  username:'xixi',
  age:20,
  gender:'男'
}

for (let key in xixi){
  console.log(key) //打印属性名
  console.log(xixi[key]) //打印属性值
}
  • 一般不用这种方法遍历数组，主要是用来遍历对象
  • for in 语法种的k是一个变量，在循环的过程种依次代表对象的属性名
  • 由于k是变量，所以必须使用[]语法解析
  • 一定记住：k是获得对象的属性名，对象名[k]是获得属性值
  • for in 出来的key是带引号的''

内置对象 ​

Math ​

image-20231126005743549