JS

JS

1、js简介

JavaScript是一种基于对象的客户端的脚本语言

是一种弱类型的动态脚本语言

弱类型:对数据类型要求不严格,只有当执行到某一句代码的时候,才去确定这个变量里的数据是什么类型

动态语言:就是指在运行过程当中,可以动态地给对象添加属性和方法

js能做什么

  • 网页特效
  • 数据验证
  • 游戏开发
  • 与服务器交互
  • 服务端开发

js的历史

1995年诞生,专用于客户端数据验证,叫LiveScript

当时Java很火,为了推广,更名Javascript

1996年,微软发布了自己的Javascript,叫JScript

1997年,ECMA组织规定了Javascript的标准,叫ECMAScript,约束了js的语法和功能

2003年,js被大量用于页面广告,被称为“牛皮癣”

2004年,Google公司推出Ajax技术,拯救了Js

2007年,移动端的出现让js更加得到重视

2010年,H5推出,Canvas和Javascript的结合使用,让js功能更加强大

2011年,nodejs的出现,让js前后端通吃

js的组成

ECMAScript 规定了js的语法规范和所具有的功能

DOM(document object model)文档对象模型:就是js操作页面结构的一套工具(方法)

BOM (browser object model)浏览器对象模型 :操作浏览器部分功能的一套方法

如何使用js

  • 内嵌式
  • 外联式
  • 行内式(了解)

JS语法

1、注释

让js解释器,忽略注释之后的内容

单行注释 //

多行注释 /* 需要注释的内容 */

作用:解释说明,文档注释

2、常用全局函数

  • alert() 弹出一个提示框,警告框
  • console.log() 在控制台中输出内容
  • document.write() 在页面上输出内容

3、变量

什么是变量?简单的理解为:变量是用来存储数据的容器

深刻的理解变量:变量并不是真正保存数据的地方,真正保存数据的地方是内存,内存存在一个内存地址,变量负责保存内存地址,内存地址指向数据

4、变量的声明和赋值

var 变量名;

声明和赋值可以同时进行 var a = "张三";

声明和赋值可以分开:var a; a = "李四";

变量声明是可以一次声明多个: var a,b,c,d; or var c=1,d=2,e=3;

变量是可以重复赋值: var a = 10; a = 12;

5、变量命名规范

  • 字母,下划线,数字,$ 这些可用的字符
  • 不能用数字开头
  • 不能使用关键字,保留字
  • 严格区分大小写
  • 建议变量的命名要有意义
  • 建议使用驼峰命名法

驼峰命名法:第一个单词的首字母小写,第二个及以后的单词首字母大写

userNameOne

关键字和保留字:

image.png

保留字:现在还不是关键字,将来有可能成为关键字

image.png

注意:使用保留字为变量命名是不会报错,但是为了程序的安全性考虑,我们规定不能使用保留字作为变量名

1、js数据类型

基本类型:number数字,string字符串,布尔boolean,undefined,null

引用类型:object

number数字类型

包括所有的数字(浮点数,整数,正数,负数)和 NaN

NaN 表示某个结果不是一个数字,但是它归属于Number类型

isNaN() 判断某个数据是否不是一个数字,当数据是数字的时候,返回false,当数据不是数字的时候,返回true

数字的进制:

二进制 满二进一 0-1

八进制 满八进一 0-7

十进制 满十进一 0-9

十六进制 满十六进一 0-9a-f

String字符串类型

格式:使用双引号,或者单引号包起来

字符串不可变性: 在js当中,操作字符串的时候,并不是在原来的字符串上进行修改,而是重新开辟内存,生成新的字符串,把变量重新指向新的字符串,原来的字符串并不会马上消失,而是等待垃圾回收机制进行回收

Boolean布尔类型

只有两个值:ture,false 通常表示对和错,表示条件成立与否 比较运算符

null

空 只有一个值 null 表示不是一个对象

undefined

未定义

只有一个值 undefined

