JavaScript基础学习笔记

最新推荐文章于 2024-07-23 11:32:13 发布

Сlover

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量371

点赞数

分类专栏：前端文章标签： javascript js java 前端

本文链接：https://blog.csdn.net/weixin_44765402/article/details/114482663

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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;
    }
}