FrontEnd-Basis-5th

周一,晴,记录生活分享点滴

参考博客:https://www.cnblogs.com/yuanchenqi/articles/5980312.html

 

JavaScript(一)

JavaScript的引入方式

// 直接编写:既可以在head里面,也可以在body里面,推荐在body的末尾
    

 // 导入文件:导入的放在head里面
    

 

JavaScript的基础

变量

关键字:var ,用分号表示结束

// 定义变量
var a=1, b=3;

// 弹框显示
alert(a);
alert(b);

命名

  1. 变量命名首字符只能是字母,下划线,$美元符 三选一,且区分大小写,x与X是两个变量

  2. 命名规则

// 不推荐 -------------------------------------

Camel 标记法  
首字母是小写的,接下来的字母都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的,接下来的字母都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";


// 推荐用 -------------------------------------

匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。
例如,i 表示整数,s 表示字符串
Var iMyTestValue = 0, sMySecondValue = "hi";

基础规范

  1. 每行结束可以不加分号, 没有分号会以换行符作为每行的结束

// 第一种 ----------------------------
a=1;b=2;  // a=1 b=2; 错误

// 第二种 ----------------------------
a=1
b=2

// 第三种 推荐 -----------------------
a=1;
b=2;

{
 a=1;
 b=2;
    // 推荐加tab
    a=1;
    b=2;
}
  1. 注释 支持多行注释和单行注释 /**/ //

  2. 使用{ }来封装代码块

常量和标识符

常量 :直接在程序中出现的数据值

标识符

  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成

  2. 常用于表示函数、变量等的名称

  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是

  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

FrontEnd-Basis-5th_第1张图片

FrontEnd-Basis-5th_第2张图片

数据类型

FrontEnd-Basis-5th_第3张图片

FrontEnd-Basis-5th_第4张图片

基本数据类型

//-----------------------js的五种基本数据类型----------------------------

// 1 Number 包括整型和浮点型 1 2 34

// 2 String 字符串数据类型  "" 或''构成
   var s="hello"
   var s2="\u4f60\u597d\n欢迎来到\"JavaScript世界\""
   alert(s2);

// 3 Boolean: true  false 用于条件判断
   if (true){
       alert("success!")  // true 可以看到success,false看不到
   }

// 4 Undefined:undefined
   var a;                 // 如果声明了某个变量,但是未对它赋值,则该变量是Undefined类型
   alert(a);

// 5 null: 占一个对象位置
   var obj=new Animal()
   var obj=null           // 证明obj是一个对象

数据类型转换

   alert(1+"hello");           // 数字 + 字符串:数字转换为字符串
   alert(1+true);              // 数字 + 布尔值:true转换为1,false转换为0
   alert(1+false);
   alert(2==true);  // 注意:此格式错误,ture只等于1,false只等与0
   alert("hello"+true);        // 字符串 + 布尔值:布尔值转换为字符串true或false 

强制类型转换函数

// 函数parseInt:强制转换成整数
   alert(parseInt(3.14));      // 3
   alert(parseInt("3.14"));    // 3
   alert(parseInt("3.14a"));   // 3
   alert(parseInt("3.a14"));   // 3
   alert(parseInt("a3.94"));   // NaN:当字符串转换程数字失败时就是NaN;属于Number

// NaN数据在表达式中一定结果为false,除了!=
   alert(NaN==0);              // fasle
   alert(NaN>0);               // fasle
   alert(NaN<0);               // fasle
   alert(NaN==NaN) ;           // fasle
   alert(NaN!=0);              // true

类型查询函数(typeof)

   var i=10;
   var s="hello";
   var b=false;
   var u=undefined;
   var n=null
   var obj= new Object()

   console.log(typeof(i));     // number
   console.log(typeof(s));     // string
   console.log(typeof(b));     // boolean
   console.log(typeof(u));     // undefined
   console.log(typeof(n));     // object
   console.log(typeof(obj));   // object

 

ECMAScript 运算符

ECMAScript 算数运算符

// 加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )  加、减、乘、除、余数和数学中的运算方法一样  
9/2=4.5;4*5=20;9%2=1;

// - 除了可以表示减号还可以表示负号
x=-y; 表示x等于-y

// + 除了可以表示加法运算还可以用于字符串的连接
"abc"+"def"="abcdef";

递增(++) 、递减(--)

// a++相当于a=a+1,a--相当于a=a-1   
   var a = 1;
   var b = a++;          // 先赋值后加减
   var b = ++a;          // 先加减后赋值
   alert(b);  
   alert(a); 
   // var b = a++ 得出b=1,a=2
   // var b = ++a 得出b=2,a=2

