es6 新增的一些常用内容
2024-05-28 03:48:01
es6 知识（常用）
let 和 const
创建变量新语法，替换 var
- const 适用于创建常量，不可修改
let ，const 于 var 的区别
- let 、const 自带块级作用域。
- 没有变量声明提升。
- 不允许重复声明。
变量的解构赋值
- 数组的结构赋值
let arr = [1, 2, 4, 3];
let [num1, num2, , num3] = arr;
console.log(num1); //1
console.log(num2); //2
console.log(num3); //3
- 对象的结构赋值
let obj={username:'limin',userage:20;
}
let{username:name,userage,sex='nan'//可以换名，可以设置默认值
}=objconsole.log(name);//liminconsole.log(userage);//20console.log(sex);//nan
字符串的结构赋值
阮一冯[https://es6.ruanyifeng.com/#docs/destructuring#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC]函数参数的解构赋值
var obj = {name: "xiao",
};
function say({ name }) {// let { name } = obj;相当于执行这一段代码console.log(name);
}
say(obj);
字符串的扩展
- 模板字符串 ${变量}
let obj = {name: "xiao",
};
let html = ` <div class="goods">${obj.name}</div>`;
console.log(html);
- 字符串拓展
let str = "hello";
let newStr = str.padEnd(8, "a");
console.log(newStr); //helloaaa
//paddEnd 向后填充
//padStar 向前填充
//对原数据无影响
数组的拓展
- flat(num) 数组的扁平化处理,num 为扁平次数，默认为 1，最多为 Infinity。不改变原数组
- flatMap（）映射加扁平化处理
- fill 根据指定数据对数组进行处理
对象的拓展
- 属性的简洁表示法
let name = "大白";
let age = 10;
let obj = {name: name,age: age,say: function () {console.log(this.name);},
};let obj1 = {name,age, //创建对象的时候如果属性值所代表的变量名和属性名相同则可以简写。say() {console.log(this.name);}, //创建函数时候的function可以省略不写
};
console.log(obj);
console.log(obj1);
obj.say();
obj1.say();
扩展运算符 …
let arr = [1, 2, 3, 4, 5];
let arr1 = [...arr];
arr1.push(6);console.log(arr); //[1, 2, 3, 4, 5]
console.log(arr1); //[1, 2, 3, 4, 5,6]let obj = {a: 10,b: 100,
};
let obj1 = {...obj,
};
obj1.a = 100;
console.log(obj.a); //10
console.log(obj1.a); //100//... 可以不影响原数组或对象，但作用只有一层，当数组或对象多层嵌套时内部的几层依旧会受到影像。let goodArr = [{name: "手机",price: 1000,id: 1,},{name: "电脑",price: 2000,id: 2,},{name: "平板",price: 3000,id: 3,},
];
let newArr = [...goodArr];
newArr[1].price = 2500;
console.log(newArr[1]); //2500
console.log(goodArr[1]); //2500 被改变
新增的两种数据类型
symbol
- 不可与其他值进行运算，会报错。
- 通过 symbol(a).description 将 symbol 转换为字符串 a
set 和 map 数据结构
const s = new Set(); //创建一个常量，set类似于一个数组
[2, 3, 4, 5, 2, 2].forEach(function (ele) {s.add(ele); //add是set的一个方法，每次向set里添加一个新成员（ele）；
});
console.log(s); //{2,3,4,5}//新建set
let news = new Set([1, 1, 2, 3, 4]);
//{1,2,3,4}
- set() 可以接受数组为参数
- set.size 返回 set 的长度
let arr = [1, 1, 2, 2, 3, 3];
console.log([...new Set(arr)]);
//先使用set去重
//使用扩展运算符展开
//【】转换为数组
//数组的join方法可以实现字符串去重
- 详细属性方法见[https://es6.ruanyifeng.com/#docs/set-map]
Class 的基本语法
引入了 class 的概念，可以更简单的实现构造函数的一些功能
//构造函数方法
function Point(x, y) {this.x = x;this.y = y;
}
Point.prototype.toString = function () {return `(${this.x},${this.y})`;
};
let p = new Point(3, 4);
console.log(p);
console.log(p.toString());
//
//
//
//class
let _color = "red"; //将color属性设置到类外，方便修改，若在class内，则通过set对get进行修改时set会发生死循环。
class Point {//除了constructor方法外的方法为共有方法，公有方法存储在原型当中。z = 0; //定义·不可动态修改的属性constructor(x, y) {this.x = x;this.y = y;}get color() {return _color;}//给所有对象添加一个color属性，有一个默认值redset color(new_value) {_color = new_value;} //set 于 get 相对应，每次修改 get 所赋值的属性时都会触发 set 。通过set来修改get的值。tostring() {return `(${this.x},${this.y})`;}//不同的公有方法间不需要用逗号隔开。say() {console.log("hello");}static SayHello() {console.log("hi");//静态方法,创建的实例不可调用}
}
let p = new Point(1, 2);
console.log(p);
console.log(p.tostring());
p.say();
p.color = "blue";
console.log(p);
Point.SayHello(); //只有Class本身可以调用静态方法
Class 的继承
class Point {//这是一个父类constructor(x, y) {this.x = x;this.y = y;}sayPoint() {console.log(`我是坐标(${this.x},${this.y})`);}
}class ColorPoint extends Point {//类继承的关键字 extendsconstructor(x, y, color) {super(x, y);//当继承的类内部创建了新的 constructor，那么需要 super关键字来调用父级的 constructor，如果没有创建则不需要。this.color = color;}
}
let colorP = new ColorPoint(100, 200, "blue");
console.log(colorP);
colorP.sayPoint(); //我是坐标(100,200)
函数的扩展
- 函数可以设置默认值
function add(x = 20, y = 10) {return x + y;
}
console.log(add(1, 2)); //3 当传入了参数，则默认值不生效
console.log(add()); //30 不传入参数，默认值生效
rest 参数
函数的新写法，箭头函数
let add = (x, (y = 20)); //左侧为参数，使用()包裹=> x + y;//右侧默认为使用{}包裹，当只有返回值时，{}以及return可以省略
- 函数的 this 指向
- 普通函数谁调用了函数就指向谁
- 箭头函数创建时就定义好了，一般指向 window ， 涉及到 this 需要注意
es6
使用 webpack 编译打包 es6 模块语法
- 安装 nodejs（node）
- 安装命令行工具 gitbash
- 新建项目文件夹，在文件夹内执行
npm init -y命令。将该文件夹变为 node 项目，从而可以让这个项目使用 npm 下载对应的包。 - 项目内安装 webpack 执行
npm install webpack webpack-cli --save-dev指令 下载 webpack 包 - 在根目录下创建 index.html src/index.js （必须以 index 命名）
- index.js 引入相关模块
- 在命令行工具执行
npx webpack指令，将 dist 文件夹生成的 main.js 文件引入项目。
//模块导出一个变量
export let firstName = "龙宝";
//模块导入变量
//当导入的模块属于js文件时可以省略后缀
import { firstName } from "./a.js"; //js后缀可以省略
console.log(firstName); //导出后，firstName变量就可以使用了
模块的导入与导出
- 命名导出与默认导出
//模块导出一个firstName 变量//命名导出
//关键字 export
//可多次导出
export let firstName = "龙宝宝";
let lastName = "龙仔";
export { lastName };
export {lastName as laName, //换名导出
};
//默认导出
//关键字 export default
let a = 10;
let b = 20;
let c = 10000;
export {a,b, //批量导出
};
export default c;
- 命名导入与默认导入
//导入sy.js 所导出的变量
// 当模块是js文件可省略后缀
//1,命名导入
import { firstName } from "./sy";
console.log(firstName);import * as all from "./sy";
console.log(all.a);
console.log(all.b);
console.log(all.lastName);
console.log(all.laName);
console.log(all.default);//默认导入
import x from "./sy"; //默认导出时候任意命名
//* 表示导出所有
// as 为换名导出//可用于剔除冗余代码
//导出后便可正常使用
（来自龙宝宝小白整理的笔记）
es6 新增的一些常用内容相关推荐
- ES6新增关键字：let和const及let的常用场景
1.ES6: ● 我们所说的ES5和ES6其实就是在js语法的发展过程中的一个版本而已 ● ECMAScript就是js的语法,ES6新增了一些功能 2.let和const关键字 和var的区别 ● ...
- es6新增数组、数组去重、es6新特性
ES6新增的数组方法 1.forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第 ...
- H5新增、CSS3以及ES5、ES6新增特性
1.H5新增 新增特性:语义化标签.音视频处理API.canvas.拖拽释放API.history API.地理位置API.webSocket.web存储的localStorage和SessionSt ...
- 第十六节：ES6新增的 Set 和 WeakSet 是什么东西？
题外话:往后的章节,跟前面的章节联系越来越紧密,很多知识的讲解建立在前面章节的学习基础上,如果是新来的同学,建议从第一节学起.如果是忘记了前面的内容,前端君也会在适当的时候,加上跳转链接. 什么是Se ...
- ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数
ES6简介 ES全称:ECMAScript ; 由ECMA国际化组织制定的标准脚本语言的标准化规范: 为什么使用ES6? 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也 ...
- 谈谈ES6新增了哪些特性
一.什么是ES6? ES全称为ECMAScript,它是由国际标准化组织ECMA(全称:European Computer Manufacturers Association)欧洲计算机制造商协会制定 ...
- JS的ES5和ES6新增的方法(重点)
ES5 EcmaScript5 严格模式和高阶函数 严格模式 1.全局严格 函数外的是全局 2.局部严格 函数内部的是局部 使用严格模式 "use strict" 必须放在代码的第 ...
- ES6新增的数组方法
本文整理ES6"新增"的 map方法.filter方法.some方法.every方法.reduce方法 一.map()方法 给数组的每个元素做特殊的处理 返回一个新的数组 例1 给 ...
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
最新文章
- html5初探ppt,HTML5---HTML5初探151019解析.ppt
- 电子工程可以报考二建_毕业证上财务管理专业，可以报考二建吗？
- Teradata大数据新动作：通过统一数据架构拥抱开源
- 数据库异常关闭后无法启动问题处理
- excel checkbox mysql_ajax – checkbox – 使用jquery和mysql选中或取消选中
- JDK8 Stream 操作
- 第13章 图像像素采样（《Python趣味创意编程》教学视频）
- 论文阅读：Deep learning—Yann LeCun, Yoshua Bengio Geoffrey Hinton
- 在gitee码云上搭建一个网站
- Android studio2.0在app中设置背景图片及添加图片资源
- Error launching application on iPhone 11 Pro Max.
- c语言数组判断不及格人数,C语言编程 运用数组求不及格人数
- Ubuntu 16.04系统安装VS Code流程详解
- uniapp中H5网页和打包app分别生成二维码
- JSP之JSTL标签
- linux认证和红帽认证,linux认证之红帽认证：RedHatLinux新手入门(5
- MYSQL 1045 - Access denied for user ‘root‘@‘localhost‘ (using password: YES)
- MySQL数据盘空间满了
- 采购管理系统能为企业带来哪些好处？
- 无人驾驶：人工智能三大应用造就 “老司机”