Object 类型

• Object创建有两种方法

  • new 操作符后跟Object

var person = new Object();
person.name = 'dan';
person.age = '25';

var person = {};   // 和上面的例子等价
person.name = 'dan';
person.age = '25';

• 对象字面量表示法

var person = {
    name : "dan";
    age : "25";
}

• 访问对象的使用方法

console.log(person.name);     //  建议采用这种方式访问
console.log(person[name]);   

var proName = "name";
console.log(person[proName]);  // 可以通过变量访问属性

person["first name"] ='dan';   // 包含了空格，不能用点访问

Array 类型

• 数组中的每一项可以保存任何数据类型
• 数组的创建方式

// 第一种方式
var colors = new Array();
var colors = new Array(20);  // 创建一个length为20的数组
var colors = new Array("red","blue","green");  // 创建一个数组包含red，blue，green

var colors = new Array(3);    // 创建一个有3项的数组
var colors = new Array('red')  // 创建只有一项red的数组

// 第二种方式
var colors = ['red','yellow','blue']
var values = [1,2,]  // 在IE中包含3项1,2,undefined,其他浏览其中包含1,2两项

• 读取和设置数组值

var colors = [1,2,3,4];
console.log(colors[0]);   //读取第一项
colors[1] = 8;   // 修改第二项
colors[4]  = 5;   // 添加第五项

colors[8]  = 10;
console.log(colors.length);   //  9
console.log(colors[6]);       // undefined
console.log(colors[30]);       // undefined

• 数组中的length属性不只是只读的，可以设置这个属性，从数组的末尾移除项或者添加项

var colors = [1,2,3];
colors.length = 2;
console.log(colors[2])   // undefined

var arr2 = [1,2,3];
arr2.length = 5;
console.log(arr2);  // [1,2,3,undefined,undefined]

var arr3 = [1,2,3,4];
arr3[arr3.length] = 5;
arr3[arr3.length] = 6;

检测数组

var arr = [];
console.log( arr instanceof Array);  // true
console.log( Array.isArray(arr));   // true
console.log( arr.constructor )   // function Array
console.log( arr.constructor == Array)  // true

转换方法

• toString(),toLocalString(),valueOf()方法

var colors = ['red','green','yellow'];
console.log(colors.toString()); // red,green,yellow
console.log(colors.toLoaclString());  // red,green,yellow
console.log(colors.valueOf());  // red,green.yellow

console.log(typeof colors.toString()) // string
console.log(typeof colors.toLocalString())  // string
console.log(typeof colors.valueOf())  // Object
console.log( colors.valueOf() instanceof Array)  // true

• toLoaclString()和toString()区别

var person1 = {
    toLoaclString : function(){
        return "dan";
    },
    toString : function(){
        return "zhu";
    },
}
console.log(person1.toString())  // zhu
console.log(person1.toLocalString())  // dan

• join()

var colors = ['red','yellow','blue'];
console.log(colors.join(','))  // red,yellow,blue
console.log(colors.join());    // red,yellow,blue
console.log(colors.join('|'))  // red|yellow|blue

栈方法（后进先出实现这个方法是push和pop方法）

• 数组的push和pop方法

var colors = [];
console.log(colors.push('red','green'));   // 1 返回的是添加后数组的长度，从末尾添加项

console.log(colors.pop())   // green 返回的删除的项,从末尾删除项

队列方法（先进先出实现这个方法是unshift()和pop()方法）

• shift()和unshift()方法

var colors = ['red','green','blue'];
console.log(colors.shift())    // red  返回删除的第一项

console.log(colors.unshift('black','pink'))  // 5   返回从开头添加后的数组的长度

重排序方法

• reverse()和sort()方法

reverse()方法

var values = [1,4,8,3,6];
console.log(values.reverse());     //  [6,3,8,4,1] 数组倒序排列

sort()方法

var values = [0,1,5,10,15];
values.sort();
console.log(values);  // 0,1,10,15,5   依据字符串的比较方式

• 比较函数返回1的时候交换位置

