大数据实训进行时：数据标注项目

ES6基础语法

• 一、let关键字
• 二、const常量
• 三、var 、let和const的区别
• 四、 ==解构赋值==
• 五、字符串扩展
• • 1.模板字符串 ``我叫"${name}"，今年"${age}"岁``
  • 2.includes() 返回布尔值
  • 3.startsWith() 和 endsWith()返回布尔值
  • 4.padStart() 和 padEnd()
  • 5.repeat(num):复制并连成一个字符串的指定次数
  • 6.trim():删除字符串开头结尾的空格，
• 六、数组扩展
• • 1.includes() 返回布尔值-全等判断
  • 2.find（） & findIndex（）返
  • 3.fill():使用指定的值填充数组的所有元素
  • 4.Array.from()将一个类数组对象或可迭代对象转换成一个真正的数组。
• 七、定义对象的简洁方式
• • 1.Object.assign(target, ...sources):合并
  • 2.Object.keys(obj) & Object.values(obj) & Object.entries(obj)
  • 5.Object.freeze(obj):冻结一个对象，禁止对其属性进行增删改；
• 八、函数扩展
• 九、箭头函数（）=>{}
• 十、三点表达式（展开表达式）

一、let关键字

• 没有变量提升；
  强制将变量提升会报错。
• 有块级作用域；
  在大括号{}内部声明的变量，大括号外面会失效；
  在循环体中用let声明的变量,在大括号之外一样会失效。
• 不能重复声明变量

let i = 10;
console.log(i);
let i ='abc';//已经声明过的变量，再次声明会报错

二、const常量

1、概念：一旦被赋值就不能改变量就是常量；

const name="池震";
console.log(name);
name = "温岭";//常量不能重复赋值
console.log(name);//此处会报错

2、特点：

• 没有常量提升；
• 常量也有块级作用域；
• 必须要有初始化值；
• 能用常量就用常量，因为常量速度更块

三、var 、let和const的区别

1. var 和let都能声明变量，但let更加严谨，es6推荐使用let来声明变量；
2. let的特殊点：不能提升变量（保证逻辑通畅）；有块级作用域（避免变量交叉污染）；不能重复声明保证变量的唯一性。
3. const用来声明常量：不能改变，不能提升，有块级作用域，有初始值。

四、 解构赋值

1. 概念：解构赋值就是将对象或数组中的数据拆解出来分别赋给几个变量/常量。

//将对象中的数据解构赋值到三个常量中；
//注意：变量、常量名要和对象的属性名一致；
const{name,gender,type}={name:'瑞文',gender:'女',type:'战士'};
console.log(name);
console.log(gender);
console.log(type);
//将数组中的数据解构赋值到几个变量中；
const [cn,wen,lala,aaa]=['wenjain',{name:'maoning'},123,[12,34,45,56,56]];
console.log(cn);
console.log(wen);
console.log(lala);
console.log(aaa);

2. 正常的解构赋值：前面是对象，后面也是对象；前面是数组，后面也是数组。-----不能交叉
3. 别名：一旦使用了别名，原名就会失效；

//使用别名
const {name:username,age,gender:sex}={name:'婷婷',age:'18',gender:'famale'};
console.log(username);
console.log(age);
console.log(sex);
console.log(name);//使用原名会报错，name is not defined.

4. 变量数量与对象单元不对等，按key正常赋值，没有值，则赋值为undefined。
5. 数组中不对等，使用 … 方式
   如果使用 … 则多余出来的盒子会以数组形式保存在最后一个变量中；

const [a,b,...c]=[1,2,3,4,5,6,7];
console.log(a);
console.log(b);
console.log(c);
//1
2
[ 3, 4, 5, 6, 7 ]

五、字符串扩展

1.模板字符串 我叫"${name}"，今年"${age}"岁

• 使用反引号来声明的字符串就是模板字符串 （Esc下面的键）
• 使用反引号定义字符串时，字符串中可以可以忽略单双引号的嵌套问题
• 在模板字符串中要输出变量可以使用 ${变量名} 的形式

//在使用单双引号声明字符串时，一定要注意单双引号的拼配问题；
const str1 = '<a href="a.php">删除</a>';
const str2 = "<a href='a.php'>删除</a>";
//模板字符串中单双引号可以随便使用；
const str3 = `<p><a href='a.php' title = "删除操作">删除</a></p>`;
const {name,age}={name:'炸弹人',age :200};
const str4 = '我叫“'+name+'"，今年”'+age+'"岁';
console.log(str4);
//打印：我叫"炸弹人"，今年"200"岁
const str5 = `我叫"${name}"，今年"${age}"岁`;
console.log(str5);
//打印：我叫"炸弹人"，今年"200"岁

2.includes() 返回布尔值

includes() 判断一个字符串是否包含另一个字符串中
str.includes(char): 判断char是否在str中，存在则返回true，不存在则返回false

const str='abgdfajsd;fjlsafj';
const inner = 'ab';
console.log(str.includes(inner));//true

3.startsWith() 和 endsWith()返回布尔值

