Day46 前端基础--JavaScript

一，JavaScript初识

　　1.ECMAScript和JavaScirpt的关系

　　　　前者是后者的规格，后者是前者的一种实现

　　2.JavaScript概述：

　　　　ECMAScript是一个重要的标准，但是它并不是JavaScript唯一的部分，当然，也不是唯一被标准化的部分，实际上，一个完整的JavaScript实现是有以下3个不同部分组成的：

　　　　1.核心：ECMAScript

　　　　2.文档对象模型(DOM)：Document object model (整合js,css,html)

　　　　3.浏览器对象模型(BOM)：Broswer object model(整合js和浏览器)

　　　　总结：

　　　　　　ECMAScript描述了JavaScript语言本身的相关内容

　　　　　　JavaScript是脚本语言，是一种轻量级的编程语言，是可插入HTML页面的编程代码，

插入HTML页面后，可由所有的现代浏览器执行。

二，JavaSript引入方式

　　1.script标签内写代码

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

　　2.引入外部的JS文件

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

三，JavaScript语言规范

　　1.注释

//单行注释

/*
多行注释
*/

　　2.结束符

/*JS中的语句要以分号";"为结束符*/

四，JavaScript语言基础

　　1.变量声明

　　　　JS的变量名可以使用_，数字，字母，$组成2，不能以数字开头。

　　　　声明变量使用var变量名;的格式来进行声明

　　　　注意：

　　　　　　变量名是区分大小写的

　　　　　　推荐使用驼峰式命名规则

　　　　　　保留字不能用做变量名

var name = "alex";
var age = 18;

　　2.let声明变量

　　　　用于声明变量，其用法类似于var，但是所声明的变量只在let命令所在的代码内有效。

　　　　例如：for循环的计数器就很适合使用let命令

for (let i=0;i<arr.length;i++){...}

　　3.const声明常量

　　　　使用const声明常量，一旦声明，其值就不能改变，常量声明默认使用大写

const PI = 3.1415
PI //3.1415

PI = 3
// TypeError: "PI" is read-only

五，JavaScript数据类型

　　1.JavaScript拥有动态类

var x; //此时x是undefined
var x = 1； //此时x是数字
var x = "Alex"  //此时x是字符串

　　

　　2.数字类型：数值(Number)

　　　　1.JS不区分整型和浮点型，就只有一种数字类型

var a = 12.34;
var b = 20;
var c = 123e5; //12300000
var d = 123e-5 //0.00123

　　　　2.还有一种NaN，表示不是一个数字(Not a Number)

　　　　3.数字类型的常用方法

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456
parseFloat('123.4567891111111111111111') //返回123.4567891111111，浮点数同样有精度

　　

　　3.字符串类型(String)

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

　　   字符串的常用方法：

//length()：返回长度，空格也会被计算长度
var s1 = 'hello sg';
si.length();   //返回8

//trim()：移除空白
var s2 = '  hello ';
s2.trim() //返回'hello'

//trimLeft()：移除左边的空白
var s3 = '     hello  '
s3.trimLeft()  //返回'hello  '

//trimRight()：移除右边的空白
var s4='    hello  '
s4.trimRight() //返回'     hello'

//charAt(n)：返回第几个字符
var s5 = 'hello sg';
s5.charAt(0); //返回'h'
s5.charAt(100); //返回''
s5.charAt(4); //返回'o'

//concat(value,...)：拼接
var s6 = 'hello';
s6.concat('哈哈'); //返回'hello哈哈'

//indexOf(substring,start)：substring参数：子序列的值，开始查找的位置，返回子序列位置
var s7 = 'hello sg';
s7.indexOf('sg')  //返回6
s7.indexOf('sg',4)  //返回6
s7.indexOf('sg',7) //不存在就返回-1
s7.indexOf('sg',8)  //不存在就返回-1

//substring(from,to)：根据索引获取子序列，顾首不顾尾
var s8 = 'hello sq';
s8.substring(0,5);  //返回'hello'
s8.substring(0,-5); //返回""，不支持倒序

//slice(start,end)：切片，顾首不顾尾
var s9 = 'hello sq';
s9.slice(0,5); //返回'hello'
s9.slice(0,-5) //返回''hel"，支持倒序

//toLowerCase()：转换为小写
var s10 = 'Hello sg';
s10.toLowerCase(); //返回'hello sq'