声明变量的时候,如果没有赋值,默认就是赋值为undefined

2、运算符

比较运算符

< >= <= == != 不严格等于: 比较的是内容(值)

=== !== 严格等于: 比较的是内容(值)和类型

算术运算符

  • 二元算术运算符 + - * / %
+ :运算

数字相加:得到数字

数字和非数字内容的字符串相加:字符串

数字和数字内容的字符串相加:字符串

-,*,/,% : 运算

数字相运算得到数字

数字和数字内容的字符串运算:得到数字

数字和非数字内容的字符串运算:NaN
  • 一元算术运算符++,--

前++(--) ++a:先对a进行自增或者是自减,然后以新的值参与运算

后++(--)a++:先以a的值进行运算,然后再进行自增或者自减

逻辑运算符

&& 与 两个条件都是true的时候为true

|| 或 两个条件都是false的时候为false

! 非 颠倒是非

短路运算

&& 短路: 当&&左边为true的时候,结果就跟左边没有关系了,直接得到&&的右边(执行结果)

|| 短路: 当||的左边为false,结果就跟false没关系,直接得到||右边的执行结果

赋值运算符

= :最简单的赋值运算

复杂:+=,-=,*=,/=, %=

运算符的优先级

image.png

3、类型转换

  • 将字符串转换为数字

    Number()
    只能转换数字为内容的字符串,否则得到NaN
    可以转换浮点数
    
    parseInt()
    只能得到整数
    会尽可能的尝试转换到第一个非数字的字符为止
    
    parseFloat()
    会尽可能的尝试转换到第一个非数字的字符为止
    可以转换浮点数(能取到小数)
    
  • 将其他转换成字符串

    1 String() 可以将任意类型转换为字符串
    2 .toString()  可以将部分类型转换为字符串,null,undefined不能使用
    3 隐式转换:+ ""
    
  • 转换为布尔类型

    Boolean()
    把其他任意类型转换为布尔
    
    在js当中,有哪些可以转换为false
    null,undefined,0,"",false,NaN
    
    隐式转换  !!数据 
    

类型判断

判断数据的类型 typeof 数据 or typeof(数据)

4、js的语法结构

  • 顺序结构

  • 选择结构(if-else 和switch-case)

    if (条件表达式) {
      条件表达式成立的时候执行的语句
    }
    
    if (条件表达式) {
      条件表达式成立的时候执行的语句
    }else {
      条件表达式不成立的时候执行的语句
    }
    
    if (表达式1) {
      表达式1成立时执行的代码
    }else if (表达式2){
      表达式2成立时执行的代码
    }else if (){
    
    }...
    else {
      所有的表达式都不成立时执行的代码
    }
    
    -------------------------------------------------------------------------------
        
    switch(n) {
        case 定值1:
            当n和定值1相等的时候执行的代码
            break;
        case 定值2:
            当n和定值2相等的时候执行的代码
            break;
        case 定值3:
            当n和定值3相等的时候执行的代码
            break;
        default:
          当n和所有的定值都不相等的时候执行的代码
    }
    -------------------------------------------------------------------------------
    switch-case和if-else的区别
        - if-else     通常用来比较区间值
        - switch-case   只能用来比较定值
        
    所以,建议在一个变量和多个定值比较的时候,用switch-case,如果只有一个定值要比较,建议使用if-else,如果是区间值,只能只用if-else
    
    -------------------------------------------------------------------------------
        
    三元表达式:
    表达式1   ?   表达式2  :   表达式3
    先判断表达式1是否成立,如果成立,执行表达式2,并且返回表达式2的执行结果,如果表达式1不成立,执行表达式3,并且返回表达式3的执行结果,当逻辑处理比较复杂的时候,使用if-else,如果逻辑处理非常简单,使用三元表达式
    
  • 循环结构

    什么是循环:重复的去做一件事情 ,重复执行一段代码

    while循环
    
    while (条件表达式){
      循环体,就是条件表达式成立的时候重复执行的代码
    }
    
    do {
      循环体
    }while(条件表达式)
    
    
    do-while 和 while 的区别:
    while 循环,有可能一次循环体都不执行
    do-while 至少执行一次循环体
    -----------------------------------------------------------------------------------
        
    for循环
    for ( 循环的初识值 ; 条件表达式 ; 自增或者自减的步长 ) {
      循环体
    }
    执行顺序:
    先初始化初始值,判断条件表达式是否成立,执行循环体,循环体执行完毕之后,自增或者自减,再检查条件是否成立,成立就执行循环体,否则结束循环
    
    for循环和while循环的区别:
    
    while 可以无限次循环,通常用来做未知次数的循环
    
    for    从一开始就指定循环的次数,用来做已知次数的循环
    

