JavaScript知识——数组、函数方法、Date对象、包装类、正则表达式、DOM简介

转x33g5p2x  于2021-11-21 转载在 JavaScript  
字(7.1k)|赞(0)|评价(0)|浏览(296)

数组

创建数组

var arr = new Array();
arr[0] = 135;
console.log(arr[0]);
console.log(arr.length);  #求数组的大小，最大索引+1

//135
//1

使用字面量创建数组

var arr = [1,2,3,4,5,6];
var arr = new Array(10,2,3,30,5,6);

var arr = [10];//创建了一个长度为1，第一个元素为10的数组
var arr = new Array(10);//创建了一个长度为10的数组

数组的方法

1、push()，向数组末尾添加一个或者多个元素，并返回新的长度。

var arr = [1,2,3,4,5,6];
//[1, 2, 3, 4, 5, 6, 7, 8]
//8

2、pop（），删除数组末尾的一个元素，并将被删除的元素返回

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

3、unshift( ),向数组的开头添加一个或多个元素，并返回新的长度

var arr = [1,2,3,4,5,6];
console.log(arr.unshift(0));
//[0,1,2,3,4,5,6]
//7

4、shift(), 删除数组开头的一个元素，并将被删除的元素返回

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

数组的遍历：for循环

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var per1 = new Person("张三", 18);
var per2 = new Person("李四", 28);
var per3 = new Person("王五", 20);
var per4 = new Person("赵六", 13);
var per5 = new Person("陈七", 68);

var arr = [per1, per2, per3, per4, per5];

function isAult(arr) {
    i = 0;
    Aultarr = [];
    for (i = 0; i < arr.length; i++) {
        if(arr[i].age>=18){
            Aultarr.push(arr[i]); 
        }
    }

    return Aultarr;
}

var NewArr = isAult(arr);
console.log(NewArr);

forEach方法，也可以用来遍历数组，参数为一个函数，函数中，会默认传入三个值，第一个值为数组中的元素，第二值为索引，第三个值为数组本身。多少个元素，forEach方法就会重复多少次函数的运行。

slice方法，可以用来提取指定元素，参数 截取开始位置的索引，截取结束位置的索引。该方法不会改变原数组，而是将元素封装到新的数组。

splice()方法，可以用于删除指定的元素，会影响到原数组，并将删除的元素返回。第一个参数为开始删除的元素索引，第二个元素为删除的数量。

数组的去重：

var arr = [1,2,3,6,5,8,9,7,4,5,4,5,6,1,2,3,7,8,9,5];
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        while (arr[i] == arr[j]) {
            arr.splice(j, 1);
            
        }
    }
}
console.log(arr);
// [1, 2, 3, 6, 5, 8, 9, 7, 4]

数组其他方法：
concat( ) 可以链接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响。
var arr = arr1.concat(arr2)

join( )，把数组中的所有元素，合并成字符串，返回字符串。可以指定一个字符串作为参数，这个字符串将会成为数组中元素的链接符

reverse( ) 反转数组，该方法会直接改原数组。

sort( ) 可以对数组中的元素进行排序，也会影响原数组，从小到大排序。即使是纯数字，也会按照Unicode编码来排序，所以对数字进行排序时，可能会得到错误的结果。
可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数。

浏览器会根据回调函数的返回值来决定元素的顺序。

  • 如果返回一个大于0的值，则元素会交换位置
  • 如果返回一个小于0的值，则元素位置不变
  • 如果返回一个0，则认为两个值相等，位置也不变
var arr = [11,5,6,21,4,8,9,51,23];
arr.sort(function(a,b){
    return a-b; //升序 如果是降序则b-a
})
console.log(arr);

//[4, 5, 6, 8, 9, 11, 21, 23, 51]

函数方法

call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象使用
当对函数调用call，和apply都会调用函数执行，在调call(),apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递

this的情况：

  1. 以函数形式调用时，this永远都是window
  2. 以方法的形式调用时，this是调用方法的对象
  3. 以构造函数的形式调用时，this是新创建的那个对象
  4. 使用call和apply方法调用时，this是指定的那个对象

arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数

  1. 函数的上下文对象this
  2. 封装实参的对象arguments

arguments是一个类数组对象，可以通过索引来操作数据，也可以获取数据。

  • 在调用函数时，我们所传递的实参都会在arguments中保存。
function fun(){
    console.log(arguments.length);
    console.log(arguments[0]);
}

fun(1,2)
}

fun(1,2)

//2
//1

所以即使不定义形参，也可以直接使用实参。
aruments中有一个属性叫做callee,这个属性对应一个函数对象，就是当前正在指向的函数的对象。

