JavaScript学习笔记

最新推荐文章于 2024-03-08 23:01:16 发布

Sao_E

最新推荐文章于 2024-03-08 23:01:16 发布

阅读量376

点赞数

分类专栏：我的小成就文章标签： javascript dom

本文链接：https://blog.csdn.net/sao_e/article/details/113112239

版权

我的小成就专栏收录该内容

17 篇文章 1 订阅

订阅专栏

零零散散的学习笔记~

JavaScript就是一种专为与网页交互而设计的脚本语言

<script>标签放在html的底部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 正常的html标签一定要写在script标签的前面 -->
    <div></div>
    <!-- 在body标签的内部并在末尾 -->
    <script src='index.js'></script>

  </body>
</html>

相等()和全等(===)

 let number1 = 45;
let number2 = 45;
console.log(number1 == number2); // true

let number1 = 45;
let number2 = 45;
console.log(number1 === number2); // true

let number1 = '45';
let number2 = 45;
console.log(number1 == number2); // true``，在这里做比较的时候会首先将'45'转换为 45,然后再去跟number2比较

let number1 = '45';
let number2 = 45;
console.log(number1 === number2); // false

所以由于相等错在类型转换问题,为了保持代码中数据类型的完整性,推荐使用全等

不等于为（!==）
switch case

let weather = 'rain';

switch (weather) {
  case 'snow':
    console.log('堆雪人');
    break;
  case 'windy':
    console.log('呆在家里');
    break;
  case 'rain':
    console.log('雨中漫步');
    break;
  default:
    console.log('工作');
    break;
}

数组的插删改查
push方法在数组尾部加入，pop方法在尾部删除
unshift方法在数组头部加入，shift方法在头部删除
splice方法删除指定位置的值，可以传入一个或者两个参数

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

// 删除从下标为1的位置到结束位置的值
let deleteSchools = schools.splice(1);
// 删除之后，原数组中的剩余内容
console.log(schools); // ["清华大学"]
// 删除的内容
console.log(deleteSchools); // ["北京大学", "浙江大学", "同济大学"]
······································································
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
// 从下标为0开始,往后数两个元素,删除
let deleteSchools = schools.splice(0, 2);
console.log(schools); // ['浙江大学', '同济大学']
console.log(deleteSchools); // ['清华大学', '北京大学']

splice 方法(需改指定位置的元素)

splice方法括号里需要添加三个值(也叫参数).分别代表三个意思,先来解释一下这三个值：

第一个值,整数类型,表示起始位置
第二个值,整数类型,表示步长(往后选几个元素,1 代表往后选 1 个元素)
第三个参数,要替换的数组的值

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 0, '江西理工大学');
console.log(schools); //  ["清华大学", "北京大学", "江西理工大学", "浙江大学", "同济大学"]

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 1, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学", "同济大学"]

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 2, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学"]

indexOf方法查找数组中是否含有某个元素，返回-1表示没找到，返回其他值为元素下标

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

let result = schools.indexOf('浙江大学');
console.log(result); // 2 表示“浙江大学”所在的下标为2

let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

let result = schools.indexOf('浙江大学', 3);
console.log(result); // -1

for…in 和 for…of 的写法

let peppaFamily = ['佩奇', '乔治', '猪妈妈','猪爸爸'];

