JavaScript学习之路

3️⃣ 学习前端知识的第三步，学习JavaScript!

字符串方法

返回指定位置的字符charArt()

1 2	`var str="xshuisahd"; str.charAt(1);//s`

连接两个字符串concat()

1
2
3

var str1 = "abc";
var str2 = "def"
console.log(str1.concat(str2));//abcdef

如果不是字符串，则先转变成字符串再连接

字符串相连可以直接用+

1
2
3

var str1 = "abc";
var str2 = "def"
console.log(str1 + str2);//abcdef

截取字符串substring()

1 2	`var str1 = "abcdefg"; console.log(str1.substring(1, 5));//bcde`

左闭右开

第二个参数不写，默认到字符串末尾

确定一个字符串在另一个字符串中第一个出现的位置indexOf()

1
2
3

var str1 = "abcdefg";
var str2 = 'e'
console.log(str1.indexOf(str2));//4

匹配不成功返回-1

去除字符串的空格trim()

var str1 = "  abcdefg  ";
console.log(str1);
console.log(str1.trim());
//   abcdefg   
//abcdefg

换行符、制表符、换行符都被去除

分割字符串split()

1 2	`var str1 = "ab\|c\|def\|g"; console.log(str1.split('\|'));//[ 'ab', 'c', 'def', 'g' ]`

返回数组

如果分割规则为空，则返回数组为每个字符

也接受第二个参数，可以限制返回的数组成员数

数组方法

判断数组 Array.isArray()

1 2	`var str2 = [10, 20, 30]; console.log(Array.isArray(str2));//true`

在末端添加一个或多个元素push()

1
2
3

var str2 = [10, 20, 30];
console.log(str2.push(40));//4
console.log(str2);//[ 10, 20, 30, 40 ]

返回值为新数组长度

在末端删除一个元素pop()

1
2
3

var str2 = [10, 20, 30];
console.log(str2.pop());//30
console.log(str2);//[ 10, 20 ]

返回值为末端元素

删除第一个元素shift()

1
2
3

var str2 = [10, 20, 30];
console.log(str2.shift());//10
console.log(str2);//[ 20, 30 ]

可以用该方法来清空数组

var str2 = [10, 20, 30];
console.log(str2);//[ 20, 30 ]
var item;
while (item = str2.shift()) {
    console.log(item);
}

在第一个元素前加元素unshift()

var str2 = [10, 20, 30];
console.log(str2);//[ 10, 20, 30 ]
console.log(str2.unshift(50))//4
console.log(str2);//[ 50, 10, 20, 30 ]

返回值为新数组长度

也可以多个参数，就添加多个元素

以某个规则将所有数组成员连接为字符串join()

默认用逗号分隔

1
2
3

var str2 = [10, 20, 30];
console.log(str2);//[ 10, 20, 30 ]
console.log(str2.join('|'));//10|20|30

join和split可以实现字符串和数组的互相转换

数组合并concat()

var str2 = [10, 20, 30];
var str1 = [90, 40]
console.log(str2);//[ 10, 20, 30 ]
console.log(str2.concat(str1));//[ 10, 20, 30, 90, 40 ]

也可以实现多个数组的合并

颠倒排列数组reverse()

var str2 = [10, 40, 30];
var str1 = [90, 40]
console.log(str2);//[ 10, 40, 30 ]
console.log(str2.reverse());//[ 30, 40, 10 ]

查找元素在数组中第一次出现的位置indexOf()

var str2 = [10, 40, 30];
var str1 = [90, 40]
console.log(str2);//[ 10, 40, 30 ]
console.log(str2.indexOf(40));//1

第二个参数表示，搜索的开始位置

函数

function add(x, y) {
    return x + y;
}
console.log(add(50, 100));

面向对象

var user = {
    name: "Jack",
    getName: function () {
        return this.name;
    }
};

console.log(user.getName());//Jack

类方法需要将名字提前

链式调用

