前端--JS

Posted 2021-01-04 gxj742

---恢复内容开始---

ECNAScript是js的一个标准

JS的三大部分:

　　　　1.基础部分

　　　　2.操作浏览器  BOM

　　　　3.操作文档中的标签  DOM

JS的导入方法:

　　　　1.在script标签中写入内容

　　　　2.在JS文件中写入代码,在head部分的script标签中导入地址

语言规范: 

注释:

单行注释://

多行注释:/*..........*/

结束语:

每个语句结束的部分加上分号(;)

声明变量:

语法:var 变量名;

变量名由_,数字,字母,$组成,不能有数字开头.其余的规则和python中的命名规则一样.

ES6增加:

　　const:定义常量,一旦声明常量的值不变

　　let:用法和var类似,只在let命令所在的代码块内生效

数据类型:

javascript:拥有动态类型

例:

var s;  //声明变量
var s = 123  //s是数值类型
var s = "123" //s是字符串类型

数值类型:

JavaScript:不区分float和int统一叫数值类型.

例:科学计数法

var num = 10e3
console.log(num)   ==>10000

NaN表示不是数值类型(Not a Number)

例:parseInt (取整) 和parseFalse

var num = 10.123;
console.log(parseInt(num));   ==>10
console.log(parseFloat(num)); ==>10.123
var s = "anc";
console.log(parseInt(s))     ==>NaN

字符串类型:

例:字符串的拼接

var s1 = "java";
var s2 = "Script";
console.log(s1+s2);  ==>JavaScript

例:``反引符

var name = "小白";
var s = `他叫${name}.`
console.log(s)       ==>他叫小白.

字符串的常用方法:

　　.length     返回长度(属性)

　　.trim()   去除左右两端的空格

　　.trimRight()   去除右边的空格

　　.trimLeft()    去除左边的空格

　　.charAt(n)　　返回第n个字符

　　.indexOf(元素,n)     返回元素在字符串中的位置(索引)    n是从索引即从第n位元素向后找(可以不写n)   没有返回-1

　　.concat(字符串)　　将字符串和原字符串拼接

　　.substring(num1,num2)　　num1和num2都是索引 如果num1<num2则从num2切到num1

　　.slice(num1,num2)　　切片 顾头不顾尾  num2可以是负数    没有返回一个空字符串

　　.toLowerCase() 　　小写

　　.toUpperCase()　　大写

　　.split(元素,n)　　将字符串按照元素来切割返回有n个元素的列表.(n可以不写)

布尔(bool)类型:

bool值只有true和false 

""(空字符),0,null,undefined,NaN都表示false

undefined类型:

表示声明一个变量但没有赋值.

对象类型:

null是一个对象 表示手动清空一个变量.

对象包括:

　　1.数组(列表)

　　2.自定义对象(字典)

数组的常用方法:

　　.length　　长度

　　.push(元素)　　获取列表添加元素后的长度   原列表的最后添加元素

　　.pop()　　获取列表最后一个元素  原列表的最后一个元素被删除

　　.unsift(元素)　　 获取列表添加元素后的长度  为原列表的开头添加元素

　　.shift()　　获取列表第一个元素  原列表的第一个元素被删除

　　.slice(num1,num2)　　切片支持负数  如果没有返回空列表

　　.reverse()　　反转列表  直接操作原列表　　

　　.join("-")　　将数组中的每个元素用-连接成一个字符串

　　.concat(元素)　　连接成一个新数组     如果元素是一个列表将列表中的每个元素分别添加到列表中;如果元素是字符串将字符串作为一个元素添加到列表中

　　.sort()　　按照每个元素的ASCII码进行排序,操作原列表

　　.splice(num1,num2,item1,item2...)　　从num1开始删除,删除num2个元素,将删除的元素替换成item1,item2...

　　.map()　　返回一个数组元素调用函数处理后的新数组.

例:sort按照自定义大小排序

function sortNumber(a,b) {
    return a-b
}
var l1 = [2,4,0,45,9,12]
l1.sort(sortNumber)
console.log(l1)          ==>[0, 2, 4, 9, 12, 45]

例:splice

var l1 = ["a",2,"d",5,2,"a",2]
console.log(l1.splice(2,3,"A","B","C","D","E"));    //["d", 5, 2]
console.log(l1)     //["a", 2, "A", "B", "C", "D", "E", "a", 2]

例:map

function myMap(a) {
    return a**2
}
var l = [1,2,3,4,5]
console.log(l.map(myMap))   //[1, 4, 9, 16, 25]

 

类型查询:　

typeof :是一个一元运算不是一个函数　

 

运算符:　

算数元素符:

+, - ,* ,/, %(取余), ++(默认加一), --(默认减一)

比较运算符:

< ,> ,= ,!= ,==(判断,弱判断,即数值相等返回true不管类型是否一致) ,===(即判断数值又判断类型) ,!==

逻辑运算:

&&(and) , ||(or) , !(not)   将一个变量快速转化成bool类型(!!num)

赋值运算:

= , += , -= , *=(乘等于) , /=(除等于)

流程控制:

例: if...else..

var age = 19;
if (age > 18) {
    console.log("成年人")
} else {
    console.log("未成年")
}

例:if...else if...else...

var a = 5;
if (a>5) {
    console.log("a>5")
} else if (a<5) {
    console.log("a<5")
} else {
    console.log("a=5")
}

例:switch中的每一个case后面都会加break语句,否则程序会继续向下执行剩下的case语句

var today = 6;
switch (today) {
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2);
        break;
    case 3:
        console.log(3);
        break;
    default:
        console.log(6);
}

例:for循环

for (var i=0; i<10; i++) {  //第一个分号前面是初始化一个变量,第二个变量是条件,第二个后面是在代码块执行完后执行在判断条件,条件成立继续执行,不成立结束循环.
    console.log(i);
}

例:for循环数组

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

例:while循环

var i = 0;
while (i<10) {
    console.log(i);
    i++;
}

例:三元运算

var a = 1;
var b = 2;
var c = a>b ? a:b;
console.log(c)      ==>2