JavaScript 廖
===============
JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中
======注释
// 以双斜杠开头直到行末的是注释，注释是给人看的，会被浏览器忽略
/* 在这中间的也是注释，将被浏览器忽略 */
===============
每个语句以;结束，语句块用{...},JavaScript严格区分大小写 ；
申明一个变量用var语句，注意只能用var申明一次；如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：
在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。所以建议加上var
======数据类型=====JavaScript 是动态语言，定义变量时，无需指定数据类型
number：不区分整数和浮点数，统一用Number表示
字符串：字符串是以单引号'或双引号"括起来的任意文本
由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较
唯一能判断NaN的方法是通过isNaN()函数null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。
JavaScript的数组可以包括任意数据类型
数组用[]表示，另一种创建数组的方法是通过Array()函数实现new Array(1, 2, 3); // 创建了数组[1, 2, 3]
JavaScript对象的键都是字符串类型，值可以是任意数据类型。要获取一个对象的属性，我们用对象变量.属性名的方式person.name; // 'Bob'
==================
如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：'I\'m \"OK\"!';
======================
由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号表示:
`这是一个
多行
字符串`;
注意：反引号在键盘的ESC下方，数字键1的左边
=================
要把多个字符串连接起来，可以用+号连接
var name = '小明';
var age = ;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
=====
var message = `你好, ${name}, 你今年${age}岁了!`;
==========
需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：
================
请注意，直接给Array的length赋一个新的值会导致Array大小的变化：
var arr = [, , ];
arr.length; //
arr.length = ;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = ;
arr; // arr变为[1, 2]
============
如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array
splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(, , 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(, ); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(, , 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
多维数组：var arr = [[1, 2, 3], [400, 500, 600], '-'];
===========
如果属性名包含特殊字符，就必须用''括起来：
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
访问这个属性也无法使用.操作符，必须用['xxx']来访问：
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
删除元素 delete xiaoming['name'];
是否拥有某一属性：
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
=================
使用if () { ... } else { ... }来进行条件判断var age = ;
if (age >= ) {
alert('adult');
} else if (age >= ) {
alert('teenager');
} else {
alert('kid');
}
======循环=======
var x = ;
var i;
for (i=; i<=; i++) {
x = x + i;
}
var o = {
name: 'Jack',
age: ,
city: 'Beijing'
};
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}
var x = ;
var n = ;
while (n > ) {
x = x + n;
n = n - ;
} var n = ;
do {
n = n + ;
} while (n < );
======={} 的key只能是字符串，但map去掉了这个限制
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
================
Set是没有重复元素的数组
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
s.add(4);
===========遍历set或map不能用for in,要用for of ===========
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[, 'x'], [, 'y'], [, 'z']]);
for (var x of a) { // 遍历Array
console.log(x);
}
for (var x of s) { // 遍历Set
console.log(x);
}
for (var x of m) { // 遍历Map
console.log(x[] + '=' + x[]);
}
======函数定义======
由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，传入的参数比定义的少也没有问题
function abs(x) {
if (x >= ) {
return x;
} else {
return -x;
}
}
var abs = function (x) {
if (x >= ) {
return x;
} else {
return -x;
}
};
========
JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。
利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值。
实际上arguments最常用于判断传入参数的个数：
function foo(x) {
console.log('x = ' + x); //
for (var i=; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
============
rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。
如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。
==================
由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行
JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量
们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：
function foo() {
var
x = , // x初始化为1
y = x + , // y初始化为2
z, i; // z和i为undefined
// 其他语句:
for (i=; i<; i++) {
...
}
}
====================
JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：
var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'
直接访问全局变量course和访问window.course是完全一样的。
============
全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中
// 唯一的全局变量MYAPP:
var MYAPP = {}; // 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0; // 其他函数:
MYAPP.foo = function () {
return 'foo';
};
把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。
============
const与let都具有块级作用域，var 则没有
=============
apply方法接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数
对普通函数调用，我们通常把this绑定为null
另一个与apply()类似的方法是call()，唯一区别是：
apply()把参数打包成Array再传入；call()把参数按顺序传入。
==============
function pow(x) {
return x * x;
}
var arr = [, , , , , , , , ];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
var arr = [, , , , ];
arr.reduce(function (x, y) {
return x + y;
}); //
var arr = [, , , , , , , ];
var r = arr.filter(function (x) {
return x % !== ;
});
r; // [1, 5, 9, 15]
================
sort()方法会直接对Array进行修改，它返回的结果仍是当前Array：
var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象
sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序
var arr = [, , , ];
arr.sort(function (x, y) {
if (x < y) {
return ;
}
if (x > y) {
return -;
}
return ;
}); // [20, 10, 2, 1]
===========
数组特有的方法：every()方法可以判断数组的所有元素是否满足测试条件。
find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined
findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1
forEach()和map()类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值
=================
unction count() {
var arr = [];
for (var i=; i<=; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[];
var f2 = results[];
var f3 = results[];
你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：
f1(); // 16
f2(); // 16
f3(); // 16
==============闭包
function* fib(max) {
var
t,
a = ,
b = ,
n = ;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
for (var x of fib(10)) { //遍历闭包
console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}
=======================
判断null请使用myVar === null
判断某个全局变量是否存在用typeof window.myVar === 'undefined'
函数内部判断某个变量是否存在用typeof myVar === 'undefined'
=====================
JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。
=====================
JSON的字符串规定必须用双引号""，Object的键也必须用双引号""
在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。
//序列化var xiaoming = {
name: '小明',
age: ,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming);
console.log(s);
反序列化：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}================新的关键字class从ES6开始正式被引入到JavaScript中
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
===========继承
class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
}
myGrade() {
alert('I am at grade ' + this.grade);
}
}
===============
window对象不但充当全局作用域，而且表示浏览器窗口。
location对象表示当前页面的URL信息
要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()
=================
document对象表示当前页面，始终记住DOM是一个树形结构。
document的title属性是从HTML文档中的<title>xxx</title>
用document对象提供的getElementById()和getElementsByTagName()可以获得一组DOM节点，，以及CSS选择器document.getElementsByClassName()
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
<dt>摩卡</dt>
<dd>热摩卡咖啡</dd>
<dt>酸奶</dt>
<dd>北京老酸奶</dd>
<dt>果汁</dt>
<dd>鲜榨苹果汁</dd>
</dl> var drinks = document.getElementsByTagName('dt');
var i, s; s = '提供的饮料有:';
for (i=; i<drinks.length; i++) {
s = s + drinks[i].innerHTML + ',';
}
console.log(s); 结果：
提供的饮料有:摩卡,酸奶,果汁,
=============
document对象还有一个cookie属性，可以获取当前页面的Cookie
服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项
==================
// 获取节点test下的所有直属子节点:
var cs = test.children; // 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
=============innerHTML属性，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改
修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>
DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
===========
有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
===================
如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：
var
i, c,
list = document.getElementById('list');
for (i = ; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i个子节点
}
=======删除自己=========
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
============删除子节点======
var parent = document.getElementById('parent');
parent.removeChild(parent.children[]);
parent.removeChild(parent.children[]); // <-- 浏览器报错
原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。
因此，删除多个节点时，要注意children属性时刻都在变化。
=========================
JavaScript 廖的更多相关文章
- JavaScript 廖2
HTML表单的输入控件主要有以下几种: 文本框,对应的<input type="text">,用于输入文本: 口令框,对应的<input type="p ...
- 廖老师JavaScript教程高阶函数-sort用法
先来学习一个新词:高阶函数 高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那 ...
- 廖雪峰JavaScript学习摘录
一. 1.语法基础: (1)特别注意相等运算符==.JavaScript在设计时,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果: 第二种是===比较 ...
- 廖雪峰 JavaScript 学习笔记（函数）
JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函 ...
- 廖雪峰 JavaScript 学习笔记(判断、循环)
条件判断 固定格式:if () { ... } else { ... } ,else可选 1.多行条件判断,通常把else if连写在一起,来增加可读性 例子: var age = 3; if (a ...
- 廖雪峰JavaScript学习笔记（基础及数据类型、变量）
先睹为快 alert('我要学JavaScript!'); Run: 基本语法: 1.每个语句以;结束,不强制 2.语句块用{...} 3.//单行注释,/*...*/ 多行注释 数据类型: 1.不区 ...
- 廖雪峰JavaScript练习题3
请尝试写一个验证Email地址的正则表达式.版本一应该可以验证出类似的Email: 正则表达式: <!DOCTYPE html> <html> <head> < ...
- 廖雪峰JavaScript练习题2
请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...
- 廖雪峰JavaScript练习题
练习:不要使用JavaScript内置的parseInt()函 数,利用map和reduce操作实现一个string2int()函数: <!DOCTYPE html> <html&g ...
随机推荐
- synchrnized 和lock的区别
- views 视图层
Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...
- 11款航拍辅助APP【转】
盘点丨11款航拍辅助APP_宇辰网_让世界读懂无人机_全球专业无人机资讯|电商|大数据服务平台
- 12.Scratch编程小游戏——天上掉馅饼
最意想天开的事,就是天降我们喜欢的食物,今天我们就来编写一个接馅饼的小游戏. 游戏规划: 1.用鼠标控制小猫的来回移动 2.甜甜圈从天而降 3.小猫接到绿色的甜甜圈减一分,接到红色的甜甜圈加一分,接到 ...
- PB笔记之窗口之间传递多参数的方法
messageboxex("警告","确定要把删除房间["+ls_id+"]吗?",question!,yesno!)<>1 t ...
- Java 8 新特性--Lambda表达式作为方法参数
Lambda表达式的使用场景: 当方法的参数是一个函数式接口时,可以使用Lambda表达式进行简化—— 首先,前提是Runnable接口是一个函数式接口,经过查看源码得知,确实如此: 将Runnabl ...
- io.lettuce.core.protocol.ConnectionWatchdog - Reconnecting, last destination was ***
一.问题 redis起来后一直有重连的日志,如下图: 二.分析 参考lettuce-core的github上Issues解答https://github.com/lettuce-io/lettuce- ...
- Aop 打印参数日志时，出现参数序列化异常。It is illegal to call this method if the current request is not in asynchron
错误信息: nested exception is java.lang.IllegalStateException: It is illegal to call this method if the ...
- Hystrix 用法及注解用法
一.hystrix参数使用方法 通过注解@HystrixCommand的commandProperties去配置,如下就是hystrix命令超时时间命令执行超时时间,为1000ms和执行是不启用超时 ...
- 在论坛中出现的比较难的sql问题：31(row_number函数+子查询 月环比计算)
原文:在论坛中出现的比较难的sql问题:31(row_number函数+子查询 月环比计算) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.