摘要:注意有些数据结构是在现有数据结构的基础上计算生成的,比如的数组都部署了一下三个方法,调用后都返回遍历器对象返回一个遍历器对象,用于遍历键名,键值组成的数组。
ES6是什么?
JavaScript的第六版,在ES5的基础上增加了许多特性:箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。一、let和const
ES6中明确规定,如果区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前就使用这些变量,就会报错(暂时性死区)。
作用域只局限于当前代码块
使用let声明的变量作用域不会被提升
在相同的作用域下不能声明相同的变量
for循环体现let的父子作用域
const声明一个只读的常量
只在当前代码块中有效
作用域不会被提升
不能重复声明
声明的常量必须赋值
二、解构赋值let [name, age, sex] = ["李四", 20, "女"]; console.log(name); // 李四 console.log(age); // 20 console.log(sex); // 女
let { name, age, friends, pet } = { name: "张三", age: 55, friends: ["lulu", "王五"], pet: { name: "土豆", age: 5 } }; console.log(name); // 张三 console.log(age); // 55 console.log(friends); // ["lulu", "王五"] console.log(pet); // {name: "土豆", age: 5}
let { name: str } = { name: "张三" }; console.log(name); // console.log(str); // 张三
let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]]; console.log(arr1, arr2, arr3, arr4, arr5); // 1 2 3 4 5
let [arr1] = []; console.log(arr1); // undefined
let [a, , c] = [1, 2, 3]; console.log(a); // 1 console.log(c); // 3
let [a, b, c, d, e] = "我是中国人"; console.log(a); // 我 console.log(b); // 是 console.log(c); // 中 console.log(d); // 国 console.log(e); // 人三、数据集合-set
类似于数组,但是成员是唯一的,没有重复。
let set = new Set(["张三", "李四", "王五", "张三", "李四"]); console.log(set); //{"张三", "李四", "王五"} console.log(Array.from(set)); // ["张三", "李四", "王五"]
console.log(set.size); //3
//add console.log(set.add("刘德华").add("LHH")); //{"张三", "李四", "王五", "刘德华", "LHH"} console.log(set); //{"张三", "李四", "王五", "刘德华", "LHH"} //delete console.log(set.delete("张三")); // true console.log(set.delete("李四")); // true console.log(set); //has console.log(set.has("张三")); // true console.log(set.has("张三1")); // false //clear console.log(set.clear()); // undefined console.log(set); // {}
console.log(set.keys()); // SetIterator {"张三", "李四", "王五"} console.log(set.values()); // SetIterator {"张三", "李四", "王五"}四、数据集合-map
类似于对象,也是键值对集合,但“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键.
let obj1 = { a: 1 }, obj2 = { b: 2 }; const map = new Map([ ["name", "张三"], ["age", 18], ["sex", "男"], [obj1, "今天天气很好"], [obj2, "适合敲代码"], [ [1, 2], "hhh" ] ]); console.log(map); console.log(map.size);
map.set("friends", ["赵六", "力气"]).set(["dog"], "小花"); console.log(map); console.log(map.get("name")); console.log(map.get(obj1));
map.delete(obj1); console.log(map.delete("xxxx")); console.log(map);
console.log(map.has(obj1)); // true console.log(map.has(obj2)); //true
map.clear(); console.log(map); // {}
console.log(map); console.log(map.keys()); console.log(map.values()); console.log(map.entries());
map.forEach(function(value, index) { console.log(index + ":" + value); })
map.set({}, "呵呵呵呵呵"); map.set({}, "哈哈哈哈"); console.log(map); console.log({} === {});五、Symbol
let str1 = Symbol(); let str2 = Symbol(); console.log(str1 === str2); // false console.log(typeof str1); // symbol console.log(typeof str2); // symbol
let str3 = Symbol("name"); let str4 = Symbol("name"); console.log(str3); // Symbol(name) console.log(str4); // Symbol(name) console.log(str3 === str4); // false
const obj = {}; obj.name = "张三"; obj.name = "李四"; obj[Symbol("name")] = "张三"; obj[Symbol("name")] = "李四"; let a = Symbol("aa"); let b = Symbol("bb"); obj[a] = "王五" obj[b] = "kk" console.log(obj); console.log(Object.getOwnPropertySymbols(obj)); // 获取指定对象的所有Symbol属性名 console.log(Reflect.ownKeys(obj)); // 返回所有类型的键名,包括常规键名和Symbol键名
注意,Symbol函数前不能使用new命令,因为Symbol是一个原始类型的值,不是对象,所以也不能添加属性。
var s1 = Symbol.for("foo"); var s2 = Symbol.for("foo"); s1===s2; // true
上面代码中,s1和s2都是Symbol的值,但它们都是同样参数的Symbol.for方法生成的,所有实际上是同一个值。
Symbol.for()与Symbol()这两种写法都会生成新的Symbol。它们的区别是,前者会被登记在全局环境中供搜索,而后者不会。Symbol.for()不会再每次调用时都返回一个新的Symbol类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个值,比如,如果调用Symbol.for("cat")30次,每次都会返回同一个Symbol值,但是调用Symbol("cat")30次则会返回30个不同的Symbol值。
var s1 = Symbol.for("foo"); Symbol.keyFor(s1); // "foo" var s2 = Symbol("foo"); Symbol.keyFor(s2); // undefined
注:Symbol.for为Symbol值登记的名字是全局环境的,可以在不同的iframe或service worker 中取到同一个值。
iframe = document.createElement("iframe"); iframe.src = String(window.location); document.body.appendchild(iframe); iframe.contentWindow.Symbol.for("foo") === Symbol.for("foo"); // true六、class的基本运用
function Person(name, age) { this.name = name; this.age = age; } Person.prototype = { constructor: Person, print(){ console.log("我叫" + this.name + ",今年" + this.age + "岁"); } }; //或 //Person.prototype.print = function() { // console.log("我叫" + this.name + ",今年" + this.age + "岁"); //} let person = new Person("张三", 19); console.log(person); person.print();
class Person { constructor(name, age) { this.name = name; this.age = age; } print() { console.log("我叫" + this.name + ",今年" + this.age + "岁"); } } let person = new Person("张三", 19); console.log(person); person.print();
class Animal { //构造函数 constructor(props) { this.name = props.name || "未知"; } eat() { alert(this.name + "在吃东西..."); } } //class继承 class Bird extends Animal { //构造函数 constructor(props) { //调用实现父类的构造函数 super(props); this.type = props.type || "未知"; } fly() { alert(this.name + "在飞..."); } } var myBird = new Bird({ name: "鹦鹉" }) myBird.eat() // 鹦鹉在吃东西... myBird.fly() // 鹦鹉在飞...七、内置对象扩展
let str = "适合敲代码!"; let className = "test"; let html = `今天的天气很好!
${str}`; console.log(html);
Array.from
// 在body中写了几个li节点 let allLis = document.querySelectorAll("li"); console.log(allLis); // NodeList(6) [li, li, li, li, li, li] console.log(Array.isArray(allLis)); // false console.log(Array.from(allLis)); // [li, li, li, li, li, li] console.log(Array.isArray(Array.from(allLis))); // true
Array.of
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] console.log(Array.of("张三", "李四", "王五")); // ["张三", "李四", "王五"]
key 和 value是一样的,写一个就够了
let name = "张三"; let age = 18; let person = { name, age }; console.log(person); // {name: "张三", age: 18}
Object.assign()
let obj1 = { name: "张三" }; let obj2 = { age: 18 }; let obj3 = { sex: "男" }; let obj4 = { friends: "李四" }; let obj = {}; Object.assign(obj, obj1, obj2, obj3, obj4); console.log(Object.assign(obj, obj1, obj2, obj3, obj4)); // {name: "张三", age: 18, sex: "男", friends: "李四"} console.log(obj); // {name: "张三", age: 18, sex: "男", friends: "李四"}
延展操作符
let str = "今天的天气很好!"; let strArr = [...str]; console.log(strArr); // ["今", "天", "的", "天", "气", "很", "好", "!"]
let student = { name: "张三", age: 18, sex: "男" } < Person {...student}/>
let myArr = [1, 2, 10, "张三", 20, 2, 1]; console.log(new Set(myArr)); // {1, 2, 10, "张三", 20} console.log([...new Set(myArr)]); // [1, 2, 10, "张三", 20]八、函数的扩展
function sum(num1 = 20, num2 = 10) { console.log(num1 + num2); } /* function sum(num1, num2) { num1 = num1 || 10; num2 = num2 || 10; console.log(num1 + num2); } */ sum(10, 30); // 40 sum(); // 30
function sum(name, sex, ...nums) { let result = 0; console.log(name); console.log(sex); for (let value of nums) { result += value; } return result; } /* function sum() { let result = 0; for(let value of arguments){ result += value; } return result; } */ console.log(sum("张男", "男", 10, 20, 30, 50)); // 张男 // 男 // 110
let sum = (num1, num2)=>{ return num1 + num2;}; console.log(sum(100, 300)); // 400
let nameArr = ["张三", "李四", "王五"]; nameArr.forEach((value, index) => { console.log(index + ":" + value); }); // 0:张三 // 1:李四 // 2:王五
this的指向不同
function demo() { setTimeout(function() { console.log(this); }, 500); setTimeout(() => { console.log(this); }, 1000); } let obj = { a: 1 }; demo.call(obj); // Window // {a: 1}
箭头函数的几个注意事项:
函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象;
不可以当作构造函数。也就是不可以使用new命令,否则报错;
不可以使用arguments对象,该对象在函数体内不存在;可以rest参数代替(...参数);
不可以使用yield命令,因此箭头函数不能用作Generator函数;
九、Iterator遍历器和for..of循环Iterator作用:一是为各种数据结构提供统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创建了一种新的遍历命令——for...of循环,Iterator接口主要供for...of消费
模拟next方法返回值得例子:
var it = makeIterator(["a", "b"]); console.log(it.next()); // {value: "a", done: false} console.log(it.next()); // {value: "b", done: false} console.log(it.next()); // {value: undefined, done: true} function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex < array.length ? { value: array[nextIndex++], done: false } : { value: undefined, done: true } } } }
Array Map Set String TypedArray 函数的arguments对象 NodeList对象
下面例子是数组的Symbol.iterator属性:
let arr = ["a", "b", "c"]; let iter = arr[Symbol.iterator](); console.log(iter.next()); // {value: "a", done: false} console.log(iter.next()); // {value: "b", done: false} console.log(iter.next()); // {value: "c", done: false} console.log(iter.next()); // {value: undefined, done: true}
注意:对象(Object)之所以没有默认部署Iterator接口,是因为对象属性的遍历先后顺序是不确定的。
一个数据结构只要部署了Symbol.iterator属性,就被视为具有Iterator接口,就可以用for...of循环它的成员。
注意:有些数据结构是在现有数据结构的基础上计算生成的,比如ES6的数组、Set、Map都部署了一下三个方法,调用后都返回遍历器对象
entries()返回一个遍历器对象,用于遍历[键名,键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的Iterator接口默认就是调用entries方法
keys()返回一个遍历器对象,用于遍历所有的键名
values()返回一个遍历器对象,用于遍历所有的键值
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101209.html
摘要:更新了个版本,最新正式版是语言的下一代标准,早已在年月正式发布。基本不支持移动端浏览器对的支持情况版起便可以支持的新特性。比较通用的工具方案有,,,等。 1、ECMAScript是什么? 和 JavaScript 有着怎样的关系? 1996 年 11 月,Netscape 创造了javascript并将其提交给了标准化组织 ECMA,次年,ECMA 发布 262 号标准文件(ECMA-...
摘要:全局安装本地安装转码规则安装完成后,我们可以看一下我们的文件,已经多了选项。直接在线编译提供一个在线编译器,可以在线将代码转为代码。 古语有云:君子生非异也,善假于物;工欲善其事,必先利其器。 由于有些低版本的浏览器还是不支持ES6语法,学习ES6,首先要学会搭建一个基本的ES6开发环境,利用工具,把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...
摘要:但是在中,可以通过关键字来实现类的继承的使用可以使得继承意义更加明确并且值得一提的是,如果你使用来定义的组件,那么可以在类的构造器里面,用简单的的声明方式来替代方法。 原文:The 10 min ES6 course for the beginner React Developer译者:Jim Xiao 著名的80/20定律可以用来解释React和ES6的关系。因为ES6增加了超过75...
摘要:其实的面向对象很多原理和机制还是的,只不过把语法改成类似和老牌后端语言中的面向对象语法一用封装一个基本的类是不是很向和中的类其实本质还是原型链,我们往下看就知道了首先说下语法规则中的就是类名,可以自定义就是构造函数,这个是关键字,当实例化对 其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一、用es6封装一个基本的类 ...
摘要:本质就是一个编译器,通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网 注:以下教程均在 windows 环境实现,使用其他操作系统的同学实践过程可能会有些出入。 在上一章 webpack 项目构建:(一)基本架构搭建 我们搭建了一个最基本的 webpack 项目,现...
阅读 623·2021-11-24 09:39
阅读 2929·2021-11-23 10:06
阅读 950·2021-10-08 10:05
阅读 716·2019-08-30 10:49
阅读 1667·2019-08-29 14:08
阅读 1271·2019-08-29 12:48
阅读 3290·2019-08-26 14:04
阅读 3568·2019-08-26 13:50