ES5新增语法
ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:数组方法、字符串方法、对象方法。
1. 数组方法
迭代(遍历)方法:forEach() 、map()、filter()、some()、every()
2. 对象方法
(1) Object.key()用于获取对象自身所有的属性
object.keys(obj)
效果类似for...in, 返回一个由属性名组成的数组。
// 用于获取对象自身所有属性 var obj = { id: 1, pname: '小米', price: 1999, num: 2000 }; Object.keys(obj); console.log(Object.keys(obj)); // ['id', 'pname', 'price', 'num']
(2) Object.defineProperty()定义对象中新属性或者修改原来的属性
Object.defineProperty(obj, prop, descriptor);
- obj: 必需。目标对象
- prop: 必需。需定义或修改的属性的名字
- descriptor: 必需。目标属性所拥有的的特性
// 用于获取对象自身所有属性 var obj = { id: 1, pname: '小米', price: 1999, }; // 以前的对象添加和修改属性的方法 // obj.num = 1000; // obj.price = 99; // 2. Object.defineProperty()定义新属性或修改原来的属性 Object.defineProperty(obj, 'num', { value: 1000 });
3. let、const、var区别
- 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
- 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
- 使用const声明的是常量,在后面出现的代码中,不能再修改该常量的值。
4. 解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
数组解构:
let [a, b, c] = [1, 2, 3]; console.log(a); // a console.log(b); // b console.log(c); // c
对象解构:
对象结构允许我们使用变量的名字匹配对象的属性,匹配成功,将对象属性的值赋值给变量。
let person = { name: 'zhangsan', age: 20 }; let {name, age } = person; console.log(name); // 'zhangsan' console.log(age); // 20
5.箭头函数
ES6中新增的定义函数的方式
() => {}
const fn = () => {}
函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
function sum(num1, num2) { return num1 + num2; } const sum = (num1, num2) => num1 + num2; const result = sum(10, 20); console.log(result); // 30
// 箭头函数-面试题
// 对象不能产生作用域,say方法下的this指向window
var age = 100; var obj = { age: 20, say: () => { console.log(this.age); } } obj.say(); // 100
6. 剩余参数
剩余参数语法允许我们将一个不定数量的参数,表示为一个数组
function sum (first, ...args) { console.log(first); // 10 console.log(args); // [20, 30] } sum(10, 20, 30);
7. 扩展运算符
// 合并数组 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; console.log(ary3); // [1, 2, 3, 3, 4, 5]
8.构造函数方法: Array.from( )
将类数组或可遍历对象转换成真正的数组
// 构造函数方法array.from let arrayLike = { '0': 1, '1': 2, '2': 3, 'length' : 3 } let arr2 = Array.from(arrayLike, item => item * 2); console.log(arr2); // [2, 4, 6]
9. 实例方法find()
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
let ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = ary.find((item, index) => item.id === 2); console.log(target); // {id: 2, name: '李四'}
10.实例方法findIndex()
用于找出第一个符合条件的数组成员的位置, 如果没有找到返回-1
let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2
11. 实例方法:includes()
表示某个数组是否包含给定的值,返回布尔值
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false
12.模板字符串
模板字符串中可以解析变量
let name = '张三'; let sayHello = `hello, my name is ${name}`; console.log(sayHello); // hello, my name is 张三
13.数据结构
ES6提供了新的数据结构set。它类似于数组,但是成员的值都是唯一的, 没有重复的值。
const s3 = new Set(["a","a","b","b"]); console.log(s3)