JavaScript开发笔记

[lemooljiang]

JavaScript是一种轻量级、解释型的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。开发者可以利用JavaScript进行事件处理、表单验证、动画创建等多种功能。JavaScript可以实现复杂的功能，如实时内容更新、交互式地图和动画等。
-> 前往星空笔记

Comments

[lemooljiang]

教程 |
菜鸟教程 ｜
廖雪峰教程 |
ES6

[lemooljiang]

JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。
var a = 1 + 3;

[lemooljiang]

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);
var a = 1;
等同于： var a;
        console.log(a);
        a = 1;

[lemooljiang]

第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。

arg0
_tmp
$elem
π

[lemooljiang]

// 这是单行注释

/*
 这是
 多行
 注释
*/

由于历史上 JavaScript 可以兼容 HTML 代码的注释，所以(html comment removed: 和)也被视为合法的单行注释。
x = 1; (html comment removed:  x = 2;
) x = 3;

[lemooljiang]

与或运算符 || &&
&& 与运算符，两个条件都为真才为真，
|| 或运算符，一个条件为真即为真。
||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反
if(n>9 && n<100)
if(a>10 || b>10)

[lemooljiang]

//while
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

//for
for (var i = 0; i < x; i++) {
  console.log(i);
}

//do while
do {
  console.log(i);
  i++;
} while(i < x);

[lemooljiang]

1. 数值（number）：整数和小数（比如1和3.14）
2. 字符串（string）：文本（比如Hello World）。
3. 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
4. undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
5. null：表示空值，即此处的值为空。
6. 对象（object）：各种值组成的集合。
   对象是最复杂的数据类型，又可以分成三个子类型。
   6.1 狭义的对象（object）
   6.2 数组（array）
   6.3 函数（function）

有三种方法，可以确定一个值到底是什么类型。
typeof运算符
instanceof运算符
Object.prototype.toString方法

[lemooljiang]

函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。

function print(s) {
  console.log(s)
}


//动态参数
function print(...s) {
  for(let i of s){
    console.log(i)
  }
}

[lemooljiang]

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

var arr = ['a', 'b', 'c']

// 对象转换为数组
var obj = data; //定义对象（data为获取到的对象，在这里定义）
var arr = Object.values(obj); //对象转化为数组
conso

[lemooljiang]

JavaScript split() 方法, 用于把一个字符串分割成字符串数组。

stringObject.split(separator,how many)

用正则表达式来进行切割：可以去除多个空格
let tag = "cn bitcoin kr  cc"
let tags = this.tag.trim().split(/\s+/)
//得到：tags = ["cn", "bitcoin", "kr", "cc"]

eg:
var string = "Split me into an array";
var array = [];
array = string.split("a");
document.write(array);
//Split me into ,n ,rr,y

eg:
var string = "There are many apple on the tree";
var array = [];
array = string.split("a");
document.write(array);
//There ,re m,ny ,pple on the tree

[lemooljiang]

Array对象的join()方法
上述方法的功能是：将一个数组转成字符串。如：arrObj.join(连接号)，将一个数组用指定的连接号链接成一个字符串。

<span style="font-size:18px;">
var arr=["a","b","c"];
var str=arr.join("-");
document.write("类型是："+typeof(str)+"，字符串是："+str);</span>
//输出的结果是：类型是：string，字符串是：a-b-c

//去除首尾的双引号 有时在前端很有用！！  一个中国女孩
let content = "Hello, world!"
let str = content.replace("\"","").replace("\"","")  //Hello, world!

[lemooljiang]

//如果是直接赋值语句，如 a=b, 则这两者会关联到一起！a会随b的变化而变化！
let a = ["one", "two", "three"]
let b = a
b.push(6)
console.log(123, a, b)
//123 [ 'one', 'two', 'three', 6 ] [ 'one', 'two', 'three', 6 ]

// 如果不想这者关联，要使用slice, 它会创建一个新的数组
let a = ["one", "two", "three"]
let b = a.slice()
b.push(6)
console.log(123, a, b)
// 123 [ 'one', 'two', 'three' ] [ 'one', 'two', 'three', 6 ]

[lemooljiang]

function randomString(length) {
  let seed = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let result = ''
  for (var i = length; i > 0; --i) result += seed[Math.floor(Math.random() * seed.length)]
  return result
}
let rString = randomString(32)

