es6的理解

最新推荐文章于 2021-10-24 12:07:56 发布

_必应

最新推荐文章于 2021-10-24 12:07:56 发布

阅读量1.2k

点赞数

分类专栏： javascript/es6/es7 文章标签： es6 es2015 javascript

本文链接：https://blog.csdn.net/jbguo/article/details/52151813

版权

javascript/es6/es7 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

sublime 设置运行js(es6) “cmd”: [“node”, “–use-strict”, “–harmony”, “$file”], “selector”: “source.js”}
语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言：操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。如箭头函数，箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法
```
a => a;
等同于
(function (a) {
  return a;
});
```
对于三个点号，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

    // 扩展运算符例子1
    let arr = [1,20,3,5,13];
    let res1 = Math.max(arr); //max不能取数组的最大值，用来取字符串的最大值
    let res2 = Math.max(...);
    console.log(...arr);
    console.log('-------');
    console.log(res1,res2);
	// 结合react 使用扩展操作符
	class Hello extends React.component {
		constructor(props){
			super(props);
		}
		getProps(){
			retrun {
				className: 'line',
				title: 'hover'
			}
		}
		render(){
			let props = this.getProps();
			return (
				<div>
					<p className="line" title="hover">第一行</p>
					<p {...props}>第二行</p>
				</div>
			);
	
		}
		React.render(<Hello name='world' />,document.body);
	}

Object.keys(),Object.values(),Object.entries()的理解

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

一个简单的继承

class TestA {
  constructor(name){
    this.name=name;
    this.saywords=[];
  }
  say(word){
    this.saywords.push(word);
  }
  sayout(){
    console.info(this.saywords);
  }
  static run(){
    console.log("++run++");
  }
}
class TestB extends TestA{
  constructor(name){
    super(name);
  }
  say(word){
    this.saywords.push(word);
  }
}
function main(){
  let b = new TestB("B");
  ['A','B','C','D','E'].map((item)=>b.say(item));
  b.sayout();
  TestB.run();
}
main();

字符串新特性

/*
*判断一个字符串中是否含有指定值
*/
let str = "我的邮箱是aaa@bbb.com";
//es5
if(str.indexOf("@">-1)){
	console.log("包含@");
}
//es6
if(str.includes("@")){
	console.log("包含@");
}

/*
*字符串模版
*/
var person = {
	name: "jack",
	age: "18"
}
let res = `我的名字是${person.name},年龄是${person.age}`;
console.log(res);

assign介绍

//与extend表现相同，均为浅拷贝
let o1 = {
    a: 1,
    b: 2,
    c: {
        e: 5,
        f: 6
    }
}
let o2 = {
    a: 10,
    c: {
        e: 50
    },
    d: 40
}
let res1 = $.extend({}, o1, o2);
let res2 = Object.assign({}, o1, o2);
console.log(res1);
console.log(res2);
let t1 = {
        a: 1
    },
    t2 = {
        a: 1
    },
    t3 = t1;
console.log(t1 == t2, t1 == t3);
console.log(o1.c == res1.c, o1.c == res2.c, o2.c == res2.c, o2.c == res1.c);

解构赋值的应用

//用解构赋值处理json格式的返回数据
var data = {
    success: true,
    content: {
        list: [1, 2, 3]
    }
    errorMsg: '找不到数据'
}
let { success, content, errorMsg } = data;
if (success) {
    console.log(content);
} else {
    console.log(errorMsg);
}