网站快速排名优化报价,微信 网站模板,怎么通过做网站来赚钱吗,短视频推广代理#x1f384;欢迎来到边境矢梦的csdn博文#x1f384; #x1f384;本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载#x1f384; #x1f308;我是边境矢梦#xff0c;一个正在为秋招和算法竞赛做准备的学生#x1f308; #x1f386;喜欢的朋友可以… 欢迎来到边境矢梦°的csdn博文 本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载 我是边境矢梦°一个正在为秋招和算法竞赛做准备的学生 喜欢的朋友可以关注一下下次更新不迷路 Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大) 目录
ES6 新特性的介绍✨
ES6是什么
段落1let声明变量
段落2const声明常量/只读变量
段落3解构赋值
数组结构
对象结构
段落4模板字符串
段落5箭头函数
总结 : 编辑 ES6 新特性的介绍✨
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级它带来了许多新特性和语法糖让我们的代码更加简洁高效。无论你是新手还是有经验的开发者掌握ES6都会让你的编码变得更加愉快和高效。那么让我们开始吧
ES6是什么 1. ECMAScript 6.0( 以下简称 ES6) 是 JavaScript 语言的下一代标准 2015 年 6 月发布。 2. ES6 设计目标达到 JavaScript 语言可以用来编写复杂的大型程序成为企业级开发语 言 3. ECMAScript 和 JavaScript 的关系 ECMAScript 是 JavaScript 的规范 / 规则 JavaScript 是 ECMAScript 的一种实现 段落1let声明变量
ES6引入了let关键字用于声明块级作用域的变量。相比于以前的var关键字let在作用域上更加严格避免了变量提升的问题。另外使用let声明的变量可以被重新赋值对于需要频繁变动的变量来说非常实用。
// let 细节 1
// (1) let 声明的变量, 在代码块中则作用域在代码块中
// (2) var 声明的变量, 在代码块中作用域没有限制
{
var name 边境矢梦;
let job java 工程师;
console.log(name, name);
console.log(job, job);
}
console.log(name, name);
//console.log(job, job);//job is not defined// let 细节 2
// 1. var 可以声明多次
// 2. let 只能声明一次
var num1 100;
var num1 200;
console.log(num1);
let num2 600;
//Syntax 语法
//let num2 900;//Uncaught SyntaxError: redeclaration of let num2
console.log(num2);
// let 细节 3
// 1. let 不存在变量提升
// 2. var 存在变量提升
console.log(x, x);//undefined
var x tom;
//cant access lexical declaration zconsole.log(z, z);
let z mary;
通过这种方式我们可以避免变量冲突和覆盖更加灵活地控制变量的作用域。 段落2const声明常量/只读变量
除了用于声明变量ES6还引入了一个新的关键字const用于声明常量或者只读变量。与使用let声明的变量不同const声明的变量是不能被重新赋值的一旦声明就不能被改变。const关键字在开发中常用于对于不可变的值进行定义使我们的代码更加健壮和可维护。 1. 常量在定义时需要赋值 2. 常量赋值后不能修改 让我们看一个例子
const PI 3.14;
PI 3.14159; // 尝试修改常量会报错
console.log(PI); // 输出 3.14在上面的代码中我们使用const声明了一个常量PI并尝试修改其值。由于常量不可被重新赋值所以当我们在第二行进行赋值操作时会报错。这种机制保证了我们定义的常量不会被无意间修改提高了代码的可读性和稳定性。 段落3解构赋值
ES6的解构赋值是一种快捷的方式可以方便地从数组或对象中提取值并赋给变量。这个特性对于处理复杂的数据结构非常有帮助让我们的代码更加简洁易读。 1. 解构赋值是对 赋值运算符的扩展 2. 是一种针对 数组或者对象 进行模式匹配然后对其中的变量进行赋值 3. 主要有两种形式 数组解构和对象解构 数组结构
细节 :
let arr [1, 2, 3];
//如果要看某个变量的类型
console.log(arr, arr);
//数组解构[取出元素]
//1.传统
let x arr[0], y arr[1], z arr[2];
console.log(x, y, z);
//2. ES6 风格
let [a, b, c] arr;
console.log();
console.log(a, b, c);
let [num1, num2, num3] [100, 200, 300];
console.log(num1, num2, num3);
对象结构 细节说明 1, 对象解构时let{name, age}中的name和 age名称需要和对象属性名保持 2, 也可解构对象部分属性比如 let{age} 3, 还有其它的形式,比如方法上使用对象解构 ES6对象解构 1把monster对象的属性赋值给{name , age} 2. {name , age}的取名name 和 age要和monster对象的属性名保持一致 3使用 {} 包括不要使用 [ ] 4. {name , age}顺序是无所谓 让我们看一个例子
const person {name: 小红,age: 18,city: 上海
};const { name, age, city } person;
console.log(name); // 输出 小红
console.log(age); // 输出 18
console.log(city); // 输出 上海在上面的代码中我们通过解构赋值从person对象中提取了name、age和city的值并分别赋给了对应的变量。这样我们就能轻松地访问和使用这些值省去了使用冗长的对象属性访问的步骤。这种语法糖使我们的代码更加精简和可读。 段落4模板字符串
在ES6之前我们使用字符串拼接来组合字符串和变量非常繁琐。而ES6引入了模板字符串使得字符串的拼接更加简单和直观。使用模板字符串我们可以在字符串中嵌入变量只需用${}包裹变量即可。
让我们看一个例子
const name 小红;
const age 18;const greeting 大家好我是${name}今年${age}岁了。;
console.log(greeting); // 输出 大家好我是小红今年18岁了。在上面的代码中我们使用模板字符串创建了一个包含变量的字符串greeting。通过使用${}包裹变量我们可以方便地将变量嵌入到字符串中使代码更加简洁和可读性更高。这种语法糖让我们拼接字符串的过程更加愉快
细节 :
//1、字符串换行会原生输出
let str1 for(int i 0;i 10;i){
System.out.println(ii);
};
console.log(str1, str1);
//2. 字符串插入变量和表达式。变量名写在 ${} 中${} 中可以放入 JavaScript 表达式。
let name 边境矢梦;
//老师解读
//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
//(2) 然后可以得到最后解析的字符串
let str2 博主${name};
let str3 12${1 2};
let n1 80;
let n2 20;
let str4 ${n1}${n2}${n1 n2};
console.log(str2, str2);
console.log(str3, str3);
console.log(str4, str4);
//3. 字符串中调用函数
function sayHi(name) {
return hi name;
}
let name2 tom;
let str5 sayHi() 返回的结果是${sayHi(jack)};
let str6 sayHi() 返回的结果是${sayHi(name2)};
console.log(str5, str5);
console.log(str6, str6); 段落5箭头函数
ES6中的箭头函数是一种更简洁的函数声明方式提供了更短的语法。它不仅让我们的代码看起来更加简洁还改变了this的指向解决了传统函数中this指向问题。箭头函数通常被用于回调函数、迭代器和简单的函数定义。
让我们看一个例子
const numbers [1, 2, 3, 4, 5];const doubledNumbers numbers.map((num) num * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]在上面的代码中我们使用箭头函数作为map方法的参数来对数组中的每个元素进行处理将其乘以2。通过简洁的语法我们可以更方便地定义匿名函数使得代码更加紧凑和可读性更高。这种函数的声明方式让我们的开发变得更加高效和灵活 总结 :
希望通过本文的介绍你对ES6的基本特性有了更深刻的了解。记住掌握这些语法糖和新特性将为你的开发之路带来巨大的便利和乐趣。为了更好地适应现代Web开发的需求不断学习和探索是非常重要的。感谢大家的阅读希望本文能对你有所帮助如果你有任何问题或者更多的建议欢迎在评论区留言我会尽快回复。再见
边境矢梦°_Java,数据结构与算法,数据库-CSDN博客https://blog.csdn.net/dandelionl_?typeblog
