JS学习笔记1_基础与常识
1.六种数据类型
5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null)
1种复杂的:Object(本质是一组无序键值对)
2.字符串转数字
Number(str):先求值再转换(先valueOf再toString都不行就是NaN),一般与我们的预期结果不一样,比如Number(”)=Number(false)=Number(null)=0而var x;Number(x)=NaN。。。所以一般都用下面两种方式
parseInt(str):可以指定进制,建议使用parseInt(x, 10);这样的格式,即始终指明进制
parseFloat(str):不可以指定进制,解析整数时返回整数而不是浮点数
3.获取字符串长度
String类型的值都有length属性。str.length返回串长整数值,而不是通过其它函数来获取串长
4.值传递与地址传递
函数传参都是值传递
5.作用域链
本质是一个栈,存放了各层的变量对象(类似于编译器的符号表指针栈),变量对象持有该层所有变量和函数的访问权限,如果该层是函数,那么变量对象是arguments对象,栈顶是正在执行的上下文环境对应的变量对象,栈底是全局执行环境对应的变量对象。
6.作用域
没有块级作用域,有函数作用域
7.创建Object对象的2种方法
- var obj = new Object();obj.attr = value;
传统的方式,调用构造函数创建对象
- var obj = {attr1 : value1, attr2 : value2}或者var obj = {“attr1″ : value1, “attr2″ : value2}
对象字面量表示法,属性名可以是字符串
注意:
除非属性名有歧义例如:null, var等等,一般不要用字符串做属性名,当然只是习惯约束
用对象字面量方式定义对象时,不会调用其构造函数
8.访问属性值的两种方法
obj.attr
obj[“attr”] 优点是可以通过变量来访问属性,如var attrName = “attr”;obj[attrName]更灵活
9.数组的声明与初始化
var arr = new Array(value1, value2...);
var arr = Array(...);可以省略new
数组字面量:var arr = [value1, value2...];
注意:用数组字面量定义数组时也不会调用其构造函数
10.数组相关函数
见附录
11.函数声明与函数表达式的区别
function fun(){...} js引擎会在加载源代码时生成该函数对象
var fun = function(){...} js引擎在执行时才会生成该函数对象
12.函数重载
不支持重载。后声明的函数会覆盖先声明的,本质是对函数名进行了多次赋值操作(函数名只是一个指针变量)
13.函数内部特殊属性
arguments.callee 函数指针,指向拥有该arguments对象的函数,即当前函数
this 当前执行环境的引用,顶层的this就是window
arguments.callee.caller 函数指针,指向调用当前函数的函数,没有则返回null
注意:this可以是对象引用或者函数引用,但callee和caller只能是函数引用
14.函数对象的属性和方法
length 函数期望的命名参数的个数,js中可以给函数传递任意多个参数,因为除了形参,还可以用arguments获取任一参数
prototype 指向函数的原型对象
call(context, arg1, arg2...) 用来在特定的作用域中调用函数,解除对象与函数的紧耦合
apply(context, arguments或其它数组对象) 功能同上,支持数组参数
bind/unbind(context, arg1, arg2...) 绑定/解绑执行环境或参数,可以从已有函数生成新函数,但用bind连续绑定是无效的(连续 != 多次),例如:
function fun(){
alert(this.data);
}
var obj = {
data : 'obj_data'
};
var newObj = {
data : 'new_obj_data'
};
fun1 = fun.bind(obj);
fun1();
fun2 = fun1.bind(newObj);//连续绑定
fun2();
fun3 = fun.bind(newObj);//多次绑定
fun3();以上代码输出’objdata’, ‘objdata’, ‘newobjdata’,第二次绑定失败了,因为bind函数内部是用call来实现的,连续绑定的效果类似于:
//第一次绑定得到的函数
fun1 = fun.call(obj);
//第二次绑定得到的函数
fun2 = fun1.call(newObj);第二次绑定得到的函数中fun1内部的this确实指向newObj,但fun1中根本没有用到this,所以没有任何影响
15.一些常识
this永远指向自身所属的对象(你是谁的属性,你内部的this就是谁)
var obj1 = {
data : 1,
fun : function(){
alert(this.data);
}
};
var obj2 = {
data : 2
}; obj1.fun();
obj2.fun = obj1.fun;
obj2.fun();以上代码输出1和2,因为执行过倒数第二句后,obj2新增了一个fun属性,值为obj1.fun的引用,但因为obj2.fun是obj2的属性,所以this指向obj2
尽量在构造函数原型上定义成员函数,因为直接在构造函数中定义的函数有运行时闭包的开销
在js中应该用单引号,因为JSON和XML里只有双引号,用单引号可以避免转义
尽量在变量声明的同时初始化,以便区分undefined表示未声明。因为对已声明但未初始化的变量和未声明的变量用typeof操作符都会返回”undefined”
NaN(Not a Number)与任何值都不相等,包括NaN本身,所以需要用isNaN()函数来判断
只能给引用类型的值动态地添加属性。给基本类型的值添加属性不会报错但没有任何意义
数组会根据索引自动增长。需要注意length属性是可写的,也就是说可以动态地设置数组长度,如截掉尾部元素
函数名只是一个指针变量。function fun{...} fun = null;只是断开了引用关系,函数体并没有被销毁
附录
1.基础数据类型
Undefined 已定义但未初始化的对象的默认值
Null 表示一个空对象指针,所以用typeof检测之返回object
Boolean 布尔值,注意Boolean()转换函数,规则如下:
true/false ~ 不变
非空字符串/空字符串 ~ true/false
非0数字/0和NaN ~ true/false
任何对象/null ~ true/ false
undefined ~ false
上面这些规则非常重要,因为if条件会自动应用Boolean()转换,而且if(obj)是在js代码中是很常见的,很多时候流程控制错误都是if条件自动转换造成的
Number 数值,js中+0和-0相等,注意NaN,它与任何东西都不相等,包括自身,而且它既不大于n也不小于等于n。Number变量支持toString()函数,可以用来对数值串进行进制转换,例如var num = 17;num.toString(16)返回”11″
String 字符串,注意字符串的不可变性,进行巨量拼接操作时应该用数组 + join而不是循环+
2.Object类型变量的属性和方法
Constructor 保存这构造函数的引用
hasOwnProperty(porpertyName) 用来检查当前对象是否拥有指定属性(此处”属性“包括属性和方法)
isPrototypeOf(obj) 用来当前对象是不是指定对象的原型
propertyIsEnumerable(propertyName) 用来检测指定属性是否可枚举
toLocaleString() 相当于toString()函数,但附加了地区特征
toString() 返回对象的字符串表示
valueOf() 返回对象的字符串、数值或布尔值表示
3.常见引用类型
Function js中函数也是对象,非常灵活,例如:
var load = window.onload;
window.onload = function(){
//do something
load();//就是这么简单,添一对括号马上执行
}Array 数组类型的操作函数是最多的
栈方函数:push() 在数组末尾插一项, pop() 尾元出栈
队列函数:push() 同上,shift() 首元出队并返回首元;反向队列(队头进,队尾出)unshift()/pop()
排序函数:sort(fun) 无参比较字符串升序排列,有璨传入自定义比较函数返回正值/负值/0;reverse() 反转顺序
注意:sort()/reverse()都会直接改变原数组,而且sort()默认实现方式不太科学,对[1, 3, 10, 5]排序的结果是[1, 10, 3, 5],想要心里想的结果,必须传入自定义比较函数
操作函数:
arr.concat(arr1, arr2...) 连接形成新数组
arr.slice() 相当于substring对字符串的截取效果,用法也一样
arr.splice() 向数组中部插入项,splice(startIndex, num, item1, item2...) 表示把从startIndex开始的num项替换为各个item,只有前两个参数表示把从startIndex开始的num项换为空(也就是删除),用splice可以实现删除/替换/插入操作。
注意:splice函数也会直接改变原数组。
位置函数:indexOf(value)和lastIndexOf(value),查找value的索引位置,没找到返回-1,内部用的是全等操作符(===)
迭代函数:every(), filter(), forEach(), map(), some()都是对数组中的每一项运行指定方法,IE9+支持且并不常用,在此不展开叙述
归约函数:reduce(), reduceRight() 不做介绍,原因同上
Date类型:相关内容略多,参见W3School
RegExp类型:var regex = /^cat$/i;创建正则表达式(RegExp类型),支持的模式有g, i, m分别表示全局模式,忽略大小写模式,多行模式。当然,也可以用new RegExp(strRegex, strMode),不过,有什么理由非要去用这种方式呢?
js支持正则捕获,var matches = regex.exec(text); 通过matches[0], matches[1]...来获取捕获到的内容
普通的正则匹配:regex.test(text)返回true/false
基本包装类型:Boolean,String和Number,一直都在见面,只是没有注意到,例如:
var str = 'smilestome';
var str_ = str.substring(1);以上代码等价于:
var s1 = new String('smilestome');//创建包装类型实例
var s2 = s1.substring(1);//在实例上调用相应方法
s1 = null;//销毁实例自动装箱拆箱,为了让基础数据类型用起来更方便,但需要注意:new String()与String()转换方法不同,前者返回object类型,而后者返回string类型,鉴于这样的区别,混用会引起不必要的麻烦,所以我们没有理由显式创建包装类型。Boolean,Number与之类似。
JS学习笔记1_基础与常识的更多相关文章
- JavaScript学习笔记1_基础与常识
1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...
- Vue.js学习笔记--1.基础HTML和JS属性的使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...
- Vue.js学习笔记--2.基础v-指令
整理自官网教程 -- https://cn.vuejs.org/ 1. v-bind绑定Class与Style a. 绑定Class 语法:v-bind:class="{classname: ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
- Mockplus3.5.0.1新增标注功能
Mockplus3.5.0.1版本中,新增了标注功能.多种标注模式,智能生成,随时查看.原型设计效率更高. Mockplus的标注功能有以下四种模式: 1.无选中标注 在未选中任何组件时,按住Ctrl ...
- 2018年设计师都在用的PS切图插件--摹客iDoc
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- phantomjs问题收集
1. phantomjs如果遇到重定向的url,两个页面都会加载,onInitialized只会执行一次,onResourceReceived会执行两次.我试过在onInitialized加一段代码, ...
- 跟我学Spring Boot(二)Hello World
1.打开DemoApplication添加如下代码 package com.example; import org.springframework.boot.SpringApplication; im ...
- Hibernate学习笔记:基础模型类
根据业务建模型时,有一些字段基本每个表都是需要的,如下表: package com.company.jelly.model; import javax.persistence.EntityListen ...
- oracle的常用99条语句
1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...
- 数字统计(NOIP2010)
题目链接:数字统计 这题很水. 思路就是:枚举每一个区间内的数,然后对于每一个数,每个位去判断是否为2,就行了. 下面上代码: #include<bits/stdc++.h> using ...
- virtual、abstract、interface区别以及用法
virtual 用于在基类中的使用的方法,使用的情况为: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类实例的调用中,该虚方法使用的是基类定义的方法. ...
- ajax +jsp+iframe无刷新上传文件[转]
http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...
- IntellJ IDEA2017 springboot2.0.2 替代@SpringBootApplication方式
如果不想用@SpringBootApplication,那么可以用@EnableAutoConfiguration 和@ComponentScan替代@SpringBootApplication 详情 ...