JavaScript基础学习——基础（二）

最新推荐文章于 2021-09-05 16:20:51 发布

梦起孟心

最新推荐文章于 2021-09-05 16:20:51 发布

阅读量177

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41890177/article/details/108420563

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、函数
函数就是将具有一定功能的一段JS代码的封装，可以在程序的多个地方被反复调用。

（1）定义函数

格式一：
function 函数名（[形参列表]）{
函数体；
[return [<表达式>];]
}

格式二：
var 变量名 = function（[形参列表]）{
函数体；
[return [<表达式>];]
}

格式三：
(function（[形参列表]）{
函数体；
[return [<表达式>];]
})([实参列表]);

上面的函数叫立即执行函数表达式（IIFE），它会自动调用自身，不被在其它地方被调用，一般用于JS库或JS插件的封装或闭包处理。

（2）函数调用
函数名([实参列表]);

Tips:函数不会自动执行（IIFE（立即执行函数表达式）除外），必须通过调用才能执行。

（3）return
函数可以通过return返回结果，如果return没有返回结果，表示结束函数的调用，且返回调用处。

（4）arguments对象
返回实参列表的一个伪数组。一般用在不确定传过来的实参的个数的情况下。

现在做几个例子，我将用格式一来写，其余的格式都相同，可以自己尝试

1、无参

<script type="text/javascript">
  // 无参
  function show1(){
    console.log('这是我的第一个函数！');
  }
  show1()
</script>

还是要注意，console.log()表示在控制台进行查看，一般用于开发的的测试中。
打开网站，右键点击检查，右上角选中console即可查看
在这里插入图片描述

2、有参

<script type="text/javascript">
function sum1(a, b){
    var rs = a + b;
    console.log(rs);
  }
  sum1(10, 20);
</script>

在这里插入图片描述

3、参数匹配个数问题
（1）实参个数超过形参个数

  function sum3(a, b){
    var rs = a + b;
    console.log(rs);
  }
  sum3(10, 20, 30);

在这里插入图片描述

结果没变，实参按顺序依次传递，若形参个数不够，则实参忽略后面的值，也就是说30就不会传进去了

（2）形参个数超过实参个数

  function sum3(a, b, c, d){
    var rs = a + b + c + d;
    console.log(rs);// NaN
    console.log(a,b,c,d);// 10 20 30 undefined
  }
  sum3(10, 20, 30);

在这里插入图片描述
可以看到，将实参依次传形参，如果形参没有与实参匹配的值，那么形参的值默认为undefined

4、return

  function max(a, b) {
    var result = a > b ? a : b;
    return result;
    console.log('aaaaaaaaaaaaaa');
  }
  console.info(max(100, 20))

在这里插入图片描述
结果可以看到，执行完return后，后面的语句即使再多都不会执行了

5、argument

  function sum() {
    var rs = 0;
    for(var i=0;i<arguments.length;i++){
      rs += arguments[i];
    }
    return rs;
  };
  console.log(sum(10,20,30,40,50))

在这里插入图片描述

二、对象(object)
对象，其实就是一种类型，即引用类型。用于将数据和功能组织在一起。
对象由属性和方法组成，通常用键值对定义。

（1）对象定义

（a)new构建
new Object([参数]);

  var obj1 = new Object(); 
  obj1.name = '张三';
  obj1.age = 16;
  obj1.fn = function(){
    console.log(11111111111);
  }
  console.log(obj1)
  console.log(obj1.name)
  obj1.fn();

在这里插入图片描述
或者

  var obj2 = new Object({
    aa:'bb',
    cc:true,
    dd:123
  });
  console.log(obj2)

在这里插入图片描述

