javascript基础


DOM 文档对象模型

document 节点
doucment.cookie 获取cookie
document.links 获取所有的a
document.URL 获取当前URL
document.location 当前网站位置信息
document.title 当前文档标题
doucment.querySelector 取到元素
document.getElementsByTagName 取标签列表 支持切片
document.getElementsByClassName 取class列表
document.getElementByName 取name=
document.getElementByID 根据ID取元素

NODE节点

nodename 节点名字
nodevalue 节点值
textcontent 文本内容
nextsibling 同级别下一个节点
previousSibling 同级别上一个节点
firstchild 子节点第一个
parentNode 父节点
childnodes 所有子节点

var h4 = document.createElement('h4')
h4.textContent = '这是h4'
div.append(h4) 追加元素

clonenode 克隆节点
div.parentNode.removeChild(div) 删除节点
contains 判断节点是否存在

ELement 元素

el.id 取id
el.tagName 标签名
el.attributes 取属性
el.classname 取类名字
el.classlist 类列表
var attr = document.getElementById('属性')
attr.classList.toggle('hljs', true) 如果是true就添加类
dataset 获取data属性下的值
innerHtml 获取当前节点下html代码
outerHtml 获取当前节点html
style 获取样式
closest 最近的节点
matches(匹配元素返回一个布尔值)

属性

attributes 取属性
id
name
value
href
img.src
for 改为htmlfor
class 改成classname
getAttribute 获取属性
code.setAttribute('class', 'bg') 添加属性
hasattributes 判断当前元素是否有这个属性

CSS样式

setAttribute('style', 'color:red;background-color:green') 设置样式
el.style.各种属性 = 值
el.style.cssText 设置css
el.style.lenght 长度
el.style.item() 取第几个
el.style.removeProperty('color') 删除
el.style.setProperty('color', 'red')添加
window.getComputedStyle(el, 'before').content

ES6 内置类型number和boolean

0o 八进制
0x 16进制
Number.MAX_VALUE 最大值
Number.MIN_VALUE 最小值
Number.NAN 不是一个数字
Number.NEGATIVE_INFINITY 负无穷
Number.POSITIVE_INFINITY 正无穷
typeof 判断类型
parseInt 转成数字
parseInt(10101, 2)二进制转10进制 最大36进制
null 空值
undefined 未定义
toExponential()科学计数法
toFixed 四舍五入为指定小数位数的数字
toPrecision 可在对象的值超出指定位数时将其转换为指数计数法
tostring 转字符串
valueOf 返回原始值
toLocaleString('') 方法可根据本地时间把 Date 对象转换为字符串,并返回结果
isFinite()是否是数字
isNAN 是否不是数字
parseFloat()转成小数

布尔类型

true
false
== 判断值不判断类型 === 严格相等
false 包含 undefined null false 0 NaN 空字符串

ES6 字符串

表示方法 ‘ ’或“ ”
\n 连接多行
`${变量}` 拼接
charCodeAt()转字符编码
concat()拼接
fromCharCode 从字符编码转字符串
indexOf()查字符索引
localecompare比较字符大小
slice切片
split分割字符串
toLocaleLowerCase 转小写
toLocaleUpperCase 转大写
includes()判断是否包含某个单词
startswith 对比开头
endwith 对比结尾
repeat 复制多遍
padend 末尾补位
padstart 开头补位

Null和undefined

null 值为空 不是全局表示符
undefined 全局标识符 为定义

Symbol 符号 一种新的类型 用于对象的属性名
let s = Symbol('name')
let obj = {}
obj[s] = 'dongli'
s不能再给新的Symbol值

set 和 map

map: key 支持多种类型,按插入顺序排序
var m = new Map()
增加 m.set('key', 'value')
m.size 长度
m.keys 查看k
m.get 查看值
const 常亮赋值
const m2 = new Map([[1,2],[3,4]]) 添加多个值

var s = new Set([1,2,3,4]) 创建
s.add(5) 添加

object 对象

是一种无序的k v组成, 是属性的容器,无类型,可以嵌套,属性动态添加,属性都是字符串 Symod

var obj_a = {}
如果Key包含-使用obj[ ]
prototype 原型链
hasOwnProtoerty判断有没有这个属性
delete 删除属性

array-like 可以存储不同的数据类型,长度可变, 索引可以是数字,可以嵌套

var alist = [ ] 声明数组
var alist = new Array() 声明数组
length 长度
delete 删除 值变为空
pop 删除
concat 数组拼接数组
join 数组拼接字符串
push 加数据
reverse 倒序
sort 排序
sort((a, b)=> a-b)
shift 从前面移除东西
unshift 从前面插入
slice 切割
splice 删除部分 第三个参数可以在删除的部分后面加东西

