let和const命令
- 在写Js定义变量的时候，用var关键字定义，定义的变量有时会莫名奇妙的变成全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外：" + i);
</script>
</body>
</html>
- let所声明的变量，只有在let命令所在的代码块内有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for(let i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外：" + i);
</script>
</body>
</html>
- const声明的变量是常量，不能被修改，类似于Java中的final关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const a =1;
console.log("a=",a);
a = 2;
console.log("a=",a);
</script>
</body>
</html>
字符串的扩张
- 1。
includes() : 返回布尔值，表示是否找到参数字符串
startsWith() :返回布尔值，表示参数字符串是否在原字符串的头部
endsWith(): 返回布尔值，表示参数字符串是否在原 字符串的尾部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let str = "hello world";
console.log(str,"字符串是否是以含有he ==>",str.includes("he"));
console.log(str,"字符串是否是以含有aa ==>",str.includes("aa"));
console.log(str,"字符串是否是以he开头 ==>",str.startsWith("he"));
console.log(str,"字符串是否是以aa开头 ==>",str.startsWith("aa"));
console.log(str,"字符串是否是以ld结尾 ==>",str.endsWith("ld"));
console.log(str,"字符串是否是以aa结尾 ==>",str.endsWith("aa"));
</script>
</body>
</html>
- 字符串模板
ES6中提供了`来作为字符串模板标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let str = `
helo
itheima
itcatst
hello`;
console.log(str);
</script>
</body>
</html>
-
解构表达式
解构是指按照一定模式从数组和对象中取到值，然后对变量进行赋值
-
数组解构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> let t = [1,2,3,4]; // console.log(t[0]);//通过下标获得 const [x,y,z,q] = t;//es6特性 console.log(x,y,z,q); const[a] = t; console.log(a); </script> </body> </html>
- 对象解构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> const person ={ name: "jack", age: 21, language: ['java','c++','go'] } const {name:x,age:y,language:z} = person; //name是person中的属性名，冒号后面的n是解构后要赋值给的变量。 console.log(x); console.log(y); console.log(z); </script> </body> </html>
-
函数优化
-
函数参数默认值
function add(a,b){ b = b|1; return a + b; } console.log(add(10));简写
function add(a, b=1){ return a + b; } console.log(add(10)); -
箭头函数
- 1.一个参数时，
var print = function(obj){ console.log(obj); } //简写为 var print2 = obj => console.log(obj);- 多个参数
//两个参数的情况 var sum = function (a , b){ return a+b; } //简写为 var sum2 = (a,b) => a+b;- 没有参数
let sayHello = () =>console.log("hello!"); sayHello();- 代码不止一行，可用{}包裹起来
let sayHello = () =>{ console.log("hello"); console.log("Hello"); } sayHello(); -
对象函数属性简写
let person = {
name: "xiaoheiqao",
//以前
eat: function(food){
console.log(this.name + "在吃"+food);
},
//箭头函数
eat2: foot => console.log(this.name + "在吃"+food),
//简写版
eat3(food){
console.log(this.name + "在吃"+food);
}
}
- 箭头函数 结合解构表达式
const person = {
name: "xiaoheiqia",
age: 21,
language: ["java","c++","go"]
}
function hello(person){
console.log("hello,"+person.name)
}
//箭头+解构
var hello2 = ({name}) => console.log("hello,"+ name);
hello2(person)
map和reduce方法
- map
map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组中返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ["1","30","-10","32"];
console.log(arr);
let newArr = arr.map(s => parseInt(s));
console.log(newArr);
</script>
</body>
</html>
- reduce
reduce(): 接收一个函数（必须）和一个初始值（可选）,该函数接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数，如果是第一次，会把前 两个参数作为计算参数，或者把用户指定的初始值作为起始参数。
无参
let arr = [1,30,-10,2];
let t = arr.reduce((a,b) => a+b);
console.log(t);
有参
let arr = [1,30,-10,2];
let t = arr.reduce((a,b) => a+b,-1);
console.log(t);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