var user = {
    name: "Jack",
    getName: function () {
        return this.name;
    },
    container: {
        frontEnd: "前端",
        backEnd: ["python", "java"]
    }
};

console.log(user.getName());//Jack
console.log(user.container.backEnd)//[ 'python', 'java' ]

Math对象

Math.abs()
Math.max() Math.min()
Math.floor() Math.ceil() 向下取整和向上取整
Math.random() 返回0-1之间一个伪随机数

返回任意范围的随机数函数：

1
2
3

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

Date对象

Date.now() 返回值为当前时间距离时间零点(1970年1月1日)的毫秒数
提供多种函数，来返回时间的分钟，小时，日期等等

DOM概述

文档对象模型(Document Object Model)是JavaScript操作页面的接口

Document对象

获取元素

document.getElementsByTagName()

获取符合标签名称的元素，返回值类似数组对象(HTMLCollection对象)

document.getElementsByClassName()

获取符合类名的元素

document.getElementsByName()

获取符合名字的元素

document.getElementById()

根据Id来获取元素，Id为唯一的，所以可以获取单独获取

document.querySelector()

接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果多个节点满足要求，则返回第一个

1	`var el1 = document.querySelector(".text");`

document.querySelectorAll()

返回所有节点

创建元素

document.createElement()

创建元素节点，并返回该节点

1	`var newdiv = document.createElement("div");`

document.createTextNode()

创建文本

1	`var content = document.createTextNode("我是文本");`

利用 appendChild() 方法可以将文本信息放进节点中

1
2
3

var newdiv = document.createElement("div");
var content = document.createTextNode("我是文本");
newdiv.appendChild(content);

这样newdiv就有文本了

document.createAttribute()

生成一个新的属性节点，并返回

1	`var id = document.createAttribute("id");`

对他进行赋值，可以对value 赋值

1 2	`var id = document.createAttribute("id"); id.value = "root";`

可以用 setAttributeNode() 方法来进行属性赋值

var text = document.createElement("p");
var id = document.createAttribute("id");
id.value = "root";
text.setAttributeNode(id);

这样text就是 <p id="root"></p>

属性

1	`<div class="box" id="root">Hello</div>`

获取id Element.id

1
2
3


var p = document.getElementById("root");
console.log(p.id);//root

也可以进行更改如

1
2
3

var p = document.getElementById("root");
p.id = "roots";
console.log(p.id);//roots

获取classname Element.className

1 2	`var p = document.getElementById("root"); console.log(p.className);//box`

添加删除判断class Element.classList

提供多个方法

add() 添加一个类
remove() 移除一个类
contains() 判断是否存在一个类
toggle 如果存在则删除，如果没有则添加

删除元素的属性 Element.removeAttribute()

1
2
3

var p = document.getElementById("root");
p.removeAttribute("class");

获取元素的标签名 Element.tagName

1
2
3

var p = document.getElementById("root");
console.log(p.tagName); // DIV

获取元素的父节点 Element.parentNode

1
2
3

var p = document.getElementById("root");
console.log(p.parentNode); // <body>...</body>

获取元素的子节点 Element.childNodes

1
2
3

var p = document.getElementById("root");
console.log(p.childNodes); // NodeList(1) [text]

获取元素的下一个兄弟节点 Element.nextSibling

1
2
3

var p = document.getElementById("root");
console.log(p.nextSibling); // <p>...</p>

获取元素的前一个兄弟节点 Element.previousSibling

1
2
3

var p = document.getElementById("root");
console.log(p.previousSibling); // <h1>...</h1>

改写/读取 Element.innerHTML

1
2
3

var root = document.getElementById("root");
root.innerHTML = "Hello World";
console.log(root.innerHTML);

第二行为更改root的内容，第三行为读取root的内容

将标签识别为字符串 Element.innerText()

类似 innerHTML 但只会识别为字符串，并不会识别为标签 ### Element获取元素位置

clientHeight
clientWidth
scrollHeight
scrollWidth
scrollLeft
scrollTop
offsetHeight
offsetWidth
offsetLeft
offsetTop

