JavaScript-0823

最新推荐文章于 2024-05-14 07:53:33 发布
最新推荐文章于 2024-05-14 07:53:33 发布
阅读量941 收藏 2
点赞数
分类专栏： js基础语法 文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52696618/article/details/126489842
版权 
1、正则
    使用特殊字符对字符串 进行验证、匹配、替换
2、获取正则对象
    1、 字面量 /表达式规则/模式
    2、 new RegExp('表达式规则','模式')
3、正则对象下的方法
    1、test() 验证字符串是否满足要求
    2、exec() 匹配字符串
3、模式
    i:不区分大小写
    g：全局匹配
4、元字符
    \d:数字
    \w:数字、字母、下划线
    . 匹配除了换行之外的任意字符
    ^ 表示开始
    $ 表示结束
    {n,m} 现在字符出现的次数 最少n次最多m次
    - 到
    ()分组
    | 或者
5、let关键字与var的区别
    1、let 不容许重复声明变量
    2、不存在预解析
    3、块级作用域
    4、不会将变量加入到当前作用域下的对象中
6、const
    const 修饰常量，要求常量的必须赋值，并且常量在栈区存储的值是不能修改（基本类型值不能改 引用类型 不能重置值 但是可以根据下标或者属性名称修改）
7、箭头函数
    1、作用：简化函数表达式(将函数赋值给另外一个变量)
    2、语法：(形参)=>{函数体代码}
    3、简化形式：
        1、只有一个参数 并且这个参数没有默认值 可以省略()
        2、如果函数体中只有一行 可以省略{} 并且自动的将执行结果return
    4、函数的默认值：传递使用传递的参数 否则就使用默认值
    5、箭头函数与普通函数区别
        1、箭头函数没有arguments
        2、箭头函数没有单独的this
        3、没有原型 所以不能new
8、模板字符串
    简化字符串拼接  使用``即可 反引号总${}来使用变量或者表达式

typora-root-url: img

解构赋值

解构赋值快速的将数组或者对象中的某一个值赋值给另外的变量

对象解构

1、基本解构

let person = {
    name:'胡鑫',
    money:10000000,
    sex:'男',
    like:{
        firstName:'刘',
        sex:'男'
    }
}
// 如果对象比较复杂 需要使用内部的数据，确实可以 直接使用对象的点语法逐层获取。但是比较麻烦 容易出错，使用解构赋值将需要使用到的值快速的赋值给变量
// 对象解构语法
// let {属性名称:别名,...} = 对象 别名不是必须的
// 1、基本解构 默认解构出来的属性 对应的变量名称需要与属性名称同名
// 等价于 let money = person.money
// let {money} = person;  
// console.log(money);
// 等价于 let name = person.name ; let money = person.money
let {name,money} = person;

2、别名设置

// 2、设置别名
let {money:hxMoney,name} = person;
console.log(hxMoney);
console.log(name);

3、多级解构

// 3、多级解构
// 等价于 let tmp = person.like let a = tmp.firstName let sex = tmp.sex
let {like:{firstName:a,sex}} = person;
console.log(a,sex)

数组解构

// 数组解构的语法
// let [变量名称,..] = 数组
// 1、一级解构
let arr = ['a', 'b', 'c'];
// 数组在解构时会按照数组的顺序进行 等价于 let a = arr[0] let b = arr[1]
// let [a, b] = arr;
// console.log(a,b)
// 等价于 let a = arr[0] let c = arr[2]
let [a,,c] = arr;
console.log(a,c)
// 2、多级解构
let arr2 = [
    [1,2,3,4,5],
    [6,7,8,9,10]
];
// 等价于 let tmp = arr2[1] let e = tmp[2];
let [,[,,e,,]] = arr2; 
console.log(e);
// 3、使用数组解构语法交互变量
let aa = 10;
let bb = 20;
// 使用的是解构语法  bb = 数组中aa  aa = 数组中bb
[bb,aa] = [aa,bb];
console.log(aa,bb); //20 10

展开与合并运算符

展开运算符

