Javascript深入浅出(一)

两种数据类型
1.值类型
number,string,boolean,undefined
都用typeof判断
2.引用类型(对象)
Function,Array,Object,null...
都用instanceof判断
 
隐式转换
1.num-0 转换为数字
num+'' 转换为文本
2.'==='
类型不同,返回false
类型相同:null===null,undefined===undefined,
NaN不等于NaN,new Object不等于new Object
3.'=='
类型不同:null==undefined,number==string,
true==1,false==0,object==number|string
类型相同:null==null,undefined==undefined,
NaN不等于NaN,new Object不等于new Object
 
类型检测
typeof 适合基本类型及函数检测,遇到null失效
undefined 未定义的值
boolean 布尔值
string 字符串
number 数值
object 对象和null
function 函数
对象 instanceof 构造函数 适合判断对象类型,在不同iframe和window间检测时失效
Object.prototype.toString.apply()
适合基本类型、数组和函数检测,遇到null和undefined失效
 
表达式
1.原始表达式(包括常量、直接量、变量和关键字)
如,3 'test' var i this
2.初始化表达式
如,[1,2] {x:1,y:2}
3.函数表达式
如,var data = function(){},(function(){})();
4.属性访问表达式
如,lis[i],this.id
5.调用表达式
如,addClass()
6.对象创建表达式
如,new Date()
 
特殊运算符
c?a:b
a,b 结果取最后一个数
如,var val = (1,2,3); val = 3;
delete 删除属性
如,var obj = {x:1}; delete.obj.x
in 判断是否具有某属性
如,'id' in item
instanceof,typeof
new
如,var date = new Date();
this
void() 计算一个表达式但是不返回值
 
语句
1.块语句 { 语句; }
2.声明语句 var item = document.getElementById('item');
3.try-catch,try-finally,try-catch-finally语句
try{ 尝试执行的代码块 }
catch(err){ try 代码块发生错误时,所执行的代码块 }
finally{ 无论 try / catch 结果如何都会执行的代码块 }
throw  ‘错误信息
4.function语句 函数声明and函数表达式
5.switch语句
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
default :
break;
}
6.循环语句
for(var i=0;i<lis.length;i++){}
while(isTrue){}
do{}while(isTrue)
 
Javascript严格模式
'use strict';
1.不允许用with语句
2.不允许未声明的变量被赋值
3.参数arguments无效
4.delete参数或函数名会报错
5.delete不可配置的属性会报错
6.对象属性名重复会报错
7.禁止八进制
8.eval,arguments不能作为变量或函数名
9.eval独立作用域
 
创建对象
1.通过字面量创建对象
var obj = {x:1,y:2};
2.通过new/原型链创建对象
function waveObj(){}
waveObj.prototype.init = funtion(){}
var wave = new waveObj();
wave.init();
3.Object.create()创建对象
var obj = Object.create({x:1,y:2});
 
原型链
1.对象→原型→原型…
object→object.prototype→null
2.'属性' in 对象
可查看原型链上所有属性
对象.hasOwnProperty('属性')
只能查看当前对象上的属性
delete 对象.属性
只能删除当前对象的对应属性
 
属性描述符
1.数据属性
configurable:true(默认)/false 表示能否通过delete删除属性从而重新定义属性
enumerable:true(默认)/false 是否能在for-in循环中遍历出来或在Object.keys中列举出来,即是否可枚举
value 属性值
2.访问器属性
configurable:true/false
enumerable:true/false
get:function(){} 在读取属性时调用的函数,只读,默认值为undefined
set:function(){} 在写入属性时调用的函数,只写,默认值为undefined
(IE8及以下浏览器写法)
对象._defineGetter_('属性名',function(){})
对象._defineSetter_('属性名',function(){})
 
对象.属性名 or 对象['属性名']
 
对象方法(在object.prototype里)
1.Object.defineProperty(对象,'属性名',{属性描述符})
在对象上定义新属性,或是修改已有属性
注意 如果不指定configurable, enumerable, writable特性,其默认值都是false
2.对象.propertyIsEnumerable('属性名')
返回true和false,表示指定的属性是否可枚举
注意 原型链上的属性不可枚举,返回false
3.Object.getOwnPropertyDescriptor(对象,'属性名')
返回一个指定属性的描述符数组
4.Object.keys(对象)
返回一个指定对象可枚举属性的数组
5.var 对象 = Object.create(原型);
使用指定的原型对象及其属性去创建一个新的对象
6.对象.toString = function(){}
对象.valueOf = function(){}
一般是交由JS隐式调用
在数值运算里,会优先调用valueOf()
在字符串运算里,会优先调用toString()
7.对象.constructor
返回对象的原型的函数
8.对象.prototype.isPrototypeOf(对象)
测试一个对象是否存在于另一个对象的原型链上,返回布尔值
9.对象.toLocaleString()
返回对象的字符串表示
 
对象标签
1.原型标签隐式原型_proto_
2.class标签
Object.prototype.toString.call(对象)
3.extensible标签 是否可拓展
Object.isExtensible(对象)
Object.preventExtensions(对象)
 
Object.seal(对象) 等价于configurable:false
Object.isSealed(对象)
 
Object.freeze(对象) 等价于writable:false
Object.isFrozen(对象)
 