function compare(value1,value2){
    if ( value1 < value2){
        return -1;
    }else if ( value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var values = [0,3,6,1,8];
values.sort(compare);
console.log(values);   // 0,1,3,6,8

function big(value1,value2){
    if (value1 < value2){
        return 1;
    }else if ( value1 > value2){
        return -1;
    }else{
        return 0;
    }
}
value.sort(big);
console.log(values); // 8,6,3,1,0

• 对于数值类型或者valueOf()方法返回的数值类型的对象类型

function compare(value1,value2){
    return value2 - value1;   // 由大到小，返回正数的时候交换位置
}
var values = [0,3,6,1,8];
values.sort(compare);
console.log(values);

操作方法

concat()方法

var colors = ['red','green','blue'];
var colors2 = colors.concat();    //  ['red','green','blue'] 不传入参数则是数组的复制
 
//传入一个或多个数组，则将这些数组中的每一项添加到数组中，如果不是数组，这些值将被简单的添加到数组的末尾
var colors3 = colors.concat('yellow',['black','brown'])   //['red','green','blue','yellow','black','brown']

slice()方法

• 只传入一个参数，返回该参数指定位置到当前数组末尾所有的项

var colors = ['red','yellow','blue','yellow','purple'];
var colors2 = colors.slice(1);   // ['yellow','blue','yellow','purple']

• 传入两个参数，返回起始位置和结束位置中间的项，但是并不包括结束位置的项

var colors = ['red','yellow','blue','yellow','purple'];
var colors2 = colors.slice(1,4); // ['yellow','blue','yellow']

• 参数中有一个数负值，则用数组的长度加上该值确定相应的位置

var colors =  ['red','yellow','blue','yellow','purple'];
var colors2 = colors.slice(-2,-1);
console.log(colors2);   //['yellow']


var colors =  ['red','yellow','blue','yellow','purple'];
var colors2 = colors.slice(-3,3);
console.log(colors2);     //['blue']

• 如果起始位置大于结束位置则返回空数组

var colors =  ['red','yellow','blue','yellow','purple'];
var colors2 = colors.slice(-1,3);
console.log(colors2);     //[] 起始位置是-1+5

splice()方法

• 删除
  传入两个参数，要删除的位置和删除的项数

var num = [1,3,4,5];
var remove = num.splice(0,1);   // [1]  返回删除的内容，并且是一个数组
console.log(num)     // [3,4,5]

• 插入

var num = [1,2,3,4];
var removed = num.splice(1,0,8,2);   // []
console.log(num);  // [1,8,2,2,3,4]  从位置1开始添加8,2

• 替换

var colors = ['red','yellow','orange','blue'];
removed = colors.splice(1,1,'purple');   //['yellow']   返回值永远是删除项以数组形式返回
console.log(colors);  // ['red','purple','orange','blue']

位置方法

indexOf()和lastIndexOf()

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));   // 3  从开始位置向后找到4的位置
console.log(numbers.indexOf(1,5))   // 5 从第5位开始找到1的位置

console.log(numbers.lastIndexOf(4))   // 5 从最后位置开始找到4的位置
console.log(numbers.lastIndexOf(1,5))    // 0 从第5为开始向前找，找到1的位置

console.log(numbers.indexOf(8))    // -1 找不到的情况下返回-1

迭代方法

• every() 对数组中的每一项给定一个函数，该函数的每一项返回true，则返回true

var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.every(function(item){
    return (item > 2)
})    
console.log(numbers);   // false

• some() 对数组中每一项给定一个函数，任意一项返回true，则返回true

var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.some(function(item){
    return (item > 2)
})    
console.log(result);    // true

• filter() 对数组中的每一项给定一个函数，返回为true的值组成的数组

var numbers = [1,2,3,4,5,4,3,2,1];
var filterArr = numbers.filter(function(item){
    return (item>2)
})
console.log(filterArr)   // [3,4,5,4,3]

• forEach() 对数组的每一项固定的函数，没有返回值

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item){
    console.log(item)   // 1,2,3,4,5,4,3,2,1
})

• map() 对数组的每一项给定函数，返回每次调用函数的结果组成的数组

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item){
    return item*2   
})
console.log(mapResult)  // [2,4,6,8,10,8,6,4,2]

归并方法

reduce()和reduceRight()方法

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
    console.log(prev);   //  1,3,6,10    每次回调得到的prev是累加得到的数值
    return prev + cur;
})

var sumR = values.reduceRight(function(prev,cur,index,array){
    console.log(prev);    //  5,9,12,14     同上
    return prev + cur;   
})

Date类型

• 创建一个日期对象

var now = new Date();

Date.parse(),valueOf()

var now = new Date();
console.log(Date.parse(now))  //返回到1970 1.1的毫秒数  
console.log(Date.parse('asdfasd'))    // NaN 不能返回为时间格式
console.log(now.valueOf())    //同上

