## 数据类型
~~~
不区分整数和浮点数,统一用Number表示
字符串是用单引号或者双引号括起来起来的任意文本
布尔值只有true和false两种值
&&与运算,都为true结果才是true
||或运算,都为false结果才是false
!非运算,把布尔值取反
比较运算符 == 会自动转换数据类型再比较 === 不会自动转换数据类型,如果数据类型不一致返回false
null表示一个空的值 和0以及字符串''不同
undefined表示值为定义
JavaScript数据可以包括任意数据类型
对象是一组键值组成的无须集合,要获取一个对象的属性用对象变量.属性名
如果一个变量没有通过var声明,那么该变量自动被声明为全局变量
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#字符串 "字符串")字符串
~~~
拼接用+号
toUpperCase()把一个字符串变成大写
toLowerCase()把一个字符串全部变成小写
indexOf()会搜索制定字符串出现的位置
substart()返回制定索引区间的字符串
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#数组 "数组")数组
~~~
可以包含任意数据类型
通过索引赋值时,如果索引超过了范围,会引起数组大小变化
indexOf() 搜索一个指定元素位置
slice()截取数组部分元素然后返回
push()向末尾添加若干元素
pop()删除最后一个元素
unshift()向头部添加若干元素
shift()把第一个元素删掉
sort()对数组元素进行排序
reverse() 反转数组元素
splice()可以指定插入和删除元素
concat()链接另一个Array
join()把当前数据的每个元素用指定字符串链接起来
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#对象 "对象")对象
~~~
是一种无序的集合数据类型,由若干键值对组成
JavaScript的对象是动态类型,可以自由的给他添加和删除属性
使用in检测是否有某一个属性,也会判断父类中
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#iterable "iterable")iterable
用于遍历Map和Set
|
~~~
123456789
~~~
|
~~~
for (var x of a) { // 遍历Array alert(x);}for (var x of s) { // 遍历Set alert(x);}for (var x of m) { // 遍历Map alert(x[0] + '=' + x[1]);}
~~~
|
for…in 会便利新添加的元素,不在lenght之内的也会打印
for…of只循环集合本身的元素
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#函数 "函数")函数
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#定义如下 "定义如下:")定义如下:
~~~
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
~~~
* function 指出这个是一个函数定义
* abs是函数的名称
* (x)括号内的是函数的参数,以,分割
* {…}之间的代码是函数体,可以包含若干语句
* 一单执行到return函数就会执行完毕,并讲结果返回
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#第二种定义函数方式 "第二种定义函数方式")第二种定义函数方式
~~~
var abs = function(x){
if(x>=0){
return x;
}
}
~~~
上面这种是一个匿名函数,没有函数名,将函数赋值给了变量abs,通过abs就可以调用该函数
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#调用函数 "调用函数")调用函数
~~~
abs(10);
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#arguments "arguments")arguments
在函数内部调用,指向当前函数的使用者传入的所有参数,类似一个Array,常用于判断传入参数的个数
~~~
function foo(x) {
if(arguments.lengtg==0){
return;
}
alert(x); // 10
for (var i=0; i<arguments.length; i++) {
alert(arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30);
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#rest参数 "rest参数")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 ]
~~~
rest参数写在最后,前面用…表示,当有多余的参数以数组的形式交给变量rest
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#变量作用域 "变量作用域")变量作用域
~~~
使用var定义的变量是局部变量,只能再方法体中使用,不用var定义的变量是全局变量,实际上是它是赋值给window的一个变量,比如alert也是定义再window.
为了避免全局变量冲突,可以讲所有的变量和函数 全部绑定到一个全局变量中
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#let "let")let
let可以代替var申明一个块级作用域的变量
~~~
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
i += 1; // SyntaxError
~~~
}
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#常量 "常量")常量
~~~
使用const关键字来定义一个常量
const PI = 3.14;
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#方法 "方法")方法
在一个对象中绑定的函数,称为这个对象的方法.
定义:
~~~
var smile = {
name:Smie,
birth:1980,
age:function(){
var y = new Date().getFullYear();
returt y-this.birth;
}
};
smile.age();//今年和明年调用就是不同的值
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#This "This")This
~~~
this指向被调用的对象,如果我们单独调用带有this的函数,该this指向全局对象,也就是window.
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#apply "apply")apply
控制this的指向,接受两个参数,第一个是需要绑定this变量,第二个是函数本身的参数
~~~
function getAge(){
vaar y = new Date().getFullYear();
return y-this.birth;
}
var smile = {
name :'Smile'
age:getAge
}
smile.age();//yes
getAge.apply(smile,[])//yew this指向smile,参数为空
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#装饰器 "装饰器")装饰器
利用apply(),可以动态改变函数行为
比如:下面的统计一个函数被调用的次数
~~~
var count = 0;
var oldParseInt = parseInt;//保存原函数
var oldParsent = function(){
count+=1;
return oldParseInt.apply(null,arguments);//调用原函数
}
// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3
~~~
## [](http://imuhao.top/2016/09/24/JavaScript_Node1/#高阶函数 "高阶函数")高阶函数
一个函数接受另一个函数作为参数,这种函数就称为高阶函数编写高阶函数，就是让函数的参数能够接收别的函数。
~~~
function add (x,y,f){
return f(x)+f(y);
}
当我们调用add(-5,6)时,参数f分别接受-5,6进行计算
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#map "map")map
当由一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：
~~~
function pow(x){
return x*x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow);// [1, 4, 9, 16, 25, 36, 49, 64, 81]
map()传入的参数是pow，即函数对象本身。
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#reduce "reduce")reduce
把一个函数作用在这个Array的[x1, x2, x3…]上,这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算.
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#filter "filter")filter
用于把Array的某些元素过滤掉,然后返回剩下的元素,它接受一个函数,把传入的函数依次作用于每个元素,根据返回值决定保留还是丢弃
把一个Arrat中的空字符串删除
~~~
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function(s){
return s && s.trim();
})
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#sort "sort")sort
Array的sort()方法默认把所有的元素先转换成String再排序,比较的是ASCLL码,对于两个元素x和y，如果认为x y，则返回1.
对字符串排序
~~~
var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function(s1,s2){
x1=s1.toUpperCase();
x2=s2.toUpperCase();
if(x1<x2){
return -1;
}
if(x1>x2){
return 1;
}
return 0;
});// ['apple', 'Google', 'Microsoft']
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#闭包 "闭包")闭包
当有一个求和的函数,我们不想直接得到值,而是根据需求再计算,可以不返回求和的结果,而是求和的函数
注意:返回函数不要引用任何循环变量,或者后续会发生变化的变量
~~~
function lazy_sum(arr){
var sum = function(){
return arr.reduce(function(x,y){
return x+y;
})
}
return sum;
}
当我们调用lazy_sum()时返回的并不是结果,而是求和函数
var f = lazy_sum([1,2,3,4,5]);//function sum();
f();//15
调用函数f时,才是真正求和结果
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#箭头函数 "箭头函数")箭头函数
相当于匿名函数,简化了函数定义
~~~
x => x*x;
相当于
function(x){
return x*x;
}
~~~
另一种包含多条语句
~~~
x =>{
if(x>0){
return x*x;
}else{
return -x*x;
}
}
~~~
如果参数不是一个,就要用()扩起来
~~~
//两个参数
(x,y)=>x*y+y*y;
//无参数
()=>3.14
~~~
返回一个对象
~~~
x=>({foo:x})
~~~
### [](http://imuhao.top/2016/09/24/JavaScript_Node1/#generator生成器 "generator生成器")generator生成器
~~~
可以在执行过程中多次返回
~~~
## 标准对象
* typeof操作符用来获取对象的类型
* 使用new创建一个包装对象
* 用String()来转换任意类型到string
* 可以直接使用if(var)()来做boolean判断
* 判断Array要使用Array.isArray(arr);
* 判断null要使用myVar===null
## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#Date "Date")Date
用来表示日期和时间
~~~
var now = new Date();
now.getFullYear();//2016
now.getTime();//时间戳
~~~
## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#RegExp "RegExp")RegExp
JavaScript有两种方式创建一个正则表达式
~~~
var re1 = /^\d{3}\-\d{3,8}$/;
var re2 = new RegExp('ABC\\-001');
调用RegExp的test()方法测试给定字符串是否符合条件
re1.test('010-12345');//true
~~~
### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#切分字符串 "切分字符串")切分字符串
正常写法
~~~
'a b c'.split(' ');//['a','b','c']
~~~
正则匹配多个空格
~~~
'a b c'.split(/\s+/);//['a','b','c']
~~~
### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#分组 "分组")分组
用()表示提取的分组
~~~
var re = /^(\d{3})-(\d{3,8})$/;
//调用exec提取出子串
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null
~~~
## [](http://imuhao.top/2016/09/25/JavaScript_Node2/#面向对象编程 "面向对象编程")面向对象编程
JavaScript创建一个对象都会设置一个原型,指向他的原型对象
~~~
var arr = [1,2,3];
arr ----> Array.prototype ----> Object.prototype ----> null
~~~
### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#构造函数 "构造函数")构造函数
~~~
首先定义一个普通函数
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
调用new创建一个对象
var xiaoming = new Student('小明');
xiaoming.name;//小明
xiaoming.hello();//hello
新创建的xiaoming原型链
xiaoming ----> Student.prototype ----> Object.prototype ----> null
~~~
prototype属性来指向xiaoming的原型对象
如果我们创建了很多个Student()对象,而这些对象都不是同一个hello()函数,而这些对象只需要共享一个函数就可以了,而要它们共享一个hello函数只需要将函数移动到这些对象的共同原型上就可以了,也就是
~~~
function Student(name) {
this.name = name;
}
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
};
~~~
### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#原型继承 "原型继承")原型继承
* 定义一个新的构造函数,并在内部调用Call()调用希望”继承”的构造函数,并绑定this
* 借助中间函数 `F` 实现原型链继承,最好通过封装的inherits函数完成；
* 继续在新的构造函数的原型上定义新方法
### [](http://imuhao.top/2016/09/25/JavaScript_Node2/#class-继承 "class 继承")class 继承
关键字class从ES6引入的,用class编写Student
~~~
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('Hello,'+this.name+'!');
}
}
~~~
class继承
~~~
class PrimaryStudent extends Student{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert(this.grade);
}
}
~~~
- PHP学习
- PHP应用
- PHP函数总结整理
- 39个对初学者非常有用的PHP技巧
- 深入浅出之Smarty模板引擎工作机制
- 数组操作
- file操作的常用方法
- PHP字符串输出之Heredoc说明
- require（_once）和include（_once）的理解
- PHP提高效率的几点
- php无限遍历目录
- 53个要点提高PHP编程效率
- THINKPHP
- THINKPHP 常见的问题
- 微信
- 微信公众号接口
- 微信小程序开发资料收集
- 微信小程序开发:MINA
- 通过微信小程序看前端
- 微信小程序开发初体验
- 微信小程序 Demo（豆瓣电影）
- API应用
- 支付宝
- 二维码转换
- 前端开发
- HTML5
- CSS
- 七种css方式让一个容器水平垂直居中
- JavaScript
- JavaScript奇技淫巧44招
- JavaScript笔记
- 后端开发
- Node
- SQL数据库
- 服务维护
- git使用
- Git入门私房菜
- MAC终端维护
- VIM命令大全
- 开发规范
- 智能手机屏幕的秘密
- 超实用六步透视网易设计规范（附完整PDF下载）
- UI设计常用字体规范
- APP界面切图命名和文件整理规范
- 网页UI视觉设计规范
- ios视觉设计规范说明
- 开发APP时需要注意的原则
- 移动端APP设计初步入门
- Axure
- 基础操作
- 基础1-10
- 基础11-20
- 基础21-30
- 基础31-40
- 基础41-50
- 基础51-60
- Sketch
- 软件使用
- sublime3_用户设置
- sublime下如何修改自动补全 后lang=zh-cn?
- 运营理念
- 新人指导心得体会
- 从一次活动设计，聊聊交互设计师的3个阶段
- 详情页优化那些不得不说的细节
- 店铺装修浅析
- 淘宝店铺装修之宝贝详情页的布局教程
- 宝贝详情页 客户需求调研及总结
- 宝贝描述样板房