• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Code Live
博客园    首页    新随笔    联系   管理    订阅  订阅
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,则自动指向全局对象
posted on 2017-12-27 11:15  二姐的菜刀  阅读(256)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3