本文共 10002 字，大约阅读时间需要 33 分钟。

目录

一数据类型

变量

var a = 1;

number

js不区分小数和整数

NaN   //not a number 

Infinity   //表示无限大

字符串

'abc'     "abc"

注意转移字符\

多行字符串编写

var msg = `hello          world          你好呀`;

模板字符串

let name = 'liming'let msg = `你好呀，${name}`;

字符串长度

str.length，有一些方法str.toUpperCase（）

大小写转换

字符串可变性

获取指定下标

字符串截取 

str.substring（1）从第一个字符串截取到最后一个字符串

str.substring（1，3）  相当于【1,3）

.布尔值

true ,false

逻辑运算

&&，||，！

比较运算符

• =     赋值
• ==   等于（类型不一样，值一样，也会判断为true）
• ===   绝对等于（类型和值都一样）

坚持不要使用==比较

特殊：

NaN与所有的数值都不相等，包括自己

只能通过isNaN（NaN）来判断是否为NaN

浮点数问题：

1/3===1-2/3

尽量避免使用浮点数进行运算，存在精度问题！应该用Math.abs（1/3-（1-2/3））<0.00000001

null 和 undefined

• null 空
• undefined 未定义

数组

js中的数组里可以不全为同一类型的元素

如：  var arr = [1,2,3,4,5,'hello',true];

如果越界了就会undefined

1.长度，arr.length

2.indexof，通过元素获得下标索引，arr.indexof（2）；

3.slice（） ，截取array的一部分，返回一个新数组，类似String中的substring

4.push，压入到尾部

5.pop，弹出尾部的元素

6.unshift，在头部添加元素

7.shift，去掉头部的一个元素

8.arr.sort（），排序

9.arr.reverse（），元素反转

10.arr.concat（），只是拼接，不会改变原来的数组

11.arr.join（），打印拼接数组如 

arr = ['a','b','c'];

12.多维数组

13.forEach

arr = ['a','b','c'];        arr.forEach(function (value) {            console.log(value);        })

14.for of

var arr = [3,4,5];        for (var x of arr){            console.log(x);        }

 

对象

对象是大括号，数组是中括号

var person = {name = "aaaa",age = 3,tags = ['js','java']}

取值

person.name

动态删减，delete person.name

动态添加，person.haha=‘哈哈’

二严格检查模式strict

原本a = 1；是全局变量，但是加了'use strict'之后

<script>        'use strict';        a = 1;        var i = 1; </script>

此时，a会报错

预防JavaScript的随意性导致产生的一些问题

局部变量，建议使用let定义

前提：

需要设置ES6语法，并且要卸载script的第一行

三Map和Set集合

Map

var map = new Map([['tom',99],['jerry',55]]);var grade = map.get('tom');console.log(grade);

结果打印出99，通过key获得value

map.set('admin',0);

通过set添加一对记录

删除，map.delete（'tom'）

Set

var set = new Set([3,1,1,1]);

无序不重复的集合，可以用来去重

1.添加，set.add（2）

2.删除，set.delete（2）

3.是否包含，set.has（3）

四iterator遍历

遍历数组

var arr = [3,4,5];        for (var x of arr){            console.log(x);        }

 遍历Map

var map = new Map([['tom',1],['jerry',2],['hello',5]]);for(let x of map){     console.log(x);}

也可同样的方法遍历Set

五函数

