JavaScript学习

1、document.getelementId(“idd”):获取以“idd’为id的对象。

2、弹出框:

  1. alert:有一个确认
  2. confirm:有一个确认一个取消之后带各自选项提示。
  3. prompt:文本框+确认按钮+取消,可以添加相应的判断值返回消息

面向对象思想和面向过程思想

把大象装进冰箱
面向过程:把冰箱门打开-----》把大象装进去-----》关上冰箱门
面向对象:实体–方法:大象–进冰箱
实体–方法:冰箱–打开,冰箱–关闭
使用时调用方法。

ES6中的类和对象

  1. ES6是什么?
    JavaScript语言标准2015年6月发布
  2. 类(模板、泛指)是抽象出来的,对类进行实例化,获取类的对象
    类抽象了对象的公共部分,泛指某一大类(class)
    面向对象思想:
    (1)抽取(抽象)对象的共用属性和行为,然后将他们组织(封装)成一个类(模板)
    (2)对类进行实例化,获取类的对象。
  3. 对象(特指某一个,通过实例化一个具体的对象)
    由属性和方法组成
    属性:事物的特征,常用名词表示,在对象中用属性表示
    方法:事物的特点,常用动词表示,在对象中用方法表示
  4. 创建类
    class 类名{
    class body}
    ******类constructor构造函数
    constructor()方法是类的构造方法(默认)的,用于传递参数,返回实例对象,通过new生成对象实例时,自动调用该方法。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //创建明星类
    class Star{
        constructor(uname,age){
            this.uname = uname;
            this.age = age;
        }
    }
    //用类创建对象new
    var  ldh = new Star("刘德华",18);
    var  zxy = new Star("张学友",26)
    console.log(ldh);
    console.log(zxy);
</script>
</body>
</html>

运行结果

Object { uname: "刘德华", age: 18 } 
Object { uname: "张学友", age: 26 }

ps:创建类时不能加(),new实例化类时后边要加()!!

  1. 类中添加方法
    在类中直接添加,不需要function关键字,多个函数或者方法之间不需要添加,分割
    方法名(){
    方法体
    }

类的继承

  1. 子类继承父类extends关键字
  2. super();调用父类中的构造函数
    构造函数方法用于创建和初始化,在一个类中只能由一个构造函数,如果类包含构造函数方法的多个实例,则会抛出SyntaxError。构造函数可以使用super关键字来调用父类的构造函数。
class A{
        constructor(n){
            console.log(n); //=>100;
            this.x = 100;
        }
        getX(){
            console.log(this.x);
        }
    }
    class B extends A{//=>extends 类似实现原型继承
        constructor(){
            super(100);//=>类似于call的继承:在这里super相当于把A的constructor给执行了,并且让方法中的this是B的实例,super当中传递的实参都是在给A的constructor传递。
            this.y = 200;
        }
        getY(){
            console.log(this.y);
        }
    }
    let f = new B();
  1. 就近原则:继承中如果实例化输出一个方法,先看子类有没有这个方法,如果有就先执行子类的;否则去查找弗雷里有没有这个方法,如果父类里有就执行父类的这个方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    class Dad{
        constructor() {

        }
            eat(){
                return "我能吃整个苹果";
            }
            drink(){
                return  "我能喝酒";
            }
    }
    class Son extends Dad{
        eat(){
          return "我能也能吃整个苹果";
        }
    }
    var  son = new  Son();
    console.log(son.eat());
    console.log(son.drink());

</script>
</body>
</html>

运行结果

我也能吃整个苹果
我能喝酒
  1. super()必须写在子类的this之前使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    class Dad{
        constructor(x,y) {
            this.x = x;
            this.y = y;
            console.log(this.x+this.y);
        }
            eat(){
                return "我能吃整个苹果";
            }
            drink(){
                return  "我能喝酒";
            }
    }
    class Son extends Dad{
        constructor(x,y){
            //利用super()调用父类的构造方法
            super(x,y);
            this.x = x;
            this.y = y;
            console.log(this.x-this.y);
        }
        eat() {
            return "我能也能吃整个苹果";
        }
    }
    var  son = new  Son(6,2);
    console.log(son.eat());
    console.log(son.drink());
    console.log(constructor())

</script>
</body>
</html>

运行结果