// 展开运算符 就是将变量中内容进行"平铺"
// 1、展开数组
let arr = [10, 1, 20, 9];
// console.log(Math.max(arr));
console.log(Math.max(arr[0], arr[1], arr[2], arr[3]));
// 变量前使用... 就对变量进行展开，每个元素直接使用对应的分割符号分割
console.log(Math.max(...arr))
// 2、展开对象
let dog = {
    name:'大黄',
    age:2
}
let dog2 = {
    ...dog,
    type:'单身狗'
}
console.log(dog2)

合并运算符

// 合并运算符 是用于将多个参数进行合并
        // ...args 将函数实参 合并到args变量中 并且格式为数组格式
        let max = (...args)=>{
            console.log(args);
        }

        max(10,8,1,5)
        // 将多余的参数 合并为一个数组
        let js = (type,...args)=>{
            console.log(type);
            console.log(args);
        }
        console.log('+',1,2,3,4,5)


        // 将所有的参数 又合并到args数组中
        let max2 = (...args)=>{
            console.log(args);
        }

        let arr = [1,2,39,2];
        // 将arr的变量值进行展开 就是调用max2函数传递了4个参数1,2,39,2
        max2(...arr);
//只有在函数形参上使用...表示合并 其他位置都表示展开

对象简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"  class="mobile">
    <button>发送验证码</button>
    <script>
        document.querySelector('button').onclick = function(){
            let mobile = document.querySelector('.mobile').value;
            // 后期 会将手机号组合成为一个对象使用
            let data = {
                // 对象下存在mobile的属性 对应的值是mobile变量
                // mobile:mobile
                // 1、当属性名称与变量名称同名 可以简写 一个即可
                mobile
            }
            
        }
        // 2、对象中函数简写
        let obj = {
            // 存在say属性 对应的值是函数
            // say:function(){
            //     console.log('say')
            // }
            // 对象下函数简写 不是箭头函数 
            say(){
                console.log('say')
            }
        }
        obj.say();
    </script>
</body>
</html>

this总结

this的指向

每一个函数(箭头函数除外)，在被调用的时候，系统会自动使用this表示出 调用这个函数的对象。所以 永远是谁

调用就表示谁

常用的this的场景

1、普通函数直接调用

// 1、普通函数直接调用
function fn(){
    console.log(this);
}
fn();//window

2、定时器

setTimeout(function(){
    console.log(this)
},1000)

3、行内绑定

<!-- 直接使用onclick 属性使用this 表示的事件源的dom对象 -->
<button onclick="console.log(this)">按钮</button>
<!-- 直接使用onclick 属性使用 函数调用形式 函数中this表示的是window对象 -->
<button onclick="fn()">按钮</button>

4、动态绑定与事件监听

// 4、事件监听
document.querySelector('.btn3').addEventListener('click',function(){
    console.log(this);
})

5、对象中this

let obj = {
            name:'王五',
            say:function(){
                    console.log(this);
             
            }
        }
        obj.say();

6、this是可以被修改的

let obj = {
    name:'王五',
    say:function(){
        // 定时器外 this 表示的是obj
        console.log(this);
        // 但是定时器中函数this表示的是window
        setTimeout(function(){
            console.log(this);
        })
    }
}
obj.say();

箭头函数中this

箭头函数本身没有this，如果箭头函数中使用this，会到上级中寻找this ，找到了就使用上级的this 没找到 继续向

上(是从上下文来继承this使用)

<button>按钮</button>

    <button id="set">设置点击事件</button>
    <script>
        document.querySelector('#set').onclick = function(){
            // 箭头函数本身 没有this，就找上面代码中this是谁
            // 此时外层的this 表示是第二个按钮的dom对象 所以 箭头函数中this 表示的是第二个按钮的dom对象
            document.querySelector('button').onclick  = ()=>{
                console.log(this)
            }
        }
        document.querySelector('#set').onclick = ()=>{
            // 箭头函数本身 没有this，就找上面代码中this是谁
            // 此时外层的this也不存在 继续向上寻找  找到window对象
            document.querySelector('button').onclick  = ()=>{
                console.log(this)
            }
        }
    </script>

更改this指向

更改this的指向不要针对箭头函数使用

call