• Date.parse()可以解析的几种形式
  1. 6/13/2014
  2. January 12,2004
  3. Tue May 25 2004 00:00:00 GMT-0700
  4. 2004-05-25T00:00:00

Date.UTC()

日期格式化方法

日期、时间组件方法

var nowD = new Date();
//getTime() 
console.log( nowD.getTime());    // 与valueOf()方法返回值相同
//setTime()
var d = new Date();
console.log(d);      // Mon Jul 17 2017 21:36:00 GMT+0800
d.setTime(77771564221);   
console.log(d);      // Mon Jun 19 1972 11:12:44 GMT+0800

//getFullYear(),setFulltYear()设置日期必须是4位数字
//getMonth(), setMonth()  传入的必须大于0~11
d.setMonth(2);
console.log(d)   //Fri Mar 17 2017 21:40:00 GMT+0800

// getDate(),setDate()  如果传入的值超过了这个月中应该有的天数，则月份加一月
// getDay()   返回0~6
// getHours()  setHours()  getMinutes() setMinutes()  getSeconds() setSeconds()

Function类型

• 函数名实际上也是一个指向函数对象的指针

var anoterSum = sum;
console.log('anoter'+ anoterSum(10,10))  // 20
console.log('sum1' + sum(10,10))      // 20
sum = null;
console.log(anoterSum(10,10))    // 20
console.log(sum(10,10));    // sum is not a function
function sum ( num1,num2){
    return num1 + num2;
}

没有重载的概念

• 在创建第二个函数时，实际上覆盖了引用第一个函数的变量

function addSome(num){
    return num + 100
}
function addSome(num){
    return num + 200
}
var result = addSome(100)     // 300

函数声明与函数表达式

• 解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁，解析器会率先读取函数声明，并且在执行代码的之前可以访问，但是函数表达式，必须等到解析器执行到它所在的代码行，才会真正被解析执行

console.log( sum ( 10,10));   // 20 
function sum (num1,num2){
    return num1 + num2
}

console.log(num2(10,10));
var num2 = function(num1,num2){
    return num1 + num2
}

作为值的函数

• 不仅可以像传递参数一样把一个函数传递给另一个函数，而且还可以将一个函数作为另一个函数的结果返回

function callSomeFunction(someFunction,someArgument){
    return someFunction(someArgument)
}
function getGreeting(name){
    return "hello" + name
}
var result = callSomeFunction(getGreeting,'dan');   // hello dan

函数内部属性

• 两个特殊的对象，this,arguments
• arguments的主要用途是保存函数参数，这个对象还有一个callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数

function factor(num){
    if ( num < = 1){
        return 1;
    }else{
        return num * factor( num - 1)
    }
}


function factor(num){
    if ( num <= 1){
        return 1;
    }else{
        return num * arguments.callee(num-1)
    }
}

• 函数中this的指向问题，函数在哪里调用，this就指向为哪个

<body>
<div id="box">123</div>
<script>
    var oBox = document.getElementById('box');
    function show(){
        console.log( this )      
    }
    oBox.onclick = function(){
        show();      //   this为window
    }

    oBox.onclick = show;    // this为div
</script>

<div id="box" onclick="show()">123</div>    // this为window
<script>
    var oBox = document.getElementById('box');
    function show(){
        console.log( this )
    }
    
</script>

</body>

• caller属性，这个属性保存了当前函数的函数引用，如果在全局中调用当前函数，则返回null

function outer(){
    inner()
}
function inner(){
    console.log(inner.caller)
}
outer()    // function outer() .....在哪个函数中调用则返回哪个函数的引用

inner()    // null

• 为了实现更好的耦合性（修改一个对象的时候同时需要修改另一个对象），通过arguments.callee.caller

function outer(){
    inner()
}
function inner(){
    console.log(arguments.callee.caller)
}
outer()    // function outer() .....在哪个函数中调用则返回哪个函数的引用

inner()    // null

函数的属性和方法

• length属性表示函数希望接收的命名参数的个数

function sayName(name){
    alert(name)
}
alert(sayName.length)   //1 接受参数的个数

• prototype属性，toString(),valueOf()等方法实际上保存在prototype名下。只是 通过各自对象实例访问
• apply()和call()方法 -- 用途在特定的作用域中调用函数，实际上等于设置函数体内this对象的值

window.color = "red";
var o = {color: 'blue'};
function sayColor(){
    alert(this.color);
}
sayColor();    // red
sayColor.call(window)   // red
sayColor.call(o)     // blue   修改了函数体内的this指向，指向为对象o