应用

1
2
3

console.log(document.documentElement.clientHeight); //获取屏幕高度
console.log(document.body.clientHeight);//获取页面高度
console.log(document.documentElement.scrolltop);//获取滚动高度

CSS操作

`HTML` 元素的style属性(不推荐)

使用 setAttribute 来设定属性

<body>
    <div class="box" id="root">Hello</div>
    <script>
      var root = document.getElementById("root");
      root.setAttribute("style", "background-color:red;");
    </script>
  </body>

元素节点的 `style` 属性(推荐)

<body>
    <div class="box" id="root">Hello</div>
    <script>
      var root = document.getElementById("root");
      root.style.backgroundColor = "red";
    </script>
  </body>

`CSSText` 属性

<body>
    <div class="box" id="root">Hello</div>
    <script>
      var root = document.getElementById("root");
      root.style.cssText = "background:red;";
    </script>
  </body>

事件处理程序

HTML事件处理
DOM0级事件处理
DOM2级事件处理

HTML事件处理

<body>
    <button onclick="demo()">点我</button>
    <script>
      function demo() {
        alert("Hello");
      }
    </script>
  </body>

缺点：HTML和JS没分开

DOM0级事件处理

<body>
    <button id="btn">点我</button>
    <script>
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        alert("你好");
      };
    </script>
  </body>

优点：HTML和JS分开

缺点：无法同时添加多个事件

DOM2级事件处理

<body>
    <button id="btn">点我</button>
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function () {
        alert("点我了");
      });
    </script>
  </body>

优点：可以添加多个事件

缺点；写起来麻烦

鼠标事件

click
dblclick
mousedown 按下时出发
mouseup 抬起时出发
mousemove 移动时出发
mouseenter
mouseleave
mouseover
mouseout
wheel

Event事件对象

Event属性

Event.target

返回事件当前所在的节点(点谁，返回谁)

<body>
    <button id="btn">点我</button>
    <script>
      var btn = document.getElementById("btn");
      btn.onmouseenter = function (event) {
        console.log(event.target); //<button id="btn">点我</button>
      };
    </script>
  </body>

Event.type

返回事件类型(如click)

Event方法

Event.preventDefault()

阻止默认行为，比如可以阻止链接跳转

<body>
    <a href="www.baidu.com" id="link">百度一下</a>
    <script>
      var link = document.getElementById("link");
      link.onclick = function (e) {
        e.preventDefault();//点击链接但不跳转
      };
    </script>
  </body>

Event.stopPropagation()

阻止事件冒泡，防止子元素点击来触发父元素

键盘事件

keydown
keypress
keyup

只有当有输入框的时候才有用 ( input 标签)

event对象

keyCode:唯一标识

可以用于检测是否打回车

<body>
    <input type="password" id="password" />
    <script>
      var password = document.getElementById("password");
      password.onkeypress = function (e) {
        if (e.keyCode === 13) console.log("回车了");
      };
    </script>
  </body>
//点击回车之后便输出"回车了"

表单事件

input事件

当 <input> <select> <textarea> 的值发生变化时触发

<body>
  <input type="text" id="username" />
  <script>
    var username = document.getElementById("username");
    username.oninput = function (e) {
      console.log(e.target.value);//实时读取数据
    };
  </script>
</body>

select事件

当 <input> <textarea> 里面选中文本时触发

<body>
  <input type="text" id="username" value="select me" />
  <script>
    var username = document.getElementById("username");
    username.addEventListener("select", function (e) {
      console.log("选中"); //选中时候显示选中
    });
  </script>
</body>

change事件

当 <input> <select> <textarea> 的值发生改变时触发。只有当全部修改完成时才会触发

<body>
  <input type="text" id="username" />
  <script>
    var username = document.getElementById("username");
    username.onchange = function (e) {
      console.log(e.target.value);//当修改完后触发
    };
  </script>
</body>

可以用于输入密码后按回车触发

reset事件、submit事件

