JavaScript基础学习笔记

最新推荐文章于 2024-07-19 15:13:24 发布
最新推荐文章于 2024-07-19 15:13:24 发布
阅读量369 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript js java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44765402/article/details/114482663
版权

1. 基础

1.1 JavaScript是什么

  • 客户端脚本语言
  • 脚本语言：不需要编译，由js解释器逐行解释并执行
  • 也可基于Node.js技术进行服务器端编程

可用于：

  • 表单动态检验（最初）
  • 网页特效
  • app（Cordova）
  • 桌面程序（Electron）
  • 控制硬件-物联网（Ruff）

1.2 JS组成

在这里插入图片描述

  • ECMAScript：工业标准
  • DOM：简单理解为对网页元素的操作
  • BOM：操作浏览器窗口，如弹出对话框、控制跳转等

1.3 输入输出语句

  • 输入框输入：

    prompt('请输入信息')

  • 弹出警示框：

    alert('输出结果：')

  • 控制台输出（F12调出）：

    console.log('123')

2. 变量

2.1 变量声明

var age = 20
var myName = 'Clover'
var height = prompt('请输入您的身高')

2.2 命名规范

  • 驼峰命名法：首字母小写，之后每个单词首字母大写
  • 尽量不要用name作为变量名，有些浏览器对name有默认值

3. 数据类型

3.1 数据类型简介

不同于其他很多编程语言，JS是弱类型的（动态的）语言。只有在程序运行的过程中才会确定变量的数据类型：

var age = 20//数字类型
var str = '20'//字符串类型

变量的数据类型可以变化：

var a = 20//初始为数字类型
a = 'clover'//变成了字符串

3.2 简单数据类型

3.2.1 数字型Number

可以是整数，也可以是小数：

var num = 3.14
var num = 3

进制转换：

var num = 010//数字前面加0代表八进制
console.log(num)//8
var num2 = 0xf//数字前面加0x代表十六进制
console.log(num2)//15

数字型三个特殊值：

alert(Infinity)//无穷大(大于Number.MAX_VALUE)
alert(-Infinity)//负无穷大(小于Number.MIN_VALUE)
alert(NaN)//not a number

用isNaN()可以判断变量是否为数字，不是返回true，是返回false.

3.2.2 字符串型String

字符串可以是双引号或单引号，但推荐单引号。

字符串的拼接：只要是字符串类型，跟什么类型都可以拼（不管前后，变量也可），最后都变成字符串。不过如果是数字相加，则是单纯的数值相加。

var str = 'james' + 'harden'//jamesharden
var str2 = 'clover' + 20//clover20
var num = '20 + 20'//40

3.2.3 Boolean&Undefined&Null

声明后未赋值的变量为undefined.

var str = undefined
var str2 = str + 'clover'//undefinedclover
var str3 = str + 1//NaN

一个变量声明为null，则在运算时为空值，但要注意和字符串拼接时仍然是null字符串。

var str = null
var str2 = str + 'clover'//nullclover
var str3 = str + 1//1

3.3 typeof检测数据类型

var num = 10
console.log(typeof num)//number

3.4 字面量

源代码中固定值的表示法。

  • 数字字面量：8，9，10
  • 字符串字面量：‘clover’
  • 布尔字面量：true

4. 数据类型转换

我们使用表单或者prompt获取的数据类型是字符串，此时就不能对它进行运算，所以需要数据类型转换。

4.1 转换为字符串类型

有三种方法实现：

var num = 18
var str = num.toString()
var str2 = String(num)
var str3 = num + ''

其中，最后一种方法最为常用，也叫做隐式转换。利用了和字符串拼接后得到的就是字符串的这个特性。

4.2 转换为数字型parseInt，parseFloat，Number和隐式转换

var str = '3.9'
console.log(parseInt(str))//3
console.log('150px')//150 所以parseInt也可以用于去单位
console.log('rem12')//NaN
console.log(parseFloat('2.2'))//2.2
console.log(Number(str))//3.9
console.log('12' - 0)//12
console.log('120' - '110')//10

隐式转换利用了+ - * /，不在乎算符两边的类型。

4.3 转换为boolean

代表空、否定的值会被转换为false，其余的都转换为true.

console.log(Boolean(null))//false
console.log(Boolean(undefined))//false
console.log(Boolean(NaN))//false
console.log(Boolean(''))//false
console.log(Boolean(0))//false
console.log(Boolean('clover'))//true

5. 数组

5.1 创建

