js基础笔记

一、js中含有6种数据类型:

原始类型(即基本类型):number、boolean、null、undefined、string 和 对象类型object(包含function、array、date等);

二、==和===的区别:

==会尝试进行数据类型转换,再进行比较:

null==undefined 相等;

number==string 时会转成number 如 1==‘1.0‘ //true

boolean==?(无论?是什么)时会转成number 如 1==true  //true

object==number|string(number或者string ) 时会尝试转成基本类型 如new string(‘hi‘)==‘hi‘ //true 其他为false

===要求等号两边的数据类型必须相同,唯一例外的是NaN,new Object不相等,NaN≠NaN,NaN和任何数据都不相等;

三、包装对象:

var str=‘string‘;//基本对象string

var strObj=new String(‘string‘);//包装对象 对象类型 可以有属性、方法;

var str=‘string‘;

alert(str.length) //6

str.t=10;

alert(str.t) //undefined

当把基本类型尝试以对象的方式进行访问时,js会将基本类型转化为临时对象,当完成访问后,临时对象会被销毁,所以str.t为undefined;

四、类型检测:

1、typeof :判断基本类型和函数检测,遇到null返回Object失效;

typeof 100 //number

typeof true //boolean

typeof function //function

typeof(undefined) //undefined

typeof new Object() //Object

typeof [1,2] //Object

typeof NaN  //number

typeof null //Object

2、instanceof:判断对象类型(基于原型链),适合自定义对象和原生对象;

Obj instanceof Object :判断左侧对象的原型链上是否有右边这个构造函数的prototype;

[1,2]instanceof Array===true

new Object() instanceof Array===false

注意:不同的window或者iframe之间的对象类型检测不能用instanceof,否则返回值全为false;

3、Object.prototype.toString:判断对象类型

Object.prototype.toString.apply([]);===‘[object Array]‘

Object.prototype.toString.apply(function(){});===‘[object Function]‘

Object.prototype.toString.apply(null);===‘[object Null]‘

注意:在ie6、7、8中Object.prototype.toString.apply(null);===‘[Object Object]‘

Object.prototype.toString.apply(undefined);===‘[object Undefined]‘

4、constructor

5、duck type

五、运算符:

1、条件运算符:

c?a:b;

var val=true?1:2 //如果val=true成立,则val=1,否则val=2;

2、逗号运算符:

a,b;

var val=(1,2,3);//从左到右开始计算,最终以最右边的值为主,val=3;

3、delete运算符:删除对象的属性;

var obj={x:1};

obj.x;

delete obj.x;//删除obj的x属性;

obj.x;//undefined

注意:configurable:false时,delete obj.x失效;configurable:true时,delete obj.x才有效;

var obj={};

Object.defineProperty(obj,‘x‘,{

  configurable:false,

  value:1

})

delete obj.x;//删除obj的x属性失效,返回false;

obj.x;//1

4、in运算符:判断在不在某个对象中;

window.x=1;

‘x‘ in window;//true

5、instanceof和typeof运算符:

{}instanceof Object; //true

typeof 100===‘number‘; //true

6、new运算符:

function Foo(){};//创建一个构造函数

Foo.prototype.x=1;

var obj=new Foo();

obj.x;

obj.hasOwnProperty(‘x‘); //false 判断x是否为对象obj上的属性

obj._proto_.hasOwnProperty(‘x‘); //true 判断x是否为原型链prototype上的属性

7、this运算符:

this; //全局作用域中this为window(浏览器)

var obj={

  func:function(){

  return this;

  }

}

obj.func();//obj this为obj

8、void运算符:

void 0  //undefined

void(0) //undefined

注意:运算符优先级:

运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值

六、try-catch语句:异常捕获机制

try{

  throw ‘test‘;

}catch(ex){

  console.log(ex); //test

}finally{

  console.log(‘finally‘);

}

执行流程:首先执行try块中的代码,如果抛出异常,就由catch捕获,并执行console,如果不发生异常,catch中的代码会被忽略掉,不管有没有异常,最后都会执行finally从句;注意:try后面必须接着一个catch或者finally从句;

try{

}finally{

  console.log(‘finally‘); //不管有没有异常,最终都要执行finally从句

}

try{

  try{

    throw new Error(‘oops‘);

  }finally{

    console.log(‘finally‘);

  }

}catch(ex){

  console.error(‘outer‘,ex.message); //执行结果为 finally outer oops,原因是因为内部的try中没有catch,就要执行离他最近的catch,但是内部的try中有finally,所以先执行finally,输出finally,然后再执行catch,输出outer,最后执行内部的try,输出oops;

}