发生在表单对象 <form> 上，而不是表单成员上

reset事件发生在表单重置时触发

submit事件发生在表单数据向服务器提交时触发

<body>
  <form action="你的服务器地址" ="myForm" onsubmit="submitHandle">
    <input type="text" name="username" />
    <button id="resetbtn">reset</button>
    <button>submit</button>
  </form>
  <script>
    var resetbtn = document.getElementById("resetbtn");
    var myForm = document.getElementById("myForm");
    resetbtn.onclick = function () {
      myForm.reset();//重置内容
    };
    function submitHandle() {
      console.log("2131");
    }
  </script>
</body>

当输入完内容并submit后，会在网址处多出来username=xxx，则是向服务器传递该参数

事件代理

子元素事件可以触发父元素的事件（事件会冒泡向上传播至父节点）

<body>
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    var list = document.getElementById("list");
    list.addEventListener("click", function (e) {
      console.log(e.target.innerHTML); //显示li标签内容
    });
  </script>
</body>

定时器

JS提供定时执行代码的功能，主要由 setTimeout() 和 setInterval() 两个函数完成。他们向任务队列添加定时任务

setTimeout()

setTimeout() 函数指定某个函数或某个代码，在多少秒之后执行。返回值为整数表示定时器的编号，用来取消这个定时器。

它接受两个参数，第一个参数为一个函数名或者一段代码，第二个为推迟执行的毫秒数

1	`var timerID=setTimeout(fun \| code, delay);`

1
2
3

setTimeout(function () {
      console.log("显示");
    }, 300);

setTimeout 使方法内部的 this 关键字指向全局变量，而不是所在对象

var name = "Jack";
var user = {
    name: "Ann",
    getName: function () {
        setTimeout(function () {
            console.log(this.name);
        }, 300);
    },
};
user.getName();//显示Jack

解决办法：

var name = "Jack";
	var user = {
	  name: "Ann",
	  getName: function () {
	    var that = this;
	    setTimeout(function () {
	      console.log(that.name);
	    }, 300);
	  },
	};
user.getName();//显示Ann

这样就显示Ann了

取消定时器(通过 clearTimeout() )

1 2	`var id = setTimeout(func, 1000); clearTimeout(id);`

setInterval()

为间隔一段时间，再触发。用法与前者完全一致

var i = 0;
setInterval(function () {
  i++;
  console.log(i);
}, 100);

防抖

在某个时间期限内，连续触发的事件，事件处理函数只执行一次

<head>
  <style>
    h3 {
      height: 400px;
    }
  </style>
</head>
<body>
  <h3>1</h3>
  <h3>2</h3>
  <h3>3</h3>
  <script>
    function debounce(fn, delay) {
      var timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
      };
    }
    function scrollHandler() {
      var scrollTop = document.documentElement.scrollTop;
      console.log(scrollTop);
    }
    window.onscroll = debounce(scrollHandler, 200);
  </script>
</body>

200毫秒以上再触发停止后才执行一次

节流

解决防抖时若用户一直触发操作但不停止则不执行的问题

<head>
  <style>
    h3 {
      height: 400px;
    }
  </style>
</head>
<body>
  <h3>1</h3>
  <h3>2</h3>
  <h3>3</h3>
  <script>
    function throttle(fn, delay) {
      var valid = true;
      return function () {
        if (!valid) {
          return false;
        }
        valid = false;
        setTimeout(function () {
          fn();
          valid = true;
        }, delay);
      };
    }
    window.onscroll = throttle(scrollHandler, 200);
    function scrollHandler() {
      var scrollTop = document.documentElement.scrollTop;
      console.log(scrollTop);
    }
  </script>
</body>

按住不停的动也会在200ms触发一次

应用场景实时搜索时可以当用户输入完再进行搜索，应用节流操作页面适配时，可以进行实时调整，也就是应用防抖操作

let命令

let 命令用来声明变量，类似 var ，但只在 let 命令所在的代码块内有效