• startsWith(): 判断一个字符串是否以另一个字符串开始
• endsWith(): 判断一个字符串是否以另一个字符串结束

const str='abgdfajsddfasdfnfjlsafj';
const star = 'ab';
const end ='fj';
const inner = 'wenjian';
console.log(str.startsWith(star));//true
console.log(str.endsWith(end));//true
console.log(str.endsWith(inner));//false

4.padStart() 和 padEnd()

• padStart(): 设置字符串总长度，如果长度不够则使用某个字符填充到字符串的开头
• padEnd(): 设置字符串总长度，如果长度不够则使用某个字符填充到字符串的结尾

const str = 'abc';
const char ='-';
const s='$';
console.log(str.padStart(7,char));//----abc
console.log(str.padEnd(7,s));//abc$$$$

5.repeat(num):复制并连成一个字符串的指定次数

const str="hello你好"
console.log(str.repeat(3)); //hello你好hello你好hello你好

6.trim():删除字符串开头结尾的空格，

常用与表单提交

const str="     hello你好   "
console.log(str.trim()); //hello你好

六、数组扩展

1.includes() 返回布尔值-全等判断

判断一个值是否存在于一个数组中返回布尔值

const arr = ['aaa',111,222,3];
const val = '222';
const vai=222;
//全等方式比较
console.log(arr.includes(val));//false
console.log(arr.includes(vai));//true

2.find（） & findIndex（）返

find （）返回满足条件的第一个值
findIndex（）返回满足条件的第一个值的索引

//find返回满足条件的第一个值；
const arr = ['aaa',20,39,57,29,'bbb'];
let result = arr.find(function (item,index) {
    return item > 50;
})
console.log(result);//57

//findIndex返回满足条件的第一个值的索引值；
// 有则索引，没有则-1
const arr = ['aaa',20,39,57,29,'bbb'];
let result = arr.findIndex(function (item,index) {
    return item > 50;
})
console.log(result);//3

3.fill():使用指定的值填充数组的所有元素

const arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // 输出: [0, 0, 0, 0, 0]

4.Array.from()将一个类数组对象或可迭代对象转换成一个真正的数组。

const arr1 = Array.from("hello");
console.log(arr1); // 输出: ["h", "e", "l", "l", "o"]

const arr2 = Array.from([1, 2, 3], x => x * 2);
console.log(arr2); // 输出: [2, 4, 6]

七、定义对象的简洁方式

//定义对象的简洁方式：在声明对象时，值的变量名和属性相同时，可以只写属性而不写值；
const name = '许愿';
const age = 30;
const type = 'gold';
const obj = {
    name,
    age,
    type
};
console.log(obj);
//{ name: '许愿', age: 30, type: 'gold' }

1.Object.assign(target, …sources):合并

用于将一个或多个源对象的属性复制到目标对象中。它返回目标对象

let a={name:"张三"};
let b={age:18};
let res=Object.assign(a,b);
console.log(res);// {name: '张三', age: 18}
console.log(a);// {name: '张三', age: 18}

2.Object.keys(obj) & Object.values(obj) & Object.entries(obj)

Object.keys(obj) 返回一个数组，包含对象的所有keys
Object.values(obj)返回一个数组，包含对象的所有values
Object.entries(obj):返回一个数组，包含对象自身可枚举属性的键值对

let a={name:"张三",age:18};
console.log(Object.keys(a));// ['name', 'age']
console.log(Object.values(a));['张三', 18]
console.log(Object.entries(a));

5.Object.freeze(obj):冻结一个对象，禁止对其属性进行增删改；

八、函数扩展

1.函数声明时，指定形参的默认值；

//1.函数声明时，指定形参的默认值；
function add (x = 1,y = 5) {
	return x+y;
}
//函数调用时，如果不设置实参，则使用默认值；
//若设置了实参，则使用实参。
console.log(add());//6
console.log(add(10,20));//30

2.解构赋值和形参默认值配合使用；

//2.定义函数时参数使用解构赋值方式；
function add ({x,y = 10}){
    console.log(x+y);
}
//传入实参是对象形式
//key必须和定义函数时指定的变量名一致；
add({x:3});//13
add({x:10,y:15});//25

3.rest参数（可变参数）

//3.rest参数（可变参数）：函数调用时，实参会以数组形式保存
//...args就叫rest参数；
//作用是接收可变参数；
//函数调用时，所用参数会议数组形式保存在args中；
function getData(...args) {
    console.log(args); 
}
getData(111,'abc',3,1415,'haha','hehehe');
//[ 111, 'abc', 3, 1415, 'haha', 'hehehe' ]

九、箭头函数（）=>{}

• 1.箭头函数不能作为构造函数;
• 2.箭头函数arguments不再保存实参,要使用rest参数方式；
• 3.箭头函数中的this指向外层函数的this；
• 4.箭头函数，当执行代码只有一句并设置返回值，则不需要写{}，也不需要写return
• 5.箭头函数，当只有一个形参时，则不需要写小括号（）；

//箭头函数是一个匿名函数。
(x,y)=>{
	return x + y;	
}

十、三点表达式（展开表达式）