JS是一种解释性脚本语言,在网页开发用经常用到(HTML CSS),用于控制网页的行为。现在RTT的柿饼UI也是用JS来开发的,所以很有必要学习一下。
注释:// 、/* */
语句分行;
折行
大小写敏感。
<scrip> .... </scrip>
关键词和语句:
try ..catch..throw
var:定义一个变量
function:定义一个函数;函数表达式:当用一个变量接收函数返回值后,该变量可以做为函数指针使用;箭头函数不能用函数提升而应先定义后使用。自动以函数:形式上就是将整个函数作为函数指针。
函数可以设置默认参数,函数有个内置的对象 arguments 对象:arguments[i]或者arguments.length;
函数不属于任何对象,默认是全局的,在HTML中属于HTML页面,而在浏览器中属于Window.
函数中可以用this指针来操作;
函数可以内嵌函数。
对象的方法:对象内的的K-V的V如果是函数的返回值则成为函数的方法,里面可以用this指针,根据是否是strict模式,this
指向undefined
或window,可以用obj.k()或者fun.apply(obj,[
参数数组])或者fun.call(obj,参数顺序列表)
来调用。
装饰器:动态的改变函数行为;
高阶函数:就是函数的参数可以是函数,即一个函数可以接收另一个函数作为参数。最典型的函数有:
- arry.map(fun)/arry.reduce(fun):前者是将一个数组通过一个函数映射后得到一个新的数组;后者是一个数组的n个参数通过某个函数得到某个结果,将该结果作为一参数添加n-1个元素进行f运算,多次迭代直到结束。
arry.filter(function {})
把传入的函数依次作用于每个元素,然后根据返回值是true
还是false
决定保留还是丢弃该元素,将结果作为一个新数组。回调 函数的三元素element, index, self- sort():也是一个高阶函数,通过比较大小调整原数组的位置,即原数组也发生了改变。
every()
方法可以判断数组的所有元素是否满足测试条件find()
方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined;
findIndex()
和find()
类似,也是查找符合条件的第一个元素,不同之处在于findIndex()
会返回这个元素的索引,如果没有找到,返回-1
forEach()
常用于遍历数组,但不会返回新的数组;
箭头函数:相当于匿名函数和lamda函数,省去了{}和返回值,箭头函数中的this指针指向本对象
生成器generator看上去像一个函数,但可以返回多次,能记住状态相当于一个C中一个static修饰的局部变量或者全局变量。
闭包:返回一个函数并延迟执行,借助闭包,同样可以封装一个私有变量
数据类型:数字、字符串、布尔、数组、对象(两种寻址方法,对象是键值对的容器。类似python中的字典或C总的哈希表,对象的属性就是一些键值对,对象的方法作为函数定义在函数的属性中),对象的K如果是有效变量名则可用object.prop访问,如为特殊字符则需要用``,且访问用object【··】来访问;判断是否是对象属性可以用v in obj或者用obj.hasOwnProperty('prop')来判断;对象的添加和删除object.newprop=''; / delelt object.newpro
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
在函数内部没有用Var定义的变量为全局变量。new出来的用typeof出来的是object.
字符串有属性和方法。
Var/let/const关于变量作用域及变量提升
JSON:更多 JSON 信息,你可以阅读我们的 JSON 教程。
英文全称 JavaScript Object Notation,用于存储和数据交换(服务器到浏览器传输)的格式。JSON 字符串转换为 JavaScript 对象:
/*首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:*/
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);//然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
/*最后,在你的页面中使用新的 JavaScript 对象*/
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
HTML 载入外部 JavaScript 文件
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):
<script src="myscript.js">
JavaScript 正则表达式:
语法:/正则表达式主体/修饰符(可选)
用途:在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace(),用于文本和字符串的搜索和替换。
类似的方法有:/e/.test()或者/e/.exec()
完整的 RegExp 对象参考手册,请参考我们的 JavaScript RegExp 参考手册。
网页内容:
"<br>"表示换行。
基础语法:
1 逻辑判断用===而不用==后者先将两边转换同种类型再比较,有时候结果很诡异;JavaScript把null
、undefined
、0
、NaN
和空字符串''
视为false
,其他值一概视为true;
循环除了和C语言一样外还有变体for ...in ...
2 是否不是数字的判断方法:isNaN(NaN);0是一个数值;‘’是一个空字符串;null表示为空的值;infinite(比如除数是0的结果);
undefined(比如数组越界)
3浮点数比较:只能计算它们之差的绝对值,看是否小于某个阈值:Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
4 JavaScript的同一个数组中可以包括任意数据类型,创建新数组:new Array(1, 2, 3); // 创建了数组[1, 2, 3];数组长度:'.lenth',给该属性赋值可以动态改变数组长度,数组可以嵌套组成多维数组;常用属性方法:
indexOf(index)/slice即截取或拷贝新数组,不包含结束;
push和pop在数组的末尾动态的添加和删除元素;
unshift和shift数组的头部添加若干和删除首个元素;
sort排序;
reverse反转
splice(2, 3, 'Google', 'Facebook')从指定位置开始删除多个个,并从该位置开始添加若干个;
concat拼接返回一个新的数组;
join用指定的字符链接;
5对象:用var定义(的变量的作用域为函数体内)的无序K-V对组合,k的值为字符串(最新的ES6规范引入了新的数据类型Map/
Set此时K可以为数字
),不用var定义的变量默认为全局变量。当用strict模式(
'use strict';声明
)后不用var定义将报错
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
5控制台输出:console.log()
代替alert()
的好处是可以避免弹出烦人的对话框。
7字符串:用''
或""
括起来的字符,多行字符串用反引号(和键盘上的~同一个键);ASCII字符可以以x##
形式的十六进制表示;用u####
表示一个Unicode字符;字符串的连接用+或者模板字符串${变量};
对字符串中字符的索引可用类似数组的下标索引,但对其赋值无效;字符串操作 常用方法toUpperCase、toLowerCase、indexOf、substring(start,stop)、
8iterable
类型:遍历Array
可以采用下标循环,遍历Map
和Set
就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable
类型,Array
、Map
和Set
都属于iterable
类型。具有iterable
类型的集合可以通过新的for ... of
循环来遍历,forEach
方法。
9 函数:用关键字fun fun_name(参数)。注意:JavaScript函数允许接收任意个参数,可以用argument来接收所有参数,arguments.lenth表示长度;用 ...rest来表示变参和拾取变化的所有参数到一个数组中;jJavaScript引擎有一个在行末自动添加分号的机制
所以当return 要么加{}要么写在一行上。
函数可以嵌套;内层可以调用外层同名变量,反之不可;
JavaScript引擎自动提升了变量的声明,但不会提升变量的赋值,所以先调用后定义不会语法出错但逻辑会不如预期。全局变量是在windows对象下,不同的JavaScript文件如果使用了相同的全局变量,或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现,此时可以用命名空间如下;局部作用域:用let代替var,定义的变量作用域为从定义的{}内。
// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
return 'foo';
};
常量定义:const 大写变量=value;
析构赋值(可嵌套,可省略,可指定默认值,ES6版本支持Chrome,Firefox,Edge):
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];