var arr = []
var arr2 = new Array()

6. 作用域

6.1 块级作用域

ES5（含）之前都没有，ES6有了。

if(true){
    var num = 1
}
console.log(num)//在ES5里会输出1

6.2 作用域链

内部函数访问外部函数的变量，采用链式查找。

7. 预解析

JS引擎运行JS代码分为两步：预解析和代码执行。

首先，进行预解析。预解析分为变量预解析（也叫变量提升）和函数预解析（也叫函数提升）。

  • 变量提升：把所有的变量声明提升到当前作用域最前面，赋值操作不提升
  • 函数提升：把所有的函数声明提升到当前作用域最前面，不调用函数

有几个例子：

console.log(num)//undefined
var num = 10

fn()//1,不管fn()在声明前或后都不妨碍
function fn(){
    console.log(1)
}

fun()//error 这里fun是变量，声明提升而赋值不提升，所以是个未定义的变量，作为函数去调用肯定报错
var fun = function(){
    console.log(2)
}

var num = 10
function fun(){
    console.log(num)
    var num = 20
    console.log(num)
}
fun()

//相当于：
var num
function fun(){
    var num
    console.log(num)//undefined
    num = 20
    console.log(num)//20
}
num = 10
fun()

一个在面试中经常出现的例子：

f1()
console.log(c)
console.log(b)
console.log(a)
function f1(){
    var a = b = c = 9 //相当于var a = 9;b = 9;c = 9;b和c直接赋值，没有var声明，可以看成全局变量，只有a是var
    console.log(a)
    console.log(b)
    console.log(c)
}

这里要特别注意a,b,c的赋值情况。在函数内部，有var和没var声明的变量是不一样的。有var声明的是局部变量，没var的，声明的是全局变量。所以上面的例子等于：

function f1(){
    var a
    a = b = c = 9
    console.log(a)//9
    console.log(b)//9
    console.log(c)//9
}
f1()
console.log(c)//9
console.log(b)//9
console.log(a)//undefined，a为局部变量

8. 对象

8.1 对象属性的表示法

var obj = {
    uname: 'clover'
}
obj.uname//way 1
obj['uname']//way 2

for(var k in obj){
    //循环对象属性
}

8.2 构造函数创建对象

和java类似：

function Player(uname, age){
    this.uname = uname;
    this.age = age;
}
var jh = new Player('harden',30)

8.3 内置对象

指JS语言自带的一些对象，提供了一些常用的、基本的功能。具体可查阅mdn文档。

8.3.1 数学对象Math

常见的：

Math.floor()//向下取整
Math.ceil()//向上取整
Math.round()//四舍五入

取区间随机数：

Math.floor(Math.random()*(max - min + 1) + min)

8.3.2 日期对象Date

var time = +new Date()//返回的是当前时间距离1970/1/1的毫秒数
+new Date(time)//用户也可以自己输入时间

8.3.3 数组对象Array

var arr = [1,2,3]
var arr1 = new Array()//创建了一个空数组
var arr2 = new Array(2)//创建了一个长度为2的数组
var arr3 = new Array(2,3)//等价于[2,3]

arr.push(4)//在数组后追加元素，返回的结果是新数组的长度
arr.unshift(5,7)//在数组前追加元素

arr.pop()//删除数组最后一个元素，返回删除的值
arr.shift()//删除数组第一个元素，返回删除的值
arr.spilce(第几个开始，要删除个数)//删除元素
arr.slice(begin,end)//截取新数组

arr.reverse()//颠倒数组

arr.sort()//注意：这样写会出现错误，比如1，13，7，4，77会被排成1,13,4,7,77，即根据字符串大小来排，所以我们要添加比较函数作为参数，原型是arr.sort([cmpFunction])
arr.sort(function(a, b){
    return a - b;//正确写法 升序
})

arr.indexOf()//返回第一个匹配的数组元素的索引，不存在返回-1
arr.lastIndexOf()//返回最后一个匹配的数组元素的索引

arr.toString()
arr.join('&')//以自定义方式分隔数组然后转换为字符串

数组去重案例（重点）：

创建一个新数组，对于旧数组的每个元素，都在新数组里查找有没有该元素，若没有就添加，有就不添加，可以利用indexOf方法。

function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i])
        }
    }
    return newArr;
}

8.3.4 字符串对象

var str = 'clover'
console.log(str.length)
  • 基本包装类型：为了方便操作基本数据类型，JS提供了三个特殊的引用类型：String、Number、Boolean。基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法。按道理，基本数据类型是没有属性和方法的，而以上代码却可以执行，就是出于这个原因。