console.log(arguments.calee == fun);
//true

Date对象

在JS中使用Data对象来表示时间。
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

var d= new Date();

创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数

var d2 = new Date("12/03/2016 11:10:30");
  • getDate()获取日期对象是几号
  • getDay()获取日期对象是星期几 0-6 0为星期天
  • getMonth获取日期对象是几月，会返回一个0-11的值，0表示1月…
  • getFullyear获取日期对象的年份
  • getTime() 获取当前日期的时间戳

略：Math 方法

包装类

在JS中提供了三个包装类，通过三个包装类可以将基本数据类型转化为对象
String()
Number()
Boolean()

var num =new Number(3);
console.log(typeof num);
//object

方法和属性只能添加给对象，不能添加给基本数据类型，当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法。调用完之后，在其转换为基本数据类型。

字符串方法：
字符串方法

正则表达式

JavaScript RegExp 对象——来自菜鸟教程

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取字符串中符合规则的内容提取出来

语法：

var value = new RegExp("正则表达式","匹配模式");

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var reg = new RegExp("a");

var str = "a";

var result = reg.test(str);
console.log(result);

//true

上述的正则表达式就是检验字符串中是否含有a,但是此时字符串如果只有A，而没有a，就会报错。
这时就需要用有第二个参数，匹配模式。

var reg = new RegExp("a"，"i");就可以忽略大小写，而返回true.

使用字面量来创建正则表达式：
判断字符串中是否有a或者b

var reg = /a|b/i;

[ ]里面的内容也是或的意思，
[a-z]，任意的小写字母都是true，
[A-Z] 任意的大写字母，
[A-z] 任意的字母

检查一个字符串中是否有abc,aec,adc
只需reg = /a[A-z]c/

[^ ab] 意思是只要只出现a,a,ab,ba的都是false，有其他字符出现的都是true

split()方法

可以将一个字符串拆分为一个数组。
方法中可以传递一个正则表达式作为参数，这样方法就会根据正则表达式去拆分字符串

var reg = /[A-z]/;
var str = "1a5s4d88e9r85as6a5s4d";
result = str.split(reg);
console.log(result);
//["1", "5", "4", "88", "9", "85", "", "6", "5", "4", ""]

search() 方法
用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

如果没有找到任何匹配的子串，则返回 -1。

var str="Mr. Blue has a blue house";
document.write(str.search("blue"));
//15

match（）方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

注意： match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/gi);
//ain,AIN,ain,ain

replace()方法
语法
string.replace(searchvalue,newvalue)

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");

//Mr Blue has a red house and a red car

判断字符串是否为手机号：

//手机号规则
//1、11位
//2、以1开头
//3、3位以后任意9位数字

var phonestr="18578549658";

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test(phonestr));
//true

DOM简介

文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点，整个html页面
  • 每个 HTML 元素是元素节点，标签
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

DOM方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作

getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素

<button id="btn1">登录</button> <!--需要修改的标签-->
<script> var btn = document.getElementById("btn");//获取id为btn1的buttin标签的对象，并返回。 btn.innerHTML = "注册"; //对获取到的对象进行属性修改 </script>

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

<button id="btn1">登录</button>
    <script>
        var btn = document.getElementById("btn1");

        btn.innerHTML = "登录一下";

        btn.onclick = function () {
            alert("登录成功！");
        }
    </script>

设置图片切换效果：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .pic{
        width: 658px;
        height: 439px;
        margin: 100px auto;
        text-align: center;
        background-color: yellow;

    }
</style>
<script>
    window.onload = function(){
        var imgArry = ["./1.jfif","./2.jfif","./3.jfif","./4.jfif","./5.jfif",];

        var i = 0;

        var p = document.getElementsByTagName("p")[0];

        var last = document.getElementById("last");

        var next = document.getElementById("next");

        var img = document.getElementsByTagName("img")[0];

        last.onclick = function(){
            i--;
            if(i<0){
                i = imgArry.length -1;
            }
            p.innerHTML = "一共"+imgArry.length+"张图片，目前是第"+(i+1)+"张";
            img.src = imgArry[0];

        }

        next.onclick = function(){
            i++;
            if(i>imgArry.length -1){
                i = 0;
            }
            img.src = imgArry[i];
            p.innerHTML = "一共"+imgArry.length+"张图片，目前是第"+(i+1)+"张";
        }

    }
</script>

<body>
    <div class="pic">
        <p>一共5张图片，目前是第1张</p>
        <img src="./1.jfif" alt="">
        <button id="last">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/xiaotangyu7dong/article/details/119670330

内容来源于网络，如有侵权，请联系作者删除！

JavaScript菜鸟入门

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com