JavaScript(三)
ES6
- 2个新的关键字
- let/const
- 块作用域
- 没有变量提升
- 不能重复定义
- 值不可变
- 变量的解构赋值
- 将包含多个数据的对象(数组)一次赋值给多个变量
- 数据源: 对象/数组
- 目标: {a, b}/[a, b]
- 各种数据类型的扩展
console.log('--------------------es6--------------------------------');
let obj2 = {
username:'kobe', age: 43};
let {
username, age} = obj2; // 解构赋值可以实现按需索取
console.log(username, age);
console.log('-----------数组------------');
let arr = [4,5,3];
let num1 = arr[2];
let num2 = arr[0];
console.log(num1, num2);
let [, , c] = arr;
console.log(c);
console.log('-----------解构赋值------------');
function fun({
username, age}) {
// 运用函数的形参解构实参
// let {username, age} = {username:'kobe', age: 43};
console.log(username);
console.log(age);
}
fun(obj2);
- 字符串
- 模板字符串
- 作用: 简化字符串的拼接
- 模板字符串必须用``
- 变化的部分使用${xxx}定义
- contains(str) : 判断是否包含指定的字符串
- startsWith(str) : 判断是否以指定字符串开头
- endsWith(str) : 判断是否以指定字符串结尾
- repeat(count) : 重复指定次数
- 模板字符串
let obj = {
username: 'kobe', age: 43};
let str = "我的名字是: " + obj.username + ",我的年龄是: " + obj.age
console.log(str);
let str1 = `我的名字是${
obj.username},我的年龄是${
obj.age}`
console.log(str1);
-
对象
- 简化的对象写法
let name = 'Tom'; let age = 12; let person = { name, age, setName (name) { this.name = name; } }; - Object.assign(target, source1, source2…) : 将源对象的属性复制到目标对象上
- Object.is(v1, v2) : 判断2个数据是否完全相等
- __proto__属性 : 隐式原型属性
- 简化的对象写法
-
数组
- Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
- Array.of(v1, v2, v3) : 将一系列值转换成数组
- find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
- findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
-
函数
- 箭头函数
- 用来定义匿名函数
- 基本语法:
- 没有参数: () => console.log(‘xxxx’)
- 一个参数: i => i+2
- 大于一个参数: (i,j) => i+j
- 函数体不用大括号: 默认返回结果
- 函数体如果有多个语句, 需要用{}包围
- 使用场景: 多用来定义回调函数
- 箭头函数
console.log('-------箭头函数-------------');
// 当箭头函数没有形参的时候() 不能省略
let fun = () => console.log('fun()');
fun()
console.log('----------箭头函数-有一个形参--------');
// 只有一个形参的时候,()可以省略,也可以不省略
let fun1 = (a) => console.log('只有一个形参的时候', a);
fun1(123)
console.log('----------箭头函数-有多个形参--------');
// 只有多个形参的时候,()不可以省略
let fun2 = (a, b) => console.log('有多个形参的时候', a, b);
fun2(1, 2);
console.log('-----------箭头函数-函数体只有一条语句的时候-----');
// 当箭头函数的函数体只有一条语句的时候,{}可以省略
// 当{}省略的时候会自动 return 当前语句或者表达式的结果
let fun3 = () => console.log('函数体只有一条语句的时候');
console.log(fun3());
console.log('-----------箭头函数-函数体多条语句的时候-----');
// 当箭头函数的函数体有多条语句的时候,{}不可以省略
// 当{}不省略的时候,需要手动return,否则默认返回undefined
let fun4 = () => {
let a = 123;
console.log('数体多条语句的时候', a);
return a
}
console.log(fun4());
console.log('------箭头函数的特点: this的指向问题--------');
// 箭头函数的特点：
// 1、简洁
// 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的上下文对象就是它的this
// 3、扩展理解： 箭头函数的this看外层的是否有函数，
// 如果有，外层函数的this就是内部箭头函数的this，
// 如果没有，则this是window。
btn1 = document.querySelector('#btn1');
btn2 = document.querySelector('#btn2');
btn1.onclick = function() {
console.log(this); // btn1对象
}
// btn2.onclick = () => console.log(this); // window
let obj = {
username: 'kobe',
test: () => {
btn2.onclick = () => console.log(this); // window
}
}
obj.test()
// 箭头函数不能用作构造函数
// let Person = () => this.name = 'kobe';
// let person1 = new Person();
* **形参的默认值**
* 定义形参时指定其默认的值
* **rest(可变)参数**
* 通过形参左侧的...来表达, 取代arguments的使用
* **扩展运算符(...)**
* 可以分解出数组或对象中的数据
- set/Map容器结构
- 容器: 能保存多个数据的对象, 同时必须具备操作内部数据的方法
- 任意对象都可以作为容器使用, 但有的对象不太适合作为容器使用(如函数)
- Set的特点: 保存多个value, value是不重复 ====>数组元素去重
- Map的特点: 保存多个key–value, key是不重复, value是可以重复的
- API
- Set()/Set(arr) //arr是一维数组
- add(value)
- delete(value)
- clear();
- has(value)
- size
- Map()/Map(arr) //arr是二维数组
- set(key, value)
- delete(key)
- clear()
- has(key)
- size
- for–of循环
- 可以遍历任何容器
- 数组
- 对象
- 伪/类对象
- 字符串
- 可迭代的对象
let arr = [1, 2, 3, 4, 5, 1, 2, 3, 4];
console.log(arr.indexOf(9)); // -1
function uniqArr(arr) {
let result = [];
arr.forEach(function(item, index) {
// 判断新的数组中是否包含原数组中的元素
if(result.indexOf(item) === -1) {
result.push(item);
}
})
return result;
}
console.log(uniqArr(arr));
function uniqArr2(arr) {
let set = new Set(arr);
let result = [];
for(let item of set) {
result.push(item)
}
return set;
}
console.log(uniqArr2(arr));
- Promise
- 解决
回调地狱(回调函数的层层嵌套, 编码是不断向右扩展, 阅读性很差) - 能以同步编码的方式实现异步调用
- 在es6之前原生的js中是没这种实现的, 一些第三方框架(jQuery)实现了promise
- ES6中定义实现API:
// 1. 创建promise对象 var promise = new Promise(function(resolve, reject){ // 做异步的操作 if(成功) { // 调用成功的回调 resolve(result); } else { // 调用失败的回调 reject(errorMsg); } }) // 2. 调用promise对象的then() promise.then(function( result => console.log(result), errorMsg => alert(errorMsg) ))
- class类
- 用 class 定义一类
- 用 constructor() 定义构造方法(相当于构造函数)
- 一般方法: xxx () {}
- 用extends来定义子类
- 用super()来父类的构造方法
- 子类方法自定义: 将从父类中继承来的方法重新实现一遍
- js中没有方法重载(方法名相同, 但参数不同)的语法
- 模块化
ES7
-
指数运算符: **
-
Array.prototype.includes(value) : 判断数组中是否包含指定value
-
区别方法的2种称谓
- 静态(工具)方法
- Fun.xxx = function(){}
- 实例方法
- 所有实例对象 : Fun.prototype.xxx = function(){} //xxx针对Fun的所有实例对象
- 某个实例对象 : fun.xxx = function(){} //xxx只是针对fun对象
- 静态(工具)方法