（b)字面量定义
var obj = {
key: value,// 属性
fn: function(){ // 方法
…
}
}

  var obj3 = {};
  obj3.name = '张三';
  obj3.age = 16;
  obj3.fn = function(){
    console.log(11111111111);
  }
  console.log(obj3)
  console.log(obj3.name)
  obj3.fn();

  var obj4 ={ 
    aa: 'bb',
    cc: true,
    dd: 123,
    fn1: function(){
      console.log(11111111111);
    },
    fn2: function(){
      console.log(2222222222);
    }
  };
  console.log(obj4)

可以看到一些区别：使用new时需要new一个Object对象，二使用字面量定义时，直接使用{}即可

（2）对象的引用

（a)对象名.属性名
对象名.方法名([实参列表])
（b)对象名[属性名]

  var obj4 = {
    aa: 'bb',
    cc: true,
    dd: 123,
    fn1: function (a, b) {
      console.log(a + ' ' + b);
    },
    fn2: function () {
      console.log(2222222222);
    }
  };
  console.log(obj4.aa);//对象名.属性名
  obj4.fn1('Hello', 'world');

  console.log(obj4['aa']); // 这里的aa上的引号不能省略
  obj4["fn1('Hello', 'world')"];

  var str = 'aa';
  console.log(obj4[str]);// 当属性名为一个变量时，只能用[]去取值，且不能加引号，因为它是变量

在这里插入图片描述

三、数组
数组将一组数据组合到一起，并存入到一个变量中，数组是有序排列的，占用一段连续的内存空间。
一个数组可以存储不同类型的数据。

（1）定义数组

a.new
new Array([值列表])
b.字面量创建
var arr = [值列表]

var arr1 = new Array(123,false,null,'aaa');
var arr2 = [1,2,3,'aaa',true];
console.log(arr1);
console.log(arr2)

在这里插入图片描述

（2）获取数组元素值

数组名[下标] ，下标可以是一个数值型常量，也可以是一个表达式或函数或变量

 var arr = [1,2,3,'aaa',true];
  console.log(arr); 
  console.log(arr[2]);

在这里插入图片描述

（3）遍历数组

一维数组用一个循环实现；二维数组必须用双重循环实现（先行后列）。
a.for
b.for…in // 推荐写法
c.forEach()

1、一维数组遍历

  var arr1 = [1,2,3,4,5];
  // for
  for(var i=0;i<arr1.length;i++){
    console.log(arr1[i])
  }
  // for...in
  for(var i in arr1){
    console.log(arr1[i])
  }
  // forEach
  arr1.forEach(function(value,index){
    console.log(index, value)
  })

结果都是相同的1，2，3，4，5

2、二维数组遍历

var arr2 = [[1,2,3],[4,5,6],[7,8,9]];
  // for
  for(var i=0;i<arr2.length;i++){ // 先遍历行
    for(var j=0;j<arr2[i].length;j++){ // 遍历列
      console.log(arr2[i][j]);
    }
  }
 // for...in
  for(var i in arr2){
    for(var j in arr2[i]){
      console.log(arr2[i][j])
    }
  }
   // forEach
  arr2.forEach(function(v){
    v.forEach(function (v1) {
      console.log(v1)
    })
  })

结果是1，2，3，4，5，6，7，8，9

（4）数组的属性和方法

a.length属性：获取数组的长度。

  var arr = [1,2,3,4]
  console.log(arr.length)

结果是：4

b.方法

i)push()：向数组中添加数组到数组最后。

  var arr = [1,2,3,4]；
  arr.push(10);
  arr.push('Hello');
  arr.push(undefined);
  console.log(arr)

在这里插入图片描述
ii)pop()：删除数组最后一个元素。

  var arr = [1,2,3,4]；
  arr.pop();
  console.log(arr)

结果是：[1,2,3]

iii)unshift()：向数组头部添加数据。

  var arr = [1,2,3,4]；
  arr.unshift(1,2,3)
  console.log(arr)

结果为：[1,2,3,1,2,3,4]

iv)shift()：删除数组第一元素。

  var arr = [1,2,3,4]；
  arr.shift()
  console.log(arr)

