说明： ECMAScript 6 新的javascript标准

要记得单词：Uncaught 没有捕捉到，SyntaxError 语法错误

变量声明

let

1. let与var基本一致，都是用作变量的声明

var a = 15
let b = 20
console.log(a,b)

2. let声明的关键字是局部作用域，只在最靠近的一对{ }中启用，if switch for 都可以形成局部作用域，var 只能通过函数形成函数作用域

if(true){
  var c = 100;
}
console.log(c)

if(true){  
  let d = 100;
​}
​console.log(d)

3. let 声明的变量不会提升（在javascript引擎执行代码前，先把所有变量和函数提升到最前面，变量统一赋值为undefined）
4. let在同一作用域不能重复声明

const

1. const和let基本一致（局部，不会变量提升，不能重复声明）
2. 声明必须赋值
3. 声明的数据不能修改（值类型）
   引用类型只要不是重新赋值，都是引用同一块内存地址
4. 建议变量名大写

解构

白动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返同.伯在ES6中利用解构汶二特性，可以直将返问一个数组，然后数组中的值会自动被解析到对应接收该值的变量中

数组的解构

var [x,y]=getVa(),//函数返回值的解构
function getVal() {
	return [ 1,2 ];
}
console.log( 'x:'+ x +', y:'+ y);//输出:x:1, y:2

[name,,age]=['wayou','male,'secrect'];//数组解构 长度为三 中键值为空
console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect

1. 数组结构：把数组解析为单个的变量，按顺序
2. 可以逗号跳过某个元素

不定参

let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6];
console.log(a,b,rest);
//rest值是[3,4,5,6]

3. 可以给默认值

默认值

let a,b,c;
[a,b,c=5]=[4,8];
console.log(a,b,c);
//没有默认参数c是undefined

4. 通过 …（不定参） 来接收剩余内容
5. 可以快速交换变量

变量交换

let a=1,b=2;
[a,b]=[b,a]
console.log(a,b);

函数返回

function f(){return [1,2]}
let a,b;
[a,b]=f();
console.log(a,b)

function f(){return [1,2,3,4]}
let a,b;
[a,,,b]=f();
console.log(a,b)

function f(){return [1,2,3,4]}
let a,b;
[a,...b]=f();
console.log(a,b)

对象解构

对象结构：把对象解析为单个的变量，不用按顺序
变量名必须和对象名一致

let o={p:42,q:true};
let {p,q}=o;
console.log(p,q)

let {a=10,b=5}={a:3}；
console.log(a,b)

String字符串

循环遍历 for of

let str="我爱祖国";
//es5
for(let i=0;i<str.length;i++){
	console.log("es5",str[i]);
}
//es6
for(let code of str){
	console.log("es6",code);
}

检测

let str="string";
console.log('includes',str.includes("c"));
console.log('includes',str.startsWith("str"));
console.log('includes',str.endWith("ng"));

includes

检测是否包含字符串，包含返回true，不包含返回false

startsWith

是否以…开头，是返回true，不是返回false

endsWith

是否以…结尾 ，是返回true，不是返回false

填充

console.log('1',padStart(4,'0'));
console.log('1',padEnd(2,'0'));

padStart

填充在前面

padEnd

填充在后面

字符串模板

let name="list";
let info="hello world";
let m=`i am${name},${info}`;
console.log(m);

去空白

trim

移除两端空白

trimLeft

移除左空白

trimRight

移除右空白

Array数组

Array.form

把数组对象转换为数组

let p=document.querySelectorAll("p");
let parr=Array.form(p);
parr.forEach(function(item){
	console.log(item,textContent);
})

类似map

console.log(Array.from([1,3,5],function(item){
	return item*2
}))

map映射

即原数组映射成一个新的数组
举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1,2,3,4,5,6,7,8, 9]上，就可以用map实现如下:

function pow(x){
	return x * x;
}

var arr=[1,2,3,4,5, 6,7,8, 9];
arr.map(pow); // [1,4,9,16,25,36,49,64,81]

原数据不会破坏

把Array的所有数字转为字符串

var arr=[1,2,3,4,5,6,7,8,9];
arr.map(String); // [1', '2', '3', '4', '5, '6','7', '8', '9"]

reduce 累计

把结果继续和序列的下一个元素做累积计算
再看reduce的用法
Array的reduce()把一个函数作用在这个Array的[x1,x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算

var arr=[1,3,5,7,9];
arr.reduce(function (x, y) {
	return x + y;
});// 25

要把[1,3,5,7,9]变换成整数13579，reduce()也能派上用场

var arr =[1,3,5,7,9];
arr.reduce(function (x, y){
	return x *10 + y;
})

filter 过滤

通常实现数组的去重
过滤不符合条件的元素（返回true保留，返回false过滤掉）
也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写:

var arr = [1,2,4,5,6,9,10,15];
var r= arr.filter(function (x){
	return x % 2 !==O;
); //[1,5,9,15]

把一个Array中的空字符串删掉，可以这么写:

var arr = ['A','','B', null, undefined, 'C',''];
var r= arr.filter(function (s) {
	return s && s.trim(); //注意:IE9以下的版本没有trim()方法
});
//['A', 'B",'C"]

filI 填充

制定开始和结束位置填充。实际填充结束位置是前一位

console.log("fill7",[1,"a",null].fill(7));
console.log("fill7",[1,"a",null].fill(8,1,3));

for of 迭代器遍历

for (let [index,value] of ["1","3","ks"].entries()){
	console.log('value',index,value)
}
for(let key of  [].keys())
for(let value of  [].values())

查找

find

查找符合条件元素

console.log([1,2,3,4,5,6].find(function(item){
	return item>3
}))//查找大于3的数

findIndex

查找符合条件元素的下标

console.log([1.2,3,4,5,6].findIndex(function(item){
	return item>3
})) //查找大于3的位置

函数

箭头函数

1. 箭头函数：函数的简写

var fun = function () { alert("a")};
var fun1 = () => alert("a");
// =>左边是参数
// =>右边是执行语句也是返回值
fun();
fun1();

2. 如果不是一个需要添加 ()

var fun = (name, age) => alert("大家好我叫" + name + "今年" + age);
fun("ml", 17);

3. 如果有多条语句用 {}，返回用return

var fun3 = (age) => {
if (age > 3) {
alert("大于3");
} else {
alert("小于3");
}
 };
fun3(18);

4. 如果需要返回对象用 ({})

var fun4 = (agr, name) => ({
name: name,
age: age,
msg: "大家好我是" + name,
});
var obj = fun4(18, "ml");
console.log(obj);

this

箭头函数的this是指函数的上一层作用域的this
不能作为构造函数

function Person() {
	var self = this;
	self.age = 0;
	setInterval(function growUp0{
		self.age++;
	},1000);
}
function Person(){
	this.age = 0;
	setInterva(()=>{
	//|this|指向person对象
	this.age++;
},1000);
}
var person= new Person();

函数默认参

当参数是undefined时，默认值

function say(name, age = 28) {
	 alert("大家好我是" + name + "今年" + age);
 };
say("ml", 18);
say("ml", undefined);

最后

以上就是慈祥时光为你收集整理的ES6新手入门--初始--变量声明、解构、String字符串方法、Array数组方法以及函数变量声明解构String字符串Array数组函数的全部内容，希望文章能够帮你解决ES6新手入门--初始--变量声明、解构、String字符串方法、Array数组方法以及函数变量声明解构String字符串Array数组函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。