var 关键字是函数级的作用域，只在函数内有效，函数外就无效了

let 关键字是块级作用域(花括号)

var name1 = "Ann"
{
    let name1 = "Jack"
}
console.log(name1);//显示Ann

在循环中方便使用

特点:1. 不能变量提升 2.不能重复声明

const命令

常量

直接在初始化赋值

块级作用域

对象解构赋值

用于简化面向对象的操作

可以解构赋值属性

var user = {
    name: "Jack",
    age: 20
}
const { name, age } = user;
console.log(name, age);//显示Jack 20

也可以解构赋值方法

1 2	`const { log } = console log("123")//输出123`

不要将一个已经声明的变量进行解构赋值

字符串扩展

遍历器接口 for of

var str = "Hello"
for (let i of str) {
    console.log(i);//逐个字符打印Hello
}

字符串模板

var href = "www.baidu.com"
var text = "百度"
var link = `<a href="${href}">${text}</a>`
console.log(link);//显示<a href="www.baidu.com">百度</a>

includes(), startsWith(), endsWith()

都返回布尔值

includes() 返回是否找到参数字符串
startsWith() 返回参数字符串是否在原字符串头部
endsWith() 返回参数字符串是否在原字符串尾部

var str = "Hello Word!"
str.startsWith('Hello')//true
str.endsWith('!')//true
str.includes('o')//true

三个方法都支持第二个参数，表示开始搜索的位置

repeat()

返回一个新字符串，表示将原字符串重复n次

1	`'x'.repeat(3);//xxx`

padStart(), padEnd()

用于自动补全长度

str1 = 'x'.padStart(5, ' '  )
str2 = 'x'.padEnd(4, 'ab')
console.log(str1);//ababx
console.log(str2);//xaba

trimStart(), trimEnd()

trimStart() 去除前边的空格
trimEnd() 去除后边的空格

at()

返回参数指定位置的字符

1 2	`var str = "Hello Word!" str.at(4)//o`

数组扩展

扩展运算符

...

1 2	`var arr = [10, 20, 30, 40] console.log(...arr);//10 20 30 40`

取代 `apply`方法

1 2	`var arr = [10, 20, 30, 40] console.log(Math.max(...arr));//40`

Math.max不能直接传数组进去，需要扩展，所以可以用 ...

合并数组

1
2
3

var arr1 = [10, 20, 30, 40]
var arr2 = [20, 30, 40, 60]
console.log(...arr1, ...arr2);//10 20 30 40 20 30 40 60

直接用 … 进行合并

Array.from()

将类数组转换为真正的数组

常见类数组： 1. arguments 2. 元素集合 3. 类似数组的对象

只能使用数组的读取方式和length属性，不能使用方法如push

arguments

function add() {
    console.log(arguments);
}
add(10, 20, 30)//[Arguments] { '0': 10, '1': 20, '2': 30 }

元素集合

<body>
  <h3>1</h3>
  <h3>2</h3>
  <h3>3</h3>
  <script>
    let titles = document.querySelectorAll("h3")
    console.log(titles);//NodeList(3)
  </script>
</body>

类似数组的对象

var user = {
    "0": "jack",
    "1": 20,
    "2": "男",
    length: 3
}
console.log(user["0"]);//jack

转换：

function add() {
    console.log(arguments);//[Arguments] { '0': 10, '1': 20, '2': 30, '3': 40 }
    var result = Array.from(arguments);
    console.log(result);//[ 10, 20, 30, 40 ]
}

add(10, 20, 30, 40)

另外两个同理

Array.of()

将一组值转换为数组

1	`console.log(Array.of(10, 20, 30));//[ 10, 20, 30 ]`

对象的扩展

属性名

属性名和属性值有相等的变量名称，可以直接省略

var name1 = "Jack"
var user = {
    name1,
    age: 20
}
console.log(user.name1);//Jack

成员函数

可以直接写函数

var name1 = "Jack"
var user = {
    name1,
    age: 20,
    getName() {
        console.log(name1);
    }
}
user.getName();//Jack