创建数组
1.字面量创建数组
var array = [1,2,3];
2.new Array创建数组
var array = new Array();
 
数组操作
1.array[3] = 4;//添加数组元素
2.delete array[0];//删除数组元素,数组长度不变,值为undefined
3.array.push(4); 从数组末端添加元素
array[array.length] = 4;
4.array.unshift(0); 从数组前边添加元素
5.array.lenth -= <num>; 从数组末端减去相应数量的元素
6.array.pop(); 从数组末端减去一个元素
7.array.shift(); 从数组前边减去一个元素
 
数组迭代
var array = [1,2,3,4,5];
for(var i=0;i<array.length;i++){}
 
二维数组 var array = [[x,y],[y,z],[x,z]];
 
稀疏数组 不含有从0开始的连续索引,一般length属性值比实际元素个数大
var array = new Array(1);
arr.length = 100;arr[99] = 123;
var arr = [,,];
 
数组方法(在array.prototype里)
1.对象.join('分隔符')
不改变原数组,把数组中所有元素用指定分隔符拼接成字符串并返回,默认分隔符为逗号
2.对象.reverse()
改变原数组,颠倒数组中元素的顺序
3.对象.sort(function(){})
改变原数组,数组排序,没有参数时默认按字母顺序对数组中的元素进行排序
arr.sort(function(a,b){return a - b;});//从小到大排列
arr.sort(function(a,b){return b - a;});//从大到小排列
4.对象.concat() 改变原数组,数组合并
var arr = [1,2,3];
arr.concat(4,5);//[1,2,3,4,5]
arr.concat([4,5],6);//[1,2,3,4,5,6]
arr.concat([4,[5,6]]);//[1,2,3,4,[5,6]]
5.对象.slice(startIndex,endIndex) 不改变原数组,返回部分数组
此方法返回的是一个 [ ) 区间
负值即从数组的尾部选取元素
如果 endIndex 未被规定,即选取从 startIndex 到数组结尾的所有元素
6.对象.splice(添加/删除项目的Index,删除的项目数量,添加的项目)
改变原数组,从数组中添加/删除项目,然后返回被删除的项目
删除的项目数量为 0时,则不会删除项目
 
(以下方法需IE9+版本支持)
1.对象.forEach(function(数组元素,数组元素index,对象) {})
不改变原数组,数组遍历
2.对象.map(function(数组元素,数组元素index,对象) {})
不改变原数组,数组映射
3.对象.filter(function(数组元素,数组元素index,对象) {})
不改变原数组,数组过滤
4.对象.every(function(数组元素,数组元素index,对象) {})
不改变原数组,判断数组中的每一个元素是否符合条件,返回true or false
5.对象.some(function(数组元素,数组元素index,对象) {})
不改变原数组,判断数组中是否有元素符合条件,返回true or false
6.对象.reduce(function(上一次值,当前值,当前值index,对象) {},第一次调用时的上一次值)
不改变原数组,数组中的每个值(从左到右)开始缩减,最终为一个值
var arr = [1,2,3,4];
arr.reduce(function(a,b,index,arr){
return a+b;
},0);
上一次值
当前值
当前值索引
数组对象
0
1
0
1
1
2
1
3
3
3
2
6
6
4
3
10
注意:如果第一次调用时的上一次值未定义,则默认为数组中的第一个元素
7.对象.reduceRight(function(上一次值,当前值,当前值index,对象) {},第一次调用时的上一次值)
不改变原数组,数组中的每个值(从右到左)开始缩减,最终为一个值
8.对象.indexOf(需检索的值,开始检索的位置index)
不改变原数组,(从左到右)返回指定值首次出现的位置
开始检索的位置index为负数时,从末端开始检索
如果检索值没有出现,则该方法返回 -1
9.对象.lastIndexOf(需检索的值,开始检索的位置index)
不改变原数组,(从右到左)返回指定值首次出现的位置
10.Array.isArray()
判断是否为数组,返回true or false
 
数组与字符串
var str = 'hello';
Array.prototype.join.call(str,'-');//h-e-l-l-o
 
创建函数
1.函数声明 function addClass(){}
2.函数表达式
var waveObj = function(){}(匿名函数表达式
var waveObj = function wave(){}(命名函数表达式
(function(){})();
!function(){}();(都是自执行函数表达式
return function(){}
注意:函数声明可调用在前边,函数表达式不可以
3.Function构造器(允许匿名且没有函数名)
Function('')(); func();
 
this关键字
1.全局的this指的是window
2.一般函数的this指的是window,但在严格模式下是undefined
function test(){
    this.x = 1;
    alert(this.x);
  }
  test(); // 1
3.作为对象方法调用的this,这时this就指这个上级对象
function test(){
    alert(this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test;
  o.m(); // 1
4.作为构造函数调用的this,这时this就指这个新对象
function test(){
    this.x = 1;
  }
  var o = new test();
  alert(o.x); // 1
5.call/apply/bind方法调用的this,this指的就是call/apply/bind方法第一个参数
var x = 0;
  function test(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test;
  o.m.apply(); //0
注意:1.call/apply/bind方法的参数为空时,默认调用全局对象
2.当处于非严格模式下,第一个参数指定为null和undefined,则自动指向全局对象
原文地址:https://www.cnblogs.com/crisis66/p/8124811.html