• apply和call的区别

function sum(num1,num2){
    return num1 + num2;
}
function callSum(num1,num2){
    return sum.apply(this,arguments)   // 参数用arguments表示
}
function callSum1(num1,num2){
    return sum.apply(this,[num1,num2])    // 参数是一个数组列表
}

function callSum2(num1,num2){
    return sum.call(this,num1,num2)       // 参数一次传入
}

• bind()用法

window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();   // blue

基本类型包装

var s1 = 'some text';
var s2 = s1.substring(2);

var s1 = new String('some text');   // 创建string类型的一个实例    object
var s2 = s1.substring(2);           // 在实例上调用指定的方法
s1 = null;                          // 销毁这个实例

• 引用类型和基本类型的包装主要区别在于对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都会一直保存在内存中，而自动创建的基本类型的对象，只存在于一行代码的执行瞬间

var s1 = 'some text';
s1.color = 'red';
console.log(s1.color);     // undefined

• 对基本包装类型的实例调用typeof会返回object，所有的基本包装类型的对象转换为布尔值都是true

Boolean类型

var booleanValue = new Boolean(true);
    console.log(typeof booleanValue.valueOf());    // boolean
    console.log( typeof booleanValue.toString());  // string

var falseObject = new Boolean(false);
var result = falseObject && true;
console.log(falseObject)
console.log(result);   // true  布尔表达式中所有的对象都转换为true

var falseValue = false;
result = falseVaule && true;
console.log(result);      // false

var falseObject = new Boolean(false);
console.log(typeof falseObject);   // object
console.log(falseObject);          //Boolean {[[PrimitiveValue]]: false}
console.log(falseObject instanceof Boolean);   // true

var a = false;
console.log( typeof a);           // boolean
console.log(a);                   // false
console.log(a instanceof Boolean);    // false

Number类型

var numObject = new Number(10);
var num = 10;
console.log(typeof numObject);   // Object
console.log(typeof num);      // number
console.log(numObject instanceof Number);  // true
console.log(num instanceof number);     // false
console.log(typeof numObject.valueOf());    // number
console.log(typeof numObject.toString());   // string
console.log(typeof numObject.toLocaleString());    // string

• toFixed()方法 （详情见数据类型）
  四舍五入的方法，并且将数字转化为字符串的格式

var s = 123.090;
console.log(s.toFixed(1));               // 123.1  四舍五入
var s = 123.000;
console.log(s.toFixed(1));               // 123.0
console.log(typeof s.toFixed(1))     //string

• toExponential()方法
  返回以指数表示法，表示数值的字符串形式
  方法接收一个参数，该参数指定输出结果中的小数位数

var num = 10;
console.log(num.toExponential(1))
console.log(typeof num.toExponential(1));   // string

var num = 100;
console.log(num.toExponential(1));  //  1.0e+2
console.log(num.toExponential(2));  // 1.00e+2

var num = 198;
console.log(num.toExponential(1));   // 2.0e+2
console.log(num.toExponential(2));   // 1.98e+2

• toPrecision()方法
  这个方法可能返回toFixed，可能返回指数格式

var num = 99;
console.log(num.toPrecision(1))  // 1e+2
console.log(num.toPrecision(2))  // 99
console.log(num.toPrecision(3))  // 99.0
console.log(typeof num.toPrecision(2));    // string

string()类型

• 基本类型的包装

var strOb = new String('faskdlf');

• valueOf(),toLocaleString(),toString()方法都返回的是包装对象的基本字符串值
• length属性

var str = 'hello world';
console.log(str.length);

• 字符方法 charAt(),charCodeAt()

var str = 'hello world';
console.log(str.charAt(1));   // e
console.log(str.charCodeAt(1))   // 101 e的字符编码

var str = 'hello world';
console.log(str[1]);    //  e

• 字符串的操作方法 concat(),slice(),substr(),substring()

var str = 'hello';
var result = str.concat('world');
console.log(str);   // hello
console.log(result);   // hello world

var str = 'hello world';
console.log(str.slice(3));   // 'lo world'
console.log(str.substr(3));  // 'lo world'
console.log(str.substring(3))// 'lo world'
console.log(str.slice(3,7));   // 'lo w' 第三位开始不包括第七位
console.log(str.substr(3,7));   // 'lo w' 同上
console.log(str.substring(3,7));   // 'lo worl'  从第三位开始

