JavaScript基础笔记

用户705711813808
68 阅读12分钟

js简介

js是什么

是一种运行在浏览器的编程语言，实现人机交互

书写位置

  • 内部js
    </body >的上边
  • 外部js
    代码写在==.js==文件中,使用<script src=""></script>引用
  • 内联js
    与vue框架相关，代码写在标签内部，如：<button onclick="alert('XXX')">< /button>

输入输出

输入

  1. document.write('XXX')
    向body中输出内容，XXX可以是标签，被解析为网页元素
  2. alert（'弹出对话框'）
  3. console.log('控制台打印')
    console:控制台,log:日志

输出

  1. prompt('请输入年龄:')

执行顺序

  • 从上到下
  • alert和prompt会先执行

变量

www.runoob.com/js/js-let-c… 变量名称为标识符

  1. var声明
    • 声明的变量是全局的，在函数内声明的变量作用域是局部的.但没有块级代码的概念,同时作用在循环体内与外.
    • 变量提升:var变量可以先使用再声明
    • 可以重复声明
  2. let声明(与C相似)
    • 名称可包含字母、数字、下划线和美元符号
    • 名称也可以 以字母，$ 和 _ 开头
    • 名称对大小写敏感（y 和 Y 是不同的变量）
    • 保留字无法用作变量名称
    • 数组:let shuzu = {A,B}

数据类型

js为弱数据语言,只有赋值后才知道是什么数据类型

基本数据类型

  • Number
    • 用于任何类型的数字：整数或浮点数，在 ±(253-1) 范围内的整数。
  • Bigint
    • 用于任意长度的整数。
  • String
    • 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
    • 单引号和双引号效果一致,包裹的都是字符串
  • Boolean
    • 用于 true 和 false。
    • true不一定等于1,false不一定等于0。
  • Undefined
    • 在使用var 声明变量但未对其加初始化时，这个变量就是undefined。
    • 开发中，判断一个接收数据的变量是否接收到，可判断该值是否为undefined
  • Null
    • 表示赋值了但内容为空
    • null是表示一个空对象指针。对象还没创建好可以先给个null
  • Symbol
    • 用于唯一的标识符。
    • Symbol 值可以用作对象的属性键，以确保属性名的唯一性
const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2); // false

引用数据类型

  • Object
    • 用于更复杂的数据结构，比如 function、Array、Date。

typeof 运算符查看存储在变量中的数据类型。

  • 两种形式：typeof x 或者 typeof(x)。
  • 以字符串的形式返回类型名称，例如 "string"。
  • typeof null 会返回 "object" —— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个 object。

值的比较

相等运算符

  • ==非严格相等运算
    不同类型转化为同一类型,比较两个操作数的值是否相同
    • 不同类型进行相等运算时,转化优先级:数字>字符串>对象
    • 如果两个操作数都是对象，则比较引用地址。如果引用地址相同，则相等；否则不等。
  • ===或!==严格相等运算
    先检测类型是否相同,相同后才比较值是否相同
  • 高级类型互比,两者没有区别,都是指针地址比较,高级与基础互比与正常情况相同

其他运算符

  • 字符串的比较，会按照“词典”顺序逐字符地比较大小。
  • +相加运算符,转化优先级:字符串>数字>布尔值
    (布尔有0和1或ture和false两种状态),null与数字会变成0
    • result1=5+5+'abc'输出为10abc
    • result2='abc'+5+5输出为abc55
    • result1=' '+5+5+'abc'输出为55abc

特殊值

  1. 在非严格相等 == 下，null 和 undefined 相等且各自不等于任何其他的值。
  2. NaN与任何值都不相等，包括它自己。任何操作数与NaN比较，都是false
  3. 在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法是单独检查变量是否等于 null/undefined。

类型转换

  • 原因举例：JavaScript是弱数据类型，表单、prompt传来的数据默认为字符串型，不能直接进行加法运算

隐式类型转换

当某些运算符被执行时，系统内部自动将数据类型进行转换

  • +‘ ’可将数据化为字符串
    （+号两边有是一个字符串，另一个也被转成字符串）
    • 除了+的-*/运算符，会把数据转成数字类型
  • 在数据前放个+,可以将数据转化为数字型
    (作为正号解析)
  • !!a可以转化为布尔型
    (第一个!转化为布尔型的反面,第二个!正过来)

