JavaScript学习内容

一、JavaScript简介

1.1 JavaScript用途

JavaScript一般用来编写客户端脚本，来为HTML页面添加交互行为，是前台语言，不是后台语言(node.js除外)；

1.2 JavaScript特点

1. 解释执行(浏览器就是其解释器)：事先不编译，逐行执行，无需进行严格的变量声明；
2. 简单易用：可以用任意工具编写，只需浏览器就可以执行其程序；
3. 基于对象：内置大量现成的对象，编写少量程序就可以完成目标；

1.3 JavaScript起源

点这里

1.4 JavaScript组成

ECMAScript：JavaScript的语法标准，包括变量、表达式、运算符、函数、if语句、for语句等。

文档对象模型（DOM） Document object model：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

浏览器对象模型（BOM） Broswer object model：操作浏览器部分功能的API，比如让浏览器自动滚动。

1.5 ECMAScript和JavaScript的关系

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以ECMAScript可以理解为是javascript的一个标准,而javascript是ECMA-262标准的实现和扩展。

二、JavaScript引入方式

方式一：

<script>
这里写代码
</script>

方式二

<script src="xxx.js"></script>

三、JavaScript语法规范

1. JavaScript对换行、缩进、空格不敏感；
2. 所有的符号，都是英语的。比如括号、引号、分号；
3. JavaScript注释

　单行注释：
             // 我是注释
  多行注释：
            /*
              多行注释1
              多行注释2
            */

ps：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

四、变量

4.1 声明变量的语法

先声明后定义

var name; // 声明是无需指定类型，此时name可以接受任意数据类型
name='sailan';

声明后立刻定义

var age=18;

ps: JavaScript属于弱类型动态语言；

4.2 变量名的命名规范

1. 由字母，数字，下划线，$ 组成,但是不能数字开头，也不能纯数字；
2. 严格区分大小写；
3. 不能包含关键字和保留字；
4. 推荐驼峰体命名，由多个有意义的单词组成名称时，第一个单词首字母小写，其余单词首字母大写；
5. 匈牙利命名：就是根据数据类型单词的的首字符作为前缀；

4.3 常量

ES6新增const用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415926;
PI=3 //TypeError: "PI" is read-only

4.4 ES6中let

ES6之前js没有块级作用域，ES6新增了let命令，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令；

for(let i=1;i<=5;i++){}

五、 数据类型及其内置方法

js是动态语言： 变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型；

5.1 数值(Number)

JavaScript不区分整形与浮点型，只有一种数字类型即number；

四舍五入

var num = 1.256
num.toFixed(2) // "1.35"

字符串转换数字类型

字符串转number
parseInt("123") //123

parseInt("abc") //NaN
NaN代表该属性非数字值的特殊值，用与指示某个值不是数字；

带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("18帅兰")); //18
parseInt("18帅兰") //18

只去末尾的中文，不会去开头的
console.log(parseInt("帅兰18")); // NaN

字符串浮点整型转换
parseInt("123.123") //123
parseFlort("123.123") //123.123

自动截断小数，取整四舍五入；
var a = parseInt("1.3") + parseInt("2.6"); //a=3
var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9

数字类型转字符串

var x=10;
var y="20";
var z=x+y; //z="1020"
typeof z; // String

var m=123;
var n=String(m); // n="123"

var a=123;
var b=a.toString(); //b="123"

5.2 字符串

定义：

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左侧空白
.trimRight()	移除右侧空白
.charAt(x)	返回指定索引字符
.concat(x,x)	拼接字符串，拼接通常用+进行
.indexOf(x,x)	查找子序列位置
.substring(x,x)	根据索引获取子序列
.slice(x,x)	切片根据索引获取子序列
.toLowerCase()	小写
.toUpperCase()	大写
.split(x,x)	指定符号进行切分，可指定分割次数

slice和substring的区别

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识，使用方式如下；

#1、完全可以当做普通字符串使用
var msg = `my name is sailan`

#2、也可以用来定义多行字符串
var info = `
    name:sailan
    age:18
    sex:male
`

#3、并且可以在字符串中嵌入变量
var name = "sailan";
var age = 18;
var msg = `my name is ${name}, my age is ${age}`;

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

5.3 布尔值

区别于Python，true和false都是小写；

var a = true;
var b = false;

任何数据类型都可以转换为boolean类型：空字符串、0、null、undefined、NaN都是false；

#布尔值为假的数据类型
Boolean('')
Boolean(0)
Boolean(null)
Boolean(undefined)
Boolean(NaN)

