JavaScript基础&进阶

Luke_code

已于 2022-08-15 19:58:10 修改

阅读量173

点赞数 1

分类专栏： Js 文章标签： javascript 前端开发语言

于 2022-08-15 19:47:06 首次发布

本文链接：https://blog.csdn.net/m0_46453722/article/details/126353510

版权

Js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

JavaScript基础1
JavaScript基础2
JavaScript基础3
JavaScript基础4
JavaScript基础5
JavaScript进阶
- 01-Offset家族

JavaScript基础1

01-变量

变量

存储数据的容器，使用变量来保存数据。

声明变量

使用 var

var message;

var message;
message = 'hello';

简洁一点：

var message = 'hello';  //定义变量并赋值
console.log(message);  //控制台打印

同时声明多个变量：

var user = ’John‘，
		age = 15，
		message = ’hello‘；

变量命名

1、变量名称必须仅仅包含字母、数字、符号$ 和 _ 。

2、首字母必须为非数字。

3、严格区分大小写。

4、不能使用JavaScript中的关键字。

5、使用驼峰命名法。

6、语义化命名。

02-数据类型

基本数据类型

Number数据类型，包括整数和浮点数

特殊数值：

Infinity 无穷大，加负号表示负无穷。

NaN 表示一个计算错误。

String数据类型

字符串，被包括在引号里。‘’

Boolean类型（逻辑类型）

仅包含两个值：true false

null值

undefined值（未被赋值的）

引用数据类型

引用数据类型用于存储数据集合更复杂的实体。

//数组：表示一类数据的集合
var arr = [24,23,21,25,22];//存储年龄的集合

//对象：
var user ={
  name = '张三',
  age = 24
}

//函数：
function foo(){
  alert('hello')
}

基本数据类型和引用数据类型的区别

基本数据类型，变量里存储的就是里面的信息，而引用数据类型里面的变量，存储的不是对象自身，而是该对象的“内存地址”。

03-数据类型转换（隐式转换）

#### 其它数据类型-->Number

1、字符串—数字

字符串是纯数字，直接将其转换为数字。如果有非数字的内容，将其转换为NaN。如果字符串是一个空串或是一个全空格的字符串，则转换为0。

2、布尔—数字

true转为1，false转为0。

3、null—数字

0。

4、undefined—数字

结果为NaN。

其它数据类型–>Boolean

1、数字—布尔

除了0和NaN，其余都是true。

2、字符串—布尔

除了空串，都是true。

3、null 和 undefined 转为false。

4、对象转为true。

隐式类型转换

转换为number类型: Number()
转换为string类型: String()
转换为boolean类型: Boolean()

04-算数运算符

算数运算符

加 +

减 -

乘 *

除 /

获得余数 %

优先级（）

对非Number类型的值进行运算时，会将这些值转换为Number后在进行运算。

任何值**和字符串做加法运算**，都会先转换为字符串，然后再做拼串操作。即使这个字符串为空。

比较运算符

大于 > 小于<

大于等于 >= 小于等于<=

检查两个值相等 a == b

检查两个值不相等 a != b

所有比较运算符均返回布尔值。

非数值的比较

1、会将其转换为数字后再比较。

console.log(1 > true); //false
console.log(1 >= true); //true
console.log(1 > '0'); //true

console.log(10 > null); //true
console.log(10 < undefined); //false
//任何值和NaN作比较都是false

console.log(10 <= 'hello'); //false
console.log(true > false); //true

2、如果两侧都是字符串，则不会将其转换为数字进行比较。（依次按照字母的Unicode编码值比较）

== 符号

目的是判断是否等于，而不是赋值。会将不同类型的东西转为想同类型进行比较。

NaN不和任何值相等，包括它本身。

=== 严格相等符号

=== 全等不会做类型转换。

05-逻辑运算符

解释

与（且） && 或 || 非！

非布尔值的与或运算

先将其转换为布尔值，然后再运算，但是返回结果是原值。

var result = 5 && 6; //运算过程 true && true
console.log('result' + result); //输出值为6

与运算中：表达式1 && 表达式2

1 true 返回2

1 false 返回1

或运算中：表达式1 || 表达式2

1 true 返回1

1 false 返回2

06-自增运算

遇到这种情况；对一个变量做运算，并将新的结果存储在同一个变量中。

使用运算符 += *= -=

var n = 2;
n += 5; // 现在 n = 7（等同于 n = n + 5）
n *= 2; // 现在 n = 14（等同于 n = n * 2）
n -= 2; // 现在 n = 12 (等同于 n = n - 2;)
alert( n ); // 14

