JS基础+进阶Es6+面试题

最新推荐文章于 2024-06-07 09:18:52 发布

王同学学出来

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量1.1k

点赞数 20

分类专栏： js 文章标签： javascript es6 ajax

本文链接：https://blog.csdn.net/Wang3317866410/article/details/139003055

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、代码位置

写在是script标签里

便签存放位置

head内或者下面

body内或者下面

都可以

执行顺序

正常执行

从前到后

同步异步

同步代码：

当您执行同步代码时，程序会按照代码编写的顺序逐行执行。

异步代码：

允许程序在等待某些操作完成的同时继续执行其他操作。

简单来说就是程序正常执行时遇到异步代码会将其放到最后执行，优先执行同步代码。

这里是正常执行的例子

//1342

写在onclink属性里面，点击按钮，才会执行js命令

只能写一行

写在href属性里面，点击超链接执行js代码

可以写两行

点击链接不跳转可以直接用javascript：；来实现超链接不跳转

alert（）警告弹窗

alert阻塞效果

在不同script同步进行

还有报错弹窗

二、js的数据类型

数据类型

bigInt+n

typeof判断数据类型

输出

会发现这个null通过了typeof打印成了对象了

这样写比较好

问题:无法判断出数组和对象

所以使用下面的判断方法

1.判断数组 isAray

2.instanceof

判断它的原型是不是array，是就是true

3.constructor构造函数

array类型的对象

思路

直接定义的函数叫函数

在对象内定义的叫方法

写个函数给个data的值，如果用typeof判断这个值是基本类型则直接返回data的数据类，如果typeof判断是对象类型，则判断是数组还是对象，注意null需要单独设置。

引入封装思想

单独新建util.js

注意当贴入代码时，记得使用多行注释的方式，方便悬浮查看

不要忘记引入

三、基本数据类型和引入数据类型

基本数据类型

当定义1为10

2=1则2也为10

又赋值给1为20，2没变//因为存储位置不同

所以1=20，2=10

引入数据类型

都存同一个堆内存内，所一变都变

如何让引用类型数据进行赋值，修改不相互影响（深拷贝）

键值对

这个是键值对

键

key是键name

值

obj[key]是name里面的值ls

深拷贝

1.遍历方法

解释：

这段代码的作用是遍历一个对象（obj）中的所有键（key），并判断对应的值的数据类型。如果值是一个对象（对象类型），则将该对象的所有属性深度复制到一个新的对象值中；如果值是基本数据类型（如字符串、数字等），则直接复制到新的数据值中。

换句话说，这段代码的目的是创建一个新的对象，其中包含原始对象中所有对象类型值的深拷贝，以及原始对象中所有基本数据类型值的直接复制。

2.JSON方法

JSON是js自带的相当于引入了js自带的方法

四、对象（一）

内嵌对象及其常用方法解析

string对象

生成一个随机数

截取一个长度为2的，返回ws

字符串分割成数组

不返回，

for循环

字符串和数组都属于可枚举的，可以遍历，内部实现了迭代器

object是所有对象的基类

字面量创建方式

键值对

工厂模式创建模式

使用原因：

当定义人和狗时返回的都是对象，给加个函数名

工厂函数：

对对象造成污染

所以方法都放到object

会造成没必要的全部修改

构造函数创建对象

构造函数优点和模板

vue也是构造函数

new关键字做了哪些操作

（返回值必须是对象否则就返回新对象）

打印一下这个lisi是什么

原型链:

对象的一些操作

JS遍历对象的七种方法-CSDN博客

1.设置后无法修改

2.设置后修改报错，且无法枚举，优先级最高

for in遍历

把原型上的方法也遍历出来了

冒泡排序和选择序列的相关信息

暂无

ECMAScript 6（es6）

学习可以参考ES6 教程 - 网道

// 常见高阶语法新的标准

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。

它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

var let 和 const命令