function fn(name,age){
   // 将当前this表示的对象的name属性赋值为name变量
    this.name = name;
    this.age = age;
}
// fn('李四',20);
// 此时调用fn函数 this表示的是window对象 所以最终执行完会在window对象下的添加name属性与age属性

// let obj = {
//     // 当前对象下有fn属性对应的值是fn函数
//     fn
// }
// 谁调用this就表示谁
// obj.fn('李四',20)
// console.log(obj)
let person = {};
// 1、使用call 修改this指向
// call的参数 当使用call方法时会将函数调用起来 并且将函数代码中this修改为call方法传递的第一个参数
// call方法第一个参数 是this表示的对象 其他参数顺序表示调用函数所传递的额外参数
fn.call(person,'王八',22);
console.log(person)]

apply

// 2、apply 也可以修改this指向 第一个参数还是修改的对象是谁，第二个参数要求为数组 数组中每一个元素 对应着形参
        // fn.apply(person,['王麻子',18]);
        // console.log(person)

bind

// 3、bind  可以修改this指向 但是不会调用函数  将修改后的函数返回了.所以如果需要执行函数 就必须再手动调用返回结果的函数
        // fn.bind(person) 得到的是一个函数  就可以继续()调用
        fn.bind(person)('李四',22)
        console.log(person)

总结：

1、call、apply两个方法 都可以将函数调用起来。call在使用时函数本身的参数 需要按照顺序传递给call方法，但是apply方法传递形式是使用数组格式

2、bind方法只能将this修改，但是不调用

验证数据类型

// 1、错误 演示  下面的函数需要参数是函数 但是传递的不是。就导致代码执行错误，必须进行参数格式验证
// function c(callback){
//     callback();
// }
// c([])
// 2、验证数据类型1 typeof
console.log(typeof []);//object
console.log(typeof {});//object
// 3、验证数据类型2 instanceof  可以查看 变量是否是指定的构造函数的实例对象
console.log([] instanceof Array);//true
console.log({} instanceof Object);//true
console.log(10 instanceof Number);//false
// 4、验证数据类型3 
console.log(Object.prototype.toString.call(10))//[object Number]
console.log(Object.prototype.toString.call("str"))//[object String]
console.log(Object.prototype.toString.call(true))
console.log(Object.prototype.toString.call(undefined))
console.log(Object.prototype.toString.call(null))
console.log(Object.prototype.toString.call([]))
console.log(Object.prototype.toString.call({}))
console.log(Object.prototype.toString.call(function(){}))

function c(callback){
    if(Object.prototype.toString.call(callback) != '[object Function]'){
        throw new Error('参数callback不是函数')
    }
    callback();
}
c([])

JSON

/*
        进行项目开发时属于前后端分离情况。一定会涉及到数据交互
        后端有很多种编程语言，每一门编程语言都有自己的数据类型
        例如后端使用PHP 发送给我们前端用户的信息 php中可以表示 array('headerImg'=>'http://a.com/1.jpg','nickname'=>'张三') 
        所以js在处理数据这块就比较麻烦
        所以编程语言就商量使用一种通用的格式。JSON格式就是对数据交互通用型做法
        早期数据交互使用XML格式(与html非常类似 也是标签型)
        JSON其实就是一种数据格式(字符串) 没门语言都实现将内置数据类型转换为JSON或者将JSON转换为内置的数据类型
        JSON格式与js中数组对象 基本上一模一样 唯独要注意 当表示对象时 名称必须使用引号，最后一个元素 不能使用逗号
    */
    let data  = [
        {id:1,name:'a',price:1000},
        {id:2,name:'b',price:1000},
        {id:3,name:'c',price:1000},
    ];
    // 1、将js中数组或者对象转换为JSON格式的字符串
    let str = JSON.stringify(data);
    console.log(str)
    console.log(Object.prototype.toString.call(str))

    // 2、将JSON格式转换为内置的数据类型(JSON对象)
    //  Unexpected token ' in JSON at position 11   只要看到JSON错误 绝对是结果不是JSON格式的字符串
    let json = `{"id":1001,"nickname":"金毛"}`;//字符串
    console.log(JSON.parse(json))
    let json2 = `[{"id":1001,"nickname":"金毛"}]`;//字符串
    console.log(JSON.parse(json2))

