00_JS基础_ES6

js的标准ECMAScript(ES),现在使用的版本为ES6

js编写的位置

1.写在HTML中的scrip标签

<script>
    //内嵌式
    console.log("hello world")
</script>
<!--引入外部的js文件,script不能使用单标签-->

2.引用中使用

<script src="../js/01_index.js">
    /*内嵌和已引入的不能写在一起,否则不起作用*/
    console.log("xxxxx")
</script>

3.在标签里面书写

代码不容易维护

<a href="javascript:console.log('aaaa')">点击</a>

js的变量

作用:多次使用变量的值,达到多次使用的目的

1.js是弱类型的语言,没严格区分数据类型,

​ 使用的关键字是var,默认的变量值是undefined

​ 变量没有定义之前不能直接使用,报错not defined

​ log是浏览器的控制台打印

<script>
    //变量的定义
    //var 变量名=张三
    var name="张三";
    console.log(name)
    var age;//默认为undefined

    //变量没有定义之前不能直接使用,报错not defined
    console.log(age)

    console.log(window)//打印所有信息
    console.error("这是一个错误信息")
  </script>

js的数据类型(重要)

数据类型由赋的值来决定的

简单类型:String,Number,Boolean,Null,undefined,

对象类型:Objiect,Array,Function

js的运算符

1.等号

​ = 将常量/变量的值赋值给另一个变量

​ == 比较值,不管类型

​ === 类型和值都进行比较,先类型比较再值的比较

<script>
  var a='1';
  var b=2;
  //  ==  比较值,不管类型
  console.log(a == b)
  
  // ===  类型和值都进行比较,先类型再值
  console.log(a === b)

</script>

2.逻辑运算符

​ 0, null, NaN, " ", false, undefined表示为false

​ 其他的数据类型表示的为true

3.&&和||运算符的区别

&&值判断 :当全部为true的时候结果才为true(返回最后一个为true的值),当有一个false的时候结果false(返回第一个为false的值)

console.log(true && true);//true
console.log(1 && true);//true
console.log(1 && 2);//2
console.log("A" && 2);//2
console.log("" && 2);//""
console.log(null && "B");//null
console.log("A" && "B");//"B
console.log(1 && 2 && 3);//3
console.log(1 && null && 3);//null
console.log("" && null && 0);//""

||值判断 :当全部为false的时候结果为false(返回最后一个false的值),当有一个true的时候结果为true(返回第一个为true的值)

console.log(true || true);//true
console.log(1 || true);//1
console.log(1 || 2);//1
console.log("A" || 2);//"A"
console.log("" || 2);//2
console.log(null || "B");//"B"
console.log("A" || "B");//"A"
console.log(1 || 2 || 3);//"1"
console.log(1 || null || 3);//"1"
console.log("" || null || 0);//0

逻辑运算符的应用场景

给形参设置默认值的时候进行使用

若没有给形参传入值的话返回的结果就是undefined

 <script>
    function  add(a,b){
      //给形参设置默认值
      a=a||1;//a为undefined就返回1
      b=b||1;
      console.log(a+b)
    }
   add(1,2)
  </script>

js的函数

函数和java中的方法作用一样,一次编写,实现代码复用

函数的定义:

       function 函数名(形参名1,形参名2,...){
           //函数体
          [return 返回值]
       }

函数的调用

​ 对象名.方法名(参数名)

  <script>
    function add(num1,num2){
      var sum=num2+num1;
      console.log(sum);
      //return sum;
    }
    add(1,2);
  </script>

注意:

​ 1.调用函数时可以不和形参匹配(数量)

​ 2.函数如果没有返回值,默认的返回值为undefined

​ 3.如果有返回值,则返回真实值

匿名函数(重要)

可以将匿名函数看成普通的值进行理解

		1.匿名函数的定义):

function  fun(){}

​ 2.将函数赋值给变量(常用的)

var fun2=function(){
console.log("匿名函数1");
}

​ 3.**console.log(fun2);**打印整个函数的格式

ƒ (){
      console.log("匿名函数2")
    }

​ 4.**console.log(fun2());**打印两个结果

​ //里面的fun2添加了()会执行里面的方法并进行打印

​ //但是这个函数没有返回值,后台打印的值还包括undefined

匿名函数2
undefined

​ 5.将函数作为值进行传递,将函数赋值给变量

var fun3=fun2;
//fun2加了括号就就将fun2的执行结果进行打印
var fun3=fun2();//结果为:匿名函数2

​ 6.将函数作为形参进行传递,

//将函数作为参数进行传递
var fun4=function (f){
    console.log(f);
    f();
}
fun4(fun2)
    /*
    *结果为:
    *ƒ (){
    *   console.log("匿名函数2")
    *    }
    *匿名函数2
    *
    */

内置函数arguments

arguments:每个函数都有内置的变量,存储了函数所有的实参

使用该函数查看调用时传进来了哪些值

<script>
  //求n个数的和
 var add= function (){
    //console.log(arguments[0]);
    var sum=0;
    for (var i = 0; i < arguments.length; i++) {
      sum+=arguments[i];
    }
    console.log(sum);
  }
  add(1);
  add(1,2);
  add(1,2,3);
</script>

注意事项:

​ 调用函数的时候,传入实参个数可以和定义函数的形参个数不一致

面向对象

类依据对多个对象抽象而来,对象是由类实例化而来

1.类的定义,首字母大写

  function person(name,age){
    //属性
    this.name=name;
    this.age=age;
    //方法
    this.eat=function (){
      console.log(this.name+"想吃饭");
    }
  }

2.创建对象

//对象的创建;
  var p=new person("张三",21)
  console.log(p);
//调用对象里面的方法
  p.eat();
//访问对象的属性
console.log(p.name);
console.log(p.age);
//修改对象中属性的值
p.name="李四";

3.给对象添加或者删除属性或者方法

p.xxx="11111";
delete p.xxx;

4.创建对象的快捷方式,使用键值对的形式

var obj={
name:"张三";
age:23;
sleep:function(){
console.log()"睡觉");
}
}

内置对象

​ 查看这个对象中是否存在这个属性,返回的值时true/false

obj.hasOwnProperty("name");

​ 获取时间的毫秒值,用于获取随机数的时候进行使用

var d=new Date();
//获取毫秒值
console.log(d.getTime());

​ 对字符串的操作

var str="asdfhjkl"
//获取长度
console.log(str.length);
//根据索引取字符
console.log(str.charArt(2));
//去字符中执行区间的字符串,左闭右开的形式
console.log(str.subString(0,3));

js数组

注意:

​ 1.js中的数组不会出现索引越界的问题,长度是不固定的

​ 2.当访问不存在的属性的时候,js引擎会返回undefined

数组的定义方式

方式一:静态初始化

var arr=new Arry(1,2,3,4,5)

**方式二:**动态初始化,定义数组的长度

var arr=new Arry(4);

数组简写

var num=[1,2,3,4,5,6]

数组常用的属性和方法

​ 操作数组

//获取数组的长度
num.length;
//获取数组中指定索引的值
 num[2];
//修改指定索引的值
    num[3]=8;
//多个数组的拼接,返回的是一个新的数组
var num2=[5,8,9,7]
    num.concat(num2);
//给数组中的值添加分割符
num2.join("|");
//截取
num2.slice(0,2);
//删除最后一个元素
num2.pop();
    

​ 使用splice对数组进行增删改

//使用splice关键字
    //添加,索引为1插元素
    arr.splice(1,0,20);
    console.log(arr);
    //替换
    arr.splice(1,1,30)
    console.log(arr);

    //删除
    arr.splice(2,1)
    console.log(arr);