Javascript学习笔记

最新推荐文章于 2024-05-17 13:52:13 发布
置顶 最新推荐文章于 2024-05-17 13:52:13 发布
阅读量1.3k 收藏 8
点赞数 19
文章标签： javascript 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46264622/article/details/119827760
版权

Javascript学习笔记

ES6

一、ES6简介

在这里插入图片描述

二、ES6的新增语法

①、let关键字

在这里插入图片描述
在这里插入图片描述

	<script type="text/javascript">
		/*
			let关键字就是用来声明变量的

			使用let关键字声明的变量具有块级作用域

			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

			防止循环变量变成全局变量

			使用let关键字声明的变量没有变量提升

			使用let关键字声明的变量具有暂时性死区特性

		*/
		
		/* --------let关键字就是用来声明变量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		// if (true) {
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

		// if (true) {
		// 	let num = 100;
		// 	var abc = 200;
		// }
		// console.log(abc);
		// console.log(num)


		/* -------防止循环变量变成全局变量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
		

		/*-----使用let关键字声明的变量没有变量提升------*/
		// console.log(a);
		// let a = 100;
		

		/* -------使用let关键字声明的变量具有暂时性死区特性------- */
		var num = 10
		if (true) {
			console.log(num);
			let num = 20;
		}



	</script>

②、let的经典面试题

在这里插入图片描述
在这里插入图片描述

③、const关键字

在这里插入图片描述
在这里插入图片描述

    <script>
        // 使用const关键字声明的常量具有块级作用域
        // if (true) {
        // 	const a = 10;
        // 	if (true) {
        // 		const a = 20;
        // 		console.log(a);
        // 	}
        // 	console.log(a);
        // }
        // console.log(a);

        // 使用const关键字声明的常量必须赋初始值
        // const PI = 3.14;

        // 常量声明后值不可更改 
        const PI = 3.14;
        // PI = 100;
        const ary = [100, 200];
        ary[0] = 123;
        ary = [1, 2]
        console.log(ary);
    </script>

④、let、const、var的区别

在这里插入图片描述

⑤、解构赋值

在这里插入图片描述

	<script type="text/javascript">
		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a)
		console.log(b)
		console.log(c)
		console.log(d)
		console.log(e)
	</script>

在这里插入图片描述

<script type="text/javascript">
		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
		
		let person = {name: 'lisi', age: 30, sex: '男'};
		// let { name, age, sex } = person;
		// console.log(name)
		// console.log(age)
		// console.log(sex)
		
		let {name: myName} = person;
		console.log(myName)

	</script>

⑥、箭头函数

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

 <script>
        // 箭头函数是用来简化函数定义语法的
        // const fn = () => {
        // 	console.log(123)
        // }
        // fn();

        // 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
        // const sum = (n1, n2) => n1 + n2;	 
        // const result = sum(10, 20);
        // console.log(result)

        // 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
        // const fn = v => {
        // 	alert(v);
        // }
        // fn(20)

        // 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this

        function fn() {
            console.log(this);
            return () => {
                console.log(this)
            }
        }

        const obj = {
            name: 'zhangsan'
        };

        const resFn = fn.call(obj);

        resFn();
    </script>

⑦箭头函数面试题

    <script>
        var age = 100;

        var obj = {
            age: 20,
            say: () => {
                alert(this.age)
            }
        }

        obj.say();
    </script>

⑧、剩余参数

在这里插入图片描述

   <script>
        // const sum = (...args) => {
        // 	let total = 0;
        // 	args.forEach(item => total += item);
        // 	return total;
        // };

        // console.log(sum(10, 20));
        // console.log(sum(10, 20, 30));


        let ary1 = ['张三', '李四', '王五'];
        let [s1, ...s2] = ary1;
        console.log(s1)
        console.log(s2)
    </script>

在这里插入图片描述

    <div>1</div>
    <div>4</div>
    <div>3</div>
    <div>6</div>
    <div>2</div>
    <div>5</div>
    <script>
        // 扩展运算符可以将数组拆分成以逗号分隔的参数序列
        // let ary = ["a", "b", "c"];
        // ...ary // "a", "b", "c"
        // console.log(...ary)
        // console.log("a", "b", "c")

        // 扩展运算符应用于数组合并
        // let ary1 = [1, 2, 3];
        // let ary2 = [4, 5, 6];
        // // ...ary1 // 1, 2, 3
        // // ...ary1 // 4, 5, 6
        // let ary3 = [...ary1, ...ary2];
        // console.log(ary3)

        // 合并数组的第二种方法
        // let ary1 = [1, 2, 3];
        // let ary2 = [4, 5, 6];

        // ary1.push(...ary2);
        // console.log(ary1)

        // 利用扩展运算符将伪数组转换为真正的数组
        var oDivs = document.getElementsByTagName('div');
        console.log(oDivs)
        var ary = [...oDivs];
        ary.push('a');
        console.log(ary);
    </script>

三、ES6的内置对象扩展

①、Array的扩展方法

在这里插入图片描述
在这里插入图片描述

②、Array.from方法