这些运算符被称为 “修改并赋值” 运算符。

自增1和自减1

1、自增 ++

2、自减 --

自增、自减智能应用于变量。

注意一下 counter++ ++counter的区别

返回值的不同

07-parseInt() 和 parseFloat()

parseInt()是专门用来对付字符串的。

将字符串中的有效的整数内容转换为数字。

注意：1、只保留字符串最开头的数字，后面的自动消失。

2、取整，不四舍五入。

3、如果对非 String使用 parseInt()，它会先将其转换为 String然后再操作。

4、带两个参数时，表示进制转换。

parseFloat()是专门用来对付字符串的。

与parseInt不同的是，parseFloat()可以获得有效的小数部分。

JavaScript基础2

01-Math对象

Math对象是一个工具类，不需要创建对象。

Math.abs() 绝对值

Math.floor() 向下取整（小的）

Math.ceil() 向上取整（大的）

Math.round() 四舍五入取整

Math.random() 随机数 [ 0, 1 )

Math.max(x, y, z) /Math.min() 多个数之中的最大值、最小值

Math.pow(x, y) x的y次方

Math.sqrt() 对某个数开方

02-拼接字符串

#### 使用 + 运算

var name = 'john';
alert('hello,' + name + '!');

使用反引号

var name = 'john';
alert(`hello, ${name}!`);

${…} 内的表达式或者变量会被计算，计算结果会成为字符串的一部分。

03-选择语句-if

if(...){
   
   }
//如果()里面是true，则运行{}里面的语句

if语句会把()里面的表达式计算结果转换为布尔类型。

多个条件

var year = prompt('哪一年发布了ES2015');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

在上面的代码中，JavaScript 先先检查 year < 2015。如果条件不符合，就会转到下一个条件 year > 2015。如果这个条件也不符合，则会显示最后一个 alert。

04-for循环

for (begin; condition; step) {
  // ……循环体……
}

begin	`i = 0`	进入循环时执行一次。
condition	`i < 3`	在每次循环迭代之前检查，如果为 false，停止循环。
body（循环体）	`console.log(i)`	条件为真时，重复运行。
step	`i++`	在每次循环体迭代后执行。

05-循环语句-while

while基础

while循环语句语法：

while (condition) {
  //代码
  //循环体
}

当 condition为 true 时，执行循环体。

当 condition为 false 时，循环体结束，当condition = 0 时也结束。

do-while

do {
  //循环体
}while (condition);

首先执行循环体，然后检查条件，当条件为真时，重复执行循环体。

不管条件是否为真，循环体至少执行一次。

06-三元运算符’?’

var result = condition ? value1 : value2;

计算条件结果，如果结果为真，返回 value1，否则返回value2。

例如：

var age = prompt('请输入你的年龄');
var judge = age > 18 ? alert('可以观看') : alert('禁止观看')；

JavaScript基础3

01-switch

switch语句可以替代多个if判断。

switch(x) {
	case 'value1';
    ...
    break;
  case 'value2';
    ...
    break;
  case 'value3';
    ...
    break;
  default:
    ...
    break;
}

注意：如果没有break 那么程序将不经过任何检查就会继续执行下一个 case

switch里面的相等判断是严格相等

02-数组

数组的样式和声明

数组可以存储任何类型的元素，但是一般一个数组存储的数据都是同一类数据。

var arr = ['Apple', {name: 'John'}, true, function(), alert('Hello')];

创建一个空数组有两种语法：

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

一般使用第二种方法。

索引和长度

1、数组元素从0开始编号。

2、可以使用 length属性来获取数组的长度。（也是元素的个数）

遍历数组

var arr = ['张三', '李四', '王五', '赵六'];
//1、for 循环遍历数组
for(var i = 0; i < arr.length; i++){
  	console.log(arr[i]);
}
//2、for of 遍历数组元素
for(var arr1 of arr){
  	console.log(arr[i]);
}

数组方法

push 在末端添加一个元素。
unshift 在首端添加一个元素。
shift 删除数组首端的一个元素。
pop 从末端删除一个元素。
splice 删除数组某一位置的元素。
concat 连接多个数组。
join 将数组转换为字符串。

03-数组排序

冒泡排序