5、数组

什么是数组

数组就是数据的有序集合,有长度 length,在js当中,数组可以装任意类型的数据

创建数组

构造函数的方式
var arr = new Array(); // 创建了一个空的数组,长度为0
var arr = new Array(100); //创建了一个空的数组,长度为100

字面量表示法:
var arr = []; // 创建了一个空的数组,长度为0

数组的赋值

使用索引赋值,数组的索引是从0开始
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = "ABC";
arr[3] = false;

----------------------------------------------------------------------------------
数组的初始化赋值:

ar arr = new Array(1,2,"abc",false);
var arr2 = [1,2,"abc",false];

数组的取值

使用索引取值
var str = arr[2];  // 通过索引取值,要使用[]运算符

数组的遍历

for(var i = 0; i < arr.length ; i++ ){
    console.log(arr[i]);
}

6、数组的操作方法

  • concat:连接数组 不会改变原来的数组,而是得到一个新的数组

  • join : 使用某一个字符,连接所有的数组的元素,得到一个字符串

  • push(xx, ....):向一个数组中添加一个或者多个元素,并且返回数组增加元素之后的长度

    会修改原来的数组

  • shift:删除数组的第一个元素,并返回,也会修改原数组

  • pop(): 删除数组中的最后一个元素,并且返回这个元素,会修改原数组

  • indexOf(searchValue [,formindex]):获取数组中某个元素第一次出现的索引,但是如果规定从哪个索引开始查找,可以查找到任意位置元素

  • slice(start,end) 获取从数组中某个下标开始,到end结束的所有元素,但是不能获取到end

  • splice()

清空数组

var arr= [1,2,3,4,5];
//        arr.splice(0);
//        console.log(arr);
//        console.log(arr);
//        arr.length = 0;
 console.log(arr);
 arr = [];
 console.log(arr);

7、函数

什么是函数

可以在需要的时候执行的,可以重复使用的一段代码 ,思想:代码复用,把不变的放到函数体里面,把改变的变成参数

定义函数

1、使用function关键字声明
function 函数名 ( 参数列表 ) {
    函数体
}

2、函数表达式
var 函数名 = function (参数列表) {
    函数体
}

函数命名

命名规范和变量一样,推荐使用动词,推荐驼峰命名

函数的调用

函数名(参数的列表);

函数的返回值

函数执行完毕之后,得到一个结果,就是函数的返回值

  • 如果函数里面没有写return关键字,函数执行完毕之后,会默认的到undefined
  • 如果函数里有些return,但是return没有跟任何的东西,函数执行完毕,会默认得到undefined
  • 如果函数里有return,并且return后面跟着某个变量或者值,函数执行之后,得到return后面的这个东西

return关键字,除了可以返回函数的返回值之外,还能,终止函数的执行

函数的参数

  • 形参

形式参数,就是我们在声明函数的时候写在参数列表里的参数,起到占位的作用,让我们可以在调用函数的时候,传入响应参数,来在函数执行的时候参与运算

  • 实参

其实就是我们在调用函数的时候传入参数,是实际参与函数执行的参数。

函数的四种形式

1、无参无返回值
function logError(){
    console.log("这里出现了一个错误");
}