结果为：[2,3,4]

v)concat()：将两个或多个数组组合成一个数组。

  var arr1 = [1,2,3,4]
  var arr2 = ['111','222','333'];
  var arr3 = ['a','b','c'];
  var arr4 = arr2.concat(arr3, arr1);
  console.log(arr4)

在这里插入图片描述

vi)reverse()：对数组进行倒序处理。

  var arr1 = [1,2,3,4];
  var arr2 = arr1.reverse();
  console.log(arr2);

结果为：[4,3,2,1]

vii)join()：将数组转换为字符串。

var arr1 = [1,2,3,4];
var str = arr1.join();
console.log(str);
console.log(typeof str);// string

var str = arr1.join('%%');/*指定符号拼接*/
console.log(str);

var str = arr1.join('');
console.log(str);

在这里插入图片描述

viii)splice()：删除、修改或向数组中添加数据。
(1)删除

var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,2);
console.log(arr1) // [1,4] 从下标为1的位置开始删除，删除2个元素
console.log(arr2) // [2,3]  返回被删除的元素

在这里插入图片描述

（2）修改

var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,2,'aa');
console.log(arr1) 

var arr2 = arr1.splice(1,2,'aa','bb','cc');
console.log(arr1)

在这里插入图片描述

（3）添加

var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,0,'aa');
console.log(arr1)

var arr2 = arr1.splice(1,0,'aa','bb','cc'); // 中间添加
console.log(arr1)

var arr2 = arr1.splice(0,0,'aa','bb','cc'); // 头部添加
console.log(arr1)

var arr2 = arr1.splice(arr2.length,0,'aa','bb','cc'); // 尾部添加
console.log(arr1)

在这里插入图片描述

四、Function类型
Function是一个用来构建函数的类（构造函数）。

  // 1.普通方式
  function fn1(n) {
    console.log(n)
  }
  fn1(10);
  
  // 2.使用变量初始化函数
  var fn2 = function (n) {
    console.log(n)
  }
  fn2(100)
  
  // 3.new创建
  var fn3 = new Function(); // 通过Function构建了一个函数对象fn3
  fn3 = function (n1, n2) {
    console.log(n1 + n2)
  }
  fn3(10, 20);

定义方法与前面的函数定义其实差不多

函数内部属性
在函数内部，有两个特殊的对象：arguments和this。
callee:arguments是一个类数组对象，包含着传入函数中的所有参数，主要用途是保存函数参数。但这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。也即是说可以通过arguments.callee调用函数自身，一般用于函数的递归调用。
函数自己调用自己叫函数的递归调用。

  function fact(n){
    if( n === 1){
      return 1;
    }else{
      return n * arguments.callee(n - 1); 
    }
  }
  console.log(fact(6));

其实就是一个递归，arguments.callee调用函数自身，无论函数名字（fact）怎么改都还是调用本身的函数

this指针对象
在全局中this指向的是window（在JS中没有global这个全局对象，而JS的全局对象是window）；在函数中this指向的是这个函数执行所操作的当前对象。

  var name = '李四';// window.name = '李四'
  var obj = {
    name: '张三',
    age: 16,
    fn:function () {
      console.log(this.name + this.age); //张三16    this指向的是当前执行这个函数的对象
    }
  }
  console.log(this.name);//李四    this指向的是window
  obj.fn();

在这里插入图片描述

梦起孟心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习——基础（二）

一、函数函数就是将具有一定功能的一段JS代码的封装，可以在程序的多个地方被反复调用。（1）定义函数格式一：function 函数名（[形参列表]）{函数体；[return [<表达式>];]}格式二：var 变量名 = function（[形参列表]）{函数体；[return [<表达式>];]}格式三：(function（[形参列表]）{函数体；[return [<表达式>];]})([实参列表]);上面的函数叫立即执行函数表达式（I
复制链接

扫一扫

专栏目录