8
4
我能也能吃整个苹果
我能喝酒
  1. 注意点
    5.1 ES6中类没有变量提升,现有定义类,才能对类进行实例化
    5.2 类里面的公有属性和方法一定要加this使用,参数传递除外
    5.3 constructor 里面的this指向的是实例化的对象,方法里面的this指向这个方法调用者。
    代码中的document方法参照解释地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
    /*class Dad{
        constructor(x,y) {
            this.x = x;
            this.y = y;
            console.log(this.x+this.y);
        }
            eat(){
                return "我能吃整个苹果";
            }
            drink(){
                return  "我能喝酒";
            }
    }
    class Son extends Dad{
        constructor(x,y){
            //利用super()调用父类的构造方法
            super(x,y);
            this.x = x;
            this.y = y;
            console.log(this.x-this.y);
        }
        eat() {
            return "我能也能吃整个苹果";
        }
    }
    var  son = new  Son(6,2);
    console.log(son.eat());
    console.log(son.drink());
    console.log(constructor())*/
    class  star{
        constructor(uname,age){
            //constructor里面的this指向的是创建的实例对象
            this.uname = uname;
            this.age = age;
            this.btn = document.querySelector('button');
            this.btn.onclick = this.sing;
        }
        sing(){
          //this 指向的是btn按钮,因为btn这个按钮调用了这个函数
            console.log(this.uname +"I can sing a song");
            console.log(this);
        }
        dance(){
            //方法中的this指向的是实例对象ldh,因为ldh调用了这个函数
            console.log(this);
        }
    }
    var  ldh = new star("刘德华");


</script>
</body>
</html>
  1. 定义变量的变量类型始终时var
  2. 比较运算符
  • == 等于(类型不一样、值一样为true)
  • ===绝对等于(类型一样,值一样为true)
  1. 对象
    对象是大括号,数组是中括号,每个属性之间用逗号隔开(英文状态)最后一个不需要添加
    命名时不能以#、数字开头,也可以用汉字命名(不提倡)
严格检查模式strict

定义局部变量用let

let i= 1;

‘use strict’ 严格检查模式,预防Javascript的随意性导致产生的一些问题------使用时设定工具支持ES6语法------必须写在<script></script>里的第一行

字符串类型讲解
  1. 正常字符串用单引号或双引号进行包裹
  2. 转义字符 \n \t
  3. 多行字符串编写 使用反引号``
  4. 模板字符串
let name="xiaomi"
let i = `你好,${name}`
  1. 字符串长度
    i.length
  2. 字符串可变性,不可变
  3. 大小写转换
student.toUpperCase()  //大写
student.toLowerCase()  //小写

这里使用的是方法

  1. student.indexOf(‘t’) 结果为1
  2. substring
student.substring(1)   //从第一个字符串截取到最后一个字符串
student.substring(1,3)   
数组

Array可以包含任意类型的数据类型
var arr = [1,2,3,4]

  1. 长度
    arr.length
    给数组长度赋值时,过大会发生变化,过小会造成元素丢失
  2. indexOf,通过元素的获得下标索引
    arr.indexOf(1)---------输出为0
    arr.indexOf(“1”)-------输出为4
    字符串的1和数字1 是不一样的
  3. slice() 截取Array的一部分,返回一个新的数组
  4. push(在数组尾部直接添加元素),pop(弹出尾部元素)
  5. unshift()–从数组头部添加元素
    shift()–从数组头部弹出元素
  6. 排序–sort()
  7. 元素反转reverse()
  8. concat()返回新数组
  9. 连接符join
    打印拼接数组 ,用特定的字符串连接
    arr.join(’-’)
  10. 多维数组
arr = [[1,2],[3,7],[5,3]]
arr[2][1]

结果为3

对象类型详解

