记下一些知识。。。。。
var 和 let 关键字之间的差异
var定义的同名变量,最后一次变量定义会覆盖前面的值,且不会报错。与var
不同的是,当使用let
的时候,同一名字的变量只能被声明一次。
请注意"use strict"
。这代表着开启了严格模式,用于检测常见的代码错误以及"不安全"的行为,例如:
"use strict";
x = 3.14; // x 没有声明导致了报错
用 const 关键字声明只读变量
通过const
声明的变量是只读的。这意味着通过const
声明的变量只能被赋值一次,而不能被再次赋值。
使用了const
关键字,你不能使用赋值操作符将数组标识(如s)指向另外一个数组。可以理解为s的值不能被修改,这个值即是数组的内存地址。因此修改数组里的值是可以的:是s[2]=5;
const s = [5, 7, 2]; function editInPlace() { "use strict"; s[0]=2; // s = [2, 5, 7]; <- this is invalid s[1]=5; s[2]=7; }
防止对象改变
通过之前的挑战可以看出,const
声明并不会真的保护你的数据不被改变。为了确保数据不被改变,JavaScript 提供了一个函数Object.freeze
来防止数据改变。
当一个对象被冻结的时候,你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被忽略,却不会报错。
let obj = { name:"FreeCodeCamp", review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; // obj 对象被冻结了,这个操作会被忽略 obj.newProp = "Test"; // 也会被忽略,不允许数据改变 console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
箭头函数
ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数:
const myFunc = () => {
const myVar = "value";
return myVar;
}
当不需要函数体,只返回一个值的时候,箭头函数允许你省略return
关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。
const myFunc= () => "value"
这段代码仍然会返回value
。
// 给传入的数值乘以 2 并返回结果 const doubler = (item) => item * 2;
// 使用箭头函数的语法来计算squaredIntegers数组里正整数的平方(分数不是整数)。 const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34]; const squareList = (arr) => { "use strict"; // 在这行以下修改代码 arr=arr.filter(item=>{ if(item>=0 && item%1==0)return true; return false; }); const squaredIntegers=arr.map(num=>num*num); // 在这行以上修改代码 return squaredIntegers; }; // 测试你的代码 const squaredIntegers = squareList(realNumberArray); console.log(squaredIntegers);
展开操作符--多参数
function howMany(...args){}
使用 spread 运算符展开数组项
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89
...arr
返回了一个“打开”的数组。或者说它 展开 了数组。
数组赋值
然而,展开操作符只能够在函数的参数中,或者数组之中使用
使用解构赋值从对象中分配变量
如果你想将voxel.x
,voxel.y
,voxel.z
的值分别赋给a
,b
,c
,可以用以下这种很棒的方式:
const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54
可以这样理解:“将x
地址中的值拷贝到a
当中去
用解构赋值从嵌套对象中分配变量
同样,我们可以将 嵌套的对象解构到变量中。
请看以下代码:
const a = {
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
使用解构赋值从数组中分配变量
const [a, b] = [1, 2, 3, 4, 5, 6]; console.log(a, b); // 1, 2
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5
[a,b]=[b,a];
使用解构赋值配合 rest 操作符来重新分配数组元素
以下代码的结果与使用Array.prototype.slice()
相同:
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
变量a
与b
分别获取了数组的前两个元素的值。之后,因为rest
操作符的存在,arr
获取了原数组剩余的元素的值,并构成了一个新的数组
使用解构赋值将对象作为函数的参数传递
在某些情况下,你可以在函数的参数里直接解构对象。
const profileUpdate = ({ name, age, nationality, location }) => {
/* 对这些参数执行某些操作 */
}
使用模板字面量创建字符串
请使用简单属性对象的语法来创建并返回一个Person
对象。
const createPerson = (name, age, gender) => { "use strict"; // 在这行以下修改代码 ({name,age,gender}); // 在这行以上修改代码 }; console.log(createPerson("Zodiac Hasbro", 56, "male")); // 返回正确的对象
编写简洁的函数声明
sayHello() { return `Hello! My name is ${this.name}.`; }
class关键字
class Vegetable{ constructor(name){ this.name=name; } }
getteer setter
class Book { constructor(author) { this._author = author; } // getter get writer(){ return this._author; } // setter set writer(updatedAuthor){ this._author = updatedAuthor; } } const lol = new Book('anonymous'); console.log(lol.writer); // anonymous lol.writer = 'wut'; console.log(lol.writer); // wut
默认导出
export default function add(x,y) { return x + y; }
默认导入
import add from "math_functions"; add(5,4); //将会返回 9
array
Array.find()和Array.findIndex()是ES6为数组新增的两个方法。
- Array.find():找到满足条件的第一个元素返回,如果未找到,则返回undefined。
- Array.findIndex():找到满足条件的第一个元素,返回其位置,如果未找到,则返回-1。
var ret1 = arr1.find((value, index, arr) => { return value > 4 })
var ret4 = arr1.findIndex((value, index, arr) => { return value > 14 })