var arr = [6, 77, 66, 33, 145, 2, 3];
//外层for循环控制轮次
for(var i = 1; i < arr.length; i++){
  for(var j = 0; j < arr.length - i; j++){
    //如果索引为j 的值比它后面的那个值大，那么这两个值交换位置
    if(arr[j] > arr[j + 1]){
      //交换位置
      var temp = arr [j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}

选择排序

首先找到数组中最小的那个元素,其次,将他和数组的第一个元素交换位置。再次，在剩下的元素中找到最小的元素，将他与数组的第二个元素交换位置。如此往复，直到将整个数组排序。

for(var i = 0; i < arr.length; i++){
  	var minIndex = i;
  for(var j = i + 1; j < arr.length; j++){
    if(arr[minIndex] > arr[j]){
      minIndex = j;
    }
  }
  if (minIndex !== i){
    //交换位置
    
  }
}

JavaScript基础4

01-函数

函数声明

function showMessage(){
  alert('Hello World!')
}

函数调用可以通过 showMessage()

参数

我们可以通过参数（函数参数）来将任意数据传递给函数。

function showMessage(from, text) {
  	alert(from + ':' + text);
}

函数的参数包括形参和实参。

返回值

返回值相当于 函数调用完，开发人员暴露给外界的一个数据，供外界去使用。

return

02-对象

理解

对象的作用是：封装信息。

1、对象是单个事物的抽象。

2、对象时一个容器，封装了属性和方法。

通过使用带有可选属性列表的花括号 { ... }来创建对象。

！将实物抽象成一条条的属性，一个属性就是一个键值对。（‘key : value’）。

键 key是一个字符串。

值value可以是任何值。

分类和创建

1、内置对象：

Es标准定义的对象。

2、宿主对象：

JS运行环境提供的对象，目前主要是浏览器提供的对象。----- console、document

3、自定义对象：

开发人员自己创建的对象。

var obj = {
  	name: '张三',
  	sex: '男',
  	age: 24,
  	children: {
      name: '小明',
    },
  	//还可以再对象中增加一个方法。以后可以通过obj.sayName()的方式调用这个方法。
  	sayName: function(){
      	console.log('Say hi!');
    },
}

获取对象中的属性

对象.属性名

如果获取对象中没有的属性，会返回 undefined。

var obj = new Object();

//向obj中添加一个name属性
obj.name = "张三";

//向obj中添加一个sex属性
obj.sex = "男";

//向obj中添加一个age属性
obj.age = 18;

// 获取对象中的属性，并打印出来
console.log(obj.sex); // 打印结果：男
console.log(obj.color); // 打印结果：undefined

#### 修改对象属性值

//对象.属性名 = 新值;
obj.name = 'tom';

删除对象的属性

delete obj.name;

JavaScript基础5

01-JSON对象

JSON对象是网络间数据传输的一种格式（目前比较流行）

js为我们提供了 JSON对象的两个方法

JSON.stringify(); //可以把对象转换成字符串(符合json格式的字符串)

JSON.parse(); // 可以把 json格式的字符串转回对象

        var user = {
            username: '张三',
            pwd: '123456'
        }
        // JSON格式的字符串 ,属性名 必须带有双引号
        var jsonStr = JSON.stringify(user);
        console.log(jsonStr); // '{"username":"张三","pwd":"123456"}'
        var str = '{username: "张三",pwd: "123456"}';

        // 只有 json格式的字符串才可以变回对象
        console.log(JSON.parse(jsonStr));
        console.log(JSON.parse(str)); // 报错 str不是json格式

02-作用域

作用域即为变量的作用范围。

在JS当中，有两种作用域：1、全局作用域 2、函数作用域

全局作用域

直接编写在script标签中的JS代码，都在全局作用域。

它在页面打开时创建，在页面关闭时销毁。

在全局作用域中有一个全局对象 window ，它由浏览器创建，我们可以直接使用。

页面中多个script标签的作用域是相通的（全局作用域）。

函数作用域

在函数内部

全局变量和局部变量

全局作用域中创建的变量叫做全局变量，在页面中任何地方都可以使用。

函数作用域中创建的变量叫做局部变量，只能在函数内部使用。

03-作用域链和声明提升

作用域链

当作用域创建成功时，都会有一个指针指向自己的上一层作用域。注意是上一层。

每一个作用域的上一层作用域，我们叫做它的 父级作用域。

变量的查找规则：

1、现在自身作用域中查找，如果找不到就向自己的父级作用域查找，如果依然没有，就继续向上一层查找。

2、如果找到全局作用域都没有，则报错。

总结：沿着作用域链向上查找，找到为止，找不到则报错。

声明提升

在JS中用var声明的变量，用function 声明的具名函数，会在代码执行前就被提升到作用域的最前面运行。

04-递归

当一个函数调用自身时，就称其为递归。

思路：简化任务，调用自身。

举个例子：

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

最大的嵌套调用次数（包括首次）称为递归深度。

JavaScript进阶

01-Offset家族

成员介绍

offseatWidth和offsetHeight

返回元素占据页面的 实际大小 。（只读属性并且始终是整数）

ele.offsetWidth/Height = 元素自身宽/高 + padding + border  // 块元素
ele.offsetWidth/Height = 元素容器的宽/高  // 行内元素，行内块

offsetParent

返回距离该元素最近的带有定位属性的父元素。

注意如果当前元素 fixed 定位，那么返回值为 null。

offsetLeft和offsetTop

返回元素与它的 offsetParent 边框的上左边距，如果元素offsetParent是body，那body的边框宽度也会计算在内。（只读属性且始终是整数）

02-Event

获取事件对象

DOM事件处理函数中使用 event 来获取事件对象。

在事件处理函数中够可以使用浏览器赋予的形参

document.body.onclick = function(e){
    console.log(e);
}

常见事件对象属性

(1)event.type

document.body.onclick = function(){
    console.log(event.type); // 返回出发的事件名称--click
}

(2)event.target

触发事件的元素。

(3)event.currentTargget

绑定事件的元素（IE9以上支持）。

tips：触发事件的元素不一定就是绑定事件的元素，因为事件存在冒泡，点击某个元素的子元素，那么父元素绑定的事件中，触发事件的元素为子元素，绑定事件的元素为父元素。

(4)event.button

当鼠标事件触发时，鼠标按钮被按下，将会返回一个数值，0，1，2分别代表鼠标左键，滚轮，右键被按下。

(5)event.which

~~鼠标事件触发时，表示被按下的按钮。值为1，2，3，与上方返回信息0，1，2对应。（被弃用了）~~

(6)鼠标位置信息–事件的属性

pageX/pageY 鼠标相对于页面的位置
clientX/clientY 相对于可视区域的位置
offsetX/offsetY 鼠标相对于触发事件的元素，内容区的位置
screenX/screenY 鼠标相对于屏幕的位置（不常用）

(7)键盘信息–事件的属性

key 值的内容
altKey 触发时alt是否被按下
ctrlKey 触发时ctrl是否被按下
shiftKey 触发时shift是否被按下

阻止默认事件

event.preventDefault()

兼容写法：event.preventDefault?event.preventDefault() : event.returnValue = false;

事件委托

利用事件的冒泡机制，以及事件对象中可以准确获取触发事件元素的属性，将多规格使用相同事件进行类似操作的子元素的事件处理函数委托给父元素绑定。

03-Scroll+Client

scroll事件

Element.onscroll = function(){};

几乎任何实体元素都可以绑定过该事件。（设置此事件的元素一定要有滚动条，监听页面的滚动一般用 window.onscroll

04-BOM (浏览器对象模型)

URL简介

(1)网址解析

网址统称为URL，统一资源定位符（Uniform Resource Locator）。是互联网上标准资源的地址，互联网上的每一个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该如何处理它。

URL的一般语法格式：

protocol://host[:port]/path/[?query]

组成	说明
protocol	通讯协议，常见的是 http, https
host	域名或网络IP地址
port	端口号，http协议对应80端口，https对应443端口
path	资源路径
query	查询参数。以? + 键值对的形式表示，多个键值对通过&符号分隔
fragment	片段#后面的内容，常见于链接，锚点

(2)域名

由于IP地址不便记忆，而且不能显示地址组织的名称和特性。人们设计出来域名，通过网域名称系统（DNS）来将域名和IP地址相互映射。

例如百度的IP地址：http://110.242.68.4/ 通过DNS映射-- http://baidu.com

(3)同源策略

是一个安全策略，意味两个网址的【协议、域名地址或者IP地址、端口号】三者完全一致，有一个不一致即为不同源。

05-H5&C3补充

新的拖拽属性

我们可以通过给元素设置draggable="true"属性来让元素变成可拖拽元素、

Web存储

(1)localStorage

这个属性允许我们访问一个对应当前源的local Storage对象。

除非人为清除，否则存储的数据将长期保留。
打开多个相同的URL的Tabs页面，会使用相同的localStorage。

方法	属性
setItem(key, value)	存储键/值对
getItem(key)	按照键获取值
removeItem(key)	删除键及其对应的值
clear()	删除所有数据
key(index)	获取该索引下的键名
length	存储的内容的长度