es6 尚硅谷 学习

1、let

1.变量不能重复声明

2.块级作用域 ,只在块内有效

3.不存在变量提升,变量未声明之前不可使用

4.不影响作用域链

2、const

const SCHOOL = "温医";

1.一定要有初始值

2.一般常量使用大写

3.常量不能赋值

4.块级作用域

5.对数组和对象的元素修改,不算对常量的修改,不会报错。

3、变量和对象的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;

javascript 复制代码
const F4 = ['11','22','33','44']
let [QQ,WW,EE,RR] = F4;
javascript 复制代码
const zhao = {
	name:"zpp",
	age:'18',
	eat:function(){
		console.log('eat');'
	}
}
let{name,age,eat} = zhao;

4、模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:

  • 字符串中可以出现换行符;
  • 可以使用 ${xxx} 形式引用变量;

5、简化对象和函数写法

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;

6、箭头函数

ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义;

注意:

  1. 如果形参只有一个,则小括号可以省略;
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
  3. 箭头函数 this 指向声明时所在作用域下 this 的值;
  4. 箭头函数不能作为构造函数实例化;
  5. 不能使用 arguments;
    特性:
  6. 箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
  7. 不能作为构造实例化对象;
  8. 不能使用 arguments 变量;

特性1

javascript 复制代码
const school = {
      name: "hai"
    }
    var name = "zpp";
    function getName() {
      console.log("getName", this.name);
    }
    getName1 = () => {
      console.log("getName1", this.name)
    }
    getName(); // getName zpp
    getName1(); // getName1 zpp

    //使用call调用
    getName.call(school) // getName hai
    getName1.call(school) // getName1 zpp

特性2

javascript 复制代码
	function Person(age, name) {
      this.name = name;
      this.age = age;
      console.log(this)
    }
    let me = new Person("zpp", 18)
javascript 复制代码
	let Person = (age, name) => {
      this.name = name;
      this.age = age;
      console.log(this);
    }
    let me = new Person("zpp", 18)
    // Uncaught TypeError: Person is not a constructor

特性3

javascript 复制代码
let fn = () => { console.log(arguments) }
fn(1, 2, 3, 4)
// Uncaught ReferenceError: arguments is not defined
需求-2 从数组中返回偶数的元素:
复制代码
 const arr = [1, 6, 7, 10, 100, 25];
javascript 复制代码
    // const result = arr.filter(function (item) {
    //   if (item % 2 === 0) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // })
    const result = arr.filter(item => item % 2 === 0)
    console.log(result);

7、ES6中函数参数的默认值

javascript 复制代码
function add(a,b,c=10){
return a + b + c
}
let result = add(1,2); // 13
javascript 复制代码
function connect({host="127.0.0.1,username,password,port}){
	console.log(host);
	console.log(username);
	console.log(port);
}
connect({
	host: 'atguigu.com',
	username: 'root',
	password: 'root',
	port: 3306
})

8、rest参数

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;

javascript 复制代码
function data(){
console.log(arguments);
}
运行结果:
9、扩展运算符
介绍:
... 扩展运算符能将数组转换为逗号分隔的参数序列;
扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参
数序列,对数组进行解包;
基本使用:
data("大哥","二哥","三哥","四哥");
// ES6的rest参数...args,rest参数必须放在最后面
function data(...args){
console.log(args); // fliter some every map
}

9、扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列;

扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包;

10、symbol

Symbol 生成一个全局唯一的值。

它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型;

Symbol 特点:

  1. Symbol 的值是唯一的,用来解决命名冲突的问题;
  2. Symbol 值不能与其他数据进行运算;
  3. Symbol 定义的对象属性不能使用for...in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的
    所有键名;

创建

javascript 复制代码
//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
Symbol创建对象属性:
let s3 = Symbol('尚硅谷');
console.log(s2==s3); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4==s5); // true
javascript 复制代码
var race = {
  protoss: Symbol(),
  terran: Symbol(),
  zerg: Symbol()
}

race.protoss !== race.terran // true
race.protoss !== race.zerg // true

你也可以给每个 Symbol 起一个名字:

javascript 复制代码
var race = {
  protoss: Symbol('protoss'),
  terran: Symbol('terran'),
  zerg: Symbol('zerg')
}

不过这个名字跟 Symbol 的值并没有关系,你可以认为这个名字就是个注释。如下代码可以证明 Symbol 的名字与值无关:

javascript 复制代码
var a1 = Symbol('a')
var a2 = Symbol('a')
a1 !== a2 // true

11、面向对象

javascript 复制代码
class User{
	constructor(name,pass){
		this.name = name;
		this.pass = pass;
	}
	showName(){
		alter(this.name);
	}
	showPass(){
		alert(this.pass);
	}
}
var ul = new User("blur","1234");
ul.showName();
ul.showPass();

继承

super

相关推荐
不能只会打代码6 分钟前
六十天前端强化训练之第十七天React Hooks 入门:useState 深度解析
前端·javascript·react.js
PagiHi20 分钟前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
曾富贵33 分钟前
【eslint 插件】导入语句排序
前端·eslint
NaZiMeKiY43 分钟前
HTML5前端第八章节
前端·html·html5
李鲶鱼1 小时前
C语言从入门到精通
c++·python·学习
远之喵1 小时前
js基础知识-考点
前端
如此风景1 小时前
TS装饰器
前端
鱼樱前端1 小时前
React完整学习指南:从入门到精通(从根class->本hooks)16-19完整对比
前端·react.js
紫琪软件工作室1 小时前
ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框
前端·elementui·vue
思想永无止境1 小时前
vue elementUI组件国际化
前端·vue.js·elementui