var str = 'clover'
str.indexOf('l',2)//第二个参数可选，表示从第几位开始查找

str.sbustr(arg1,arg2)//第一个参数表示从哪一位开始截取，第二个参数表示截取长度

str.replace('c','a')//把第一个c替换成a，注意只能替换第一个

str.split(str.split(','))//把字符串转换为数组，分隔符为第二个参数，与join（数组转换为字符串）相反

求某个字符出现的位置：

var str = 'clover'
function location(ch){
    var index = str.indexOf(ch);
    while(index != -1){
        console.log(index)
		index = str.indexOf(ch,index + 1)
    }
}

统计出现次数最多的字符：

var str = 'clover'
var obj = {}//核心思想是利用对象属性来统计各个字符出现的次数
for(var i = 0; i < str.length; i++){
	var chars = str.charAt(i);
    if(o[chars]){
        o[chars]++;
    }else{
        o[chars] = 1;
    }
}

8.3.5 简单数据类型&复杂数据类型

  • 简单数据类型值直接存放在栈里（Number，String，Boolean，Undefined，Null（对象类型））
    str.indexOf(ch);
    while(index != -1){
    console.log(index)
    index = str.indexOf(ch,index + 1)
    }
    }

统计出现次数最多的字符：

```javascript
var str = 'clover'
var obj = {}//核心思想是利用对象属性来统计各个字符出现的次数
for(var i = 0; i < str.length; i++){
	var chars = str.charAt(i);
    if(o[chars]){
        o[chars]++;
    }else{
        o[chars] = 1;
    }
}

8.3.5 简单数据类型&复杂数据类型

  • 简单数据类型值直接存放在栈里（Number，String，Boolean，Undefined，Null（对象类型））
  • 复杂数据类型地址存放在栈里，值存放在堆里，栈里存放的地址指向堆里存放的值（Array，Date）
Сlover
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题集锦——程序题
好女绪的博客
12-02 8688
程序题 1、看下列代码输出为何？解释原因。 var a; alert(typeof a); // undefined alert(b); // 报错 解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。 2、看下列...
Python总复习-下
花开如雨的博客
10-21 6158
目录 人工智能总目录网页链接 文章目录目录9、Python-web前端Day01-HTML-页面1. Web1. 什么是WEB2. 组成3. Web 服务器4. 浏览器2. HTML 概述1.HyperText Markup Language2. 标记3. 网页3. HTML基础语法1. 标签/标记2. HTML标签介绍3. 完整的网页结构4. 网页头部设置5. 网页主体内容6. 列表标签7. 列表的标签属性8. 列表的嵌套9. 标签的层级结构10. 图像与超链接标签Day02笔记1. 图片与超链接
轻松搞懂原型链
I1326的博客
06-10 261
写在前边的话 其实在写这个标题之前，想搞清楚的问题完全不是这个；但是在原本的问题上，好像钻了牛角尖，愈发的出不来，各路资料查来阅去，离出发点越来越远；以至于现在完全想不起最初的问题是啥了，看历史记录大概是object之类的；不过对于原型链的理解有了加深，索性就写一篇相关的帖子交作业好了。以下只是对我来说更好的理解，分享下-可能中间某些环节‘每有会意遍欣然忘食’，本着‘尽信书不如无书’哪里不对欢迎斧正； 什么是原型链 JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性
Javascript基础学习笔记
09-28
基础的js笔记
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
Javascript基础学习笔记(菜鸟必看篇)
10-21
下面小编就为大家带来一篇Javascript基础学习笔记(菜鸟必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript 基础学习笔记.pdf
11-14
JavaScript 基础知识点总结 基于给定的文件信息，本文将对 JavaScript 基础知识点进行总结和解释。 浏览器内核 在前端开发中，我们使用 HTML/CSS/JS 编写代码，并遵循 W3C 的规范。浏览器的内核或渲染引擎是...
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 352
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 174
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 975
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 765
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 823
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 150
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 247
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 237
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
轮播图变成响应式数据
最新发布
罗铠威的博客
07-19 73
本篇博客主要记录轮播图变成响应式数据。
JavaScript基础与jQuery学习笔记
"小晨星分享的jQuery学习笔记" 这篇文档是小晨星在学习jQuery过程中整理的重要知识点，旨在帮助他人更好地理解并掌握jQuery。jQuery是一个高效、易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值