深浅拷贝

1、深浅拷贝概念

就是变量直接赋值 修改一个变量对另外一个变量是否会产生影响（数组对象）
浅拷贝： 直接将地址进行赋值，其中一个变量修改会影响到另外一个变量
深拷贝：将变量的赋值给另外一个变量，两个变量直接相互没有影响

2、借助JSON实现

let data = {
            goodsName: 'mac pro',
            sku: [{
                    id: 10,
                    attr: '8G 256G'
                },
                {
                    id: 11,
                    attr: '16G 512G'
                }
            ]
        };
        // 浅拷贝 直接赋值地址
        // let a = data;
        // a.goodsName = 'aaa';
        // console.log(data)
        // 1、使用JSON实现
        // let a= JSON.parse(JSON.stringify(data));
        // a.goodsName = 'aaa'
        // console.log(data)
        // console.log(a)

3、使用递归完成深拷贝


// 2、使用递归完成
function deepCopy(data) {
    // 容许的数据类型
    let allowType = ['[object Array]', '[object Object]'];
    // 获取当前data的数据类型
    let type = Object.prototype.toString.call(data);
    if (!allowType.includes(type)) {
        return;
    }
    // 保存结果的
    let result = (type == '[object Array]') ? [] : {};
    for (let key in data) {
        // 当前遍历的元素(属性) 只有不是数组或者对象时才可以将值加入到result变量中
        if (allowType.includes(Object.prototype.toString.call(data[key]))) {
            result[key] = deepCopy(data[key]);
        } else {
            result[key] = data[key];
        }
    }
    return result;
}

let a = deepCopy(data);
a.goodsName = 'aaaa';
console.log(data)
console.log(a)

伪数组转换数组

<button>按钮1</button>
<button>按钮2</button>
<script>
    let btns = document.querySelectorAll('button');
    console.log(btns);
    // 1、转换真数组 一
    // let arr = [];
    // btns.forEach(item=>arr.push(item));
    // console.log(arr);
    // 2、使用slice方法  使用原型方法
    console.log(Array.prototype.slice.call(btns));
    // 3、 使用静态方法
    console.log(Array.from(btns));
</script>

ES6文档：http://caibaojian.com/es6/

