JS 笔记

<script>  //......  /*......*/</script>

//......

<script src="abc.js"></script>

const NUM_1 = 1; // 常量常用大写字母和下划线`_`let 成绩 = 71; // 国际化常用数字、字母和`$`和`_`var myName = "sakurakugu"; // 常用小写开头的驼峰命名法alert(num); // 弹窗“num”var 原神 = "启动";var 璃月 = ["甘雨", "胡桃"];

/*在控制台中*/ 123; //整数123.45; //浮点数1.123e3 - //科学计数法 （在控制台中输出的是1123）  99; //负数NaN; //not a number（不是一个数字/无效数字）Infinity - //无限大  Infinity; //无限小

// 尾部的 "n" 表示这是一个 BigInt 类型const 大整数 = 1234567890123456789012345678901234567890n;

'abc'	"abc"	'\n'	"\n"	//js中不区分单双引号，它们都是简单引用

// d反引号是 功能扩展 引号。它们允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中。例如： let name = "John";// 嵌入一个变量alert(`Hello, ${name}!`); // Hello, John!// 嵌入一个表达式 (注：${…} 内的表达式会被计算)alert(`the result is ${1 + 2}`); // the result is 3

true	false

&&		//两个都为真||		//一个为真，结果为真!		//真即假，假即真

=		//赋值==		//是否等于 （类型可以不一样，但值一样，为真 （如：1与'1'）为真）===		//是否绝对等于 （类型、值都要一样，才为真 （如：1与'1'为假）） /*因此常用绝对等于符号*/

console.log(1 / 3 === 1 - 2 / 3);

console.log(Math.abs(1 / 3 === 1 - 2 / 3) < 0.0000000000001);//通过判断它的绝对值是否小于一个极小的数，可以近似判断它们相等

const symbol1 = Symbol("unique1");const symbol2 = Symbol("unique2"); console.log(symbol1 === symbol2); // false (每次生成的 Symbol 值都是唯一的) const obj = {  [symbol1]: "value1",  [symbol2]: "value2",}; console.log(obj[symbol1]); // "value1"console.log(obj[symbol2]); // "value2"

/*每个属性之间用逗号隔开，最后一个可以不用加逗号*//*可类比C++的class（类）或结构体（用class类比更精确一些）*/let person = {  name: "sakurakugu",  age: 16,  tags: ["meishaonv", "kawaii", "……"],};

person.name					-->		'sakurakugu'console.log(person.name)	-->		 sakurakuguconsole.log(person["name"]);-->		 sakurakuguperson.age		-->		16person			-->		{name: 'sakurakugu', age: 16, tags: Array(3)}person.tags		-->		(3) ['meishaonv', 'kawaii', '……']person.tags[1]	-->		'kawaii'

let arr = [1, 2, 3, 4, 5, "hello", "world", null, true];//JS的数组本质是哈希表，上面的写法只是语法糖而已 //用对象定义数组new array(1, 2, 34, "hello", "world"); //定义一个array数组

console.log(arr[3]);//如果越界了，就会输出undefined

typeof undefined; // "undefined"typeof 0; // "number"typeof 10n; // "bigint"typeof true; // "boolean"typeof "foo"; // "string"typeof Symbol("id"); // "symbol"typeof Math; // "object"typeof null; // "object"  	// 这是一个为了兼容性的Bugtypeof alert; // "function"  // 函数在JS中隶属于对象类型

//全局变量i = 1;//局部变量var i = 1; //但在ES6中，局部变量常在let中定义（之后学）（let更像C++的了）

<script>	'use strict';	……	……</script>

/*用飘号的那个引号（反引号）*/var msg=`123      456            789`; msg	-->'123\n      456\n            789' console.log(msg)	-->123      456            789

let name="sakurakugu";let age=3;let msg1=`你好呀，${name}${age}`; console.log(msg1)	-->你好呀，sakurakugu3

var student="student"; console.log(student.length)		-->		7console.log(student[0])			-->		s

console.log(student.toUpperCase())	-->	STUDENTconsole.log(ab.toLowerCase())		-->	student//仅仅是输出，不改变原值

