JavaScript基础学习（3） | 字节青训营笔记

拿奖去喝AD钙
122 阅读13分钟

👀 这是我参与「第四届青训营 」笔记创作活动的的第6天！

这是一篇非常适合小白一起学习的文章，都是非常基础的知识。   😀😁😀😁😀😁

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻1、JavaScript数组

🍻1.1、 初识数组

描述：

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组TypedArray。

只能用整数作为数组元素的索引，而不能用字符串。后者称为 关联数组。使用非整数并通过 方括号 或 点号 来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的 属性集合 上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果你有一组数据（例如：车名字），存在单独变量如下所示：

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

🍻1.2、 创建数组

创建一个数组的方法

方法一：

使用 JavaScript 关键词 new

实例：

var arr=new Array();
//创建了一个空数组

var cars = new Array("Saab", "Volvo", "BMW");

方法二：

使用数组字面量

语法：

var array-name = [item1, item2, ...];

实例

var cars = ["Saab", "Volvo", "BMW"];

注意：数组里面的元素可以是任意类型的。

🍻1.3、访问数组元素

我们通过引用索引号（下标号） 来引用某个数组元素。（数组下标从0开始）

示例：

var arr=['cw','qw','qwe','ert'];
alert(arr[0]);//访问arr中的第一个元素

结果：

image.png

🍻1.4、修改数组元素

以下实例修改了数组 arr 的第一个元素:

  var arr=['cw','qw','qwe','ert'];
  arr[0]='qwert';
  alert(arr[0]);//访问arr中的第一个元素

image.png

🍻1.5、遍历数组

遍历数组：就是把数组的元素从头到尾访问一次(通过循环实现数组的遍历)，数组的遍历通过for循环实现。

示例：

var arr=['red','yeak','green'];
for(var i=0;i<3;i++)
{
    console.log(arr[i]);
}

image.png

获取数组的长度 ： 每个数组有一个length属性，length属性值代表了数组中元素的个数，前端开发中时常会使用length属性计算数组的长度，这个length值比数组中最大的索引值大1。

获取数组长度代码： 数组名.length

代码优化：

var arr=['red','yeak','green'];
for(var i=0;i<arr.length;i++)
{
    console.log(arr[i]);
}

image.png

练习一： 计算数组的和以及平均值。


var arr=[2,6,1,7,4];
var sum=0
var av=0;
for(var i=0;i<arr.length;i++)
{
    sum+=arr[i];
}
av=sum/arr.length
console.log(sum)
console.log(av)

image.png

练习二： 求出数组里面的最大值。

var arr=[2,6,1,77,52,25,9];
var max=arr[0];
for(var i=1;i<arr.length;i++)
{
    if(arr[i]>max)
    {
       max=arr[i];
    }
}
console.log(max);

image.png

练习三： 数组转化为字符串。

var arr=['red','green','blue','pink'];
var str='';
for(var i=0;i<arr.length;i++)
{
    str+=arr[i]+'|';
}
console.log(str);

image.png

练习四： 数组中新增元素

一、t通过修改length长度来新增元素

var arr=['red','green','blue','pink'];
arr.length=5;
for(var i=0;i<arr.length;i++)
{
console.log(arr[i]);
}

image.png

如图所示：通过修改length长度已经为aee新增了一个元素，只不过因为没有给arr[4]赋值，所以打印出来的undefined。

二、通过索引号，追加数组元素。

var arr=['red','green','blue','pink'];
arr[4]='yello';
for(var i=0;i<arr.length;i++)
{
console.log(arr[i]);
}

image.png

🍻1.6、案列

案列一： 新建一个数组里面放1到10

方法一：

var arr=[];
for(var i=0;i<10;i++)
{
    arr[i]=i+1;
}
alert(arr);

方法二：

var arr=[];
var n=0;
while(n<10)
{
     arr[n]=n+1;
     n++;
}
alert(arr);

image.png

案列二： 筛选数组

var arr=[2,3,5,4,78,65,78,45,1,3,64,6];
var arrnew=[];
var j=0;
for(var i=0;i<arr.length;i++)
{
    if(arr[i]>=10)
    {
        arrnew[j]=arr[i];
        j++;
    }
}
console.log(arrnew);

image.png

案列三： 删除指定的数组元素

将数组[2，0，6，1，77，0，52，0，25，7]中的0去掉后，形成了一个不包含0的新数组、

    var arr=[2,0,6,1,77,0,52,0,25,7];
    var arrnew=[];
    var j=0;
    for(var i=0;i<arr.length;i++)
    {
        if(arr[i]!=0)
        {
            arrnew[j]=arr[i];
            j++;
        }
    }
   alert(arrnew)

image.png

案列四： 翻转数组

方法一：