goto_w
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js代码-对象嵌套解构
07-16
js代码-对象嵌套解构
多级对象解构、多级对象解构、筛选商品价格 案例 ——JS进阶
weixin_70320000的博客
02-26 762
多级对象解构、多级对象解构、筛选商品价格案例——JS进阶
Vue-多层级结构
m0_73839298的博客
05-14 207
在Vue.js中多层级结构是指当出现同一个数据属性名相同时如何处理嵌套数据的插值，即在data对象中再定义一个自定义名的对象。
JS 编程三大结构
tian_to_tian的博客
08-19 527
一、三大结构 1、顺序结构（默认） 从上到下，一句一句的执行 2、选择结构 根据条件判断，执行不同的代码，可分为单分支和多分支 3、循环结构 根据条件，进行重复执行，不满足条件就结束循环 二、选择结构 1、单分支 if(条件表达式){ 如果条件成立，执行本语句 } 2、双分支 if(条件表达式){ 条件为真的处理 }else{ 条件为假的处理 } 3、多分支（多重if） 特点：对于多分支，我们会从第1个if开始判断，如果第1个if条件不满足，则判断第2个if条件……直到满足为止。一旦满
es6对象多层解构、数组解构
weixin_459417989的博客
01-15 896
【代码】es6对象多层解构、数组解构。
JavaScript系列之解构赋值
老__L的博客
09-18 1684
解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。
ans-javascript-sdk:Analysys JavaScript SDK
05-07
npm install ans-javascript-sdk --save JavaScript 基础说明： JS SDK 用于由 HTML 、 Css 及 Javascript 制作成的网站，集成前请先安装SDK 快速集成 如果您是第一次使用易观方舟产品，可以通过阅读本文快速了解此...
javascript - javascript tutorial
最新发布
07-03
PART 1: JAVASCRIPT BASICS 1 1. JAVASCRIPT – Overview2 What is JavaScript?2 Client-Side JavaScript2 Advantages of JavaScript3 Limitations of JavaScript3 JavaScript Development Tools3 Where is ...
JavaScript-master
06-28
The Algorithms - JavaScript JavaScript Repository of TheAlgorithms, which implements various algorithms and data structures in JavaScript. JavaScript Banner Gitpod ready-to-code Checks codecov ...
JavaScript-笔记.pdf
11-28
JavaScript-笔记.pdf
关于JS解构的5种有趣用法
10-16
主要给大家介绍了关于JS解构的5种有趣用法，文中通过示例代码介绍的非常详细，对大家学习或者使用JS解构具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
掌握JavaScript中的解构赋值：深入挖掘隐藏的技巧
前端全栈大佬
11-29 533
本博客将带你深入学习 JavaScript 中的解构赋值，从基础用法到高级技巧，揭示其强大而灵活的功能。通过丰富的示例和实用的技能，你将发现解构赋值不仅仅是一种语法糖，更是提高代码可读性和编程效率的关键。
多层解构赋值
qq_36893984的博客
12-16 2532
一般使用结构赋值的时候，多是服务端返回的数据的时候，一般会包有固定的一层数据，data什么之类的，所有此时使用一个解构赋值，会使得代码看起来略微高雅一点 普通的解构赋值 let obj = { data: { data: { cites: [1, 2, 3] } } } 结构出第一个da
js骚操作写法
thickhair_cxy的博客
07-14 238
//{{}:{}}二次结构 const {obj1:{obj2}} ={obj1:{obj2:{name: '阿奎'}}} console.log(obj2) //...(里面可以写表达式) const obj = { name:'111', ...(0 && {age:15} || {a:111} ) } console.log(obj)
JavaScript中解构的用法
qq_39410252的博客
02-27 458
解构赋值是对赋值运算符的扩展。解构赋值主要分为数组的解构和对象的解构。
activex传字符串数组_JS面试之数组对象解构
weixin_39888807的博客
11-20 135
数组解构: 将 destructuringArray([1, [2, 3], 4], “[a, [b], c]”) => {a: 1, b: 2, c: 4}//将destructuringArray([1,[2,3],4],"[a,[b],c]")=>{a:1,b:2,c:4}consttargetArray=[1,[2,3],4]...
js之分支结构 （单分支）（双分支）（多重分支）（switch case）
l567890y的博客
12-06 956
什么是分支分支是代码执行顺序的一种，我们的代码应该是从上到下依次执行。分支结构就是到了某一位置的时候，可以让我们通过条件控制想要执行的代码。
Javascript——js中数组、对象的解构
weixin_43551242的博客
11-24 1580
js中数组、对象的解构
javascript-3.1.1
11-14
JavaScript-3.1.1是一种用于网页开发的脚本语言版本。JavaScript是一种动态、强类型的脚本语言，广泛应用于客户端的网页开发中。 JavaScript-3.1.1版本在之前的版本上进行了一些改进和优化。这个版本引入了一些新的特性和功能，提供了更好的开发体验和更高的效率。 在JavaScript-3.1.1中，开发者可以使用新的语法和关键字来编写更简洁和高效的代码。对于之前的一些语法和方法，也进行了一些调整和改进，使得开发者可以更方便地使用和理解。 除了语法的改进，JavaScript-3.1.1还提供了一些新的内置函数和对象，使得开发者可以更方便地处理和操作数据。同时，这个版本还加强了对浏览器兼容性和性能优化的支持，使得开发者可以在不同的浏览器和平台上更稳定地运行代码。 JavaScript-3.1.1还提供了更丰富的开发工具和框架，帮助开发者更轻松地构建复杂的应用程序。这些工具和框架提供了一些通用的功能和组件，可以大大减少开发的时间和工作量。 总之，JavaScript-3.1.1是一种更强大、更稳定的脚本语言版本，提供了更多的功能和特性，帮助开发者更简单、高效地开发网页应用程序。开发者使用这个版本可以更轻松地构建交互性强、用户体验好的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

goto_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值