//获取“t”第一次出现的i（a[i]的i）（从0开始）console.log(student.indexOf('t'))	-->	1 

console.log(student.substring(2))	-->	udent//从“2”开始，到结尾console.log(student.substring(2,4))	-->	ud//包含前面，不包含后面 [ , )

var arr = [1, 2, 3, 4, "1", "2"];

arr.length		-->		6//数组的长度是可变的，arr.length=10，它的长度就变成了10arr.length=10;arr				-->		(10) [1,2,3,4,"1",'2', 空 ×4]console.log(arr)-->		(10) [1, 2, 3, 4, '1', '2', 空 ×4] //当然变短就把多余的删了//如果要赋值取值就用下标arr[0]=12;arr[0]	-->		12

arr.indexOf('2')		-->		5//注意:字符“2”，与数字2不同

arr.slice(1)		-->		(5) [2, 3, 4, '1', '2']arr.slice(1,5)		-->		(4) [2, 3, 4, '1']

//压入到尾部arr.push('a','b')	-->		8arr					-->		(8) [1, 2, 3, 4, '1', '2', 'a', 'b']//弹出尾部元素arr.pop()			-->		'b'arr					-->		(7) [1, 2, 3, 4, '1', '2', 'a']

//压入到头部arr.unshift('a','b') -->		8arr					 -->		(8) ['a', 'b', 1, 2, 3, 4, '1', '2']//弹出头部元素arr.shift()			 -->		'a'arr					 -->		(7) ['b', 1, 2, 3, 4, '1', '2']

arr				-->		(8) ['a', 'b', 1, 2, 3, 4, '1', '2']arr.sort()		-->			[1, '1', 2, '2', 3, 4, 'a', 'b']

//就是元素反过来重新排序var arr=[1,2,3,4,"1",'2'];arr.reverse()	-->		(6) ['2', '1', 4, 3, 2, 1]

//在数组后面加上要加的字符，然后返回一个新数组//并没有更改原数组arr.concat([1,2,3])		-->	  (9) [1, 2, 3, 4, 5, 6, 1, 2, 3]arr.concat(1,2,3)		-->	  (9) [1, 2, 3, 4, 5, 6, 1, 2, 3]//所以这里原数组不变arr						-->	  (6) [1, 2, 3, 4, 5, 6]

//使用特定的字符连接数组，并打印拼接后的这个新数组arr.join('-')		-->		'1-2-3-4-5-6'arr.join("ooo")		-->		'1ooo2ooo3ooo4ooo5ooo6'

a=[[1,2],['1','2','3'],["1",5,'1']]; --> (3) [Array(2), Array(3), Array(3)]	0: (2) [1, 2]	1: (3) ['1', '2', '3']	2: (3) ['1', 5, '1']	length: 3	[[Prototype]]: Array(0) //二维数组取值a[1][2]		-->		'3'

//如：var person = {  name: "John",  age: 30,  gender: "male",};//name、age、gender是键（key），冒号后面的是值（value）//99%的键都是字符串，而值是任意对象

var 对象名 = {    关键字:对应值， （属性名:属性值）    关键字:对应值，    关键字:对应值，    关键字:对应值}

person.name='sakurakugu'		-->		'sakurakugu'person.name						-->		'sakurakugu'

person.haha-- > undefined;

delete 			-->		person.nametrueperson			-->		{age: 30, gender: 'male'}

person.haha='haha'		-->		'haha'person		-->		{age: 30, gender: 'male', haha: 'haha'}

"age" in person-- > true;

person.hasOwnProperty('toString')		-->		falseperson.hasOwnProperty('age')			-->		true

var arr = 3;if (arr > 3) {  alert("haha");} else {  alert("kuwa~");}

while (arr < 100) {  arr += 1;  console.log(arr);}///////////////////////do {  arr += 1;  console.log(arr);} while (arr < 100);

//可以通过输入“fori”+“回车”来快速的输入for (let i = 0; i < 100; i++) {  console.log(i);}

var arr = [12, 123, 2, 3, 4, 1, 234, 5, 31, 234, 23];//自带的函数arr.forEach(function (value) {  console.log(value);}); //循环遍历这个数组的每一个元素