for(let i in peppaFamily) {
  console.log(peppaFamily[i]);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸

for…in 循环会访问数组中的每一项，这里的 i 对应数组中每一项的下标。

let peppaFamily = ['佩奇', '乔治', '猪妈妈','猪爸爸'];

for(let item of peppaFamily) {
  console.log(item);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸

for…of 循环也会访问数组中的每一项，这里的 item 对应数组中每一项。

两者的区别：for…in 循环遍历的结果是数组元素的下标，而 for…of 遍历的结果是元素的值。

调用函数时

// 参数 figure(位数) txt(文本) 
function code(figure, txt) {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6, "六位随机数：", "第三个参数");

结果并不会受到影响，这是因为 JavaScript 允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题。这一点和 Java 有区别，在 JavaScript 中这样是不会报错的。

// 参数 figure(位数) txt(文本) 
function code(figure, txt) {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6);

打印结果：undefined 556540

如果传入的数据比定义的参数少也不会因为数量不匹配而报错
因为对应的参数 txt 未传入数据，所以在函数中其值为 undefined。

此时可以通过设定默认值防止参数缺失

// 参数 figure(位数) txt(文本) 
function code(figure, txt = "随机数：") {
  const num1 = Math.random() * 0.9 + 0.1;
  const num2 = Math.floor(num1 * Math.pow(10, figure));

  console.log(txt, num2);
}

code(6);

这里注意写法，是用等号 = 给参数赋默认值的。

setTimeOut三种写法

 - console.log(1);

/**
 * 第一个参数是代码，注意代码需用引号包裹，否则会立即执行代码
 * 第二个参数是 1000，即 1000ms 后执行 console.log(2)
 */
setTimeout('console.log(2)', 1000);

/**
 * 第一个参数是匿名函数
 * 第二个参数是 2000，即 2s 后执行 console.log(3)
 */
setTimeout(function () {
  console.log(3);
}, 2000);

// 第一个参数是函数名，注意函数名后不要加小括号“()”，否则会立即执行 print4
setTimeout(print4, 3000);

console.log(5);

function print4() {
  console.log(4);
}

// 立即执行
console.log(1);
// 立即执行
console.log(5);
// 1s 后执行
console.log(2);
// 2s 后执行
console.log(3);
// 3s 后执行
print4(); // 即：console.log(4)

60s计时器

// 首先定义计时总秒数，单位 s
let i = 60;

// 定义变量用来储存定时器的编号
let timerId;

// 写一个函数，这个函数即每次要执行的代码，能够完成上述的 1、2、3
function count() {
  console.log(i);
  i--;
  if (i > 0) {
    timerId = setTimeout(count, 1000);
  } else {
    // 清除计时器
    clearTimeout(timerId);
  }
}

// 首次调用该函数，开始第一次计时
count();

let i = 60;
print();
let timer = setInterval(print, 1000);

function print() {
  console.log(i);
  i--;
  if (i < 1) {
    clearInterval(timer);
  }
}

对象
对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。

let person = {
  name: 'henry',
  age: 18
}

在这里插入图片描述
对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型，当它是函数的时候，我们把这个属性称为“方法”，它可以像函数那样调用：

let person = {
  name: 'henry',
  age: 18,
  run: function() {
    console.log('running');
  }
}

person.run();

查看一个对象本身的所有属性，可以使用Object.keys方法：

let person = {
  name: 'henry',
  age: 18
}

console.log(Object.keys(person));

如果要删除对象中的某个属性，可以使用 delete 命令：

let person = {
  name: 'henry',
  age: 18
}

delete person.name;

console.log(person);

增加则直接：

let person = {
  name: 'henry',
  age: 18
}

person.gender = 'male';

JSON和JavaScript的转换：
1、JSON.parse()：JSON 格式 => JavaScript 对象

// 一个 JSON 字符串
const jsonStr =
  '{"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]}';

// 转成 JavaScript 对象
const obj = JSON.parse(jsonStr);

2、JSON.stringify()：JavaScript 对象 => JSON 格式

const jsonStr2 = JSON.stringify(obj)；

Map
Math对象
Math对象的静态属性，提供以下一些数学常数：

Math.E // 常数e。
Math.LN2 // 2 的自然对数。
Math.LN10 // 10 的自然对数。
Math.LOG2E // 以 2 为底的e的对数。
Math.LOG10E // 以 10 为底的e的对数。
Math.PI // 常数π。
Math.SQRT1_2 // 0.5 的平方根。
Math.SQRT2 // 2 的平方根。

Math对象提供以下一些静态方法：

Math.abs() // 绝对值
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入取整
Math.max() // 最大值
Math.min() // 最小值
Math.pow() // 指数运算
Math.sqrt() // 平方根
Math.log() // 自然对数
Math.exp() // e的指数
Math.random() // 随机数

Math.ceil(4.6) // 向上取整，取大于等于 x，并且与它最接近的整数。//5
Math.floor(4.6) // 向下取整，取小于等于 x，并且与它最接近的整数。//4
Math.round(4.6) // 四舍五入取整，取与 x 最接近的整数。//5

Storage对象
1）Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage 和 window.localStorage。
2）sessionStorage 保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
3）window.localStorage.setItem(‘key’, ‘value’) 方法接受两个参数：
key：键名；
value：键值
注意，如果要存入的数据不是字符串类型的数据，最好先转换成字符串类型，比如要存入一个对象，可以这么写：

const obj = {
  name: 'henry',
  age: 18
}
const value = JSON.stringify(obj);
window.localStorage.setItem('myLocalStorage', value);

4）读取数据：getItem

window.localStorage.getItem('myLocalStorage');

5）清除缓存：clear
“”"""""""""""""""""""""""""""""""""""""""""""""""""""""""""

关于字符串的几个基础用法：

在这里插入图片描述

关于数组的几个基础用法：

let arr = [
  { name: 'jenny', age: 18 },
  { name: 'tom', age: 10 },
  { name: 'mary', age: 40 }
];

arr.sort(function(a, b) {
  return a.age - b.age;
});

console.log(arr);

let arr = [
  { name: 'jenny', age: 18 },
  { name: 'tom', age: 10 },
  { name: 'mary', age: 40 }
];

// elem: 数组成员
// index: 成员下标
// a: 整个数组
const handledArr = arr.map(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(arr);
console.log(handledArr);

const handledArr = arr.forEach(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(handledArr);

Date对象的toJSON方法

 let dt = new Date();
let dtStr = dt.toJSON();

console.log(dtStr);

Date对象的get方法

let dt = new Date();
dt.getTime(); // 返回实例距离1970年1月1日00:00:00的毫秒数。
dt.getDate(); // 返回实例对象对应每个月的几号（从1开始）。
dt.getDay(); // 返回星期几，星期日为0，星期一为1，以此类推。
dt.getFullYear(); // 返回四位的年份。
dt.getMonth(); // 返回月份（0表示1月，11表示12月）。
dt.getHours(); // 返回小时（0-23）。
dt.getMilliseconds(); // 返回毫秒（0-999）。
dt.getMinutes(); // 返回分钟（0-59）。
dt.getSeconds(); // 返回秒（0-59）。

在这里插入图片描述

和浏览器渲染有关的对象，我们叫做浏览器对象模型（Browser Object Model） — BOM。

在这里插入图片描述

DOM
文档对象模型，Document Object Model 一般我们简称为 DOM。

在这里插入图片描述

DOM树

在这里插入图片描述

选择器查询方法 — querySelector()

document.querySelector('main .core .subtitle');

选择器全量查询—querySelectorAll()

document.querySelectorAll('input');

其他筛选方法
DOM操作

创建标签节点

document.createElement(tagName)
document.createTextNode(string)

添加新节点

appendChild(newNode)
inserBefore(newNode， referenceNode)

inserBefore()方法和appendChild()刚好相反，appendChild是在所有儿子节点之后添加，inserBefore是在某个目标儿子节点之前添加。

设置样式、属性

img.setAttribute('style', 'width: 100%; height: 100%;');
//也可以
dom.style.color = 'xxxx';

setAttribute()不仅仅可以设置style之外，所有 HTML 属性都能用他设置，比如id, src, type, disabled, etc…

DOM 可以通过 addEventListener(eventName, callback)绑定eventName事件，这是现在官方认定的绑定操作。

// 监听Input输入事件
dom.addEventListener('input', function () {});

// 监听鼠标放置，移动事件
dom.addEventListener('mouseover', function () {});

// etc...

DOM事件

在这里插入图片描述
监听 DOM 事件，使用 DOM 操作，修改 DOM 属性

阻止冒泡

 // ......省略
likeBtn.addEventListener('click', function(e) {
  // 点击事件
  e.stopPropagation()
// ......省略

捕获
委托
鼠标移动事件
表单元素事件
1、焦点事件
获取焦点和失去焦点两个事件 — focus 和 blur
2、内容值变化
对于表单元素，有两种事件可以监听元素内容变化 — input 和 change。
滚动事件
滚动事件，事件名称为 — scroll。

用fetch实现API的调用（get请求）

fetch('https://api6.ipify.org?format=json')
.then(function(response) {
  return response.json();
})
.then(function(myJson) {
  console.log(myJson);
})

fetch发起POST请求（加一个参数method）

// 把JSON数据序列化成字符串
const data = JSON.stringify({
  username: 'admin',
  password: '123456'
});

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',
  {
    method: 'POST',
    body: data,
    headers: {
      'content-type': 'application/json'
    }
  }
)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });