首页  思维导图  详情



 



JS

2019-07-12 19:49:51   1  举报





仅支持查看

AI智能生成

小白的js思维导图

js思维导图

模板推荐

作者其他创作

大纲/内容

查看网站信息：chrome://version/

js中没有方法重载

书写位置

script

文件末尾

head onload

其他数据类型

function

function 方法名（）{}

// 在函数前面，仍然可以调用 mode(); /** * 函数式声明 */ function mode() { console.log("运行mode函数"); } // 在函数后面，当然可以调用 mode();

var 方法名=function(){}

// 报错：在调用mode2()之前，没有定义 mode2(); /** * 以函数表达式的形式定义函数 */ var mode2 = function() { console.log("运行mode2函数"); } // 只能放在该函数的后面，才能调用 mode2();

数组

object类型

var arr=[值1,值2,值3]; //隐式创建

var arr1 = [1,3,5,7,9]; document.write(arr1[2] + ' ');

var arr=new Array(值1,值2,值3); //直接实例化

var arr2 = new Array(2,4,6,8,10); document.write(arr2[3] + ' ');

var array=new Array(size); //创建数组并指定长度

var arr3 = new Array(3);//固定数组长度为3 arr3[0] = 1; arr3[1] = 2; arr3[2] = 3; document.write(arr3[2] + ' ');

常用方法

push

此方法是在数组的后面添加新加元素，此方法改变了数组的长度：

Array.map()

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1, 2, 3, 4, 5] let newArr = arr.map(x => x*2) //arr= [1, 2, 3, 4, 5] 原数组保持不变 //newArr = [2, 4, 6, 8, 10] 返回新数组

Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分

let arr = [1, 2, 3, 4, 5] num.forEach(x => x*2) // arr = [2, 4, 6, 8, 10] 数组改变,注意和map区分

Array.filter()

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5] const isBigEnough => value => value >= 3 let newArr = arr.filter(isBigEnough ) //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

Array.every

方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；

Array.some()

方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；

pop

此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：

let arr = [1, 2, 3, 4, 5] arr.pop() console.log(arr) //[1, 2, 3, 4] console.log(arr.length) //4

shift

此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：

let arr = [1, 2, 3, 4, 5] arr.shift() console.log(arr) //[2, 3, 4, 5] console.log(arr.length) //4

unshift

此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度

let arr = [1, 2, 3, 4, 5] arr.unshift(6, 7) console.log(arr) //[6, 7, 2, 3, 4, 5] console.log(arr.length) //7

Array.isArray()

判断一个对象是不是数组，返回的是布尔值

splice

万能方法，可以实现增删改：

let arr = [1, 2, 3, 4, 5]; let arr1 = arr.splice(2, 0 'haha') let arr2 = arr.splice(2, 3) let arr1 = arr.splice(2, 1 'haha') console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素 console.log(arr2) //[1, 2] 删除三个元素 console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素

join

此方法也是将数组转化为字符串：

let arr = [1, 2, 3, 4, 5]; let str1 = arr.toString() let str2 = arr.toString(',') let str3 = arr.toString('##') console.log(str1)// 12345 console.log(str2)// 1,2,3,4,5 console.log(str3)// 1##2##3##4##5

concat

此方法是一个可以将多个数组拼接成一个数组：

let arr1 = [1, 2, 3] arr2 = [4, 5] let arr = arr1.concat(arr2) console.log(arr)//[1, 2, 3, 4, 5]

splice

对象

object

1 function

2 json格式  创建一个对象

{属性名：属性值，。。。}

for in

属性名不能重复

案例

数组去重对象中的key

特征  弱类型的语言

var

语言基础

1 变量

var

变量名字母、下划线、$、数字

2 常量

常量全大写

3 数据类型

number

parselnt()/parseFloat()

数字转字符串

var num=123123; //1、toString() console.log(num.toString());

//2、数字+任何字符串"" console.log(num+"");

string

length

获取字符串长度

字符串转数字

var s = "234"; //1、纯数字转换 //字符串在运算操作中会被当做数字类型来处理 s *= 1;

//2 字符前加“+” console.log(+s);

//string的两个转换函数，只对string有效 parseInt(s); // 234 parseFloat(s); //234

//强制类型转换 Number(s); // 234

//2、数字加字母等非数字转换 var s = '234string'; parseInt(s);　//234 parseFloat(s); //234.0

子主题

boolean

开关

undefined

1 没赋值 

2 没定义

null

如何查看当前数据的类型

typeof

测试当前数据是不是数字

isNaN()

4 运算符

算术

+ - * / % += -= *= /= %= ++ --

关系

> >= < <= == != ===(判断数值和数据类型，要全部true才能算true)

逻辑

&& || !

5 流程控制语句

1分支

if else

switch case

2循环

循环语句

while

do while

for

for-in

跳转语句

continue

结束本次循环，接着去判断死否执行下次循环

break

终止整个循环，不再进行判断

return js中不能单独用return

终止函数体的运行，并返回一个值

dom

document  object  model

1 获取

1 id

2 class

3 name

4 tag

2操作

1 文本

inner Text

innerHTML

2 样式

1 .style.

2 .style=""

3 setAttribute()

已存在的样式

3 添加子元素

createElement()

append Child()

4 移除

1 子元素

2 包含自己全部移除

2 事件绑定

1 鼠标

2 按键

3 form

4 窗口事件

子主题

计算器

 Collect

Get Started

js 执行流程

 Collect

Get Started

css与js流程优化方案总结

 Collect

Get Started

 Collect

Get Started

co.js





0 条评论

下一页