逻辑判断语句

算术运算符 + - * 、 ++ --
赋值运算符 = += -+ *= /= %=
比较运算符 == === != !== > < >= <=
逻辑运算符 && || !
判断 false undefined null 0 NaN 空字符串
条件运算符 if else (a>b)? x:y

循环语句

break continue
do while
while
switch(){case a: xxx; break}
for
for(in){ }
for(of){ }

函数与方法

函数声明+参数
function fun(name){
console.log(`Hi ${name}!`);
}

fun('dongli')

匿名函数 立即执行

(function(name){
console.log(`Hi ${name}!`);
})('dongli')

匿名函数赋值给变量

var sayHi = function(name){
console.log(`Hi ${name}!`);
}

匿名函数赋值给对象

var obj= {}

obj.sayHi = function(name){
console.log(`Hi ${name}!`);
}

obj.sayHi('dongli')

--------------------------

obj.upperHi = function(){
return this.name.toUpperCase()
}

obj.name = 'dongli'
console.log(obj.upperHi());

函数作为参数

let arr = [1,2,3,4,5]

let newArr = arr.map(function(x){return x*2});
console.log(newArr);

-------------------

let andArr = arr.reduce(function(x, y){return x*y})
console.log(andArr);

函数作为返回值

function calcArea(w, h){
return w*h
}

function rectInfo(w, h){
console.log(`w=${w} h=${h}的面积为`);
return calcArea;
}

var w = 4;
var h = 5;

area = rectInfo(w,h)(w,h);
console.log(area);

默认值

function user(name, password='123456'){
if(password == '123456'){
return name+' OK'
}else{
return name+' error'
}
}

var res1 = user('dongli')
console.log(res1);

rest 剩余参数

function sum(a, b){
console.log(arguments);
return a+b
}

sum(4,8)

function newSum(...all){
console.log(all);
return all[0]+all[1]
}

函数的属性和方法

var otherSum= newSum;
otherSum(1,2,3,4)
console.log(otherSum.name);
------------------------------------
console.log(sum.length)
console.log(sum.toString());

解构赋值和作用域

let[a,b,c] = [1,2,3]
console.log(a,b,c);

let[x,,y] = [1,2,3]
console.log(x,y);

let[k,v='b'] = ['1']
console.log(k,v);

let{foo, baz} = {foo:'aaa', baz:'bbb'}
console.log(foo);
console.log(baz);

const [aa,bb,cc,dd,ee] = 'hello'
console.log(aa,bb,cc,dd, ee);

let{length:len} = 'hello'
console.log(len);

// 用于函数
function example(){
return[1,2,3]
}

var h,j,i = example()
console.log(h,j,i);

function example1(){
return {name:'dongli', age:'17'}
}

let{name, age} = example1()
name;
age;

作用域

//全局变量 在函数之外定义的变量,函数的内部可以访问

var a = 100;
console.log(a);

function num(){
console.log(a);
}

num()

// 局部变量:在函数内部定义的变量,只能在函数内部访问,外部无法访问

function num1(){
var b = 200;
}

// console.log(b);

function fun(){ //嵌套作用域
var a = 1;
function fun1(){
console.log(a);
}
fun1()
}

fun()

// 函数执行时所在的作用域,是定义时的作用域,而不是调用时的作用域
var v = 100;

var k = function(){
console.log(v);
}

function x(){
var v = 200;
k();
}

x()

//块级作用域 let声明的变量只在代码块有效,不存在变量提升,不能重复声明

function f5(){
let a = 10;
if(true){
let a = 20
}
console.log(a);
}

f5()

// const 不能重复赋值

const c_name = 'dongli'
// const c_name = 'dongli'

// 变量提升

var tmp = new Date();
function ff(){
console.log(tmp);
if(false){
console.log(tmp);
var tmp = 'hello'
}
}

ff()

// var 的for 循环, 循环用let

for(var i=0; i < 'hello'.length; i++){
console.log(i);
}

console.log(i);

// this 直接调用的函数 this为全局对象 被某个对象调用的函数 this为当前对象

function obj(){
console.log(this);
}

obj()

var obj_this = {name:'dongli'}
obj_this.do = function(){
console.log(this);
}

obj_this.do()

// 闭包

function wrap(start){
return function wrap1(){
return start++;
}
}

res = wrap(1)
console.log(res());
console.log(res());
console.log(res());

正则表达式

