ES6允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构
数组解构允许按照一一对应的关系从数组提取值,然后将值赋值给变量
//数组解构 let [a,b,c]=[1,2,3]; console.log(a); //1 console.log(b); //2 console.log(c); //3如果解构不成功,变量的值为undefined
let arr = [1, 2, 3]; let [a, b, c,d,e] = arr; console.log(a); //1 console.log(b); //2 console.log(c); //3 //解构不成功 console.log(d); //undefined console.log(e); //undefined对象解构按照一定模式从数组或对象中提取值,然后将值赋值给另外的变量
//对象解构 let person = { name: 'xs', age: '20' } let { name, age } = person; console.log(name); //xs console.log(age); //20 //另一种写法 let person = { name: 'xs', age: '20' } let { name: myName, age: myAge } = person; console.log(myName); //xs console.log(myAge); //20箭头函数:用于简化函数定义语法
const fn =(形参)=> { 函数内容 }
//箭头函数 const fn = () => { console.log(123); } fn(); //123如果形参只有一个,小括号可以省略,如果函数内容只有一条语句,大括号也可以省略
const sum = (num1, num2) => { return num1 + num2; } //等价于: const sum = (num1, num2) => num1 + num2; const result = sum(2, 3); //5 console.log(result);箭头函数不绑定this,箭头函数的this指向的是函数定义位置中的this.
对象是不能产生作用域的,如果箭头函数定义在对象里面,指向的就是window,如果window没有定义内容,就会输出undefined
//箭头函数面试题 var obj = { age: 20, say: () => { alert(this.age) } } obj.say(); //undefinedES6新增语法: 剩余参数:当函数实参个数大于形参个数时,我们可以将剩余的形参放到一个数组中。
//剩余参数 const sums = (...args) => { let total = 0; args.forEach(items => total += items); return total; } console.log(sums(10, 20)); //30 console.log(sums(10, 20, 30)); //60剩余参数和解构配合使用
//剩余参数和解构配合使用 let students = ['张三', '李四', '王五']; let [s1, ...s2] = students; console.log(s1); //张三 console.log(s2); //['李四', '王五']扩展运算符(展开语法)
扩展运算符可以将数组或者对象转化为用逗号分隔的参数序列
//扩展运算符 let ary = [1, 2, 3]; console.log(...ary); // 1 2 3合并数组
let ary1 = [1, 2, 3]; let ary2 = [2, 3, 4]; //合并数组 console.log(...ary1, ...ary2); //1 2 3 2 3 4 //追加元素 ary1.push(...ary2); console.log(ary1); //[1,2,3,2,3,4]将伪数组转化成真正的数组
//将伪数组转化成真正的数组 let oDivs = document.getElementsByTagName('div'); console.log(oDivs); //此时输出的是div元素集合,是伪数组 oDivs = [...oDivs]; console.log(oDivs); //输出的是真正的数组构造函数方法:Array.from()
将类数组或可遍历对象转换成真正的数组
//构造函数方法:Array.from() let arraytLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr2 = Array.from(arraytLike); console.log(arr2); //['a', 'b', 'c'] let arrayLike2 = { '0': '1', '1': '2', '2': '3', length: 3 }; let arr3 = Array.from(arrayLike2, item => item * 2); console.log(arr3); //[2, 4, 6]实例方法:find()
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
//实例方法:find() let arr = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = arr.find(item => item.id == 2); console.log(target); //{id: 2, name: '李四'}实例方法:findIndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到,返回-1
//实例方法:findIndex() let arr = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let position = arr.findIndex(item => item.name == '张三'); console.log(position); //0实例方法 includes()
表示某个数组是否包含给定的值,返回布尔值
//实例方法 includes() let flag = arr.includes(item => item.name == '许嵩'); console.log(flag); //false模板字符串
ES6新增的创建字符串的方式,使用反引号定义
//模板字符串来创建字符串 let name = 'zhangsan'; //模板字符串中可以解析变量 let sayHello = `hello ,my name is ${name}`; console.log(sayHello); //hello ,my name is zhangsan //模板字符串调用函数 const text = () => { return '这是函数'; } let html = `这是字符串模板 ${text()}`; console.log(html); //这是字符串模板 这是函数实例方法 startsWith() 和 endsWith()
startsWith(): 表示参数字符串是否在原字符串的头部,返回布尔值 endsWith(): 表示参数字符串是否在原字符串的尾部,返回布尔值
//实例方法 startsWith() 和 endsWith() let str = 'Hello world!' console.log(str.startsWith('Hello')); //true console.log(str.endsWith('!')); //true实例方法 repeat()
repeat方法将元字符串重复n次,返回一个新字符串
//实例方法 repeat() console.log('x'.repeat(3)); //xxxES6 提供了新的数据结构,类似于数组,但成员的值都是唯一的,没有重复的值
//Set数据结构 const sr1 = new Set(); console.log(sr1.size); //0 const sr2 = new Set(['a', 'b']); console.log(sr2.size); //2 const sr3 = new Set(['a', 'b','a', 'b']); console.log(sr3.size); //2 自动把重复的值过滤 const sr4 = [...sr3]; console.log(sr4); // ['a', 'b']实例方法
add(value) :添加某个值,返回Set数据本身delete(value):删除某个值,返回一个布尔值,表示删除是否成功has(value) : 返回一个布尔值,表示该值是否是Set的成员clear(value) : 清除所有成员,没有返回值遍历 Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
//遍历 const sr5 = new Set(['a', 'b', 'c', 'd']); sr5.forEach(value => { console.log(value); //a b c d })