var arr=['red','green','blue','pink'];
var newarr=[];
var j=0;
for(var i=arr.length-1;i>=0;i--)
{
    newarr[j]=arr[i];
    j++;
}
console.log(newarr);

方法二：

var arr=['red','green','blue','pink'];
var newarr=[];
for(var i=arr.length-1;i>=0;i--)
{
    newarr[newarr.length]=arr[i];
}
console.log(newarr);

image.png

案列五： 冒泡排序

var arr=[2,3,5,4,78,65,45,1,64,6];
var temp=0;
for(var i=0;i<arr.length-1;i++)
{
    for(var j=0;j<arr.length-i-1;j++)
    {
        if(arr[j]>arr[j+1])
        {
            temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
}
console.log(arr)

image.png

🍻2、JavaScript中Array 方法

方法描述
concat()连接两个或多个数组，并返回已连接数组的副本。
copyWithin()将数组中的数组元素复制到指定位置或从指定位置复制。
entries()返回键/值对数组迭代对象。
every()检查数组中的每个元素是否通过测试。
fill()用静态值填充数组中的元素。
filter()使用数组中通过测试的每个元素创建新数组。
find()返回数组中第一个通过测试的元素的值。
findIndex()返回数组中通过测试的第一个元素的索引。
forEach()为每个数组元素调用函数。
from()从对象创建数组。
includes()检查数组是否包含指定的元素。
indexOf()在数组中搜索元素并返回其位置。
isArray()检查对象是否为数组。
join()将数组的所有元素连接成一个字符串。
keys()返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()在数组中搜索元素，从末尾开始，并返回其位置。
map()使用为每个数组元素调用函数的结果创建新数组。
pop()删除数组的最后一个元素，并返回该元素。
push()将新元素添加到数组的末尾，并返回新的长度。
reduce()将数组的值减为单个值（从左到右）。
reduceRight()将数组的值减为单个值（从右到左）。
reverse()反转数组中元素的顺序。
shift()删除数组的第一个元素，并返回该元素。
slice()选择数组的一部分，并返回新数组。
some()检查数组中的任何元素是否通过测试。
sort()对数组的元素进行排序。
splice()从数组中添加/删除元素。
toString()将数组转换为字符串，并返回结果。
unshift()将新元素添加到数组的开头，并返回新的长度。
valueOf()返回数组的原始值。

🍻3、JavaScript函数定义

🍻3.1、什么是函数

将需要反复使用的功能代码，封装成独立的模块，这个模块就是函数.

🍻3.2、使用函数的好处?

  • 可复用(可重复使用)
  • 功能代码可控

🍻3.3、函数的分类

  • 内置函数 （js给我们提供的）
  • 自定义函数 （自己定义）

🍻3.4、声明函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中： {}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数（Function parameters） 是在函数定义中所列的名称。

函数参数（Function arguments） 是当调用函数时由函数接收的真实的值。

在函数中，参数是局部变量。

函数声明后不会立即执行，会在我们需要的时候调用到。

注意：function是函数关键字，必须全部小写。

函数的声明方式：

方法一：

语法：

function functionName(parameters) {
  执行的代码
}

方法二：

通过内置的 JavaScript 函数构造器（Function（））定义。

语法：

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

🍻3.5、调用函数

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

调用函数：

函数名();



function MAXarr(arr)
{
    var max=arr[0];
    for(var i=1;i<arr.length;i++)
    {
        if(arr[i]>max)
        {
            max=arr[i];
        }
    }
    return max;
}
var arr=[2,3,5,4,78,65,45,1,64,6];

MAXarr(arr);//调用的MAXarr函数

🍻3.6、函数的参数

形式参数(形参)：定义函数时所传递的参数。

实际参数(实参): 调用函数时所传递的参数。



function 函数名(形参1，形参2，...)；
{
    //代码块
}
函数名（实参1，实参2, ...）；

注意：

  • 👀参数传递: 只能将实参 传递给形参，即单向传递

  • 👀形参只能是变量; 实参可以是变量，常量，表达式

  • 👀实参的数量 小于形参的数量时，多余的形参值为undefined

  • 👀实参的数量 大于形参的数量时，自动忽略多余的实参

🍻3.7、函数的返回值

function 函数名(){
    return 需要返回的结果;
}

有返回值函数的概念：
1 . 当调用某个函数，这个函数会返回一个结果出来
2 . 这就是有返回值的函数

返回值的作用

  • 将函数内部处理后的结果返回到调用该函数的地方
  • 退出函数

注意：

  • return终止函数，所以return后面的代码不会执行

  • return只能返回一个值


    function fu(num1,num2){
    return num1,num2; //返回后面的一个值
    }
  • 函数中不写return，函数得返回值就是undefind

    function fun1(){
        return 666;//函数返回666
    }
    
     function fun1(){
                  //函数返回undefined
    }

🍻3.8、arguments

arguments 是一个对应于传递给函数的参数的类数组对象。

arguments基本使用

当我们不确定有多少个参数传递的时候，可以使用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

如：

<script>
        function getData() {
            console.log(arguments);
        }
        getData("Continue", 20, true);
</script>

显示截图：

image.png

注意： 从返回值 _proto_指向Object可以知道arguments是类数组对象，而不是数组

arguments特点

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的push、pop等方法

callee属性 arguments还有一个callee属性，这个属性可以返回整个函数的代码。

<script>
    function getData() {
        console.log(arguments);
        console.log(arguments.length);
        console.log(arguments.callee);
    }
    getData("Continue", 20, true);
</script>

显示效果：

image.png

🍻3.9、案列

案列一： 返回两个数中最大的数

function MAXnum(num1,num2){
    if(num1>num2)
    {
        return num1;
    }
    else
    {
        return num2;

    }
}
console.log(MAXnum(5,5))

function MAXnum(num1,num2){
    return num1>num2 ? num1:num2;
}
console.log(MAXnum(5,6))

案列二： 利用函数求任意一个数组中的最大值

function MAXarr(arr)
{
    var max=arr[0];
    for(var i=1;i<arr.length;i++)
    {
        if(arr[i]>max)
        {
            max=arr[i];
        }
    }
    return max;
}
var arr=[2,3,5,4,78,65,45,1,64,6];
console.log(MAXarr(arr));

image.png

案列三： 求两个数的加减乘除

function getReault(num1,num2){
    return [num1+num2,num1-num2,num1*num2,num1/num2];//返回的是一个数组
}

案列四：利用函数求任意个数的最大值

function getMax()
{
var max=arguments[0];
for(var i=1;i<arguments.length;i++)
{
    if(arguments[i]>max)
    {
    max=arguments[i];
    }
}
return max;
}

console.log(getMax(1,2,3,4));
console.log(getMax(1,2,3,4,5,6));
console.log(getMax(1,2,3,4,5,6,7,8));
console.log(getMax(1,2,3,4,5,6,7,9,9));

image.png

🍻4、JavaScript作用域

作用域指的是您有权访问的变量集合。

javaScript 函数作用域

在 JavaScript 中有两种作用域类型：

  • 局部作用域
  • 全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性（可见性）。

函数内部定义的变量从函数外部是不可访问的（不可见的）。

局部 JavaScript 变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量的作用域是局部的：只能在函数内部访问它们。

由于只能在函数内部识别局部变量，因此能够在不同函数中使用同名变量。

在函数开始时会创建局部变量，在函数完成时会删除它们。

全局 JavaScript 变量

函数之外声明的变量，会成为全局变量。

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

实例

myFunction();


// 此处的代码能够使用 Names 变量，以为变量未声明，所以Names为全局变量。

function myFunction() {
    Names = "kaikaixi";
}

JavaScript 变量的有效期

  • JavaScript 变量的有效期始于其被创建时。

  • 部变量会在函数完成时被删除。

  • 变量会在您关闭页面是被删除。

作用域链

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

作用域链决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。

function fn(){
    var a=10;
    function fn1(){
        var b=20;
        alert(a);//10
        function fn2(){
            alert(b);//20
            alert(a);//10  子集可以跨级访问父级
        }
        fn2();
    }
    fn1();
}
fn();
alert(b);// 报错

从作用域链的结构可以看出，函数在执行的过程中，先从自己内部寻找变量，如果找不到，再从创建当前函数所在的作用域去找，从此往上，也就是向上一级找，直到找到全局作用域还是没找到。

执行顺序


var a=10;
function fn(){
    var a=20;
    console.log(a);//20
}
fn();

总结

定义：作用域的集合就是作用域链

1、函数在执行的过程中，先从自己内部寻找变量

2、如果找不到，再从创建当前函数所在的作用域去找，从此往上，也就是向上一级找。

当在作用域内访问 变量/方法 的时候，会找离自己最近的那个 变量/方法 （就近原则）

🍻5、JavaScript预解析

JavaScript代码是由浏览器中的js解析器来执行的，JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

1.我们js引擎运行js分为两步 ：预解析 代码执行

（1）预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面

（2）代码执行 按照代码书写的顺序从上往下执行

2.预解析分为 变量预解析（变量提升）和函数预解析（函数提升）

（1）变量提升 就是把所有的变量声明提升到当前的作用域的最前面 不提升赋值操作

(2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

经典案列

image.png

🍻6、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日的JavaScript基础知识学习就到此为止了，这是我第三天学习JavaScript，虽然是这三天的内容比较基础，但是还是从中发现了很多自己的知识盲区，和自己不理解没学过的知识，希望大家一起进步，这篇文章是非常适合小白学习的，我们一起努力学习，成为更好的自己，每天进步一点点。！！！

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