自己js的学习笔记 JavaScript

js

基础

弹窗

alart("hello world"); // 普通弹窗

let a = confirm('你好'); //含取消确认的弹窗

let a = prompt('你好'); //含文本输入框的弹窗	

• alart()中可以输出字符串和数字，输出字符串时需要用引号括起来
• prompt（）不管输出什么内容 ，都是以字符串的方式输出
• prompt（）会返回用户输入的内容

网页内容区域输出

document.write("你好");

控制台输出 日志打印

console.log("hello");//普通打印
console.warn("hello");//警告打印
console.error("hello");//错误打印

不同的打印等级，区别不大，只是颜色背景上的区别，方便肉眼区分、过滤信息。

常量 变量

const 常量名 = 常量值;//定义一个常量
var 变量名 = 初值; //定义一个变量（函数作用域）
let 变量名 = 初值; //定义一个变量（块级作用域）

• 变量如果未被初始化 默认值为 undefined
• 使用 var 变量存在变量提升的情况，即在变量定义之前使用该变量
• 使用 var 可以重复声明同一个变量，后定义的变量会覆盖前面定义的变量，使用let 变量在同一作用域下不允许声明同一变量
• 使用var关键字声明的全局变量会成为全局对象（如window）的属性，而使用let关键字声明的全局变量不会成为全局对象的属性

字符串

字符串拼接

let a = "张三";
let b = "18";

console.log("我叫" + a + "，今年" + b + "岁了");//传统字符串拼接
console.log(`我叫${a}，今年${b}岁了`);//ES6 字符串拼接(注意格式，反引号tab键上方)

• ${ } 大括号中可以写 变量、常量、表达式或者调用函数

String 常用方法

1、indexOf()/lastIndexOf()：获取字符串中指定内容的索引

索引值 = str.indexof(查找的字符);

索引值 = str.indexof(查找的字符, 查找起点下标);

未找到返回-1

2、search()：获取字符串中指定内容的索引（参数里一般是正则）

索引值 = str.search(要查找的字符串);

索引值 = str.search(正则表达式);

3、includes()：字符串中是否包含指定的内容

Boolean bool = str.includes(字符串);

Boolean bool = str.includes(字符串 , 查找的起始索引位置)；

5、endsWith()：字符串是否以指定的内容结尾

Boolean bool = str.endsWith(字符串);

Boolean bool = str.endsWith(字符串 , 查找结束位置索引);

6、获取指定位置的字符

charAt(index)

字符 = str.charAt(index);
字符 = str[index];

charCodeAt(index)

字符 = str.charCodeAt(index);

返回字符串指定位置字符的Unicode编码。不会修改原字符串。

字符串截取

slice()

新字符串 = str.slice(开始索引 ， 结束索引);// 包左不包右

• 包左不包右
• (index) 表示从index开始截取到最后
• (-index) 表示从倒数第index个开始截取到最后
• (index1, -index2) 表示从index1开始截取到 倒数index2个
• (index1 , index2) (index1 < index2) 返回null

substring()

新字符串 = str.subString(开始索引 ， 结束索引);

特性和 slice几乎相同

• 不接受负值 , 如果为负值 则自动变为0
• (index1 , index2) (index1 > index2) 自动交换两值

substr()

新字符串 = str.substr(开始索引 ， 截取长度);

从指定索引开始截取指定长度字符串

• (index , length) 从index1下标开始 截取length个字符
• (index) 从index下标开始截取到最后
• (-index) 从倒数index 开始 截取到最后

String.fromcharCode() 根据Unicode编码获取字符

字符 = String.formcharcode(unicode);

var a = String.formcharcode(72);
console.log(a); //输出 H

concat 字符串拼接(几乎不用)

新字符串 = str1.concat(str2);

在数组中也有此方法 ， 数组中使用频率较高

* split() 将字符串转换为数组

数组 = str.split(分隔符);

同java

replace()将字符串中的指定内容进行替换

