主要记录:数值型、字符串、布尔值、null和undefined、数组、对象、变量、strict模式、iterable类型、简单函数、for in、for of、forEach、全局作用域、名字空间、let 、 const、this、apply、call
1. 数值型
JavaScript不区分整数和浮点数,统一用Number表示
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
2. 字符串
字符串是以单引号'或双引号"括起来的任意文本。多行使用`
来表示。
var string = ` aaa
ccc
bbb`
console.log(string);
拼接字符串可以使用+
来连接,也可以使用多行显示来表示。
var name = 'wangdaji';
var age = 26;
var string1 = 'hi! ' + name + ',' + '生日快乐! ' + '你已经' + age + '岁了!';
var string2 = `hi! ${name},生日快乐! 你已经${age}岁了!`;
console.log(string1);
console.log(string2);
操作字符串,可以根据索引来访问字符串的某一字符,修改成大小写、某一字符串出现的位置、根据index或者range获取截取字符串,但是不能修改原字符串的值。
var name = 'wangDaJi';
var j = name[6]; // 根据索引来访问
var nameLen = name.length;// 获取字符串的长度
var nameLen = name.length;// 获取字符串的长度
var nameLowerCase = name.toLowerCase();// 字符串变成小写
var nameUpperCase = name.toUpperCase();// 字符串变成大写
var daIndex = name.indexOf('Da');// da出现的位置
var nametemp = name.substring(4);// 获取名
name[0] = 'i';// 这不会改变原字符串的值
console.log(`我的名字:${name},我的小名的index:${nametemp},我的字符串长度:${nameLen},我的第六个字符:${j},名字小写:${nameLowerCase},名字大写:${nameUpperCase},da出现的index:${daIndex}`);
3. 布尔值
一个布尔值只有true、false两种值,要么是true,要么是false。在条件判断中,把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true。
4.null和undefined
null表示一个空的值,而undefined表示值未定义。undefined仅仅在判断函数参数是否传递的情况下有用。
5. 数组
JavaScript的数组可以包括任意数据类型。
[1, 2, 3.14, 'Hello', null, true];
new Array(1, 2, 3); // 创建了数组[1, 2, 3]
这些操作会修改数组:
通过sort
和reverse
来排序和反转原数组。
splice
从指定的索引开始删除若干元素,然后再从该位置添加若干元素。
通过修改数组的长度length
、根据索引对应的元素来修改原数组。
这些操作会返回一个新的数组:
通过slice
来截取数组,从第几个元素开始的几个元素。
通过push
在尾部添加若干元素和pop
去除最后一个元素。
通过unshift
往头部添加若干元素和shift
去除头部的第一个元素。
concat
拼接两个数组,并返回一个新的数组。
join
会将数组使用指定的字符串连接起来,并返回一个字符串。
通过indexOf
搜索元素值来返回元素对应的index。
多维数组:顺序的索引进行读写元素。
6. 对象
JavaScript的对象是一组由键-值组成的无序集合,键又称为对象的属性。对象的所有属性都是字符串,属性对应的值可以是任意数据类型。
var person = {
name: 'wangwei',
age: 26,
tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
city: 'shanghai'
};
// 获取属性
person.name;
person.tags;
通过点语法读写属性的值,访问一个没有定义的属性并赋值,会动态的添加这个属性。当然,也就可以使用delete删除一个属性,检查对象包含某一属性。
var person = {
name: 'wangwei',
age: 26,
tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
city: 'shanghai'
};
person.age = 27;
person.school = '家里登大学';
// 获取属性
console.log(person.name);
console.log(person.age);
console.log(person.school);
// delete school property
delete person.school;
// in判断一个属性存在,或是对象继承得到的属性:
if ('school' in person) {
console.log('person.school存在哦');
} else {
console.log('person.school不存在');
}
// hasOwnProperty判断当前对象是否包含这个属性
if (person.hasOwnProperty('school')) {
console.log('person.school存在哦');
} else {
console.log('person.school不存在');
}
7. 变量
JavaScript定义一个变量的方式:类型+变量名 = ...。
由于JavaScript是动态语言,变量可以被反复赋值,赋值的时候不会检查类型。
var x = 100;
var person = {
name: 'wangwei',
age: 26,
tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
city: 'shanghai'
};
x = person;
console.log(x);
8. strict模式
strict模式是弥补JavaScript在设计初期对于全局变量的一种声明方式,因为会导致具有相同变量名的两个变量使用时候发生错乱。开启strict模式可以强制定义变量时候添加‘var’字段。
9. for in
for in
:遍历数组返回索引,遍历对象属性索引key值
// 数组的for in
arr = ['aaa', 'bbb', 'ccc'];
for (var i in arr) {
console.log(arr[i]);
}
console.log("");
// 对象的for in
var person = new {
name: 'wangwei',
age: 26,
tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
city: 'shanghai'
};
for (var key in person) {
console.log(person[key]);
}
10. iterable
iterable类型(ES6引入)包括Array、Map、 Set。
,其key可以为任何对象。Map存储的是键值对,Set只存储的是key,两者的值都保持唯一性,重复值会被自动过滤。
11. for of
for of
:遍历数组、Map、Set返回元素,遍历对象返回对象的值
// 数组的for in
arr = ['aaa', 'bbb', 'ccc'];
for (var u of arr) {
console.log(u);
}
console.log("");
// 对象的for of
var person = new Map();
person.set('name', 'wangwei');
person.set(12, 26);
person.set('tags', ['objective-c', 'swift', 'java', 'c', 'python', 'go']);
person.set('city', 'shanghai');
for (var u of person) {
console.log(u);
}
console.log("");
// 对象的for of
var person1 = new Set();
person1.add('小名');
person1.add('王大吉');
person1.add('小名');
person1.add('小闯');
for (var u1 of person1) {
console.log(u1);
}
12. forEach
// 数组的遍历
var myarr = ['A', 'B', 'C'];
myarr.forEach(function (e, i, a) {
console.log(`arr的第${i}是${e}`);
});
// Set的遍历
var myset = new Set(['a', 'b', 'c']);
myset.forEach(function(value, same, set) {
console.log(`set的是${value}`);
});
// map的遍历
var mymap = new Map([[name, 'wandaji'], ['score', 100], [10086, '移动号码']]);
mymap.forEach(function(value, key, map) {
console.log(value);
});
13. 简单函数
函数在js中是一等公民。函数的定义方式:
// 函数定义的第一种方式
function abs(x, y, z) {
if ((typeof x!= 'number') && (typeof y!= 'number') && (typeof z!= 'number')) {
throw 'Not a number'
} else {
return x + y + z;
}
}
console.log(abs(1, 2, 3));
// 函数定义的第二种方式,变量指向一个匿名函数
var abs1 = function (a, b, c) {
if (typeof a!= 'number' && typeof b!= 'number' && typeof c!= 'number') {
throw 'Not a number'
} else {
return a - b - c;
}
};
console.log(abs1(1, 2, 3));
js函数的参数是可以接受任意多个的,arguments
参数,来记录参数的所有数值,其类似一个数组。
// 函数定义的第二种方式
var abs1 = function (a, b, c) {
if (arguments.length < 3) {
throw 'arguments error'
}
console.log("arguments length:" + arguments.length);
if (typeof a!= 'number' && typeof b!= 'number' && typeof c!= 'number') {
throw 'Not a number'
} else {
return a - b - c;
}
};
console.log(abs1(1, 2, 3, 4));
rest
参数,可以用来装多参数的情况,或者装载多余的参数,rest
是一个数组。
// 求一串数字的和
var sum = function (...rest) {
var sum = 0;
rest.forEach(function (e, i, rest) {
sum = sum + e;
});
return sum;
};
console.log(sum(10, 11, 12, 13, 15));
14. 全局作用域、名字空间
全局作用域:不在任何函数内定义的变量就具有全局作用域。JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性。
名字空间: 多个js文件中如果出现多个相同变量,会造成命名的冲突,有一个解决方法:就是值定义一个全局变量,将所有的变量放到这个全局变量中,可以减少全局变量的冲突的可能。
// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
return 'foo';
};
14. let 和 const
let
: 块级作用域中使用
const
:常量:
const const11 = 11;
const11 = 12;// 可能会报错
console.log(const11);
15. 解构赋值
ES6中,解构赋值可以大大简化代码量:
基本的理解:
// 数组解析赋值
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
// 对象解析赋值
var p = {
name: 'wangdaji',
age: 16,
address: {
city: 'shanghai'
}
}
var {name, age, address:{city}} = p;
console.log('name = ' + name + ', age = ' + age + ', city = ' + city);
使用场景:(1)交换两个变量的值(2)将一个对象传入函数参数(3)快速获取当前页面的域名和路径。
// 快速交换两个值
var x = 10;
var y = 20;
[x, y] = [y, x];
console.log('x:' + x);
console.log('y:' + y);
// 将一个对象传入函数参数
var p = {
name: 'wangdaji',
age: 16,
address: {
city: 'shanghai'
}
}
function logpersion({name, age, address:{city}}) {
console.log('name:' + name + ', age:' + age + ', city:' + city);
}
logpersion(p);
16. this、apply、call
this
变量:this是一个特殊变量,它始终指向当前对象。this和它声明环境无关,而完全取决于他的运行时环境。
可以通过apply
来指定需要绑定的this
变量。
// this的使用1
var wangdaji = {
name: '王大吉',
address: {
city: 'shanghai'
},
brith: 1993,
age: function() {
let y = new Date().getFullYear();
return y - this.brith;
}
}
console.log(wangdaji.age());
// this的使用2
function getAge() {
let y = new Date().getFullYear();
return y - this.brith;
}
var wangdaji1 = {
name: '王大吉',
address: {
city: 'shanghai'
},
brith: 1994,
age: getAge
}
console.log(wangdaji1.age());
// 函数的apple方法,来指定this,第二个参数表示的是一个数组。
var wangdaji1Age = getAge.apply(wangdaji1, null);
console.log(wangdaji1Age);
apply()
与call()
相比,call()
的参数是一排顺序的参数,apply()
则是一个参数数组。
装饰器
:利用apply()
,我们还可以动态改变函数的行为。