JS基础笔记

最新推荐文章于 2024-05-20 15:17:08 发布

এ᭄画画的北北

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量135

点赞数

分类专栏：前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46878941/article/details/126451624

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JS简介

JavaScript是什么

JavaScript是一种运行在客户端的脚本语言，不需要编译，运行过程由js引擎逐行来进行解释并执行

浏览器执行JavaScript的原理

渲染引擎：用来解析HTML和CSS，俗称内核，比如谷歌浏览器的blink，老版本的webkit
JS引擎：JS解释器，用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8
浏览器通过内置JS引擎(解释器)执行JS代码，逐行解释每一句源码，然后计算机去执行

JavaScript由哪三个部分组成：

ECMAScript：JavaScript语法
DOM：文档对象模型
BOM：浏览器对象模型

JS的引入

行内式
<button type="button" onclick="alert('hello')">
内嵌式
<head><script>...//Js代码</script></head>
链接式
<head><script src="文件名.js"></script></head>

JS输入输出语句

alert弹窗
prompt输入框
console.log控制台输出

二、JS数据类型

简介：

js 是动态语言，数据类型可以变化
简单数据类型：Number，Boolean，String，Undefined，Null
复杂数据类型：Object
基本包装类型：Number，Boolean，String
获取数据类型：typeof 变量名
判断数据类型：变量名 instanceof 数据类型

Number

几个特殊的Number值：Infinity无穷大，-Infinity无穷小，NaN非数字
isNaN()函数用于判断是不是非数字

String

推荐单引号，外单内双
str.length获取字符串长度
字符串+任何类型=拼接之后的新字符串

数据类型转换

转字符串：
- num.toString()
- String(num)
- num + '' 隐式转换
转数字型：
- parseInt()和parseFloat()函数将字符串分别转换为整型和小数，parseInt()可数字去掉尾部单位
- Number('str')强制转换为数字
- -0，*1，/ 隐式转换
转布尔型
- Boolean()函数，代表空、否定的值会被转换为false，如’'，0，NaN, null, undefined, 其余会被转换为true

JS基本语法

声明变量：

var 变量名，多个变量逗号隔开

运算符

+ - * / % ++ -- = += != > >= ! && ||等等

===全等要求数据类型也相同
三元运算符：条件？表达式1：表达式2；条件为真返回1，否则2
逻辑中断
- 逻辑与：若表达式1为真则返回表达式2，若表达式1为假则返回表达式1
- 逻辑或：若表达式1为真则返回表达式1，若表达式1为假则返回表达式2
优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高

流程控制

顺序结构
分支结构：if-else，switch
循环结构：for，while，do…while
continue：退出当前次循环，继续执行剩余次循环
break：退出整个循环

数组

var 数组名 = new Array(数组大小);
var 数组名 = [];
属性length：返回数组中元素的个数

三、JS函数

声明函数

命名函数：function fn(){}
匿名函数：var 变量名 = function(){}
arguments对象：存储所有实参，伪数组

变量作用域

全局变量不需要以var关键字进行声明
局部变量必须以var关键字来声明
函数内var声明的变量是局部变量，作用域是该函数
函数外var声明的变量是全局变量，作用域是整个HTML文件
函数内未用var声明的变量也是全局变量，作用域是HTML文件
函数内var声明的变量(局部变量)，可以与全局变量同名
当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope
作用域链：内部函数访问外部函数的变量，链式查找，就近原则

预解析

解析器运行JS分为两步：预解析，代码执行
变量提升：只提升变量声明到当前作用域的最前面，不提升调用
函数提升：只提升函数声明到当前作用域的最前面，不提升调用

数据类型内存分配与传参

简单数据类型：存放在栈中，栈中直接存放值
复杂数据类型：栈里存放地址，值存放在堆中
简单数据类型传参：将值复制一份给形参
复杂数据类型传参：将地址传递给形参

四、JS对象

什么是对象

一组无序的属性和方法的集合

创建对象的三种方法

利用字面量创建对象

var obj = {
    name: 'pink',
    sayHi: function() {
        // ...
    }
}
// 花括号+键值对
// 多个属性或方法逗号隔开

利用new Object创建对象

var obj = new Object();
obj.name = 'pink';
obj.sayHi = function() {
    // ...
};

利用构造函数创建对象

构造函数：把创建对象中相同的部分封装成函数，多次调用，创建多个对象

function Star(uname) {
    this.name = uname;
    this.sing = function(sang) {
        console.log(sang);
    }
}
var ldh = new Star('刘德华');
ldh.sing('冰雨');

对象属性和方法的调用：

对象.属性名
对象[‘属性名’]
对象.方法名()

`for...in`遍历对象

for(var k in obj) {
    console.log(k)
} // 遍历属性名

for(var k in obj){ 
    console.log(obj[k])
} // 遍历属性值

JS中对象分类

自定义对象
内置对象：JS自带的一些对象，供开发者使用，提供了一些常用功能，主要包括
Math，
Date，
Array，
String
浏览器对象

五、JS常用对象API

Math对象：不是构造函数

常用属性Math.PI
Math.max()
Math.abs()
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round()四舍五入取整，-1.5四舍五入为-1
Math.random() 产生[0,1)的随机小数
Math.floor(Math.random*(max-min+1))+min 产生min和max之间的随机整数包括min和max

Date对象：构造函数

var 日期 = new Date()
如果没有参数，表示当前日期和时间
参数写法：var 日期 = new Date(2019-10-1 8:8:8)
var date = new Date()
date.getFullYear()
date.getMonth() 比当前月份小1
date.getDate() 几号
date.getDay() 星期几(1~6,0)
date.getHours()
date.getMinutes()
date.getSeconds()
date.valueOf() 时间戳，返回当前至1970年1月1日00:00:00以来的毫秒数
date.getTime() 同上
var date1 = +new Date(time) 最常用，同上
Date.now() H5新增，同上

Array对象：构造函数

var arr = new Array()
Array.isArray() 判断是否为数组
arr.push() 添加到数组末尾，返回新数组长度
arr.unshift() 添加到数组开头，返回新数组长度
arr.pop() 删除数组最后一个元素，返回该元素
arr.shift() 删除数组第一个元素，返回该元素
arr.reverse() 翻转数组，返回新数组
arr.sort(function(a,b){return a-b}) 升序
arr.indexOf() 返回第一次出现索引号，找不到返回-1
arr.lastIndexOf() 返回最后一次出现索引号，找不到返回-1
arr.toString() 数组转字符串，逗号,分隔
arr.join('分隔符') 数组转字符串可自定义分隔符
arr.concat(str1,str2,...) 连接数组，不影响原数组
arr.slice(begin,end) 截取数组，不影响原数组
arr.splice(start,length) 截取数组，影响原数组

String对象：构造函数

var str = new String('')
str.indexOf('子字符串',起始位置) 查找子字符串的位置，未找到返回-1
str.charAt() 根据位置返回字符
str.charCodeAt()根据位置返回ASCII码
str[index]
str.concat(str1,str2,str3...)
str.substr(start,length)
str.replace('被替换的字符','替换为的字符') 只替换第一个字符
str.split('分隔符') 将字符串转换为数组
str.toUpperCase()
str.toLowerCase()