新字符串 = str(被替换字符子串 ,  新子串);

• 默认匹配到第一个找到的字符串
• 可使用正则进行全局替换

repeat()重复字符串

新字符串 = str.repeat(重复次数);

将指定字符串重复指定次数

trim去除字符串前后空格

新字符串 = str.trim();

大小写转换

新串 = str.toLowerCase(); //转换为小写

新串 = str.toUpperCase();//转换为大写

html方法

• anchor() 创建 a 链接
• big()
• sub()
• sup()
• link()
• bold()

Number 和 Math

number常用方法

判断是否为数字

bool = Number.isInteger();

toFixed 小数点后保留位数

字符串 = num.toFixed(保留位数);

对结果进行四舍五入 ， 返回字符串结果集

Math常用方法

方法	描述	备注
Math.PI	圆周率	Math对象的属性
Math.abs()	返回绝对值
Math.random()	生成0-1之间的随机浮点数	取值范围是 [0，1)
Math.floor()	向下取整（往小取值）
Math.ceil()	向上取整（往大取值）
Math.round()	四舍五入取整（正数四舍五入，负数五舍六入）
Math.max(x, y, z)	返回多个数中的最大值
Math.min(x, y, z)	返回多个数中的最小值
Math.pow(x,y)	乘方：返回 x 的 y 次幂
Math.sqrt()	开方：对一个数进行开方运算

生成（x，y）之间的随机数

//生成（x，y）之间的随机数
        var x = 10;
        var y = 20;
        var num = Math.floor(Math.random() * (y - x + 1) + x);
        console.log(num);

url编码和解码

    encodeURIComponent();   //把字符串作为 URI 组件进行编码
    decodeURIComponent();   //把字符串作为 URI 组件进行解码

Date

创建

const date1 = new Date(); //获取当前系统时间


//参数为字符串
const date2 = new Date("2023/7/8 10:00:00");
const date3 = new Date("2023/7/8");
const date4 = new Date("2023-7-8");


//参数为多个数字
const date5 = new Date(2023,6,8); // 表示2023.7.8   *第二个数字返回的是7月不是6月
const date6 = new Date(2023,6,8,10,0,0);//表示2023.7.8 10:00:00

const params = [2023,6,8,10,0,0];
const date7 = new Date(params);

//参数为时间戳
const date8 = new Date(1694125200);

date常用方法

方法名	含义	备注
getFullYear()	获取年份
getMonth()	获取月： 0-11	0代表一月
getDate()	获取日：1-31	获取的是几号
getDay()	获取星期：0-6	0代表周日，1代表周一
getHours()	获取小时：0-23
getMinutes()	获取分钟：0-59
getSeconds()	获取秒：0-59
getMilliseconds()	获取毫秒	1s = 1000ms

获取时间戳

时间戳是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数

const timestamp1 = +new Date(); //最常用写法

const timestamp2 = new date().getTime();// getTime()获取时间戳

const timestamp3 = new Date().valueOf();

const timestamp4 = new Date() * 1;

const timestamp5 = new Number(new Date());

const timestamp6 = Date.now(); //H5标准新增方式

数组

常用方法

作用域

• 全局作用域：作用于整个 script 标签内部，或者作用于一个独立的 JS 文件。

  ​ 在全局作用域下有一个全局对象， 代表浏览器窗口，

  ​ 创建的变量会被当做 windows 对象 的属性保存

  ​ 创建的函数会被当做 windows 对象 的方法保存

  ​ 例如：

  ​

  let a = 100;	//创建变量
  console.log(windows.a);		
  

• 函数作用域（局部作用域）：作用于函数内的代码环境。

无论在函数内还是函数外 ， 只要变量未经声明就赋值(未加 var let const 关键字) ， 这个变量就是全局变量

变量提升、函数提升

变量

使用 var 关键字声明的变量，会在所有的代码执行之前被声明(但是不会被赋值)

如：

