js基础总结
数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
- 一个变量声明，但未赋值，输出则是undefined
- 函数没有明确返回值，如果用变量接受，输出则是undefined
- Undefine + number = NaN
变量
变量的声明
-
关键字 let， const，var
let a = 100 // 作用域 从当前声明 到当前代码块结束（}）可读可写 const b = 100 // 作用域 从当前声明 到当前代码块结束（}）只读 var c = 100 // 作用域 全局作用域 var 会出现变量提升 在不声明变量之前c是undefined -
解构赋值
// 数组的解构 let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3 let [a, , b] = [1, 2, 3]; // a = 1 // b = 3 // 对象的解构 let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb'
变量的转换
// 字符串转number
parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
// number转字符串
let n = 1234567890;
var str1 = n + '';
var str2 = String(n);
var str3 = n.toString();
变量的类型判断
typeof 可查看变量类型，一个变量应只存一个类型的数据。
// Number
console.log(typeof 37);
console.log(typeof 3.14);
// 字符串
console.log(typeof 'bla');
// 布尔值 boolean
console.log(typeof true);
// Symbols symbols
console.log(typeof Symbol('foo'));
// 对象 object
console.log(typeof {
a: 1
});
object.isArray() // 判断是否是数组
// 函数
console.log(typeof
function() {});
变量命名规范
- 变量的第一个字符必须是字母、下划线_、或$_
- 其余的字符必须是 下划线 、字母、数字、或$
- 不能用js的关键字
- 驼峰命名法
字符串（String）
let str = "hello leo leo!"
let len = str.length // 获取字符串长度
str.substring(start,end) // 截取字符串从start位置到end位置，如果end缺省则到结尾
str.substr(start,length) // 截取字符串从start位置截取length个字符
str.indexOf('a',start) // 返回字符串中检索'a'第一次出现的位置, 若无则返回-1；start:开始的位置
str = str.replace("leo","world") // 字符串替换 字后str:"hello world leo!" 只能替换第一个子串
str = str.replace(/leo/g,"北京") // 字符串 正则表达式替换 字后str:"hello world world!"
数组
let arr = new Array()
arr.push(2) // 向数组的末尾添加一个或更多元素，并返回新的长度。
arr.pop() // 删除数组的最后一个元素并返回删除的元素。
arr = [1,4, 5, 6, 7, 8]
let retArr = arr.filler((item) => item < 5) //使数组中通过筛选条件((item) => item < 5)的的每个元素创建新数组。
retArr.forEach((item, index) => {
console.log(item, index) // forEach 就是遍历数组 item就是每一元素 index 就是每个元素的数组下标
})
let retIndex = retArr.findIndex((item)=> item === 1) // retIndex是返回满足条件的第一条元素对应的数组下标
let retData = retArr.find((item)=> item === 1) // retData 是返回满足条件的第一个元素retArr。
retArr.reverse() //数组的翻转
// 最后数组的复杂排序
函数
在开发中函数是什么
函数是用来实现一定功能的代码块
代码块就是包裹在花括号中所有代码
/**
* functionName 就是函数名
* @param {*} parameters 函数的传参
*/
function functionName(parameters) {
//执行代码块的所有代码
console.log(parameters)
}
/*
js函数声明就是以下面结构封装的代码块
关键字function 方法名(参数1， 参数2) {
代码块
}*/
函数声明后不会立即执行，当我们调用函数的时候才会执行, 下面做个示范
// 函数定义同时在js中也是函数声明 定义了一个获取全名的函数 两个参数 一个是姓， 一个名 返回值是全名
function getFullName(xing, ming) {
//执行代码块的所有代码
let fullName = xing + ming
return fullName
// 打印下名，但是下面的代码不会执行，因为上面执行了return
console.log(ming)
}
const xing = '韩'
const ming = '强'
const fullName = getFullName(xing, ming)
console.log(fullName)
// 函数能可以有返回值，也可以没有返回值， 当我们需要返回一个有效值，就可以通过return 返回有效值
// return 在函数的代码块中是终止代码块的向下执行， 也就是return下面的代码将不会再执行
// 比如说上面的打印名的代码
函数定义的三种方式
-
函数关键字(function)语句
function fnMethodName(x){ alert(x) } -
函数字面量(Function Literals)
var fnMethodName = function(x){ alert(x) } -
Function()构造函数
var fnMethodName = new Function(‘x','alert(x);') // 由Function构造函数的参数个数可变。最后一个参数写函数体，前面的参数写入参。
箭头函数
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，
一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return
// 第一种
() => return 'hello'
(a, b) => a + b
// 如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。 如下
() =>{
return {msg: 'hello'}
}
// 第二种
(a) => {
a = a + 1
return a
}
普通函数和箭头函数的区别
对象
内置对象
Math，Date，String，Array，Object，Promise，Symbol，Map ， Set，Class 类
-
Promise是一个对象，从它可以获取异步操作的消息
const promise = new Promise(function(resolve, reject) { // ... some code /* con 异步操作成功 */ if (con){ resolve(value); } else { reject(error); } }); // Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。 promise.then(function(value) { // success }, function(error) { // failure }); // then 成功的回调 catch 失败的回调 promise.then(function(value) { // success }).catch(function(error) { // failure }); -
Symbol表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
自定义对象
-
Json 对象
// json对象转json字符串 let obj = { id:1, age: 22, name: 'leo' } let str = JSON.stringify(obj); let str = obj.toJSONString(); // json字符串转 json对象 let obj = str.parseJSON(); // 将JSON字符串转换为JSON对象 let obj = JSON.parse(str); // 将字符串转换为JSON对象 -
创建自定义对象有几种方式
-
基于已有对象扩充其属性和方法
let obj = new Object(); obj.name = "zhangsan"; obj.sayName = function(name) { this.name = name; alert(this.name); } obj.sayName("lisi"); //这种方式的弊端：这种对象的可复用性不强，如果需要使用多个对象，还需要重新扩展其属性和方法。 -
工厂方式
function createObject() { var obj = new Object(); obj.username = "zhangsan"; obj.password = "123"; obj.get = function() { alert(this.username + ", " + this.password); } return obj; } var object1 = createObject(); var object2 = createObject(); object1.get(); // 采用带参数的构造方法： function createObject(username, password) { var obj = new Object(); obj.username = username; obj.password = password; obj.get = function() { alert(this.username + ", " + this.password); } return obj; } var object1 = createObject("zhangsan", "123"); object1.get(); // 让多个对象共享函数对象 这样，不用每个对象都生成一个函数对象 function get() { alert(this.username + ", " + this.password); } //函数对象只有一份 function createObject(username, password) { var object = new Object(); object.username = username; object.password = password; object.get = get; //每一个对象的函数对象都指向同一个函数对象 return object; } var object1 = createObject("zhangsan", "123"); var object2 = createObject("lisi", "456"); object1.get(); object2.get(); //优点：让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。 //缺点：对象和它的方法定义分开了，可能会造成误解和误用。 -
构造函数方式
// 构造函数的定义方法其实和普通的自定义函数相同。 function Person() { //在执行第一行代码前，js引擎会为我们生成一个对象 this.username = "zhangsan"; this.password = "123"; this.getInfo = function() { alert(this.username + ", " + this.password); } //此处有一个隐藏的return语句，用于将之前生成的对象返回 //只有在后面用new的情况下，才会出现注释所述的这两点情况 } //生成对象 let person = new Person();//用了new person.getInfo(); -
原型("prototype")方式
function Person() { } Person.prototype.username = "zhangsan"; Person.prototype.password = "123"; Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } var person = new Person(); var person2 = new Person(); person.username = "lisi"; person.getInfo(); person2.getInfo(); // 使用原型存在的缺点：1.不能传参数；2.有可能会导致程序错误。 // 如果使用原型方式来定义对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反映到其他对象当中。 // 单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。 -
动态原型方式
// 在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。 function Person() { this.username = "zhangsan"; this.password = "123"; if(typeof Person.flag == "undefined") { //此块代码应该只在第一次调用的时候执行 alert("invoked"); Person.prototype.getInfo = function() { //这个方法定义在原型中，会被每一个对象所共同拥有 alert(this.username + ", " + this.password); } Person.flag = true;//第一次定义完之后，之后的对象就不需要再进来这块代码了 } } var p = new Person(); var p2 = new Person(); p.getInfo(); p2.getInfo();
-
浏览器对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
// 下面两种写法是一样的
window.document.getElementById("blog");
document.getElementById("blog");
// 该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// 下面的方法要了解一下
window.open() //打开新窗口
window.close() //关闭当前窗口
window.moveTo() //移动当前窗口
window.resizeTo() //重新调整当前窗口
运算相关(循环, 条件等)
循环
-
for循环
let arr = [1,2,3,8,4] // for循环 for (let i=0;i<arr.length;i++) { console.log(i) // break 语句 可用于跳出循环。继续执行循环后的代码 // continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代 } /** 语法 for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } */ -
For/In 循环
let person={fname:"Bill",lname:"Gates",age:56}; for (x in person) // x 为属性名 { console.log(x) } -
while循环
let i = 0 while (i<5) { // 被执行的代码块 i++ } /** while (条件) { 需要执行的代码 } */ -
do/while 循环
do { // 被执行的代码块 i++; } while (i<5); /** do { 需要执行的代码 } while (条件); */ -
switch语句
switch(n) { case 1: //执行代码块 1 break; case 2: //执行代码块 2 break; //跳出switch语句 default: //与 case 1 和 case 2 不同时执行的代码 }
条件语句
if (condition)
{
//当条件为 true 时执行的代码
}
// 变量的比较 a > b a < b a === b
js的DOM操作
DOM是什么
DOM的常用方法
-
获取节点：
document.getElementById(idName) //通过id号来获取元素，返回一个元素对象 document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组 document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有） document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组 -
获取/设置元素的属性值：
element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值 element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值 -
创建节点Node：
document.createElement("h3") //创建一个html元素，这里以创建h3元素为例 document.createTextNode(String); //创建一个文本节点； document.createAttribute("class"); //创建一个属性节点，这里以创建class属性为例 -
增添节点：
elelment.appendChild(Node); //往element内部最后面添加一个节点，参数是节点类型 elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode -
删除节点：
```js
element.removeChild(Node) //删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
DOM的常用属性
-
获取当前元素的父节点 ：
-
- element.parentNode //返回当前元素的父节点对象
-
获取当前元素的子节点：
-
- element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点
- element.chilidNodes //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
- element.firstChild //返回当前元素的第一个子节点对象
- element.lastChild //返回当前元素的最后一个子节点对象
-
获取当前元素的同级元素：
-
- element.nextSibling //返回当前元素的下一个同级元素 没有就返回null
- element.previousSibling //返回当前元素上一个同级元素 没有就返回null
-
获取当前元素的文本：
-
- element.innerHTML //返回元素的所有文本，包括html代码
- element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
-
获取当前节点的节点类型：node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。
-
设置样式：element.style.color=“#eea”; //设置元素的样式时使用style，这里以设置文字颜色为例。
ES6 模块
export 与 import
模块导入导出各种类型的变量，如字符串，数值，函数，类。
-
导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
-
不仅能导出声明还能导出引用（例如函数）。
-
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
-
import 命令会提升到整个模块的头部，首先执行。
/*-----export [test.js]-----*/ let myName = "Tom"; let myAge = 20; let myfn = function(){ return "My name is" + myName + "! I'm '" + myAge + "years old." } let myClass = class myClass { static a = "yeah!"; } export { myName, myAge, myfn, myClass } /*-----import [xxx.js]-----*/ import { myName, myAge, myfn, myClass } from "./test.js"; console.log(myfn());// My name is Tom! I'm 20 years old. console.log(myAge);// 20 console.log(myName);// Tom console.log(myClass.a );// yeah!
as的用法
export 命令导出的接口名称，须和模块内部的变量有一一对应关系。导入的变量名，须和导出的接口名称相同，即顺序可以不一致。
/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
//使用 as 重新定义导出的接口名称，隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry
ES6 async
async function name([param[, param[, ... param]]]) { statements }
- name: 函数名称。
- param: 要传递给函数的参数的名称。
- statements: 函数体语句。
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。
async function helloAsync(){
return "helloAsync";
}
console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}
helloAsync().then(v=>{
console.log(v); // helloAsync
})
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
[return_value] = await expression;
//expression: 一个 Promise 对象或者任何要等待的值。
//返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
// 如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。
function testAwait (x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function helloAsync() {
var x = await testAwait ("hello world");
console.log(x);
}
helloAsync ();
// hello world
JavaScript原型和原型链
https://zhuanlan.zhihu.com/p/250813781
浙公网安备 33010602011771号