文章目录
推荐学习软件 sololearn
javascript 概括
保留关键字：
document.write()
<script language="javascript" type="text/javascript"> 默认值就是javascript
<script src="path-to-js"></script>
语句使用分号分隔，也可以不使用，换行表示语句结束
运算
双精度浮点数
等效false：0(zero), null, undefined, ''(empty string)
eval("10*20") 计算
eval('10'*5) -> 50
eval('1o'*5) -> NaN，Not a Number
eval(10/0) -> Infinity，除0非异常
eval(10.5%10) -> 0.5，浮点数取模
Increment ++ & Decrement --
Assignment += -= /= *= %=
x -= y += 9
Logical Operators && || !(AND, OR, NOT)
Conditional Operator variable = (condition) ? value1:value2
函数传参如果多于定义的参数，可以通过arguments[0],arguments[1]获得
传参少于定义的参数，则为undefined
三个弹窗函数：
alert('Hello World！) Alert Box 警告
prompt('Please enter your name', 'sb') Prompt Box 提示，获得用户输入，ok返回输入的文本，cancel返回null
confirm('Do you really want to leave this page?'), 确认，ok返回true，cancel返回false
Arrays
var arr = new Array('html','css','js')
var arr = new Array(3)
arr[0] = 'html'
arr[1] = 'css'
arr[2] = 'js'
var arr = ['html', 'css', 'js'] 推荐使用
arr.length
arr1.concat(arr2)
// 产生一个标准的对象object
var person = [];
person['name']='john';
Math Object
Math.properties:
Math.methods
异步函数
t = setInterval()
clearInterval(t) 结束执行
setTimeout()
The Date Object
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minuts, seconds, milliseconds)
计算开始时间 01 January, 1970 00:00:00
一天包含86,400,000毫秒
month 0到11对应1到12月
方法：
getFullYear()
getMonth()
...
document获取DOM元素
document.body.innerHTML = 'text'
属性innerHTML，表示属性
document.getElementById(id)
document.getElementByClassName(name)
document.getElementByTagName(name)
element.childNodes
element.firstChild
element.lastChild
element.hasChildNodes
element.nextSibling
element.previousSibling
element.parentNode
修改属性
ele.attr = 'new attr'
修改style
ele.style.backgroundColor = 'rad'
创建元素
element.cloneNode()
document.createElement(element)
document.createTextNode('text')
添加元素
element.appendChild(newNode)
element.inserBefore(node1, node2)
删除元素
parent.removeChild(child)
var child = document.getElementById('p1')
child.parentNode.removeChild(child)
替换元素
element.relaceChild(newNode, oldNode)
Events
两种方法：
<button onclick="show()">Click</button>
<script> function show(){};</script>
<button id="btn">Click</button>
<script> var x = getElementById('btn');
x.onclick = function(){};
window.onload = function(){};</script>
Event Listeners
element.addEventListener(event, function, useCapture:boolean)
第三个参数可选,设置Event Propagation事件传播, 默认为false，即bubbling
- bubbling inner -> outter
- capturing outter -> inner
删除事件listener element.removeEventListener(event, function)
IE Explorer 使用document.attachEvent()
Form Validation 表单验证
<form onsubmit="return validate()" method="post">
onsubmit="return false"可以阻止表单提交
ES6 概括
let & const 定义变量
不会声明提升，都是块级别的作用域，const为常量不可更改
for...of
for...in
箭头函数
形参定义，…nums搜集多余的参数组成数组，代替arguments
支持参数默认值
spread operator
传参时，参数解构
var nums = [1, 2, 3]; sum(...nums)
数组解构
var arr = [1, 2]; var newarr = [0, ...arr]
对象解构，合并对象
var obj = {foo: 'bar'}; var newobj = {...obj}
模板文字，插值，使用反引号
${a+b}
ES6对象
- 简化,省略value，省略function关键字
var a = 10; obj = {a, grow(){this.a=20} - 计算的属性名称
var a = ‘abc’ obj = {[abc${a}]:10, [a+‘abc’]:20} - 合并对象属性Object.assign({}, obj1, obj2, …)
也可以用来复制对象newobj = Object.assign({}，obj)
数组解构
let [a, ,b=10] = [1, 2, 3];
let [c, d] = [d, c];
let [a, ...b] = [1, 2, 3];
对象解构
let {h, s} = {h:100, s:200};
// 预定义，默认值
let h, s; ({h, s=20}={h:100, s:200};
// 改名
let {h:foo, s:bar}={h:100, s:300};
类
class Rectangle{
constructor(height, width){
this.height=height;
this.width=width;
}}
类表达式
匿名类表达式
类方法，不用function关键字
get 类方法，即属性
static 类方法，只有类自己可以调用
继承
class Dog extends Animal{}
子类constructor必须调用super()方法
子类实例使用super.method()调用父类方法
Map类
new Map([iterable])
let map = new Map([['k1', 'v1'], ['k2', 'v2']])
key支持任何值包括对象
Set类
new Set([iterable])
let set = new Set([1, 2, 3, 4])
元素唯一，可以用来去重，元素支持任何值包括对象
Promise类
模块Module
迭代器Iterables和生成器Generators
Symbol.iterator, 属性实现迭代器，对象属性 for…of实现的基础
let myiterobj = {
[Symbol.iteraor]: function* (){
yield 1;yield 2; yield 3;
}
}
console.log([...myiterobj])
生成器函数
function* yield
gen = genfunction();
gen.next().value;
gen.next().done
数组函数
map, filter, forEach, reduce 累加
内建函数
数组函数：find(func) 代替fiter
字符串重复：‘foo’.repeat(3) 代替 Array(4).join(‘foo’)
字符串搜索：startWith, endWith, includes(‘substring’, start_index)
====
相关技术
HTML DOM: HTML Document Object Model 文档对象模型,html的API,javascript利用DOM动态的修改网页
最早诞生的动态网页技术有ASP, JSP, PHP
AJAX Asynchronous Javascripf And XML (json)
异步请求,动态的从浏览器发起请求到服务器端,服务器端将数据封装成XML(JSON)返回给浏览器,浏览器使用JS,
把内容加入到DOM中,局部渲染就可以了.
浏览器内核(引擎engine):提供html,css,图像渲染引擎,提供DOM编程接口, 提供JavaScript引擎(浏览器内建对象)
CSS (Cascading Style Sheets)
HTML(Hyper Text Markup Language)
前端网页三剑客: Dreamwea, Firework, Flash
jQuery JS框架
Nodejs 服务器端运行JavaScript的开源,跨平台运行环境,使用npm软件包管理器
React
Vue.js
ECMA Script
开发文档: MDN, Mozill Developer Network
执行环境Visual Studio Code 安装Node exec
F8运行,F9停止
ES语法基础
单行注释//
多行注释,行内注释/*comment*/
变量
先定义, 再初始化, 再用赋值,
var : 作用域以函数定间,var可以提升定义作用域, 相当于将变量定义放在最开头, 函数内的var变量是局部作用域,for语句等内的var作用于外面
var：定义的变量,可以被重复定义，即覆盖
let：严格规定块作用域局部变量
隐式全局变量: 不带关键字定义的变量, 函数内的局部作用域, 函数被调用, 外部也可以访问到
const: 常量必须定义的同时被赋值
数据类型
动态的弱类型语言
number, boolean, string, null, undefined, boject类型(基本类型的复合类型,容器), symbol
typeof(var) 查看变量类型
隐式类型转换:
operator + 字符串优先,有string都转换成string, 没有string,转成等效数字,
比较大小相等, 有数数值优先转换成数值, 300 和 '2a’比较永远都是false
undefined转数字为NaN(特殊的数字类型), NaN + 非字符串还是NaN
减少隐式类型转换的使用
字符串string
‘string’, “string”,string multiline反引号支持插值${var or statement}
操作方法
string.charAt(index) 超出范围返回空字符串’’
string[index] support negative index,超出范围返回undefined
string.toUpperCase()
string.concat(otherStr) concat 同+号
str.slice(start[, end]) slice 切片, 没有step
str.split(’.’) -> array
str.substr(from_index, length) ->string
str.indexOf(substr) => number, index
str.replace(substr, repl)
str.trim() trim 修剪 strip space char
数值类型number,
JavaScript中所有的数都是双精度浮点数,double,使用64位存储一个数
Number.MAX/MIN_VALUE查看JS所能表示的最大小值
大于最大值表示为Infinity,小于最小值表示为-Infinity
NaN(not-a-number) undefined转数值
可以精确的整数范围是正负2**53,
科学计数法1E3,2e-2
parseFloat(str) str -> double
parseInt(str) str -> int
Number.isFinite() 是否unInfinity
Number.isInteger()
Number.isNaN()
Math方法…
解构
列表解构: var parts = [1, 2, 3]; x, y, z = …parts 错误的写法, 只有参数结构才能用…,
x,y,z是逗号表达式
参数解构: f(…parts)
数组封装解构:
const [a, b=4, c] = parts # 可以预设值
const [,a,] = parts # 取第二个
const [a, …b] = parts # b获得剩余的元素组成Array, Rest element must be last element
元素一一对应, 多或者少都不会抛异常
对象解构
obj = {a:100, b:200, c:[300, 400]}
let {a, b, c} = obj # key必须一致
let {a:m, b:n=10, c:[o, p]} = obj # 重命名, 初始化变量
Array操作
push(…items)
pop()
map(fn) 返回新的Array
filter(fn) 返回新的Array
foreach(fn) 无返回值,也不就地修改
object操作
Object.keys(obj)
Object.values(obj)
Object.entries(obj) 二元Array
Object.assign(target, …sources) 将sources对象属性都合并到target中,同名属性后覆盖
Object.preventExtensions(fixed);
Object.defineProperty(obj, ‘x’, {value: 42, writable: false});为变量添加属性
obj.constructor 返回实例的构造函数,
运算符
比较运算符
==,!=宽松相等,会进行类型转换
===,!==严格相等,不进行类型转换,推荐使用
逻辑运算&& || !与或非
位运算& | ^ ~ << >> 异或:相同为0,不同为1
三元运算符
(if_condition)?true_statement:false_statement
逗号运算符,, 多个表达式写在一起共用一个关键字 let a=4, b=5, c=(a<b)?6:3
逗号表达式, 逗号分隔, 表达式分别求值计算, 返回最后一个表达式结果
instanceof 是否是某个类的实例, 实例对象都是new方法产生的
typeof 对象所属的类型
delete 用于删除对象的属性,删除Array的元素(被删除后,响应位置为空),也可以删除隐式定义的变量(其实是全局对象的属性)
只有对象类型有属性,可以用.,访问或添加属性.length查看对象长度
in 判断属性是否在对象内
运算符优先级与python略有不同，使用括号
控制语句
条件的false等效： false,undefined,null,0,NaN,''
语句statement
switch (expression){
case label_1:
statements_1:
\[break;]
...
default:
statements_def
}
switch条件满足,如果没有break,后面的case 语句不再匹配条件,顺序执行,直到遇到break退出
for(initialExpression; condition; incrementExpression){
statement;
}
while (condition){
statement;
}
do{
statement;
}while (condition)
for (variable in object){
statement; #每一次获得的是属性,而非值
}
for (variable of object){
statement; #每次迭代是属性值, obj必须可迭代,e.g. array, ES6新语法
}
函数
生成器函数定义function*关键字, yield, return
生成器对象.next()函数,返回一个yield或return的对象,这个对象有两个属性
value和done,yield的done属性是false, return的done属性是ture
定义: function name(args,…) {statement}
函数表达式:const add = function fn(x, y){statement}
匿名函数: const add = function (x, y) {statement}
函数会声明提升,但还是要求先定义再调用,函数表达式用var关键字会声明提升
箭头函数
(args) => {statement}
(args) => expression // 等价于 (args) => {return expression}
const add = (x, y) => x+y
箭头函数使用call,applay,bind 方法无效
箭头函数的this是函数所在块的this,如果所在块无this值调用,就是{}
普通函数无this就是global,用上面三个方法时,空或等效false,this还是global
闭包
function counter(){
let n = 0
return function _counter(){
return ++n
}}
参数定义
只有位置参数, 可以有默认值, 有默认值参数尽量放后面
可变参数(rest parameters):...args, 同python,收集参数组成Array
传参
x = 5: 赋值表达式, 返回x的值, 并非关键字传参
参数解构...args
多传入的参数被忽略, 少传参数, 默认为undefined
关键字arguments,ES6之前表示,表示传入的所有参数, ES6之后推荐使用...args获得
函数不写return,默认返回undefined,
逗号表达式取最后一个表达式的值
严格模式:
use strict,放在函数内首行,或者js脚本首行,强制必须使用关键字var, let, const定义变量.strict模式下this,没有就是undefined，class内默认就是strict模式,
对象模型
JavaScript是一种基于**原型(Prototype)**的面向对象语言,而不是基于类的面向对象语言
一个对象有另一个对象生成，
Obj.prototype.attr = value, 设置原型属性，由该原型对象生成的对象都可以访问到该属性
原型类定义:
function Car() {}
Car.prototype.color = "blue";
Car.prototype.showColor = function() {
alert(this.color);};
var oCar1 = new Car();
定义类
字面声明: var obj = {property_1: value_1,...}, key如果是string,可以省略引号
简化定义: key1 = value1; key2 = value2; let obj = {key1, key2}
ES6之前的构造器(即函数)创建类:
function Point(x, y) {this.x = x; this.y = y;}
变量命名:_$字母数字,不能数字开头
约定函数名小驼峰,类名大驼峰
使用
new创建一个类实例new Point(0,0),
不加new, 相当与普通的函数调用,普通函数中不设置this值,默认表示global
使用构造器的call方法继承,可以将不同的this传入,第一个参数
function Point3D(x, y, z) {Point.call(this, x, y)}
apply方法,其他参数使用Array出入,Point.apply(obj: this, [x, y])
bind方法, ES5引入,Point.bind(obj: this, x, y), 只是bind 不会调用, 返回一个新的function
新的function被调用是默认使用bind的this和参数,相当与偏函数,固定了this和参数
如果用new，function中,this变成新创建的obj,参数还是bind的参数
call, apply, bind第一个参数都表示this, 严格模式下this就是传入的值, 包括null, undefined,非严格模式表示global, 严格模式下直接调用函数, 其中的this就是undefined,
箭头函数不能作为构造器, function才可以, 箭头函数被调用时,this就是当前作用域的this,而不是global
ES6中加入class
class 代码块中强制使用use strict模式
类定义, 类定义不会做声明提升
class Point [extends parent] {
constructor(x, y){ // constructor只能有一个
[super(x, y)] // super,调用父类构造器,有继承必须调用super方法
this.x = x; // 子类获得父类的所有属性
this.y = y; // 调用父类method,使用super.method()
}
[static] method(){statements;} # 类属性,没有私有属性
}
method中this默认都是当前实例
static method()方法,只有cless自己可以调用,实例不可调用,其中this是类的构造函数,即类本身
get x(){} 设置属性,只能访问, 类似prototype设置的属性
set x(key){} 表示属性值可以设置
z(){} 普通method, 类似prototype设置的方法
类表达式
let Rectangle = class Cls {};
匿名类: const Cls = class {}
高阶对象,高阶类,定义可复用的Mix_in类,产生不同继承的类
const Mixcls = (sup) => class extents sup{
constructor(...args){
super(...args)}}
obj.constructor 返回对象的构造函数(javascript的类)
异常
抛出异常:
throw new Error('new error');
throw 'str'; //基本类型都可以抛出
捕获异常:
try{}catch(error){}finally{}
ES6模块化
导出
export 关键字，标记要导出的变量, 或者使用export {a, b, c...}批量导出
export default 默认导出, 只能有一个,可以没有名称,不能带var,let,counst关键字
导入
import deafault, {a, b, c} from “./exp”; // 默认值只有一个,在{}之外
或者:import * as exp from "./exp";
使用:exp.a, exp.default 相当与加前缀使用,避免和本模块变量名冲突
模块语法太新,引擎不兼容,使用转译工具,转换成ES5版本语法
babel: 官网http://babeljs.io
预设: 设置转义规则,
安装：
babel-preset-env(根据环境自己选择), babel-preset-es2015, babel-preset-react
babel-preset-stage-\[0,1,2,3]
离线转义安装配置
步骤，在项目目录中:
- npm init # 初始化配置,生成配置文件package.json, entry和point 为要转译的文件
- 配置npm仓库源
echo “registry=https://registry.npm.taobao.org” > .npmrc # - 安装babel包, savedev表示下载的包开发时使用,自动将信息加入package.json,
npm install babel-core babel-cli --save-dev # - 修改package.json,
修改scripts部分:“build”: “babel src -d lib”,
表示从src目录中转译后的文件输出到lib目录, - 准备目录,
src和lib - 配置babel, 创建.babelrc,
echo -e '{\n"presets": [“env”]\n} - 安装依赖
npm install babel-preset-env --save-dev - 执行转译
npm run build
Promise
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值
function imgLoad(url){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('do sth...');
resolve('ok...');
}, 3000);
console.log('END');
})
}
setTimeout(handler, timeout) 延迟执行, 内部handler函数无法使用外部参数,且无返回值void
setInterval(handler, timeout) 类似setTimeout, 按间隔时间循环的执行
imgLoad(url).then(
(value) => {
console.log(1, myPromise, value)
return Promise.reject(value + '*')
},
(reason) => console.log(2, myPromise, reason)
).catch(reason => {
console.log(reason);
return Promise.resolve(reason + '*')
}).then(value => {
console.log(value)
console.log('END')
})
console.log('FIN')
new Promise( function(resolve, reject) {…} /* executor*/ );
resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败
executor内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled，或者在发生错误时将它的状态改为rejected, 并且将信息传递, return void.
一个 Promise有以下几种状态:
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
promise_obj.then((value) => {}, (reason) => {}) /* onfulfilled, onrejected*/
promise_obj.catch((reason) => {}) /* 内部调用的时then(undefined, onrejected)
onfulfilled,和onrejected方法分别接收resolve和reject函数传递的信息
then和catch方法如果返回一个promise对象,可以链式编程
Promise.all(iterable) -> promise_obj,
所有iterable中promise都成功, 所有返回值的数组作为返回值,
有一个失败, 就将第一个触发失败的promise对象的错误信息作为它的失败信息返回
Promise.refection(reason)
返回一个状态为失败的Promise对象,并将给定的错误信息传递给对应的处理方法
Promise.resolve(value)
返回一个状态由给定value决定的Promise对象。如果该值是一个Promise对象，则直接返回该对象；如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
Promise.race(iterable)
当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
3284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