try{

  try{

    throw new Error(‘oops‘);

  }catch (ex){

    console.error(‘inner‘,ex.message);

  }finally{

    console.log(‘finally‘);

  }

}catch(ex){

  console.error(‘outer‘,ex.message); //执行结果为 inner oops finally,原因是因为内部的try抛出oops异常后,首先执行内部的catch块,输出inner oops,然后再执行finally,输出finally,由于异常已经在内部处理过了,外层的try就不需要再执行异常了;

}

try{

  try{

    throw new Error(‘oops‘);

  }catch(ex){

    console.error(‘inner‘,ex.message);

    throw ex;

  }finally{

    console.log(‘finally‘);

  }

}catch(ex){

  console.error(‘outer‘,ex.message);//执行结果为 inner oops finally outer oops,原因是因为内部try抛出oops异常之后,执行内部的catch,输出inner,但是内部的catch又抛出异常,输出oops,所以就到了外部的catch中,但是要执行外部的catch之前要执行内部的finally,输出finally,然后再输出outer,接着再输出oops;

}

七、对象:(js中出了基本类型就只有对象了)包含函数、数组、正则、日期等等;

1、对象中包含一系列的属性,并且属性都是无序的,每个属性有一个字符串的key和value,属性间用逗号隔开;

2、创建对象:

字面量方式:

var a={x:1,y:2,z:{a:2,b:4}};

new或原型链:

function foo(){}

foo.prototype.z = 3;

var obj =new foo();

obj.y = 2;

obj.x = 1;

obj.x; // 1

obj.y; // 2

obj.z; // 3

typeof obj.toString; // ‘function‘

‘z‘ in obj; // true

obj.hasOwnProperty(‘z‘); // false 判断是否含有prototype属性

Object.create方法:

var obj = Object.create({x : 1});

obj.x // 1

typeof obj.toString // "function"

obj.hasOwnProperty(‘x‘);// false

var obj = Object.create(null);

obj.toString // undefined

3、对象属性删除:

注意以下属性不能被删除:

delete Object.prototype; //false

var 定义的全局变量或者局部变量、函数生命(无论是全局或者局部)都不能被delete掉,因为这些都不是对象的属性;但是隐式函数可以被delete;如下:

oh=1;

window.oh;//1

delete oh; //true

4、属性检测:

cat.hasOwnProperty(‘legs‘); //true 判断cat是否含有legs属性;

cat.propertyIsEnumerable(‘legs‘); //true 检测cat的属性是否可以被枚举

Object.defineProperty(cat,‘price‘,{enumerable:false,value:1000}); //禁止cat属性被枚举 defineProperty:创建属性

cat.propertyIsEnumerable(‘price‘); //false

5、get或者set方法读写属性:

var man = {
    name : ‘Bosn‘,
    weibo : ‘@Bosn‘,
    get age() {
        return new Date().getFullYear() - 1988;
    },
    set age(val) {
        console.log(‘Age can\‘t be set to ‘ + val);
    }
}
console.log(man.age); // 27
man.age = 100; // Age can‘t be set to 100
console.log(man.age); // still 27

6、属性标签:

Object.getOwnPropertyDescriptor({pro : true}, ‘pro‘); //getOwnPropertyDescriptor()方法返回属性的标签
// Object {value: true, writable: true:是否可被修改, enumerable: true:是否可被遍历, configurable: true:其他属性标签是否可以暂被修改} 
Object.getOwnPropertyDescriptor({pro : true}, ‘a‘); // undefined

7、对象序列化:

将json数据转为对象:JSON.stringify()

var obj = {x : 1, y : true, z : [1, 2, 3], nullVal : null}; JSON.stringify(obj);  // "{"x":1,"y":true,"z":[1,2,3],"nullVal":null}"

obj = {val : undefined, a : NaN, b : Infinity, c : new Date()}; JSON.stringify(obj);  // "{"a":null,"b":null,"c":"2015-01-20T14:15:43.910Z"}"

将对象转化为json:JSON.parse()

obj = JSON.parse(‘{"x" : 1}‘); obj.x;  // 1

八、数组:数组长度最长为2的23次方减1,即2^23-1,超过会报错;

1、创建数组:

new Array方式:

var arr = new Array();

var arrWithLength = new Array(100); // undefined * 100

var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi"); // 等价于[true, false, null, 1, 2, "hi"];

【】方式:

var BAT = [‘Alibaba‘, ‘Tencent‘, ‘Baidu‘];

var students = [{name : ‘Bosn‘, age : 27}, {name : ‘Nunnly‘, age : 3}];

var arr = [‘Nunnly‘, ‘is‘, ‘big‘, ‘keng‘, ‘B‘, 123, true, null];

var arrInArr = [[1, 2], [3, 4, 5]];

var commasArr1 = [1, , 2]; // 1, undefined, 2

var commasArr2 = [,,]; // undefined * 2

2、数组读写:数组从index=0开始,第一位的index=0;

delete a[0];console.log(a[0]); //undefined

3、数组元素处理:

arr.pop():将数组尾部的元素删除;

arr.push(3):从数组的尾部添加一个元素;

arr.shift():从数组的头部添加一个元素;

arr.unshift(0):将数组头部的元素删除;

var arr = [];

arr[0] = 1;

arr[1] = 2;

arr.push(3);

arr; // [1, 2, 3]

arr[arr.length] = 4; // equal to arr.push(4);

arr; // [1, 2, 3, 4]

arr.unshift(0);

arr; // [0, 1, 2, 3, 4];

delete arr[2];

arr; // [0, 1, undefined, 3, 4]

arr.length; // 5

2 in arr; // false

arr.length -= 1;

arr; // [0, 1, undefined, 3, 4], 4 is removed

arr.pop(); // 3 returned by pop

arr; // [0, 1, undefined], 3 is removed

arr.shift(); // 0 returned by shift

arr; // [1, undefined]

4.小注意:

①.+运算符注意:

a=+b;//这里的+b表示将b转换为number数字类型

a+=b;//这里的a+=b表示a=a+b,是在进行数字运算

②.isNaN:可以理解为首先NaN:not a number不是一个数字,而isNaN理解为:is not a number是否不是一个数字,因此在if判断中,isNaN为true,表示是 不是一个数字,也就是不是数字类型,而判断为false时,表示不是 不是一个数字,也就是是数字类型,因此isNaN判断为数字类型的布尔值应该为false;(注意NaN是数字类型)

时间: 2024-08-09 22:00:16

js基础笔记的相关文章

原声js基础笔记

原声js基础笔记 前端开发群: 欢迎加入. <!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </

JS基础笔记——基础常识篇

从这篇博客开始记录有关JS的学习之路,包括以前一些知识的复习与新学知识的总结.有看到的朋友觉得不对的可以指出来,我们一起探讨,毕竟本人还是小白.若是我一直被玩单机,就只好把它当做云笔记了.本人的所有js知识来源于两本书:JavaScript与DOM编程艺术.JavaScript高级程序设计.当然本人也会提出自己的见解与看法,有些地方若是错了,请友善的指出,小女子在此谢过了. 一.JS是什么? JavaScript诞生于1995年(和我同岁呢).如今的JavaScript经过几次进阶升级后,已经成

一份不错的vue.js基础笔记!!!!

第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 Vue.js的产生核心是为了解决如下三个问题: 解决数据绑定的问题: Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application) Angular.js中对PC端支持的比较良好,但是对移动端支持就一般.而Vue

JS基础笔记——基础篇

在这篇主要记述数据类型.变量等. 一.注释 注释的作用是提高代码的可读性,注释的内容不会在网页中显示.可分为单行注释与多行注释两种. 单行注释:在注释内容前加“//” 多行注释:以“/*”开始,以“*/”结束 二.变量 从编程角度讲,变量是用于存储某种/某些数值的存储器. (1)定义变量用关键字var,语法如下: var 变量名; (2)命名规则: I.变量必须使用字母.下划线.或者美元符开始 II.可以使用任意多个英文字母.数字.下划线或者美元符组成. III.不能使用js关键词与js保留字.

JS基础笔记集

three.js:3D框架  svgtween:动画框架 一.js事件的组成:on+事件名,当触发某个事件做一些事情:   如:onclick:当点击鼠标,触发的事件: 二.在写一个页面时,结构(html).样式(css)和行为(js)是要分离出来的:    好处:代码可复用,可读性好,可维护性好: 三.通过js获取元素方法:    1>通过元素中的id名,获取元素:document.getElementById("id名"):    2>通过元素名,直接获取元素:getE

笔记 js 基础笔记(Dom操作)

共同学习js,不对的地方欢迎大家指正. js Dom 操作 一 document获取节点的基本方法     1.document.getElementById('id');                                  //通过id来获取元素,返回指定的唯一元素.     2.document.getElementsByName("name");                      //通过name来获取元素,返回name='name'的集合.     3.d

js基础笔记1

1.加载完页面各节点之后,执行js? 使用 window.onload = function(){ //js } 2.给节点添加子节点的方法: //定义节点 var tr = document.createElement("tr"); var td1 = document.createElement("td"); //给tr添加子节点td1 tr.appendChild(td1); 3.给节点删除子节点的方法: tr = document.getElementByI

JS基础笔记——语句篇

今天就来复习整理一下语句吧. 下面有比较常用的几种:当然了并不全面.以后再做补充. 语句: I.判断语句(if...else) if(条件) { 条件成立时执行的代码 } else { 条件不成立时执行的代码 } II.循环语句(for) var count=10; for(var i=0;i<count;i++){ alert(i); } III.迭代语句(for-in) For(var propName in window){ Document.write(propName); } 在这个例

js基础学习笔记(二)

2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容. <script type="text/javascript"> document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出.