全部代码讲解1

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6块级作用域let和const命令</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <script>
        var a;//window对象

        /**
         * ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，
         * 已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，
         * 成为企业级开发语言。
         **/
        //var,let,const
        //var 声明的变量会挂载到window上
        //let 声明的变量不会挂载到window上
        //const 声明的变量不能修改
        {
            var a = 10;//给他赋值
            let b = 20;
            const c = 30;
        }
        console.log(window, 'window');//
        console.log(a);//10
        console.log(b);//b is not defined
        console.log(c);//c is not defined
    </script>
</body>

</html>

 {
            var a = 10;//给他赋值
            let b = 20;
            const c = 30;
 }
        console.log(a);//10
        console.log(b);//b is not defined
        console.log(c);//c is not defined

在代码块中定义了a b c并于一赋值

但是在代码块外打印出来只有10其余的报错了

这体现了var的顶层对象属性

相当于在标签顶层中定义了一个window对象

window是什么呢？

其实就是js自带的对象，里面包含着js的诸多方法

比如：

window.alert()
//日常就写成就可以
alert()
history//地址
locanStorage//存储全局变量
onclick//点击事件等等

var的顶层案例

全部代码讲解2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var导致变量提升</title>
</head>

<body>
    <script>
        /**
         * const 会根据值来分配内存，不会造成内存的浪费，性能比let好，建议使用const
         * */
        var a = undefined
        console.log(a)
        var a = 10//赋值
        console.log(a === window.a)
        function test() {
            console.log(b)
            var b = 20
            console.log(b)
            console.log(b === window.b)

        }
        test()
        var c = []
        for (let i = 0; i < 10; i++) {
            c[i] = function () {
                console.log(i)//6 ,var 就是10,因为var是全局变量
            }
        }
        c[6]()
        /**
         * 暂时性死区
         * */
        // console.log(d)
        if (typeof d !== 'undefined') {
            // 会因为暂时性死区报错，代码停止
            console.log(d)

        }
        let d = 10;// let或const声明的变量，在声明之前不能使用，声明前的区域被称为暂时性死区
        console.log(e)
        var e = 11;
        if (typeof e !== 'undefined') {
            console.log(e)

        }
    </script>
</body>

</html>

打印是

function test() {
            console.log(b)
            var b = 20
            console.log(b)
            console.log(b === window.b)

        }
        test()

定义之后在块的外面也能读取到它

var c = []
        for (let i = 0; i < 10; i++) {
            c[i] = function () {
                console.log(i)//6 ,var 就是10,因为var是全局变量
            }
        }
        c[6]()

var一个数组

循环定义方法

var定义是10，定义在外面，没有销毁循环会一直加到10

但是用let/const的是6

暂时性死区

/**
         * 暂时性死区
         * */
        // console.log(d)
        //es6前的时候，现在用直接报错
        if (typeof d !== 'undefined') {
            // 会因为暂时性死区报错，代码停止
            console.log(d)

        }
        let d = 10;// let或const声明的变量，在声明之前不能使用，声明前的区域被称为暂时性死区
        console.log(e)
        var e = 11;
        if (typeof e !== 'undefined') {
            console.log(e)

        }

const 比 let 好

/**
         * const 会根据值来分配内存，不会造成内存的浪费，性能比let好，建议使用const
         * */

浏览器只识别es5

解构赋值

全部代码解析1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>

<body>
    <script>
        let [head, ...tail] = [1, 2, 3, 4];//模式匹配,数组值的是由位置决定的，因为数组没有key
        console.log(head, tail)
        let [a, b, c, d] = [1, 2, 3, 4];//模式匹配
        console.log(a, b, c, d)
        let { bar: car, foo } = { foo: 'aaa', bar: 'bbb' };//对象结构的值由key决定，key相同即赋值,可以给结构的值重新命名，原名：新名
        console.log(car, foo)
        const obj = {
            dog: {
                name: 'tom',
                finally: {
                    parent: 'zs'
                }
            }
        }
        const { dog: { finally: { parent: zs } } } = obj;
        console.log(zs)
        const obj1 = { a1: 1 }
        const { a1 = 3, b1 = 2 } = obj1//可以设置默认值
        console.log(a1, b1)
    </script>
</body>

</html>

模式匹配