function abs(x) {    if (x >= 0) {        return x;    } else {        return -x;    }

上述abs()函数的定义如下：

• function指出这是一个函数定义；
• abs是函数的名称；
• (x)括号内列出函数的参数，多个参数以,分隔；
• { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

因此，第二种定义函数的方式如下：

var abs = function (x) {    if (x >= 0) {        return x;    } else {        return -x;    }};

在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

注意：

1.如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

2.JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数

abs(10, 'sssss'); // 返回10abs(-9, 'haha', 'hehe', null); // 返回9abs(); // 返回NaN

要避免收到undefined，可以对参数进行检查：

function abs(x) {    if (typeof x !== 'number') {        throw 'Not a number';    }    if (x >= 0) {        return x;    } else {        return -x;    }}

arguments

function foo(x) {    console.log('x = ' + x); // 10    for (var i=0; i<arguments.length; i++) {        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30    }}foo(10, 20, 30);

它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数，即使函数不定义任何参数，还是可以拿到参数的值

最常用于判断传入参数的个数

rest参数

function foo(a, b, ...rest) {    console.log('a = ' + a);    console.log('b = ' + b);    console.log(rest);}foo(1, 2, 3, 4, 5);// 结果:// a = 1// b = 2// Array [ 3, 4, 5 ]foo(1);// 结果:// a = 1// b = undefined// Array []

...rest，传入的参数先绑定a和b，多余的参数再以数组的形式传给rest，即rest是arguments去掉a和b之后剩余的参数

注意

js有在行末自动添加分号的机制，所以return后面一定要加紧跟的东西或者跟大括号

六变量作用域与解构赋值

如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

变量提升

JavaScript的函数定义特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

但只提升了变量y的声明，而不会提升变量y的赋值。

全局作用域

不在任何函数内定义的变量就具有全局作用域，全局作用域的变量实际上被绑定到window的一个属性

任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

名字空间

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中

// 唯一的全局变量MYAPP:var MYAPP = {};// 其他变量:MYAPP.name = 'myapp';MYAPP.version = 1.0;// 其他函数:MYAPP.foo = function () {    return 'foo';};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

局部作用域

常量

const，具有块级作用域

const PI = 3.14;

解构赋值

可以使用解构赋值，直接对多个变量x，y，z同时赋值：

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值

var person = {    name: '小明',    age: 20,    gender: 'male',    passport: 'G-12345678',    school: 'No.4 middle school',    address: {        city: 'Beijing',        street: 'No.1 Road',        zipcode: '100001'    }};var {name, address: {city, zip}} = person;

 如果变量已经被声明了，再次赋值的时候应该用小括号扩起来。

// 声明变量:var x, y;// 解构赋值:({x, y} = { name: '小明', x: 100, y: 200});

七方法

给对象xiaoming绑定一个方法age（），来返回xiaoming 的年龄。

var xiaoming = {    name: '小明',    birth: 1990,    age: function () {        var y = new Date().getFullYear();        return y - this.birth;    }};

apply

在js中控制this指向

function getAge(){   var now = new Date().getFullYear();   return now - this.birth;}var xiaoming = {   name:'小明',   birth:2000,   age:getAge};getAge.apply('xiaoming',[]);    //this指向了xiaoming，参数为空

八Json

json字符串和js对象的转化

var user = {            name:"swk",            age:3,            sex:"男"        }        var jsonUser = JSON.stringify(user);   //将对象转化为JSON字符串        var obj= JSON.parse('{"name":"swk","age":3}');   //将JSON字符串转化为对象

九面向对象原型继承

var user = {            name:"swk",            age:3,            sex:"男",            run:function () {                console.log(this.name+"is running..");            }        };        var xiaoming = {            name:"xiaoming"        };        xiaoming.__proto__ = user;

xiaoming就可以使用user 的方法

十面向对象class继承

类的定义

class student{            constructor(name) {                this.name = name;            }            hello(){                alert('hello');            }        }        var xiaoming = new student("xiaoming");

 类的继承

class xiaostudent extends student{            constructor(name,grade) {                super(name);                this.grade = grade;            }            hello(){                alert('我是一名小学生');            }        }        var xiaohong = new xiaostudent("xiaohong",1);

十一操作BOM对象

window

不但充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

window.innerWidth;window.outerWidth;

navigater（不建议使用）

navigator对象表示浏览器的信息，最常用的属性包括：

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

为了针对不同浏览器编写不同的代码,正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：

var width = window.innerWidth || document.body.clientWidth;

screen

表示屏幕的信息，常用的属性有：

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

location

表示当前页面的URL信息，例如，一个完整的URL：

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

 要获得URL各个部分的值，可以这么写：

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.assign()要加载一个新页面

location.reload()重新加载当前页面

document

代表当前的页面，HTML DOM文档树

document.title      //获取标题document.title='swk'  //修改标题

<dl id="app">        <dt>java</dt>        <dt>javase</dt>        <dt>javaee</dt>    </dl>    <script>        var dl = document.getElementById('app');    </script>

cookie

当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

获取cookie

document.cookie //v=123; remember=true; prefer=zh

如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。

history

表示浏览器的历史记录

history.back()  //后退history.forward()  //前进

十二操作DOM对象(重点)

获得dom节点

<div>    <h1>标题一</h1>    <p id='p1'>p1</p>    <p class='p2'>p2</p></div><script>//对应css选择器var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点var p1 = document.getElementByID('p1');var p2 = document.getElementByclassName('p1');var father = document.getElementByID('father');var childrens = father.children;// 获取父节点下的所有子节点var childrens = father.children[index]; //获取其中一个节点//father.firstchild 获取父节点的第一个子节点//father.lostchild 获取父节点的最后一个子节点</script>

更新节点

<div id="id1">    </div><script>    var id1 = document.getElementByID('id1')</script>id1.innerText = '123' //innerText方法修改文本内容  id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式id1.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式id1.style.padding = '2em' //属性使用字符串包裹

删除节点

删除节点的步骤： 先获取父节点，通过父节点删除自己

<div>    <h1>标题一</h1>    <p id='p1'>p1</p>    <p class='p2'>p2</p></div><script>    var self = document.getElementByID('p1');    var father = p1.parentElement; //找到p1的父节点    father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除</script>

注意：删除多个节点是，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删

插入节点

<p id="js">JavaScript</p><div id="list">    <p id="se">JavaSE</p>    <p id="ee">JavaEE</p>    <p id="me">JavaME</p></div><script>    var js = document.getElementByID('js'); //获取想要加入的节点    var list = document.getElementByID('list'); //获取想要加入的父节点    list.appendchild(js); //在list节点下追加子节点 </script>

在js中创建一个新的节点追加

<script>    //第一个方法：通过js创建一个新节点    var new = document.creatElement('p'); //创建一个p标签    new.id = 'new';    new.innerText = 'hello'; //在这个标签上输入文本    list.appendchild(new); //在父节点下加进去    //用第二种方法创建一个有自己属性的标签节点    var myScript = document.creatElement('script');//创建一个script标签节点    myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/    //可以创建一个style标签    var myStyle= document.createElement('style'); //创建了一个 空style标签    myStyle.setAttribute('type', 'text/css');    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容    document.getElementsByTagName( 'head' )[0]. appendChild(myStyle) //在父节点追加这个style标签</script>

在前面插入节点：insertBefore

var ee = document. getElementById('ee');var js = document . getElementById('js');var list = document . getElementById( 'list');//要包含的节点. insertBefore(newNode, targetNode)list. insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js

十三操作表单（验证）

表单form

• 文本框
• 下拉框
• 单选框
• 多选框
• 隐藏框
• 密码框 passwd