2、无参有返回值
function getRandom(){
    return Math.random();
}

3、有参无返回值
function log(msg){
    console.log(msg);
}

4、有参有返回值
 function getSum(n){
     var sum = 0;
     for (var i = 1; i < n; i++) {
        sum += i;
     }
     return sum;
 }

函数调用函数的执行过程

当函数去调用另一个函数的时候,会去到那个被调用的函数里执行,被调用的函数执行完毕之后,会回到调用它的位置

函数也是数据类型

function fn(){
}
console.log(typeof  fn); //得到的结果是输出了:function 是数据类型,就可以当成参数传递

匿名函数

没有函数名的函数

function (参数列表) {
    函数体
}

自执行函数

声明结束之后,立刻执行

(function (){
    console.log("1");
    console.log("2");
})();

8、作用域

  • 全局作用域

    在页面的任意位置都可以访问的作用域,在全局作用域下声明的变量,可以在任意位置访问

  • 局部作用域

    就是指函数的内部,在函数内部声明的变量就是局部变量,如果在局部作用域内,没有使用var声明的变量,这个变量是一个全局变量 。但是这种做法不推荐

9、预解析

js的执行不是单纯解释一行执行一行,而是有一个预解析的过程,会找到当前作用域下的所有的var和function关键字,把变量的声明和函数的声明提升到当前作用域的最顶端。

变量提升和函数提升

其实就是预解析的时候做的变量的声明提前和函数的声明提前

定时器

setTimeOut

setInterval

10、JS的内置对象

Math对象

就是js提供的一套关于数学的一些方法

  • Math.ceil() 向上取整
  • Math.floor() 向下取整
  • Math.pow(x,y) 求x的y次方
  • Math.max(x,y,z,...) 求两个或多个数字的最大值
  • Math.min(x,y,z...) 求两个或者多个数字的最小值
  • Math.random() 获得[0,1)之间的随机数
  • Math.PI js当中的圆周率
  • Math.abs() 绝对值

Data对象

创建当前日期的日期对象
var date = new Date();

创建指定日期的日期对象
var date = new Date(2016,10,1); //注意:这里的月份是要从0开始,如果想要得到10月1号则要写9月
-----------------------------------------------------------------------------------
获取日期的毫秒数
var ms1 = +new Date();
or
var date = new Date();
console.log(date.getTime());
------------------------------------------------------------------------------------
获取日期对象的每一个部分
var date = new Date();

//获取年份
console.log(date.getFullYear());
//获取月份,获得到的月份是从0开始
console.log(date.getMonth());
//获取日期中日
console.log(date.getDate());
//获取日期中的星期几,要注意的是,星期是从星期日,得到0就是星期日,得到6,就是星期六
console.log(date.getDay());
//获得小时,0到23
console.log(date.getHours());
//获取分钟,0到59
console.log(date.getMinutes());
//获取秒数,0到59
console.log(date.getSeconds());
//获取毫秒数,得到0到999
console.log(date.getMilliseconds());

操作字符串的方法

var str = "abcdefghijklmn";

得到某一个位置的字符
console.log(str.charAt(0));
console.log(str[5]);

concat用来连接多个字符串的方法
var str2 = "abc";
var str3 = "def";
连接多个字符串,得到一个新的字符串,不会改变原来的字符串
console.log(str.concat(str2,str3));
console.log(str);

slice用来截取从start开始,到end结束的字符
console.log(str.slice(3,7));

substring用来截取字符串,从start开始,到end结束的字符,可以取到start,不能得道end
console.log(str.substring(3,7));

substr(start,length),意思是从start开始,一共截取length的长度
console.log(str.substr(3,5));

indexOf 查找某一个字符在字符串中的位置,只能找到从某一个位置开始的第一个
console.log(str.indexOf("z"));
var str = "abcabcabc";
console.log(str.indexOf("c",3));


