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区别

  1. 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  2. 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  3. 使用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)

 

posted @ 2020-06-15 13:18  鼓舞飞扬  阅读(307)  评论(0编辑  收藏  举报