let [head, ...tail] = [1, 2, 3, 4];//模式匹配,数组值的是由位置决定的，因为数组没有key
console.log(head, tail)

1//234

let [a, b, c, d] = [1, 2, 3, 4];//模式匹配
console.log(a, b, c, d)

一个一个

对象

let { bar: car, foo } = { foo: 'aaa', bar: 'bbb' };//对象结构的值由key决定，key相同即赋值,可以给结构的值重新命名，原名：新名
        console.log(car, foo)
        bbb/aaa

对象解构

const obj = {
            dog: {
                name: 'tom',
                finally: {
                    parent: 'zs'
                }
            }
        }
        const { dog: { finally: { parent: zs } } } = obj;
        console.log(zs)

const obj1 = { a1: 1 }
        const { a1 = 3, b1 = 2 } = obj1//可以设置默认值
        console.log(a1, b1)

1，2

有a1就用原来的，没有就用结构的赋值

...扩展对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓展运算符</title>
</head>

<body>
    <script>
        // 拓展运算符
        // 1. 合并数组
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6];
        let arr3 = [...arr1, ...arr2];
        console.log(arr3);
        //2.对象的克隆
        let obj1 = {
            name1: 'zs',
            age1: 18
        };
        let obj3 = {
            name: 'ls',
            age: 22
        };
        let obj2 = {
            ...obj1,
            ...obj3
        }
        console.log(obj2);
    </script>
</body>

</html>

1. 合并数组

,分隔符

// 1. 合并数组
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6];
        let arr3 = [...arr1, ...arr2];

2.对象的克隆

//2.对象的克隆
        let obj1 = {
            name1: 'zs',
            age1: 18
        };
        let obj3 = {
            name: 'ls',
            age: 22
        };
        let obj2 = {
            ...obj1,
            ...obj3
        }
        console.log(obj2);

命名不可以一样要不然会被覆盖；

合并成这样

事件循环

// 解决js多线程的方法

浏览器的进程（改天，今天就了解）

1.事件循环（event loop）：是JavaScript或Node为解决单线程代码执行不阻塞主进程一种机制，也就是我们所说的异步原理。

- 1.1 进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
- 1.2 线程（英语：thread）是操作系统能够进行运算调度的最小单位。一个进程中可以并发多个线程，每条线程并行执行不同的任务。

2.为什么要有事件循环？

- JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。
- 事件循环是为了解决JavaScript单线程阻塞问题

栈内存一个出口往前出

同步->异步，微任务 ->宏任务

图解

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件循环</title>
    <link rel="stylesheet" href="+">
</head>
<script>
    /**
     * 1.事件循环（event loop）： 是JavaScript或Node为解决单线程代码执行不阻塞主进程一种机制，也就是我们所说的异步原理。
     * 1.1 进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
     * 1.2 线程（英语：thread）是操作系统能够进行运算调度的最小单位。一个进程中可以并发多个线程，每条线程并行执行不同的任务。
     * 2.为什么要有事件循环？
     * JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。
     * 事件循环是为了解决JavaScript单线程阻塞问题
     * **/
    setTimeout(() => {
        console.log('宏任务1')
    }, 1000);
    new Promise((resolve) => {
        console.log(1)
        resolve()
    }).then(() => {
        console.log('微任务1')
    }).then(() => {
        console.log('微任务2')
    });
    console.log(3)
</script>

</html>

打印出来是

同步：1 3 微服务：1 2

宏任务

王同学学出来

关注

20
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
JS基础+进阶Es6+面试题

这段代码的作用是遍历一个对象（obj）中的所有键（key），并判断对应的值的数据类型。如果值是一个对象（对象类型），则将该对象的所有属性深度复制到一个新的对象值中；写个函数给个data的值，如果用typeof判断这个值是基本类型则直接返回data的数据类，如果typeof判断是对象类型，则判断是数组还是对象，注意null需要单独设置。换句话说，这段代码的目的是创建一个新的对象，其中包含原始对象中所有对象类型值的深拷贝，以及原始对象中所有基本数据类型值的直接复制。当定义人和狗时返回的都是对象，给加个函数名。
复制链接

扫一扫