// 例子:
   var x=1;
   alert(x++); // x=x+1  1
   alert(++x); // x=x+1  3
   alert(--x); // x=x-1  2
   alert(x--); // x=x-1  2
   alert(x)    // 1

一元加减法

  var a=3;        // 3    -3    number
  var a="3"       // 3    -3    number
  var a="3.2"     // 3.2  -3.2  number
  var a="123a456" // NaN  NaN   number
  var a="123a"    // NaN  NaN   number
  var a="a123"    // NaN  NaN   number
  b=+a;
  b=-a;
  alert(b);
  alert(typeof(b));

  var d="yuan";
  d=+d;
  alert(d);  // NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
  alert(typeof(d));  // Number

ECMAScript 逻辑运算符

等于 ( == )  不等于( != )  大于( > )  小于( < )  大于等于(>=)  小于等于(<=)
与 (&&) 、或(||) 、非(!)

&& 逻辑与     1 && 0 ---->0  // 同 and
            0 && 1 ---->0
            0 && 0 ---->0
            1 && 1 ---->1

|| 逻辑或     1 || 0 ---->1  // 同 or
            0 || 1 ---->1
            0 || 0 ---->0
            1 || 1 ---->1

!  逻辑非     !0=1           // 同not
             !1=0

// 例1-----------------------------------------------------------------
var a=1;
if(a<10 && a>0){
    ++a;
    alert(a)  // a=2
}

// 例2-----------------------------------------------------------------
if (null && true){  // 没有通过,null指一个空的对象
    alert(1);
}
//null && true的布尔值最终还是false
"22"          /*可通过*/  ""    /*无法通过*/
new Object()  /*可通过*/  null  /*无法通过*/
if (new Object()){
    alert(1);
}

// 例3 如果一个运算数是对象,另一个是Boolean值,返回该对象------------------
if (true && new Object()){   // true && 两个元素在一起时,布尔值取决于最后一个值
    alert("hello")
}

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的,不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值,逻辑 AND 运算并不一定返回 Boolean 值:

  • 如果某个运算数是 null,返回 null

  • 如果某个运算数是 NaN,返回 NaN

  • 如果某个运算数是 undefined,返回undefined

逻辑 OR 运算符( || )

与逻辑 AND 运算符相似,如果某个运算数不是 Boolean 值,逻辑 OR 运算并不一定返回 Boolean 值

其他

// 左移 ----------------------------------------------------------------
3<<2=12
00000011<<2=00001100=12  // 3的二进制数00000011向左移两位得00001100
// 右移 --------------------------------
12>>1=6
00001100>>1=00000110=6   // 12的二进制数00001100向右移一位得00000110
// NOT ---------------------------------
~6=9
00000110~6=00001001=9    // 6的二进制数00000110位非得00001001


// 位运算符-------------------------------------------------------------
// 位与 & ------------------------------
1&2=0 
1:  0000 0001
2:  0000 0010
1&2:0000 0000
if ( 1 & 2 ){  // &为false,&&为true
   alert("hello")
}  
// 位或 | ------------------------------
1|2=3
1:  0000 0001
2:  0000 0010
1|2:0000 0011
// 异或 ^ ------------------------------
^2=1
1:  0000 0001
2:  0000 0010

ECMAScript 赋值运算符

alert(2==2);    // true 
alert(2=="2");  // true   等于中间有数据转换的过程
alert(2==="2"); // false  全等于表示不作转换

ECMAScript等性运算符

FrontEnd-Basis-5th_第5张图片

ECMAScript 关系运算符

alert(25<3);                // false
alert("ba2566545"<"bab3");  // true   比较首字母ASCII表的位置
alert("25"<3)               // fasle

总结:

  • 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

  • 比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较

Boolean运算符

var temp=new Object();  // 错误的 false;[];0; null; undefined;
                        // 正确的 object(new Object();)

    if(temp){
        console.log("zhangsan")
    }else {
        console.log("lisi")
    }

全等号和非全等号

全等号不进行数据转换,直接比

 

控制语句

if 控制语句

// 例1 --------------------------------------
var week="Sunday";
    if (week=="Sunday") {
        alert("Sunday");
    }else {
        alert("not Sunday")
    }
// 例2 --------------------------------------
var week="Sunday";
    if (week=="Sunday") {
        alert("Sunday");
    }else if(week=="Saturday") {
        alert("Saturday");
    }else {
        alert("not Saturday Sunday");
    }

switch 选择控制语句