[lemooljiang]

let str = "       Runoob        "
alert(str.trim())
//输出结果:Runoob 

[lemooljiang]

手册

Date 对象用于处理日期和时间。日期对象是用 new Date() 创建的。

实例化日期有四种方式：
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);


new Date() //2023-05-16T01:32:00.069Z  object
new Date().getTime()  //1684201632279 number
new Date().toISOString()  //使用 ISO 标准将日期作为字符串返回, 2023-05-16T01:49:46.959Z string
new Date().toISOString().split('.')[0]  //2023-05-16T01:49:46 string
new Date().toLocaleTimeString() //使用区域设置约定将 Date 对象的时间部分作为字符串返回，09:55:15 string
new Date().toLocaleDateString() //使用区域设置约定将 Date 对象的日期部分作为字符串返回， 2023/5/16 string
new Date().toJSON() //2023-05-16T02:05:49.250Z string


Date.now() //1684200720073  number
  返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

[lemooljiang]

参考

changeTime(timestamp){
  // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
  let date = new Date(timestamp * 1000)
  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + '-'
  let  M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
  let D = date.getDate() + ' '
  let h = date.getHours() + ':'
  let m = date.getMinutes() + ':'
  let s = date.getSeconds()
  return Y+M+D+h+m+s
},

[lemooljiang]

prototype属性, JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function Animal(name) {
  this.name = name
}
Animal.prototype.color = 'white'

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

// 上面代码中，构造函数Animal的prototype属性，就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性，结果，实例对象都共享了该属性。
// 当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。这就是原型对象的特殊之处。

// 总结一下，原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。

[lemooljiang]

this就是属性或方法“当前”所在的对象。
函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。
函数f在全局环境执行，this.x指向全局环境的x；在obj环境执行，this.x指向obj.x。

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

[lemooljiang]

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
new constructor[([arguments])]

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993)
console.log(car1.make)

[lemooljiang]

回调函数广泛应用于数组操作、计时器函数、Promise、事件处理等多种场景。回调函数是作为参数传递给另一个函数的函数，这种技术允许一个函数在另一个函数完成后执行

function add(x, y, callback) {
  console.log(1)
  setTimeout(function () {
    var ret = x + y
    callback(ret)
  }, 1000)
}

add(10, 20, function (ret) {
  console.log(ret)
})

// 注意：凡是需要得到一个函数内部异步操作的结果
//    setTimeout
//    readFile
//    writeFile
//    ajax
//   这种情况必须通过：回调函数

[lemooljiang]

function get(url, callback) {
  var oReq = new XMLHttpRequest()
  // 当请求加载成功之后要调用指定的函数
  oReq.onload = function () {
    // 我现在需要得到这里的 oReq.responseText
    callback(oReq.responseText)
  }
  oReq.open("get", url, true)
  oReq.send()
}

get('data.json', function (data) {
  console.log(data)
})

[lemooljiang]

1、构造函数，new Promise()得到一个实例。
2、有两个回调函数，resolve(成功回调)，reject(失败回调), 可以返回一个数组：resolve(['ok', 6899])
3、Promise是异步操作。

1. 实例的 原型 (prototype)上挂载了 2个方法，分别是 then 和 catch，同时then可以有多个，所以需要一个回掉函数队列
2. 实例上 有2个属性，分别是 PromiseStatus 和 PromiseValue
3. Promise根据定义 PromiseStatus 需要有 3种状态，分别是 pending , fulfilled，rejected
   7、一创建就会立即执行。可以包装在一个函数内，调用时执行。

函数封装

执行过程

[lemooljiang]

innerText：只返回元素及其所有子元素的文本内容，没有 CSS 隐藏文本间距和标签，除了 <script> 和 <style> 元素。
innerHTML：元素的文本内容，包括所有空白和内部 HTML 标签。
textContent：元素和所有后代的文本内容，带有空白和 CSS 隐藏文本，但没有标签。

<p id="myP"> This element has extra spacing     and contains <span>a span element</span>.</p>

let text = document.getElementById("myP").innerText
//This element has extra spacing and contains a span element.
let text = document.getElementById("myP").innerHTML
// This element has extra spacing    and contains <span>a span element</span>.
let text = document.getElementById("demo").textContent
// This element has extra spacing    and contains a span element.