console.log(a);
var a = 123;
//打印结果为 ： undefined
// a被提前声明了，但是未被赋值

console.log(a);
a = 123;
// 程序报错
// a未被提前声明  ，只有var关键字声明的变量才会被提前	

函数

使用 函数声明 形式创建的函数 function ooo（）{} ， 会被提前声明

如：

ooo();

function ooo() {
	console.log("我是函数 ooo");
}

注：

在js中，函数提升优先于变量提升

fun(); // 打印 B

// 变量提升
var fun = function () {
  console.log('A');
};

// 函数提升
function fun() {
  console.log('B');
}

fun(); // 打印 A

this指向

• 以函数的形式调用时，this的指向永远为windows
• 以方法的形式调用时，this的指向为调用方法的那个对象
• 以构造函数的形式调用时，this指向实例对象
• 以事件绑定函数的形式调用时，this指向绑定事件对象
• 使用call 和 apply 调用时 ， this指向指定的那个对象

以函数形式调用

function fun() {
    console.log(this);
    console.log(this.name);
}

var obj1 = {
    name: 'smyh',
    sayName: fun,
};

var obj2 = {
    name: 'vae',
    sayName: fun,
};

var name = '全局的name属性';

//以函数形式调用，this是window
fun(); //可以理解成 window.fun()


//打印结果
    Window
    全局的name属性

以方法的形式调用

function fun() {
    console.log(this);
    console.log(this.name);
}

var obj1 = {
    name: 'smyh',
    sayName: fun,
};

var obj2 = {
    name: 'vae',
    sayName: fun,
};

var name = '全局的name属性';

//以方法的形式调用，this是调用方法的对象
obj2.sayName();


//打印结果
    Object
    vae

call()

call()方法：可以调用一个函数 ， 可以改变这个函数的内部指向

function greet() {
  console.log("Hello, " + this.name);
}

var person1 = {
  name: "Alice"
};

var person2 = {
  name: "Bob"
};

greet.call(person1); // 输出：Hello, Alice
greet.call(person2); // 输出：Hello, Bob

apply()

apply() : 与call方法类似 但是apply方法传参时 需要传递一个数组

fn.apply(想要this指向的对象 ， [函数实参1 ， 函数实参2 ，...])

function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

var person1 = {
  name: "Alice"
};

var person2 = {
  name: "Bob"
};

greet.apply(person1, ["Hello"]); // 输出：Hello, Alice
greet.apply(person2, ["Hi"]); // 输出：Hi, Bob

bind()

baind() : 不会调用函数 ， 但是会改变函数内this的指向，返回一个新函数

新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);

call()、apply()、bind()的区别

• call , apply 会调用函数 bind不会调用函数而是返回一个新函数
• call 传递参数为一个一个的传递 apply传递参数为一个数组

闭包

• 实现数据的私有
• 未完待续

对象的基本操作

var obj = new Object(); // 创建对象

对象.属性名 = 属性值;  // 向对象添加属性
对象['属性名'] = 属性值;

对象.属性名    //获取对象中的属性
对象['属性名']

delete 对象.属性名; // 删除对象的属性

in运算符

检查一个对象中是否含有指定的属性,如果有返回true ， 没有返回 false

'属性名' in 对象;

//检查obj对象 中是否含有 userName属性
console.log('userName' in obj);

for of 遍历数组

for…of 既可以遍历数组 也可以遍历Map对象

for(let value of 数组){
	console.log(value);
}

for in 遍历对象属性

for in 主要用来遍历对象，不建议遍历数组

for(const 变量 in 对象){
	
}

列：

for(var key in obj){
	console.log(key); // 属性名
	console.log(obj[key]); //属性值
}

对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的 每个属性的 属性名 赋值给变量

浅拷贝和深拷贝

JS中级_浅拷贝_哔哩哔哩_bilibili

• 浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。
• 深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。

正则表达式

事件

常见事件

获取事件源

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

绑定事件

直接绑定匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

先单独定义函数，再绑定

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>