在这里插入图片描述
在这里插入图片描述

   <script>
        // var arrayLike = {
        // 	"0": "张三",
        // 	"1": "李四",
        // 	"2": "王五",
        // 	"length": 3
        // }

        // var ary = Array.from(arrayLike);
        // console.log(ary)

        var arrayLike = {
            "0": "1",
            "1": "2",
            "length": 2
        }

        var ary = Array.from(arrayLike, item => item * 2)
        console.log(ary)
    </script>

③、实例方法find()

在这里插入图片描述

   <script>
        var ary = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        let target = ary.find(item => item.id == 3);
        console.log(target)
    </script>

④、实例方法:findIndex()

    <script>
        let ary = [10, 20, 50];
        let index = ary.findIndex(item => item > 15);
        console.log(index)
    </script>

⑤、实例方法:includes()

    <script>
        let ary = ["a", "b", "c"];

        let result = ary.includes('a')
        console.log(result)
        result = ary.includes('e')
        console.log(result)
    </script>

⑥、模板字符串

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

    <script>
        // let name = `张三`;
        // let sayHello = `Hello, 我的名字叫${name}`;
        // console.log(sayHello);

        // let result = {
        // 	name: "zhangsan",
        // 	age: 20
        // };
        // let html = `
        // 	<div>
        // 		<span>${result.name}</span>
        // 		<span>${result.age}</span>
        // 	</div>
        // `;
        // console.log(html);

        const fn = () => {
            return '我是fn函数'
        }

        let html = `我是模板字符串 ${fn()}`;
        console.log(html)
    </script>

⑦、String的扩展方法

Ⅰ、StartsWith()和endsWiths()

在这里插入图片描述

    <script>
        let str = 'Hello ECMAScript 2015';
        let r1 = str.startsWith('Hello');
        console.log(r1);
        let r2 = str.endsWith('2016');
        console.log(r2)
    </script>
Ⅱ、repeat()

在这里插入图片描述

   <script>
        console.log("y".repeat(5))
    </script>

⑧、Set数据结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <script>
        // const s1 = new Set();
        // console.log(s1.size)

        // const s2 = new Set(["a", "b"]);
        // console.log(s2.size)

        // const s3 = new Set(["a","a","b","b"]);
        // console.log(s3.size)
        // const ary = [...s3];
        // console.log(ary)

        // const s4 = new Set();
        // 向set结构中添加值 使用add方法
        // s4.add('a').add('b');
        // console.log(s4.size)

        // 从set结构中删除值 用到的方法是delete
        // const r1 = s4.delete('c');
        // console.log(s4.size)
        // console.log(r1);

        // 判断某一个值是否是set数据结构中的成员 使用has
        // const r2 = s4.has('d');
        // console.log(r2)

        // 清空set数据结构中的值 使用clear方法
        // s4.clear();
        // console.log(s4.size);

        // 遍历set数据结构 从中取值
        const s5 = new Set(['a', 'b', 'c']);
        s5.forEach(value => {
            console.log(value)
        })
    </script>
阿远ay
关注
  • 19
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
前端常见面试题（4）-代码输出结果
从零出发
09-03 538
1、考查作用域。 var length = 10; function fn(){ console.log(this,'this') console.log(this.length) } var obj = { length:5, methods: fu...
关于 this 指向问题
weixin_50983325的博客
10-16 138
一、 function foo () { console.log(this) } foo() // => 全局对象 foo.call(123) // => 123 二、 const obj1 = { foo: function () { console.log(this) } } // obj1.foo() // => obj1 const fn = obj1.foo fn() 三、 const obj2 = { foo: function () {
*每日一题（三七）let length = 10 function fn(){ console.log(this.length) } var obj = { length:5,
MFWSCQ的博客
05-25 3006
题目描述：写出打印结果，并解释为什么 let length = 10; function fn(){ console.log(this.length); } var obj = { length:5, method:function(fn){ fn(); arguments[0](); } }; obj.method(fn,1)...
前端基础知识练习题---This 练习题
qq_43477721的博客
12-12 1037
前端基础练习题之 This
JavaScript学习笔记
mosun_zgs的博客
10-08 276
- JavaScript:一门客户端脚本语言 - 运行在客户端浏览器中的，每一个浏览器都有javaScript的解析引擎 - 脚本语言：不需要编译，直接就可以被浏览器解析执行 - 功能：用来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验
javascript 学习笔记
Katios
05-25 7192
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
Javascript入门学习笔记
weixin_61370021的博客
04-27 4529
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记（持续更新）
m0_46527956的博客
04-17 703
JavaScript学习笔记（持续更新）JavaScript1. 什么是JavaScript1.1 概述2. 快速入门2.1 引入JavaScript2.2 基本语法2.2.1 定义变量2.2.2 条件控制2.3 数据类型2.3.1 number2.3.2 字符串2.3.3 布尔值2.3.4 null和undefiend2.3.5 数组2.3.6 对象2.3.7 严格检查格式的使用2.3.8 字符串 JavaScript 1. 什么是JavaScript 1.1 概述 ECMAScript可以理解为是Jav
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值