var 对象名 = {
属性名:" “,
属性名:” " ,
属性名:" "
JavaScript中的所有的键都是字符串,值是任意对象!

  1. 对象赋值问题
    person.name = ‘xiaoming’
  2. 使用不存在的对象属性不会报错 undefined
  3. 动态删减对象属性
    delete person.name
    true
  4. 动态添加,直接给新的属性添加值
  5. 判断属性值知否在这个对象中 ‘xxxx’ in xxxx!
  6. 判断一个属性是否是这个对象是已有属性
    hasOwnProperty()
分支和循环详解
  • if 判断
  • while 循环
  • for 循环
  • foreach 数组循环
  • for…in
    for(var index in object) index—下标 object—对象
  • for of 显示 数组元素
Map和Set

Map集合

var map = new Mapper[['tom',100],['Mike',45]];
var name = map.get('tom');
map.set('admin',123);    //新增
console.log(name);
map.delete("tom");   //修改

Set:无序不重复的集合

var set = new Set([1,2,3,3,2]);
set.delete(3)     //删除
  set.add(6)      //添加
  console.log(set.has(3));     //是否包含某元素

刷新重新输出Set得到1,2,2

Iterable迭代

遍历数组

var arr = [3,4,5]
for (var x of arr){
      console.log(x)
      }

遍历map

var map = new Map([["tom",100],["MIke",90]]);
for (let x of map){
  console.log(x)
  }

遍历set

var set = new Set[2,3,4];
for( let  x of set){
console.log(x)
}
函数的定义和参数的获取
  1. 定义一个函数
  • 绝对值函数
function aabs(x){
 if(x>=0){
   return -x;
   }else{
   return x;
   }

执行到return,返回结果
没有执行return,函数执行完成后也会返回结果 结果为undefined

  • 第二种方法
var abs = function(x) {   //匿名内部函数,可以把结果赋值给abs ,通过abs即可调用函数
 if(x>=0){
   return -x;
   }else{
   return x;
   }

可传递任意数量的参数,0也可以,不传递也行
调用函数

var abs = function(x) { 
if(typeOf x!== 'number'){
  throw 'Not a Number';
  }
 if(x>=0){
   return -x;
   }else{
   return x;
   }

rest 获取除了已经定义的参数之外的所有参数~

function aaa(a,b,...rest){
  console.log("a=>"+a);
  console.log(rest);
  }

rest 参数只能写在最后面,必须用…标识。

变量的作用域
  • 在JavaScript中var定义的变量有作用域,在函数体中声明的变量不能用在方法体外边。
  • 两个函数用了相同的变量名,只要是在各自的方法内部,就不冲突;若是嵌套,则内部的可用外部的,外部的无法用内部的
  • 当内部函数和外部函数重名时,函数查找从自身函数开始由内向外查找。 若外部存在这个函数名,则内部函数自动屏蔽掉外部函数的变量
  • 提升变量的作用域
function  one(){
  var x = 'x' + y;
  console.log(x);
  var y = 'y';

运行结果:xundefined
则Javascript执行引擎,提升了y的作用域,但是没能提升y的赋值,所以没有显示y的值
注意:定义时将所有变量放在函数头部,便于代码维护。

  • 全局函数
    定义在方法外边,定义之前放use strict
  • 全局对象 window
    默认所有的全局变量都自动绑定在window对象下
    任何变量(或函数)如果在函数的作用范围内找到,就会到函数范围外去找,外边没找到就会报错误,RefrenceError
  • 不同的Js文件使用相同的全局变量会发生冲突。
    减少冲突–将代码放在自己定义的唯一空间中
var LaLa = {};
LaLa.name = 'lala';
LaLa.add = function(a,b){
  return a+b;
  }
  • 局部作用域let
    使用let关键字进行声明变量,使变量只能在本方法中使用,离开这个方法范围失效。
    var定义的都可用,加了let限制了作用范围
  • 常量const
    const声明完成后无法改变比常量的值。
方法的定义和调用,apply
  1. 定义方法
    把函数放在对象里 对象包括属性和方法
var LK = {
   name :'lika';
   birth:'1990';
   age: function(){
    var now = new Data().getFullYear();
    return now-this.birth;
    }
   }

属性是LK.name
方法是LK.age()

  1. apply的应用
    使用apply控制this的指向。
var LK = {
   name :'lika';
   birth:'1990';
   age: function(){
    var now = new Data().getFullYear();
    return now-this.birth;
    }
   }
   age.apply(LK,[]);  //this指向了LK,参数为空
内部对象
  1. Data
    基本使用获取当前时间的年、月、日、星期、时、分、秒、时间戳(getTime())
  2. JSON
    轻量级的数据交换格式
    格式:
  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都使用 key:value
    JSON和JS对象的区别
var obj={a:'hello',b:'hellob'}
var json='{"a":"hello","b":"hellob"}'
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页