//和上面一样，用于循环数组中每一个元素，并打印var arr = [12, 123, 2, 3, 4, 1, 234, 5, 31, 234, 23]; for (var num in arr) {  console.log(arr[num]);}

var map = new Map([  ["tom", 100],  ["jack", 90],  ["mary", 80],]);var name = map.get("tom"); //通过key获得valuemap.set("admin", 123456); //新增/设置新的值console.log(name);map.delete("tom"); //删除tom

var set = new Set([1,3,4,532,1,1,1,1]);set			    -->     Set(4) {1, 3, 4, 532}//它会去重set.add(2);set				-->		 Set(5) {1, 3, 4, 532, 2}set.delete(1);			 //删除1console.log(set.has(3)); //是否包含某个元素（ture false）

var arr = [3, 4, 5];//通过以下两种方式都可以打印数组具体的值for (var i in arr) {  console.log(arr[i]); //打印数值  //console.log(i);		//打印下标} for (var i of arr) {  console.log(i); //打印数值}

var map = new Map([  ["tom", 100],  ["jack", 90],  ["mary", 80],]);for (let x of map) {  console.log(x);} var set = new Set([1, 3, 4, 532, 1, 1, 1, 1]);for (let x of set) {  console.log(x);}

function abs(x){    if(x>=0){}    else{x=-x;}    return x;} abs(10)			-->		10abs(-10)		-->		10

var abs = function (x) {  if (x >= 0) {  } else {    x = -x;  }  return x;};

abs(10)			-->		10abs(-10)		-->		10

