javascript笔记①

最新推荐文章于 2024-08-20 16:48:16 发布

XiaoXiaoLi_

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量80

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/XiaoXiaoLi_/article/details/128651146

版权

循环 ( Loop )

for(const A of B){
    ...
}
    
const fruits = ['apples', 'cherries'];
for (const fruit of fruits) {
  console.log(fruit);
}

focus() 方法

focus()方法让光标在页面加载完成时自动放置于input输入框内。不包含对表单元素引用的变量不提供focus()方法。

style属性

页面上每个元素都有一个style属性，可以用它设置新的CSS样式。

const ele = document.createElement("div");
ele.style.padding = '10px';

Math.random（）

返回一个浮点型为随机数字，范围：[0,1)。

//值的范围：[min, max)
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

Math.floor（x）

Math.floor（） 函数总是返回小于等于一个给定数字的最大整数。即向下取整。

运算符

//幂 **
5**3 === 5*5*5
Math.pow(5,3) === 5**3

数字与字符串相互转化

let myString = '123';
let myNum = Number(myString);
typeof myNum;

let myNum = 123;
let myString = myNum.toString();
typeof myString;

string

//访问字符 
"cat".charAt(1); // gives value "a"
"cat"[1]; // gives value "a"

//比较字符  直接 > <

//找到子字符串并提取
let browserType = 'mozilla';
browserType.length;//7
browserType.indexOf('vanilla');//-1
browserType.indexOf('zilla');//2
	//用slice()提取
browserType.slice(0,3);//moz
browserType.slice(2);//zilla

//转换大小写
let radData = 'My NaMe Is MuD';
radData.toLowerCase();//my name is mud
radData.toUpperCase();MY NAME IS MUD

//替换字符串的某部分
browserType = browserType.replace('moz','van');//vanilla

event

.onfocus
.onblur 
— 颜色将于按钮被置于焦点或解除焦点时改变
.onclick
—鼠标点击时被改变
.ondblclick 
— 颜色将仅于按钮被双击时改变。

window.onkeypress, window.onkeydown, window.onkeyup 
— 当按钮被按下时颜色会发生改变。keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分，分别指按下和松开。注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。
btn.onmouseover ,btn.onmouseout 
— 颜色将会在鼠标移入按钮上方时发生改变，或者当它从按钮移出时。

addEventListener() 和 removeEventListener()

const btn = document.querySelector('button');

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + 		random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = 		  rndCol;
}

btn.addEventListener('click', bgChange);
btn.removeEventListener('click', bgChange);
//优点：可移除事件处理器；同一个监听器可以处理多个函数
myElement.onclick = functionA;
myElement.onclick = functionB;
Copy to Clipboard
//第二行会覆盖第一行，但是下面这种方式就会正常工作了：

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
//当元素被点击时两个函数都会工作：

事件对象

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);
//e.target是事件刚刚发生的元素的引用
//在多个元素上设置相同的事件处理程序时，e.target非常有用

e.preventDefault();//事件阻止

事件冒泡和捕获

在捕获阶段：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反：

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

stopPropagation()当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。

异步

异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。

promise:对象用于表示一个异步操作的最终完成（或失败）及其结果值。

三个状态：

pending:待定。表示请求还在进行中。

fulfilled:意味着操作成功。当Promise完成时，它的then()处理函数将被调用

rejected：意味着操作失败。当Promise失败时，catch()处理函数将被调用。

//调用fetch()API,返回值赋给变量
const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise);
//then()方法：如果获取操作成功时，Promise将调用我们的处理函数
fetchPromise.then( response => {
  console.log(`已收到响应：${response.status}`);
});

console.log("已发送请求……");
//Promise { <state>: "pending" }
//已发送请求……
//已收到响应：200

Promise.all():接受一个Promise数组，当所有的Promise都被兑现时，响应then()处理函数；有任何一个Promise被拒绝，catch()处理函数被调用。

const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( responses => {
    for (const response of responses) {
      console.log(`${response.url}：${response.status}`);
    }
  })
  .catch( error => {
    console.error(`获取失败：${error}`)
  });

async:在函数开头添加async，使其成为一个异步函数。

await:在调用一个返回Promise的函数之前使用await关键字，使得该代码在该点上等待，直到Promise被完成。

async function fetchProducts() {
  try {
    // 在这一行之后，我们的函数将等待 `fetch()` 调用完成
    // 调用 `fetch()` 将返回一个“响应”或抛出一个错误
    const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
    if (!response.ok) {
      throw new Error(`HTTP 请求错误：${response.status}`);
    }
    // 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
    // `response.json()` 调用将返回 JSON 对象或抛出一个错误
    const json = await response.json();
    console.log(json[0].name);
  }
  catch(error) {
    console.error(`无法获取产品列表：${error}`);
  }
}

fetchProducts();

try...catch类似于if...else语句。

setTimeout():两个参数，一个回调函数和一个一毫秒为单位的延迟作为参数。

const name = document.querySelector('#name');
const delay = document.querySelector('#delay');
const button = document.querySelector('#set-alarm');
const output = document.querySelector('#output');

function alarm(person, delay){//返回一个新的promise
    return new Promise((resolve, reject) => {//resolve和reject都是函数。如果异步函数成功了，就调用resolve；反之调用reject。
		if(delay < 0){
 			throw new Error('Alarm delay must not be negative');
            //如果执行器函数抛出一个错误，reject自动调用
        }
        window.setTimeout(() => {
            resolve('Wake up,${person}!');//resolve函数
        },delay);
    });
}
    
    
button.addEventListener('click', () =>{
    alarm(name.value, delay.value)
    .then(message => output.textContent = message)
    .catch(error => output.textContent = `Couldn't set alarm: ${error}`);
}

worker

多线程代码中分为主代码和 worker 代码。workers 不能访问DOM（窗口，文档，页面元素等等）。

workers的三种类型：

dedicated workers

shared workers

service workers

animation

const aliceTumbling = [
    { transform: 'rotate(0) scale(1)' },
    { transform: 'rotate(360deg) scale(0)' }
];

const aliceTiming = {
    duration: 2000,
    iterations: 1,
    fill: 'forwards'
}
const alice1 = document.querySelector("#alice1");
alice1.animate(aliceTumbling, aliceTiming)；

animate()返回值为animation

包含属性有：

duration：动画时长（单位毫秒）
iteration：重复次数（为数字或者无限循环Infinity）
fill:结束时复位（不复位：forwards;复位（默认值）：none)
delay:延时时长
easing：设置动画运动速率（esse(默认)：慢-快-慢，linear: 匀速， ease-in: 慢-匀速， ease-in-out 慢-匀速-慢]）