显式类型转换

  • 转换成String类型
    1. .toString a = a.toString();
      • Null和Undefined没有toString()方法_，如果调用它们的方法，则会报错。
    2. String()

      • 对于Number和Boolean就是调用toString()方法，对于null和undefined，就不会调用toString()方法，它会将null直接转换成”null”，将undefined转换成”undefined”。

  • 转换为Number类型
    1. Number()
      1. 如果是纯数字的字符串，则直接将其转换为数字。
      2. 如果字符串中有非数字的内容，则转换为NaN。
      3. 布尔类型转换成数字：Ture转成1；False转成0。
      4. Null转成数字0。
      5. Undefined转成数字NaN。
    2. parseInt()，parseFloat()
        1. parseInt()把一个字符串转换为一个整数，只取整数部分；
      2. parseFloat()把一个字符串转换为一个浮点数，可获得有效小数;
        • a = parseInt('12.34.56ab');a:12.34
      3. 对非String使用parseInt()或parseFloat()，它会将其转换为String.
  • 转换为Boolean类型
    • Boolean()
      1. 对于数字，0和NaN是false，其余的都是true。
      2. 对于字符串，空串是false，其余的都是true。
      3. 对于null和undefined，都是false。
      4. 对于对象，都是true。

函数

在JavaScript里，函数实际上是对象， 每个函数都是Function类型的实例， 而Function也有属性和方法。因为函数是对象， 所以函数名就是指向函数对象的指针

如何创建一个函数？

1. 使用函数表达式

函数通过一个表达式定义,且储存在一个变量中。使用这种语法定义的函数可以是命名函数或匿名函数

const sum = function (a1, a2) {
    return a1 + a2
}
let a = sum(1, 2)
console.log(a)

  1. 使用函数声明

在关键字“function”之后，你必须指定函数的名称。之后，如果函数接受多个参数或参数，也需要提及它们。

	function sum(a1 , a2) { 
	return a1 + a2 
	} 
	let a=sum(1,2);
  1. 箭头函数（很简化的一种方式）

let 函数名 = (参数1, 参数2) => { }

  • 当只有一个参数时,圆括号可以省略,没有参数时,空圆括号即可
  • 当函数部分只有一个语句,花括号也可以省略
  • 推荐将定义时采用的let改为const,此时函数表达式无法被改变,安全性更强
  • 箭头函数是不能提升的，所以需要在使用之前定义。

函数参数

显式参数与隐式参数

  • 显式参数在函数==定义时==列出。
  • 隐式参数在函数调用时传递给函数==真正的值==。(arguments和this等)

函数重载

两个或多个同名函数,参数数量或类型不同,可以通过调用时传入的参数数量或类型判断使用哪个函数

在js中,没有函数重载,后声明的同名函数会对原同名函数进行覆盖

默认函数值

定义函数时,可以赋给参数一个默认值

  • 默认值只有在调用函数时没有传入数据,才会被使用,定义时也不会起作用
  • 若有两个参数,只传入一个,另一个也会使用默认值

类数组arguments对象

函数传入的参数会存入arguments中,多个参数以类似数组方式存储和调用 fun(1,2,3)//arguments[0]=1

回调函数(Callback函数)

回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部的末尾执行。

function doSomething() {
  // 执行一些耗时的操作
}

function onDone() {
  // 操作完成后要执行的操作
}

doSomething(onDone);

对象

对象是变量的容器==>对象是键值对的容器

对象属性

键值对通常写法为 name : value (键与值以冒号分割),也称之为对象属性

var student= {id:"20230001", age:21, name:"张三"};

访问对象属性

可以使用 .property 或 ["property"]两种方法

  1. objectName.propertyName
  2. objectName["propertyName"]

对象方法

对象也可以有方法。方法是在对象上执行的动作。以函数定义被存储在属性中。

  • 实例:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

访问对象方法

  • objectName.methName();

对象的声明方式

  1. 声明字面量对象
  2. 通过object类创建对象
// 创建空对象
let obj1 = {}
let obj2 = new Object();
// 添加属性
obj1.key1 = "value1"
obj2.key2 = 12
obj1["key1"] = false
// 添加方法
obj2.hi=function(){
    console.log("hi")
}

区别

  • 语法
    • 字面量对象使用花括号 ({}) 来定义。
    • Object 声明的对象使用 new Object() 语法来定义。
  • 创建方式
    • 字面量对象是直接创建的，不需要使用构造函数。
    • Object 声明的对象是通过构造函数创建的。
  • 性能
    • 字面量对象的创建速度通常比 Object 声明的对象更快。
  • 可拓展性
    • 字面量对象不能直接扩展其原型。
    • Object 声明的对象可以通过 Object.prototype 扩展其原型。
  • 使用场景
    • 字面量对象通常用于创建简单对象。
    • Object 声明的对象通常用于创建复杂对象或需要继承的对象。

object类

  • Object.prototype 是 JavaScript 中所有对象的原型对象。 它包含所有对象默认继承的属性和方法。

  • 原型机制允许对象继承自其原型对象的属性和方法。 这是一种代码重用和减少代码冗余的有效方式。

字符串

字符串的属性和方法

length属性

使用字符串的length属性可以查看当前字符串中字符的数量，就算其中包括双字符也会按照单字符计算,(有些Emoji占用四个字符)

拼接字符串的concat方法

  • 但在实际开发中,常用+连接两个字符串进行连接
let str = "hello";
let str2 = str.concat(" world", " qwq");
console.log(str); //hello
console.log(str2); //hello world qwq

字符串切片方法slice、substr、substring

  • 他接受两个参数，第一个参数是开始的位置（必传），第二个参数是结束的位置
  • 当传入负数时，按照从末位开始算，-1表示倒数第一位
let str = "一二三四五六七八";
let strSplice = str.slice(0,6);
console.log(strSplice);

删除左右空格的trim方法

  • trim方法会返回一个新字符串，删除了左右的所有空格。
  • 在实际开发中会用到这个方法进行用户输入数据的处理

将字符串打碎成数组的split方法

let str = "一二三四五六七八";
let engStr = "hello world you qwq";
console.log(str.split(""));//所有单子符之间加上","
console.log(engStr.split(" "));//将" "(空格)替换为"," 也可用字母当分割线

字符串的大小写转换方法toLowerCase toUpperCase

数组

在JS的数组中，可以任意的存放各种类型的数据（这点和大多数其他语言不同），并且JS的数组是动态的，他会自动为你扩充大小。

数组的属性和方法

检查数组长度的length属性

  • 和字符串的属性类似，数组会有一个length属性供我们查看数组中有多少个元素。

转换数组为字符串的join方法(和toString)

  1. 使用join方法可以直接返回一个以传入参数为分隔连接起来的字符串arr.join("")
  2. (不推荐)其实,数组也是一种特殊的对象，所有对象都会拥有toString方法用于返回一个和该对象有关的字符串，数组也不例外，他可以返回一个用逗号相连的字符串。

数组的推入与删除push pop shift unshift

  • 使用push pop shift unshift方法可以操作数组最前面一项和最后面一项
    • push：向数组的最后推入一项
    • pop：移除数组的最后一项
    • shift：移除数组的第一项
    • unshift：向数组最前方推入一项
push和pop方法可以构建类似栈的处理方式

使用push向末尾推入新的一项，用pop删除最后一项，这样的操作方式和栈的工作原理一致

shift和push方法可以构建类似队列的处理方式

使用shift和push方法可以构建类似队列的处理方式，使用push推入最后一项，使用shift删除最前面的一项。

数组的迭代方法map，forEach

数组有自己的迭代方式，不需要我们手动使用for循环去遍历数组

forEach方法：
  • forEach是不带有返回值的方法：
let arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item) => {//item是形参
  console.log(item);
});
map方法：
  • map是带有返回值的方法，并且map方法比forEach要更快，他会返回一个新的数组；
let arr = [1, 2, 3, 4, 5, 6];
let arrNew = arr.map((item) => {
  return item + 1;
});
console.log(arr);
console.log(arrNew);
  • map方法可以方便进行[[链式调用]]
  • 在实际开发中，由于map拥有这样可以返回新数组、运行效率高、可以链式调用的特性，我们通常使用map而不是forEach方法

数组的过滤方法filter

  • filter方法用于对数组进行过滤。它会创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
var arr = [2,3,4,5,6]
var result = arr.filter(function (number) {
    return number > 3
})
console.log(result);
  • filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。

数组中查找某个元素的位置indexOf

  • array.indexOf(item,start)方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。如果在数组中没找到指定元素则返回 -1。

其他方法

JavaScript数组中的方法还有很多。如排序方法sort()、截取数组splice()、翻转数组reverse()等等。

avatar
文章
阅读
粉丝