# 其余数据类型的布尔值均为真，例如
Boolean([])
Boolean(123)

5.4 null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null；

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined；

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值；

六、常用内置对象

6.1 数组对象Array

数组对象的作用是： 使用单独的变量名来存储一系列的值；类似于Python中的列表。

var x = ["sailan", "hello"];
console.log(x[1]);  // 输出"hello"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	移除尾部的元素，有返回值
.unshift(ele)	头部插入元素
.shift()	头部移除元素，有返回值
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

sort()
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照ASCII字符编码的顺序进行排序；

var arr = [123,9,1211,11]
arr.sort()
#[11, 1211, 123, 9]

如果想按照其他标准进行排序，就需要提供比较函数，该函数应该具有两个参数 a 和 b，接收传入的a和b，执行函数体代码，然后返回一个值用于说明a和b的大小；

返回值 < 0 ：代表a小于b
返回值 = 0 : 代表a等于b
返回值 > 0 ：代表a大于b

function sortNumber(a,b){
    return a - b
}
var arr = [123,9,1211,11]
arr.sort(sortNumber) #[9, 11, 123, 1211]

遍历数组中的元素，可以使用下面的方式

var arr = [11, 22, 33, 44];
for (var i=0;i<arr.length;i++) {
  console.log(i);
}

forEach()
语法：

forEach(function(currentValue, index, arr), thisValue)

var arr=['aa','bb','cc','dd','ee']

arr.forEach(function(v,i,arr){
    console.log(v,i,arr);
    console.log(this[0]);
},"hello")

splice()

语法：

splice(index,howmany,item1,.....,itemX)

var arr=['aa','bb','cc','dd','ee']

arr.splice(1,3,'xxxx') # 删除‘bb’，‘cc’，’dd‘这三个值，然后插入’xxxx‘

arr #["aa", "xxxx", "ee"]

map()

语法：

map(function(currentValue,index,arr), thisValue)

forEach vs map：
1、forEach()返回值是undefined，不可以链式调用。
var res=arr.forEach(function(v,i,arr){
    console.log(v,i,arr);
    console.log(this[0]);
    return 123;
},"hello")
res # undefined

2、map()返回一个新数组，原数组不会改变
var res=arr.map(function(v,i,arr){
    v=v + 'SB'
    return v;
},"hello")

res #["aaSB", "bbSB", "ccSB", "ddSB", "eeSB"]


在使用forEach()时候，如果数组在迭代的视乎被修改，则其他元素会被跳过
var arr=[11,22,33,44,55]
arr.forEach(function(v){
    console.log(v);
    if (v === 33){
        arr.shift() // 下一次循环应该循环出第索引为3的元素，但此时一旦删除第一个元素，那么值55的索引变成了3
    }
})
11
22
33
55

反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) {   //同时利用了call()方法
  return x;
}).reverse().join('');

6.2 Date日期对象

创建日期对象只有构造函数这一种方式,需使用new关键字；

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：参数为日期字符串
var d2 = new Date("2018/01/27 11:12:13");
console.log(d2.toLocaleString());

var d3 = new Date("01/27/18 11:12:13"); // 月/日/年 时分秒
console.log(d3.toLocaleString());

//方法3：参数为毫秒数
var d4 = new Date(7000);
console.log(d4.toLocaleString());
console.log(d4.toUTCString());

//方法4：参数为：年，月，日，时，分，秒，毫秒
var d5 = new Date(2018,1,27,11,12,13,700);
console.log(d5.toLocaleString());  //毫秒并不直接显示

方法	含义
getDate()	根据本地时间返回指定日期对象的月份中的第几天（1-31）。
getMonth()	根据本地时间返回指定日期对象的月份（0-11）
getFullYear()	根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）
getDay()	根据本地时间返回指定日期对象的星期中的第几天（0-6）
getHours()	根据本地时间返回指定日期对象的小时（0-23）
getMinutes()	根据本地时间返回指定日期对象的分钟（0-59）
getSeconds()	根据本地时间返回指定日期对象的秒数（0-59）
getMilliseconds()	根据本地时间返回指定日期对象的获取毫秒
getTime()	返回累计毫秒数(从1970/1/1午夜)
更多	点这里

6.3 Math对象

方法	含义
Math.floor()	向下取整,如5.1取整为5
Math.ceil()	向上取整,如5.1取整为6
Math.max(a,b)	求a和b中的最大值
Math.min(a,b)	求a和b中的最小值
Math.random()	随机数,默认0-1之间的随机数,若想求min~max之间的数，公式为：min+Math.random()*(max-min)

随机取4到7间的数值
4+Math.random()*3