lastIndexOf,从后面开始往前面找,也只能找到第一次出现的位置,除了查找的方向和indexOf不一样,其他都一样
var str = "abcabcabc";
console.log(str.lastIndexOf("a",5));

trim方法,用来去除字符串两边的空格,会得到新的字符串,不会改变原字符串
var str = "    abc    def   hij    ";
console.log(str);
console.log(str.length);
console.log(str.trim());
console.log(str);

    字符串大小写转换

var str = "abcdef";
大写转换,不会对原来的字符串造成影响
var str2 = str.toUpperCase();
var str3 = str.toLocaleUpperCase();
console.log(str2);
console.log(str3);
console.log(str);

小写转换,不会对原字符串造成影响
var str4 = str2.toLowerCase();
var str5 = str3.toLocaleLowerCase();
console.log(str4);
console.log(str5);
console.log(str2);
console.log(str3);

replace替换字符串里的对应字符,但是只能替换掉匹配的第一个
var str = "abcdeffkfkfff";

var str2 = str.replace("f","g");
console.log(str2);
console.log(str);

split把字符串变成数组,根据的是分割的字符

var arr = [1,2,3,4,5,6];
var str = arr.join("|");
console.log(str);

var newArr = str.split("|");
console.log(newArr);

var str = "abcabcabc";
var arr = str.split("a");
var arr = str.split("");
console.log(arr);

对象

在js当中,对象就是无序属性的集合,对象里面包含属性和方法

创建对象

1 构造函数法

var o = new Object();

2 对象的字面量表示法

var o = {};

访问对象的属性

  • 使用点的方式

    使用点的方式访问对象的属性,获取对应的属性的值
    console.log(nokia.brand);
    console.log(nokia.name);
    
  • 通过键的方式

    使用键的方式访问对象的属性
    console.log(nokia["with"]);
    
  • 使用for-in的方式遍历对象

    for-in 的方式访问对象属性,可以访问到某个对象的所有属性和方法
    //   for(var 键 in 要访问的对象){
    //      循环体
    //   }
    for(var k in nokia){
      console.log("对应的键是"+k+",对应的值是"+nokia[k]);
    }
    

自定义对象的构造函数

构造函数本质上也是函数,只不过是专门用来创建对象,并且使用new的方式

function Person(name,height,weight,color){
//            在构造函数当中,this关键字,就是构造函数帮我们创建好的对象
    this.name = name;
    this.height = height;
    this.weight = weight;
    this.color = color;

    this.sayHi = function(){
        console.log("你好,我的名字是" + this.name +",我的身高是" +  this.height + ",我的体重是" + this.weight);
    }
}

var zs = new Person("张三",150,50,"yellow");
var ls = new Person("李四",180,70,"black");
console.log(zs);
console.log(ls);

this关键字

  • 在构造函数当中

this关键字在构造函数当中,就是指构造在创建对象时的那个对象

  • 在函数或者方法当中

谁调用函数或者方法,this就是谁

new关键字

new 用来创建新的对象

1 先创建了一个自定义对象

2 把this关键字指向刚才创建的对象

3 执行构造函数里的代码,也就是想this(已经创建的对象)添加属相和方法

4 返回this(被创建的对象)

JSON

其实JSON,就是结构化数据格式

1 JSON格式的键,必须是双引号包裹的字符串

2 不支持undefined

{
"name" : "张无忌",
"wugong" : "九阳神功",
"attack" : 999999
// "deadTime" : undefined
}

基本类型和引用类型

基本类型(值类型)

是存储在栈空间上,当我们声明多个变量的值都是一样的时候,是分配不同的内存位置,当我们调用函数的时候,会把这些值复制一份进入函数区运行,就不会改变原来实参的值

引用类型

是存储在堆空间里的,只有一份,如果有多个变量指向同一个对象,会在栈空间保存有多个地址,这些地址都是指向这个对象,当我们把这些变量传入函数中运行的时候,其实都是根据变量保存的地址,找到对象,操作同一个对象

image.png

你可能感兴趣的:(JS)