属性名表示法

var property = "Carrer"
var user = {
    [property]: "Docter",
    age: 20,

}
console.log(user);//{ Carrer: 'Docter', age: 20 }

对象扩展运算符

var z = {
    a: 10,
    b: 20

}
var n = { ...z }
console.log(n);//{ a: 10, b: 20 }

函数的扩展

基本用法用 => 代表function

1 2	`var fn3 = (x, y) => x + y console.log(fn3(2, 4));//6`

箭头前为参数，箭头后为返回值

有函数体

需要在大括号内写全

var fn3 = (x, y) => {
    var z = 10;
    return x + y + z;
}
console.log(fn3(2, 4));//16

如果返回值为对象

需要套一个括号

1	`var fn3 = () => ({ x: 10, y: 20 })`

应用

匿名函数

注意点

箭头函数中 this 指向上一层作用域的 this

var name1 = "Ann"
var user = {
    name1: "Jack",
    age: 20,
    getName() {
        setTimeout(() => {
            console.log(this.name1);
        })
    }
}
user.getName()//Jack

Set数据结构

Set数据中成员值都是唯一的

利用构造函数来进行构造

var s = new Set()
s.add(20)
s.add(40)
s.add(20)
console.log(s);//Set(2) { 20, 40 }

可以用一个数组进行创建

var arr = [10, 20, 30, 40]
var s = new Set(arr)

console.log(s);//Set(4) { 10, 20, 30, 40 }

去除数组,字符串重复值

var arr = [10, 20, 30, 40, 20, 50]
var s = new Set(arr)

console.log([...s]);//[ 10, 20, 30, 40, 50 ]

1	`console.log([...new Set(str)].join(""));//abdecf`

size属性

var s = new Set()
s.add(5)
s.add(50)
console.log(s.size);//2

delete()

var arr = [10, 20, 30, 40]
var s = new Set(arr)
s.delete(10)
console.log(s);//Set(3) { 20, 30, 40 }

has()

判断是否存在

1
2
3

var arr = [10, 20, 30, 40]
var s = new Set(arr)
console.log(s.has(20));//true

clear()

清空

var arr = [10, 20, 30, 40]
var s = new Set(arr)
s.clear()
console.log(s);//Set(0) {}

Promise对象

Promise是一种异步编程的一种解决方案，不需要一层层的回调函数

基本用法

var promise = new Promise(function (resolve, reject) {
    //异步操作代码
    if (/* 操作成功*/) {
        resolve(value);
    }
    else {
        reject(error);
    }
});
promise.then(function (value) {
    //success的回调函数
}, function (error) {
    //failure的回调函数
});

Ajax实操

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>My website</title>
</head>

<body>
  <script>
    const getJSON = function (url) {
      const promise = new Promise(function (resolve, reject) {
        //异步操作
        const handler = function () {
          if (this.readystate !== 4) {
            return;
          }
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        }

        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
      })
      return promise;
    }
    getJSON("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(function (data) {
      console.log(data);
    }, function (error) {
      console.log(error);
    })
  </script>
</body>

</html>

Async函数

async可将异步操作变为同步操作

function print() {
    setTimeout(() => {
        console.log("定时");
    }, 10)
    console.log("Hello");
}
print()//Hello  定时

setTimeout是异步的

function timeout(ms) {
    const promise = new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log("World");
            resolve()
        }, ms)
    })
    return promise
}
async function asyncPrint(ms, value) {

    await timeout(ms);
    console.log(value);
}
asyncPrint(100, "hello")//World hello

在异步操作函数前加入 await，以及函数前的async

可以使用异步变同步来实现多个具有依赖参数的接口的调用。比如B接口需要A接口的信息，则需要使其变成同步操作

Class

class Person {
    constructor(name1, age) {
        this.name1 = name1;
        this.age = age;
    }
    getName() {
        console.log(this.name1);
    }
}
var p = new Person("Jack", 20)
p.getName();//Jack