//toUpperCase()：转换为大写
var s10 = 'Hello sg';
s10.toUppercase(); //返回'HELLO SG'

//split(delimiter,limit)：分割，分割的第二个参数指的时返回结果的长度
var s11 = 'hello sq';
s11.split(' ') //返回(2) ['hello','sg']
s11.split(' ',1) //返回['hello']
s11.split(' ',2) //返回(2)['hello','sg']
s11.split(' ',3) //返回(2)['hello','sg']　

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)个字符结束(不包含该位置字符)

　　　　拼接字符串一般使用"+"

//字符串拼接
var a1 = [4,3,2,1]
a1.join('+') //返回"4+3+2+1"

　　　　模板字符串

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

//模板字符串
var name = '帅哥';
var s2 = '${name} gay in gay out!}';
s2 //返回''帅哥 gay in gay out!"

　　4.布尔值(Booleam)

　　注意：0,null,'',undefined,NaN都是false

//js的布尔值都是小写
var a = true;
var b = false;

　　

　　5.null和undefined

　　　　null：表示值为空，通常都是手动赋值

　　　　undefined：表示值只声明没有赋值

　　　　　　　　　  函数没有指定返回值，默认返回undefined

　　6.object(对象)

　　　　JS中的所有事物都是对象：字符串，数组，数值，函数...此外JS允许自定义对象

　　　　JS提供多个内建对象，比如String、Date、Array等等

　　　　对象只是带有属性和方法的特殊数据类型

　　　　1.Array：数组

　　　　　　var a1 = [11,22,33]

　　　　2.自定义对象

　　　　　　var o = {'name':'alex','age':18}

　　　　　　js中自定义对象，类似于python中的字段key可以不加引号

　　　　　　var o = {name:'alex',age:18}

　　　　3.常用方法：

//数组的切片
var a1 = [1,2,3,4];
a1[1] //返回2

//length：数组大小
var a2 = [1,2,3,4];
a2.length //返回4

//push(ele)：尾部追加元素
var a3 = [1,2,3,4];
a3.push(5);
a3 //返回（5）[1,2,3,4,5] 

//pop()：弹出尾部的元素
var a4 = [1,2,3,4];
a4.pop(); //返回4
a4   //返回(3) [1,2,3]

//unshift(ele)：头部插入元素
var a5 = [1,2,3,4];
a5.unshift(5); //返回4，元素总数

//shift()：弹出头部元素
var a6 = [1,2,3,4];
a6.shift(); //返回元素1

//slice(start,end)：切片
var a7 = [1,2,3,4];
a7.slice(1,3);  //返回(2) [2,3]
a7.slice(1,-1); //返回(2) [2,3]

//reverse()：反转
var a8 = [1,2,3,4];
a8.reverse(); //返回[4,3,2,1]


//join(seq)：将数组元素连接成字符串
var a9 = [1,2,3,4];
a9.join('+') //返回"1+2+3+4"

//concat(val,...)：连接数组
var a10 = [1,2,3,4];
a10.concat(5,6,7); //返回(7) [1,2,3,4,5,6,7]
a10.concat(['a','b']); //返回(6) [1,2,3,4,'a',''b]

/*
sort()：排序，如果不使用参数，默认将按字符顺序对数组中的元素进行排序
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
*/
function sortNumber(a,b){
    return a - b
}
var ar1 = [11, 2,12,19];
ar1.sort(); //返回（4）[11,12,19,2]
ar1.sort(sortNumber) //返回（4）[2,11,12,19]

//splice()：数组元素的删除，三个参数，开始删的位置，删除个数，追加的元素(可多个)
var a1 = [11,2,12,19];
a1.splice(1,1); //返回[2]
a1.splice(0,1,120,121,122); //返回[11]
a1 //返回(4) [12,19,120,121,122]

　　　　4.类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof NaN //"number"
typeof [11,22,33] //"object"
typeif null //"object"
typeof undefined //"undefined"

六，运算符

　　1.算数运算符

+ - * / % ++ --

　　2.比较运算符

> >= < <= != == === !==

//==：弱等于，只判断值相不相等
//===：强等于，既判断类型相不相等还判断值相不相等

　　3.逻辑运算符

&& || !

　　4.赋值运算符

= += -= *= /=