ES6基本语法
栏目: JavaScript · 发布时间: 6年前
内容简介：JavaScript的第六版，在ES5的基础上增加了许多特性：箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。类似于数组，但是成员是唯一的，没有重复。
ES6是什么？
JavaScript的第六版，在ES5的基础上增加了许多特性：箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。
一、let和const
1.作用：声明变量
ES6 中明确规定，如果区块中存在 let 和 const 命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前就使用这些变量，就会报错（暂时性死区）。
2.let使用注意：
- 作用域只局限于当前代码块
- 使用
let声明的变量作用域不会被提升 - 在相同的作用域下不能声明相同的变量
-
for循环体现let的父子作用域
3.const使用注意：
const
二、解构赋值
1.基本用法
let [name, age, sex] = ['李四', 20, '女']; console.log(name); // 李四 console.log(age); // 20 console.log(sex); // 女
2.对象的结构赋值
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); // 张三
3.数组的解构赋值
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
4.基本类型的解构赋值
let [a, b, c, d, e] = '我是中国人'; console.log(a); // 我 console.log(b); // 是 console.log(c); // 中 console.log(d); // 国 console.log(e); // 人
三、数据集合-set
类似于数组，但是成员是唯一的，没有重复。
1.创建一个集合
let set = new Set(['张三', '李四', '王五', '张三', '李四']); console.log(set); //{"张三", "李四", "王五"} console.log(Array.from(set)); // ["张三", "李四", "王五"]
2.一个属性
console.log(set.size); //3
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); // {}
4.keys values
console.log(set.keys()); // SetIterator {"张三", "李四", "王五"} console.log(set.values()); // SetIterator {"张三", "李四", "王五"}
四、数据集合-map
类似于对象，也是键值对集合，但“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键.
1. 创建一个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);
2.set和get
map.set('friends', ['赵六', '力气']).set(['dog'], '小花'); console.log(map); console.log(map.get('name')); console.log(map.get(obj1));
3.delete
map.delete(obj1);
console.log(map.delete('xxxx'));
console.log(map);
4.has
console.log(map.has(obj1)); // true console.log(map.has(obj2)); //true
5.clear
map.clear();
console.log(map); // {}
6.keys() values() entries()
console.log(map); console.log(map.keys()); console.log(map.values()); console.log(map.entries());
7.遍历
map.forEach(function(value, index) { console.log(index + ':' + value); })
8.注意事项
map.set({}, '呵呵呵呵呵'); map.set({}, '哈哈哈哈'); console.log(map); console.log({} === {});
五、Symbol
1.定义
let str1 = Symbol(); let str2 = Symbol(); console.log(str1 === str2); // false console.log(typeof str1); // symbol console.log(typeof str2); // symbol
2.描述
let str3 = Symbol('name'); let str4 = Symbol('name'); console.log(str3); // Symbol(name) console.log(str4); // Symbol(name) console.log(str3 === str4); // false
3. 对象的属性名
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 是一个原始类型的值，不是对象，所以也不能添加属性。
4.Symbol.for() 和 Symbol.keyfor()
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 值。
Symbol.keyFor()方法返回一个已登记的Symbol类型值得key
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的基本运用
1.构造函数
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();
2. 通过class面向对象
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();
3.class实现继承
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() // 鹦鹉在飞...
七、内置对象扩展
1. 模板字符串
let str = '适合敲代码!'; let className = 'test'; let html = `<html> <head></head> <body> <p>今天的天气很好!</p> <div class="${className}">${str}</div> </body> </html>`; console.log(html);
2. 数组的扩展
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('张三', '李四', '王五')); // ["张三", "李四", "王五"]
3. 对象的扩展
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]
八、函数的扩展
1. 形参设置默认值
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
2.参数形式 延展操作符
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
3.箭头函数 () => {}
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 } } } }
具备Iterator接口的数据结构如下：
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 接口，是因为对象属性的遍历先后顺序是不确定的。
for...of循环
一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 Iterator 接口，就可以用 for...of 循环它的成员。
注意：有些数据结构是在现有数据结构的基础上计算生成的，比如 ES6 的数组、 Set 、 Map 都部署了一下三个方法，调用后都返回遍历器对象
-
entries()返回一个遍历器对象，用于遍历[键名，键值]组成的数组。对于数组，键名就是索引值；对于Set，键名与键值相同。Map结构的Iterator接口默认就是调用entries方法 -
keys()返回一个遍历器对象，用于遍历所有的键名 -
values()返回一个遍历器对象，用于遍历所有的键值
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Swift语法快速入门（一）之 Swift基础语法
- 在ES6中使用扩展语法有什么好处？它与rest语法有什么不同？
- Python 基础语法
- go语法
- JPQL 语言语法
- reStructuredText简明语法
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Impractical Python Projects
Lee Vaughan / No Starch Press / 2018-11 / USD 29.95
Impractical Python Projects picks up where the complete beginner books leave off, expanding on existing concepts and introducing new tools that you’ll use every day. And to keep things interesting, ea......一起来看看 《Impractical Python Projects》 这本书的介绍吧!