function abs(x) {  //手动抛出异常  if (typeof x !== "number") {    //如果x不为数字    throw "没有数字 not a number";  }   if (x >= 0) {  } else {    x = -x;  }  return x;}

function aaa(a,b,...rest){    console.log(a);    console.log(b);    console.log(rest);    console.log(arguments);} //控制台aaa(1,2,3,4,5,6)12(4) [3, 4, 5, 6]Arguments(6) [1, 2, 3, 4, 5, 6, callee: (...), Symbol(Symbol.iterator): ƒ]

var x = 1;y = x + 1;z, i, a;

var x = "xxx";alert(x);alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下（如这里的x）//像是这里的alert也是，可以写成window。alert

//先定义一个空对象var Suakura = {}; //再定义全局变量（再将属性和方法放入对象中）Sakura.name = "aaa";Sakura.add = function (a, b) {  return a + b;};

let a = 1;

const PI = 3.14;//不知道为什么，数字部分加了引号也能算出正确的结果

let sakurakugu={    name:"樱花莎",    birth:1024,    //方法    age:function(){        let now=new Date().getFullYear();        return now-this.birth;    }}; sakurakugu.age()		-->		999 /*调用：*///属性sakurakugu.name//方法Sakurakugu.age()	//调用方法一定要加括号	//如果将函数放在外面，内部只是调用，也要加括号

var now = new Date();now.getFullYear(); //年now.getMonth(); //月 这个从0开始now.getDate(); //日now.getDay(); //星期now.getHours(); //时now.getMinutes(); //分now.getSeconds(); //秒 now.getTime(); //时间戳   从1970.1.1 0:00:00 UTC开始到现在的毫秒数

new Date(1696242744325); //时间戳转为当前时间now.toLocaleDateString(); //转换本地时间格式("2023/10/2");now.toLocaleString(); //同上("2023/10/2 18:36:59");

let user = {  name: "sakurakugu",  age: 999,  sex: "nan",}; console.log(user);//对象转化为json字符串：let jsonuser = JSON.stringify(user); console.log(jsonuser);//json字符串转化为对象let jsuser = JSON.parse(jsonuser); console.log(jsuser);

//输出结果：{name: 'sakurakugu', age: 999, sex: 'nan'} //可展开{"name":"sakurakugu","age":999,"sex":"nan"}//不可展开{name: 'sakurakugu', age: 999, sex: 'nan'} //可展开

let user = {  name: "sakurakugu",  age: 999,  sex: "nan",}; let xiaoming = {  name: "xianming",}; //原型(小明继承了user的原型)xiaoming.__proto__ = user;

//定义一个类class Student {  constructor(name) {    this.name = name;  }   hello() {    alert("hello");  }} //将两个对象放进去let xiaoming = new Student("xiaoming");let xiaohong = new Student("xiaohong");

//类之间继承class xiao_xuesheng extends Student {}

window.alert(1);undefined;window.innerHeight;679;window.innerWidth;1048;window.outerHeight;1026;window.outerWidth;849;//自己去试试就知道了

navigator.appName;("Netscape");navigator.appVersion;("5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.47");//用于检测浏览器的信息//大多数时候不会使用它，应为这些数据可以人为修改，因此也不建议使用它

screen.width;1707(px);screen.height;1067(px);

host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload()	//刷新网页//设置新的地址location.assign(新地址)

document.title;("百度一下，你就知道");document.title = "aaa";("aaa");

<dl id="app">  <dt>java</dt>  <dd>javase</dd>  <dd>javaee</dd></dl> <script>  let dl = dpcument.getElementById("app");</script>

document.cookie;("3AB9D23F7A4B3C9B=EQCXVYPQBN5RK4W25JHHSOGBJNVDSHBI2GYWZUNCB27TTDWGDHWKWW7EES4GXILNYNOAQZLBUQ3YKHBFZK5OQ6TWZE; Hm_lvt_affdf09dddabcdf2d681acefa474b973=1694878902");

//history 代表浏览器的历史记录history.back(); //后退history.forward(); //前进//也不建议使用

//可对应css的选择器let h1 = document.getElementsByTagName("h1");let p1 = document.getElementById("p1");let p2 = document.getElementsByClassName("p2");let father = document.getElementById("father"); let childrens = father.children; //获取父节点下面的所有子节点father.firstChild;father.lastChild;

<div id="father">  <h1>标题1</h1>  <p id="p1">p1</p>  <p class="p2">p2</p></div> <script>  let self = father.removeChild(p1); //获取自己  let father = p1.parentElement; //获取父节点  father.removeChild(self); //删除自己   father.removeChild(father.children[1]); //或者这样，但注意，删除后后面的会向前变化的</script>

<div>  <p id="js">js</p>  <div id="list">    <p id="se">javase</p>    <p id="ee">javaee</p>    <p id="me">javame</p>  </div></div> <script>  let js = document.getElementById("js"), //已存在的节点    list = document.getElementById("list");  list.appendChild(js); //将“js”追加到list最后面</script>

<script>  //创建一个新标签  let newp = document.createElement("p");  newp.id = "newp";  newp.innerText = "hello,sakura";  list.appendChild(newp);  //创建一个标签节点 （通过这个属性，可以设置任意的值，如style，a等等）  let myscript = document.createElement("script");  myscript.setAttribute("type", "type/javascript");</script>

let ee = document.getElementById("ee");let js = document.getElementById("js");let list = document.getElementById("list");//insertBefore(newNode,targetNode) 将新节点插入到目标节点前面list.insertBefore(js, ee);

//得到输入框的值let input_text = document.getElementById("username");let boy_radio = document.getElementById("boy");let girl_radio = document.getElementById("girl");//修改输入框的值input_text = "1234";//对于单选框，或多选框，boy_radio.value只能取到当前的值boy_radio.value-- > "man"; //说明这个选项要传递的信息boy_radio.checked-- > true; //说明男被选中

<script>  //原生的js，选择器少，麻烦不好记  //标签  document.getElementsByTagName();  //id  document.getElementById();  //类  document.getElementsByClassName();   //jQuery  css中的选择器，它都可以用  $("p").click(); //标签选择器  $("#id1").click(); //id选择器  $(".class1").click(); //class选择器</script>

$("#text-ul li[name=python]").text(); //获得值("Python");//将文本改成了11234$("#text-ul li[name=python]").text("11234"); //设置值

$("#text-ul li[name=python]").css("color", "red"); //变红

$("#text-ul li[name=python]").show(); //显示文本$("#text-ul li[name=python]").hide(); //隐藏文本