6.4 JSON对象

# JSON格式的字符串转成对象
var str1='{"name":"egon","age":18}';

var obj1=JSON.parse(str1);
console.log(obj1.name);
console.log(obj1["name"]);

# 对象转成JSON字符串
var obj2={"name":"egon","age":18};

var str2=JSON.stringify(obj2);

6.5 RegExp对象

#1. 创建正则对象的方式1
// 参数1 正则表达式
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
// 注意：正则放到引号内，{}内的逗号后面不要加空格
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
reg1.test("egon_123") // true


#2. 创建正则对象的方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号
reg2.test("egon_123") // true


#3. String对象与正则结合的4个方法
var s1="hello world";
s1.match(/l/g) // 符合正则的内容["l", "l", "l"]
s1.search(/h/g) // 符合正则的内容的索引0
s1.split(/ /) // ["hello", "world"]
s1.replace(/l/g,'L') // "heLLo worLd"


#4. 匹配模式g与i
var s2="name:Egon age:18"
s2.replace(/e/,"赢") // "nam赢:Egon age:18"
s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"
s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"
 

#5. 注意1：
// 1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 4、当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 5、因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
var reg3 = /egon/g;

reg3.lastIndex
0

reg3.test("egon") // true，匹配成功
true

reg3.lastIndex // 匹配成功reg3.lasIndex=4
4

reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
false

reg3.lastIndex // 匹配失败，lastIndex归为0
0

reg3.test("egon") // 再次匹配成功
true


#6. 注意2：
当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

七、运算符

算数运算符
+
-
*
/
%
++ // 自增长1
-- // 自减少1

比较运算符
> >=
< <= 
!= 
== 不严谨 1 == “1”  // true
=== 严谨  1 === "1"  // false
!==

逻辑运算符
&& // and
|| // or
!  // not 

赋值运算符
=
+=
-=
*=
/=

八、流程控制

if->else

var age = 30;
undefined
if(age > 18){
    console.log('too old');
}else {
    console.log('too young');
} 

if->else if->else

var age=18;
if(age > 18){
    console.log('too old');
}
else if(age == 18){
    console.log('花姑娘,吆西');
}
else {
    console.log('too young');
}

switch
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

var day = new Date().getDay();
switch (day) {
  case 0:
      console.log("星期天，出去浪");
      break;
  case 6:
      console.log("星期六，也出去浪");
      break;
  default:
      console.log("工作日，正常上班")
}

for

for (let i=1;i<=3;i++){
    console.log(i);
}

while

let i=0;
undefined
while (i<=3){
    console.log(i);
    i++;
} 

三元运算

var x=1;
var y=2;
var z=x>y?x:y 

九、函数

9.1 函数的定义与调用（与python类同）

// 无参函数
function f1() {
  console.log("Hello world!");
};
f1();

// 有参数函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);

  console.log(arguments[0],arguments[1]);
  console.log(a, b);
};
f2(10,20);

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2); 

9.2 函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}
add(1,2)
输出：
3
2

注意：
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

9.3 函数的全局变量和局部变量

#局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，局部变量就会被删除。

#全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

#变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

9.4 作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。另外函数的作用域关系是在定义阶段就固定死的，与调用位置无关；

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是BeiJing

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var res = f();
res(); //上海

9.5 javascript中的变量提升和函数提升

在js中只有两种作用域；

#1、全局作用域

#2、函数作用域

在ES6之前，js是没有块级作用域。

声明变量的三种方式以及作用域关系

方式1：
var a=1;
这种声明属于常规声明，声明在哪作用域则在哪；

a=1;
声明为全局，意思如果此定义在局部作用域，会影响全局

let a=1;
声明在一个特殊的封闭空间里//块级作用域

什么叫变量提升
变量提升就是变量的声明会被提升到作用域最顶端(只提升声明)；

 console.log(x) // undefined
 var x = 1
 function f() {
     console.log(x) // undefined
     var x = 10;
     console.log(x) // 10
 }
 f()
 console.log(x) // 1
 这种设定可提升程序的健壮性，部分语言比如py，是不允许先调用后定义的

什么叫函数提升
类似变量提升，函数声明式会将函数的声明和定义一起提升到作用域的最顶上去；

需要注意如果函数声明和变量声明使用的是同一个变量名称，函数声明优先级高于变量声明；

f() // 帅的大自然
console.log(f) // ƒ f() {console.log('帅的大自然')}
var f = 10
function f() {console.log('帅的大自然')
}

console.log(f) // 10

十、BOM与DOM操作

链接正在来的路上