// 定义 /pattern/attributes 或创建RegExp语法 new RegExp(pattern, attributes)
// 参数 attributes 是一个可选的字符串,包含属性'g','i','m', 分别用于指定全局匹配,区分大小写,多行匹配。
// 用途 验证表单, 处理字符串

re = /(dongli)/g;
s = 'hello dongli is dongli dongli';
console.log(s.match(re));

Prototype 和 class

原型链添加属性

Object.prototype.userInfo = 'dongli'
obj = {}
console.log(obj.userInfo);

原型链添加方法

function Point(x,y){
this.x = x;
this.y = y;
}

Point.prototype.toString = function(){
return this.x+this.y
}

var p = new Point(5,7)
console.log(p.toString());

Class

class P{
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return this.x + this.y;
}
}

var p = new P(1,2)
console.log(p.toString());

箭头函数

var f = v => v
console.log(f(1));

var f = () => console.log(1);
f()

var f = (x, y) => {console.log(x*y);}
f(2,3)

var isTrue = x => x%2 ==0
console.log(isTrue(23));

// 数组的一些箭头函数

var res = [1,2,3,4,5].filter(x => x>3)
console.log(res);

var res = [1,2,3,4,5].forEach((x,y) => console.log(y,x))

var res = [1,2,3,4,5].every(x => x>3)
console.log(res);

var res = [1,2,3,4,5].some(x => x>3)
console.log(res);

var res = [1,2,3,4,5].map(x => x*2)
console.log(res);

var res = [1,2,3,4,5].reduce((x,y) => x+y)
console.log(res);

// 箭头函数作用域 没有自己的this 他的作用域是父作用域

function Timer(){
this.s1 = 0;
this.s2 = 0;

setInterval(() => this.s1++, 1000);
setInterval(function(){
this.s2++
},1000)
}

var Timer = new Timer();
setTimeout(() => {
console.log(Timer.s1);
}, 3100);

setTimeout(() => {
console.log(Timer.s2);
}, 3100);

Promise

// Promise 是异步编程的一种解决方案, 比传统的解决方案-回调函数和事件更合理强大。Promise是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,Promise 是一个对象,从他可以获取异步操作的消息,Pormise提供统一的API,各种异步操作都可以用同样的方法进行处理,把未来将用到的值当作一等对象,返回两种状态成功和失败。

// Promise 有三种状态, pending(进行中), fulfilled(成功), rejected(失败) 一旦状态改变就再也不会变了,会一直保持这个结果,称为resolved

// 对延时和异步进行控制

// async 函数声明 async function foo(){} 表达式 const foo = async function (){} 定义成对象方法 let obj = {async foo(){}} 箭头函数 const foo = async() => {} 正常 then fulfilled 错误 catch rejected 使用await异步得到结果和错误

// 定义
function asyncFunc() {
return new Promise(
function (resolve, reject) {
let result1 = '我是第一波结果!'
resolve(result1)
let result2 = '我是第一波错误!'
reject(result2)
}
)
}

// 调用
asyncFunc()
.then(result => {
console.log(result);
console.log('end 1');
})
.catch(error => console.log(error))

function asyncF() {
return new Promise(
function (resolve, reject) {
let res1 = '这是第二波结果!'
resolve(res1)
let res2 = '这是第二波错误!'
reject(res2)
}
)
}

// 链式调用
asyncFunc()
.then(res => {
console.log(res);
return asyncF()
})
.then(res => {
console.log(res);
console.log('end 2');
})
.catch(err => console.log(err))

// 同时调用
Promise.all([asyncFunc(), asyncF()])
.then(([res1, res2]) => {
console.log(res1);
console.log(res2);
console.log('end all');
})
.catch(([err1, err2]) => {
console.log(err1);
console.log(err2)
})

// http get

function httpGet(url) {
return new Promise(
function (resolve, reject) {
const request = new XMLHttpRequest();
request.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}

request.onerror = function () {
reject(new Error(this.statusText))
}
request.open('get', url)
request.send();
}
)
}

let url = 'http://www.baidu.com'

httpGet(url)
.then(value => console.log(value))
.catch(err => console.log('出错了' + err))

// 延时执行

function delay(ms){
return new Promise(
(resolve, reject) => {
setTimeout(resolve, ms)
}
)
}

delay(5000)
.then(() => console.log('start...'))
.catch(() => console.log('error'))

// async

function delay1(){
return new Promise(
(resolve, reject) =>{
setTimeout(() => resolve('done'), 2000)
}
)
}

async function main(){
const x = await delay1();
console.log(x);
}

main()


最后更新于:2018-12-19 15:08:51