zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    今日小结 5.7
    今日小结 5.2
    今日小结 4.30
    今日小结 4.29
    设计模式 笔记1
    第一次找实习
    Java入门 任务表
    今日小结 4.24
    今日小结 4.18
    今日小结 4.17
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/13130284.html
Copyright © 2011-2022 走看看