constructor 是构造函数

静态方法

加上一个 static 关键字，方法不会被实例继承，而是直接通过类调用

class Person {
    say() {
        console.log("hello");
    }
    static shout() {
        console.log("wooo");
    }
}
Person.shout();//wooo

静态方法有 this 则 this 表示的是类而不是实例

继承

通过 extends 关键字进行继承

class Person {
    constructor(name1, age) {
        this.name1 = name1;
        this.age = age;
    }
    getName() {
        return this.name1;
    }
}

class Student extends Person {

}

const student = new Student("John", 19);
console.log(student.getName());//John

子类在 constructor()中必须调用 super() 方法，否则报错。

class Person {
    constructor(name1, age) {
        this.name1 = name1;
        this.age = age;
    }
    getName() {
        return this.name1;
    }
}

class Student extends Person {
    constructor(name1, age, schoolNmae) {
        super(name1, age);
        this.schoolNmae = schoolNmae;
    }
    getSchool() {
        console.log("学校");
    }

}

const student = new Student("John", 19, "");
console.log(student.getName());//John
student.getSchool();

Module

export 命令显式指定输出的代码，再通过 import命令输入

1	`export var Hello = "hello"`

1 2	`import { Hello } from "./JS.js"; console.log(Hello);`

如果想起一个新名字，可以用 as

1 2	`import { Hello as Hello1} from "./JS.js"; console.log(Hello1);`

可以用 * as 来指定一个对象

1
2
3

export var Hello = "hello"
export var World = "World"
export var str1 ="wooo"

1 2	`import * as str from "./JS.js"; console.log(str.Hello);`

可以用 export default 来默认导出

1
2
3

export default function(){
	console.log("hahaha");
}

1 2	`import func from "./JS.js" func();`

一个文件只能有一个export default

学习之路

#前端

JavaScript学习之路

http://jack-constantine.github.io/2023/10/22/JavaScript学习之路/

作者

JackConstantine

发布于

2023年10月22日

许可协议

Vue学习之路上一篇

CSS学习之路下一篇

JavaScript学习之路

JavaScript学习之路

字符串方法

返回指定位置的字符charArt()

连接两个字符串concat()

截取字符串substring()

确定一个字符串在另一个字符串中第一个出现的位置indexOf()

去除字符串的空格trim()

分割字符串split()

数组方法

判断数组 Array.isArray()

在末端添加一个或多个元素push()

在末端删除一个元素pop()

删除第一个元素shift()

在第一个元素前加元素unshift()

以某个规则将所有数组成员连接为字符串join()

数组合并concat()

颠倒排列数组reverse()

查找元素在数组中第一次出现的位置indexOf()

函数

面向对象

链式调用

Math对象

Date对象

DOM概述

Document对象

获取元素

document.getElementsByTagName()

document.getElementsByClassName()

document.getElementsByName()

document.getElementById()

document.querySelector()

document.querySelectorAll()

创建元素

document.createElement()

document.createTextNode()

document.createAttribute()

属性

获取id Element.id

获取classname Element.className

添加删除判断class Element.classList

改写/读取 Element.innerHTML

将标签识别为字符串 Element.innerText()

CSS操作

HTML 元素的style属性(不推荐)

元素节点的 style 属性(推荐)

CSSText 属性

事件处理程序

HTML事件处理

DOM0级事件处理

DOM2级事件处理

鼠标事件

Event事件对象

Event属性

Event.target

Event.type

Event方法

Event.preventDefault()

Event.stopPropagation()

键盘事件

表单事件

input事件

select事件

change事件

reset事件、submit事件

事件代理

定时器

setTimeout()

setInterval()

防抖

节流

let命令

const命令

对象解构赋值

字符串扩展

遍历器接口 for of

字符串模板

includes(), startsWith(), endsWith()

repeat()

padStart(), padEnd()

`HTML` 元素的style属性(不推荐)

元素节点的 `style` 属性(推荐)

`CSSText` 属性

取代 `apply`方法