[lemooljiang]

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 属性是只读的。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

保存数据语法：
localStorage.setItem('myCat', 'Tom')
读取数据语法：
let lastname = localStorage.getItem("key")
// let cat = localStorage.getItem('myCat')
删除数据语法：
localStorage.removeItem('myCat')
移除所有
localStorage.clear()

//注意：它只能保存字符串，所以需要JSON.stringify()，
//用的时候JSON.parse()

[lemooljiang]

函数调用自己，此时就是递归，递归一定要有结束的条件。

//求n个数字的和
function getSum(x){
  if(x==1){
    return 1
  }
  return x+getSum(x-1)
}

function f(){
  i++
  if(i<5){
    f()
  }
  console.log(123,"天龙八部")
}

[lemooljiang]

正则表达解析Markdown语法

abstractFn(res){
  if(!res){
    return ''
  }else{
    let str=res.replace(/(\*\*|__)(.*?)(\*\*|__)/g,'')          //全局匹配内粗体
            .replace(/\!\[[\s\S]*?\]\([\s\S]*?\)/g,'')          //全局匹配图片
            .replace(/\([\s\S]*?\)/g,'')                         //全局匹配连接
            .replace(/<\/?.+?\/?>/g,'')                         //全局匹配内html标签
            .replace(/(\*)(.*?)(\*)/g,'')                        //全局匹配内联代码块
            .replace(/`{1,2}[^`](.*?)`{1,2}/g,'')                //全局匹配内联代码块
            .replace(/```([\s\S]*?)```[\s]*/g,'')                //全局匹配代码块
            .replace(/\~\~(.*?)\~\~/g,'')                        //全局匹配删除线
            .replace(/[\s]*[-\*\+]+(.*)/g,'')                    //全局匹配无序列表
            .replace(/[\s]*[0-9]+\.(.*)/g,'')                    //全局匹配有序列表
            .replace(/(#+)(.*)/g,'')                              //全局匹配标题
            .replace(/(>+)(.*)/g,'')                              //全局匹配摘要
            .replace(/\r\n/g,"")                                  //全局匹配换行
            .replace(/\n/g,"")                                    //全局匹配换行
            .replace(/\s/g,"")                                    //全局匹配空字符;
    return str.slice(0,180)
  }
}

[lemooljiang]

语法： reg = /(?<=开始字符).*?(?=结束字符)/
function contentReg(text){
    //"content":"我是中"},"index"  提取中间的字符串
    // let reg = /!\[(.*?)\]\((.*?)\)/  
    // let reg =/\"content\"\:\"(.*?)\"\}\,\"index\"/g  
    
    let reg = /(?<=\"content\"\:\").*?(?=\"\}\,\"index\")/g
    // let reg = /\!\[.*?\)/
    let a = text.match(reg)
    if(a === null){
    return
    }
    console.log(11, a, a.join(''))
    return a
}
console.log(566, contentReg(textB))

[lemooljiang]

cnpm install crypto-js --save
import CryptoJS from 'crypto-js'

//加密秘钥 必须为：8/16/32位
let aseKey = "m2veJ6vY"
//加密函数
function encypt(message){
  return CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString()
}
//解密函数
function decrypt(code){
  return CryptoJS.AES.decrypt(code, CryptoJS.enc.Utf8.parse(aseKey), {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString(CryptoJS.enc.Utf8)
}

[lemooljiang]

const formatData = (value, digit = 3) => {
  const str =
      digit != null && digit >= 0
          ? Number(value)
              .toFixed(digit)
              .toString()
          : value.toString()
  let integer = str
  let fraction = ''
  if (str.includes('.')) {
    integer = str.split('.')[0]
    fraction = '.' + str.split('.')[1]
  }
  return integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + fraction
}

formatData(1956256.5623)  //string  1,956,256.562

[lemooljiang]

const copyText = () => {
  const text = "Hello, Clipboard API!"
  navigator.clipboard
    .writeText(text)
    .then(() => {
      console.log("Text copied to clipboard")
    })
    .catch((error) => {
      console.error("Failed to copy text: ", error)
    })
}

[lemooljiang]

js删除dom节点或div

<div id="img1">
  图片1
<input  type="button" onclick="del('img1')" value="删除元素"/>
</div>

<script>
function del(divId){
  document.getElementById(divId).remove()
}
</script>