// switch基本格式 --------------------------------------
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}   
// 例子 ------------------------------------------------
   var x=3;
   switch(x){
       case 1:y="星期一";    break;  
       case 2:y="星期二";    break;
       case 3:y="星期三";    break;  // 因为x=3,所以执行case 3,从上向下一个一个找,不用像if...else似的判断值,相对if...else提高效率
       case 4:y="星期四";    break;
       case 5:y="星期五";    break;
       case 6:y="星期六";    break;
       case 7:y="星期日";    break;
       default: y="未定义";  break;
   }

for 循环控制语句·重要

// for循环基本格式 -----------------------------------
for (初始化;条件;增量){
    语句1;
    ...
}
功能说明
实现条件循环,当条件成立时,执行语句1,否则跳出循环体

// 例子1 -------------------------------------------
var a=[1,"hello",true];

for (var i in a){
    console.log(i);
    console.log(a[i])
}

// 例子2 for循环求1-100和 ----------------------------
var ret=0;
for (var i=1;i<101;i=i+1){
    ret+=i;
}
alert(ret)

// 例子3 --------------------------------------------
for (var i=1;i<=6;i++){
document.write("hello");
document.write("
"); } //--------------------------------------------------------------------------------------------------- obj={"11":"111","22":[1,2]}; // 在py中指字典,在js中指对象 alert(typeof(obj)) // object alert(obj) // [object Object] // 对js的对象进行操作 for (var i in obj){ console.log(i); // 键 11 22 console.log(obj[i]); // 值 [1,2] }

while 循环控制语句

// while循环基本格式 --------------------
while (条件){
语句1;
...
}
功能说明
运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环

// 例子 --------------------------------
var i=1;
var ret=0;
while (i<101){
   ret+=i;
   i++;
}
alert(ret)

异常处理

try {
    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
    //e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

注:主动抛出异常 throw Error('xxxx')

 

ECMA对象

对象分类

方式一

  • ECMAScript:js本身的

  • DOM:与html相关

  • BOM:浏览器对象,与js浏览器相关

方式二

  • ECMAScript包括native object 和host object

  • host object 包括 BOM、DOM

object对象:ECMAScript 中的所有对象都由这个对象继承而来;Object 对象中的所有属性和方法都会出现在其他对象中

ToString() : 返回对象的原始字符串表示。
ValueOf()  : 返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。

11种内置对象

Array       // 数组对象
String      // 字符串对象   *****
Date        // 日期对象

Math        // 数学计算
Boolean     // 布尔值
Number      // 数值

Function    // 函数        *****
Global      // 全局
Error       // 错误对象
RegExp      // 正则表达式
Object      // 原生类

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象

string对象

var s="hello";               // 简写方式
var s2=new String("hello2")  // 完整方式    与python的区别是多了一个new

alert(s)
alert(s2)

Function 对象·重点

函数创建方式

// function 创建方式1 (推荐方式)
function func1() {
    alert(123);
    return 8
}
var ret=func1();
    alert(ret);

// function 创建方式2
var func2=new Function("参数1","参数n","函数体");
var add=new Function("a","b","alert(a+b)");

功能说明:

  • 可以使用变量、常量或表达式作为函数调用的参数

  • 函数由关键字function定义

  • 函数名的定义规则与标识符一致,大小写是敏感的

  • 返回值必须使用return

函数属性和方法

// void 方法 ----------------------------------------------------------
function f() {
   return 8
}
alert(void(f()))  // void 表示拦截返回值,不返回任何内容

// 变量 ---------------------------------------------------------------
function func1() {
    b=4;               // 去掉var 局部变为全局变量
    var b=3            // 推荐采用局部变量
}

// 对两个参数进行加法 ---------------------------------------------------
var ret=0
function func1(a,b) {
    ret=a+b;
    return ret
}
alert(func1(1,5,6,9))  // 结果为6,1+5的结果,后面的数字6、9不影响
    // 例子 --------------
    function a(a,b){
        alert(a+b);
    }
    var a=1;
    var b=2;
    a(a,b)  // 报错 a is not a function 

arguments 对象

var ret=0;
function add() {
    console.log(arguments.length);  // add的长度个数
    console.log(arguments);         // add的所有数
    
// 用法 1 -------------------------------------------------------------
for (var i in arguments){           // 计算add   
    ret+=arguments[i]              
}
return ret;
alert(add(1,2,3,4,5));

// 用法 2 -------------------------------------------------------------
function func2() {
    if (arguments.length!=3){
        throw new Error("param should be 3")
    }
}
func2(1,2,3,45);

匿名函数和自执行函数

// 匿名函数 创建方式3 ---------------------------------------------------
var func3=function () {
    alert(123)
};
func3();

// 自执行函数 ----------------------------------------------------------
(function(arg){
    console.log(arg);
})('123')

 

你可能感兴趣的:(FrontEnd-Basis-5th)