首页  思维导图  详情

Javascript

2022-10-27 20:51:28   1  举报





AI智能生成

快速入门思维导图

读书笔记

前端

作者其他创作

大纲/内容

初识

历史：网景公司

用来界面交互

快速入门

基本语法

var

alert（' '）;

console.log(x);

prompt（'输入框：值'）;

数据类型和变量

数据类型9种

1.Number

2.字符串

3.布尔值

4.数组

5.Null

6.Undefined

7.Symbol

8.对象

9.函数

变量

var动态语言

int静态语言

let

循环

for循环

for（it in arr）{}循环

缺陷：新加属性，却不改变length值

for...of...循环

ES6新出

函数

函数定义和调用

定义：function abs（）{}

调用abs（）；

变量作用域

全局作用域

名字空间（减少命名冲突）

var MYAPP = {};

MYAPP.name = 'myapp';
MYAPP.version = 1.0;

MYAPP.foo = function () {
return 'foo';};

局部作用域

let（ES6新增）

方法

apply（）

call（）

高阶函数

map

arr.map(pow);

传入自己的函数，获得新数组的结果

reduce

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25

把前面的累计计算结果与下一个值计算

filter

filter()把传入的函数依次作用于每个元素，
然后根据返回值是true还是false决定保留
还是丢弃该元素。

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

sort

排序算法

Array

every

判断每一个元素

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

find

查找元素返回第一个元素

findIndex

查找元素返回索引

forEach

遍历数组arr.forEach(console.log);

闭包

箭头函数

this不是看调用者，而是看刚定义时，他的作用域。
相当于：我现在定义，石子落水开始扩散，遇到外层函数停止扩散，
此时我的this就是包裹了这个外层函数的obj对象

x => x * x等价于

function (x) {
return x * x;
}

generator

标准对象

js里一切皆对象

Data

var now = new Date();

RegExp正则表达式

/正则表达式/ig

i标志，表示忽略大小写，
m标志，表示执行多行匹配。
g标志全局匹配

^表示行的开头，^\d表示必须以数字开头。

$表示行的结束，\d$表示必须以数字结束。

JSON

js对象转化成json格式字符串

var s = JSON.stringify(xiaoming, null, ' ');

JSON字符串转化成js对象

JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}

面向浏览器编程

创建对象

用构造函数创建对象，记得要new

原型继承

prototype

class继承（ES6新）

constructor：构造函数

浏览器

浏览器对象

window

innerWidth

innerHeight

navigator

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

screen

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

location.reload()

location.assign('新URL')

document

getElementById()

getElementsByTagName()

history

操作DOM

查找DOM

querySelector() 第一个节点

querySelectorAll() 所有节点

其他by绑定方法（重点）

更新DOM

HTML

元素.innerHTML

CSS

元素.style.属性

插入DOM

appendChild(子节点)

createElement（‘新元素’）

父元素.insertBefore（a，b）把a插入b前

删除DOM

自己删除自己

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);

父节点删除子节点

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);

删除后，后面的children【1】变成了【0】，考虑影响

操作表单

操作文件

AJAX

Promise

Canvas

Jquery

错误处理

underscore

Node.js