console.log( str.slice(-3));   // 'rld'  所有的负值加上字符串的长度    这种方法正好得到字符串的最后几位
console.log(str.slice(3,-4))   //  'lo w'  同上

console.log(str.substring(-3));   // 'hello world'   所有的负值都转变为0
console.log( str.substring(3,-4))  // 'hel'  => str.substring(3,0)  => str.substring(0,3)

console.log(str.substr(-3))   // 'rld'   第一个负值变成字符串的长度加负值，第二个是0
console.log(str.substr(3,-4))   // '' 空字符串 -4 => 0

• 字符串位置方法 indexOf(),lastIndexOf()
  都是从一个字符串搜索给定的子字符串，然后返回字符串的位置，没有找到，返回-1

var str = 'hello world';
console.log(str.indexOf('o')); // 4
console.log(str.lastIndexOf('o'))   // 7

console.log(str.indexOf('o',6))   // 7 从第6位开始向后找到o的位置
console.log(str.lastIndexOf('o',6))   // 4 从第6位开始向前找到o的位置  

• trim()方法

var str = '   hello world   ';
console.log(str.trim());   // hello world
trimLeft()  删除开头的空格
trimRight() 删除末尾的空格

• 字符串的大小写转换

var str = 'hello WORLD';
console.log(str.toLocaleUpperCase())   // HELLO WORLD
console.log(str.toUpperCase())    // HELLO WORLD
console.log(str.toLocaleLowerCase())   // hello world
console.log(str.toLowerCase())    // hello world

• 字符串的模式匹配方法

• split()方法

var color = 'red,blue,green';
var color1 = color.split(',')   //['red','blue','green']
var color2 = color.split(',',2) //['red','blue']

• localeCompare()方法

var str = 'yellow';
console.log(str.localeCompare('brick'))  // 1
console.log(str.localeCompare('yellow'))  // 0
console.log(str.localeCompare('yella'))   // 1
console.log(str.localeCompare('yel'))     // 1
console.log(str.localeCompare('zoo'))    // -1

• fromCharCode()方法

console.log(str.fromCharCode(104,101,108,108,111))  // hello

单体内置对象

由js实现提供的，不依赖宿主环境的对象，这些在js程序执行之前就已经存在了，开发不必显示的实例化内置对象

Global对象

事实上没有全局变量和全局属性，所有在全局中定义的属性和函数都是Global对象的属性，像isNaN(),parseInt()等，实际上都是Global对象的方法

URI编码方法

• encodeURI()和encodeURIComponent()方法
  encodeURI()用于整个URI，但是不会对特殊字符编码，例如冒号，斜杠，井号
  encodeURIComponent()对它发现的任何非标准字符进行编码

  var uri = 'http://www.hao123 val.html#start'
  console.log(encodeURI(uri));    //  http://www.hao123%20val.html#start
  console.log(encodeURIComponent(uri));    // http%3A%2F%2Fwww.hao123%20val.html%23start
  

eval()方法

他只接受一个参数，即要执行的js的字符串

eval("alert('hi')")   // 等价于alert('hi')

eval("var msg = 'hello'");
alert(msg);    // hello

• 在eval()中创建的任何变量和函数都不会被提升，它们只有在eval()执行的时候创建
• 严格模式下，在外部访问不了eval创建的任何变量或者函数

Global对象的属性

特殊值，undefined，NaN，Infinity都是Global的对象属性，所有原生引用类型的构造函数，object，function，都是Global对象的属性
ES5 明确禁止给undefined，NaN，Infinity赋值

Window对象

• ES5虽然没有明确指出Global对象，但web将这个全局对象作为window对象的一部分实现，因此，全局中声明的函数，变量成为了window对象的属性

var color = 'red';
function sayColor(){
    console.log(window.color)   //  red  说明全局变量就是window对象的属性
}
window.sayColor();    // 这里等同于sayColor()   

var global = function(){
    return this;
}()
console.log(global)   // window对象

Math对象

• Math对象的属性（数学计算中运用的特殊值Math.E） p134

• min()和max()方法

var max = Math.max(3,56,78,31);    // 78
var min = Math.min(3,56,7,9,2)     // 2
var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math,values);   8

• 舍入方法
  Math.ceil()向上取整
  Math.floor()向下取整
  Math.round()四舍五入

• random()方法
  Math.random()返回的是一个大于0，小于1的随机数
  值 = Math.floor(Math.random * 可能值的个数 + 最小数)

var num = Math.floor(Math.random * 10 + 1)   // 1~10

其他方法 p136