1.1、字符串
1.1.1、字符串语法
1、 正常字符串我们使用用''
或""
括起来的字符表示。
- 如果如果
'
本身也是一个字符,那就可以用""
括起来
测试代码:
var a = "I"+"'"+"m"+" "+"Ok"
效果:
- 如果字符串内部既包含
'
又包含"
怎么办?可以用转义字符\
来标识,比如:I'm "OK"!
,我们可以用转义字符
测试代码:
var a ='I\'m \"OK\"!';
效果:
2、注意转义字符 ()
\' 表示它是一个字符串
\n 换行
\t 空格
\u4e2d \u#### Unicode字符
\x41 Ascll字符
\\ 表示字符就是\
3、多行字符串编写(``)
由于多行字符串用\n
写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ** ... ** 表示:
测试代码:
var msg =
`hello
world
你好呀
`
效果:
注意:反引号在键盘的ESC下方,数字键1的左边:
4、模板字符串($)
- 要把多个字符串连接起来,可以用
+
号连接:
测试代码:
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);
效果:
- 如果有很多变量需要连接,用
+
号就比较麻烦。ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量.
测试代码:
var name = '姜嘉航';
var age = 18;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
效果:
1.1.2、操作字符串
1、获取字符串长度
测试代码:
var s = 'Hello, world!';
s.length; // 13
2、获取子串某个指定位置的字符
测试代码:
//使用类似Array的下标操作,索引号从0开始
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错,但一律返回undefined
3、字符串的可变性(不可变)
如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果
测试代码:
var s = 'Test';
s[0] = 'X';//给'T'赋值为'X'
alert(s); // s仍然为'Test'
效果:
4、大小写转换
测试代码:
var student = 'jjh'
console.log(student.toUpperCase()) //JJH
console.log(student.toLowerCase()) //jjh
5、获取指定字符的下标
测试代码:
var student = 'jjh'
console.log(student.indexOf('h')) //2
6、截取字符串(含头不含尾)
测试代码:
var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
s.substring(7); // 从索引7开始到结束,返回'world'
效果:
1.2、数组
1.2.1、Array的特性
1.Array可以包含任意的数据类型,并通过索引来访问每个元素。
测试代码:
var arr = [1, 2, 3.14, 'Hello', null, true];//通过下标取值和赋值
arr[0] = 1
2.Array可以通过索引把对应的元素修改为新的值
测试代码:
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']
注意:如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化。大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。
测试代码:
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, empty × 2, "x"]
1.2.2、操作数组
1、长度
测试代码:
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
注意:加入给 arr.length 赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
测试代码:
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, empty × 3]
arr.length = 2;
arr; // arr变为[1, 2]
效果:
2、indexOf():通过元素获得下标索引
测试代码:
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf('30'); // 元素'30'的索引为2
效果:
注意:字符串的 “30” 和数字 30 是不同的
3、slice() 截取Array的一部分,返回一个新数组,类似于String中的 substring()
测试代码:
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
//也是含头不含尾
- 3.1、如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array
测试代码:
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var aCopy = arr.slice(); aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G'] aCopy === arr; // 复制的新数组和原数组不相等范围值是false
4、push(),pop()
push()向Array的末尾添加若干元素,pop()则是把Array的最后一个元素删除掉
测试代码:
var arr = [10, 20];
arr.push(3, 4); // 返回Array新的长度: 4
arr; // [10, 20, 3, 4]
arr.pop(); // pop()返回4
arr; // [10, 20, 3]
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次 返回10
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []
效果图:
5、unshift() , shift()
如果要往Array的头部添加若干元素,使用unshift()
方法,shift()
方法则把Array
的第一个元素删掉
测试代码:
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []
效果:
6、排序 sort()
测试代码:
var arr = ["B", "C", "A"]
arr.sort()
arr; //["A", "B", "C"]
7、元素反转 reverse()
测试代码:
var arr = ["A", "B", "C"]
arr.reverse()
arr; //["C", "B", "A"]
8、concat()
concat()
方法把当前的Array
和另一个Array
连接起来,并返回一个新的Array
测试代码:
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
注意: concat()并没有修改数组,只是会返回一个新的数组
9、 join()
把当前Array
的每个元素都用指定的字符串连接起来,然后返回连接后的字符串
测试代码:
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
10、多维数组
如果数组的某个元素又是一个Array
,则可以形成多维数组
测试代码:
arr = [[1,2],[3,4],["5","6"]];
//取出多维数组的元素
arr[1][1]; //4
练习:在新生欢迎会上,你已经拿到了新同学的名单,请排序后显示:欢迎XXX,XXX,XXX和XXX同学!
测试代码:
var arr = ['小明', '小红', '大军', '阿黄'];
arr.sort() // ["大军", "小明", "小红", "阿黄"]
var msg = `欢迎${arr[0]},${arr[1]},${arr[2]},和${arr[3]}同学!`
alert(msg)
效果:
1.3、对象
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。
1.3.1、语法
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
测试代码:
//定义了一个person对象,它有四个属性!
var person = {
name: "jjh",
age: 3,
email: "[email protected]",
score: 100
}
Js中对象, {…..} 表示一个对象, 键值对描述属性 xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
注意:JavaScript中的所有的键都是字符串,值是任意对象!
1.3.2、对象的操作
1、 对象赋值
person.name = "Godles"
"Godles"
person.name
"Godles"
2、使用一个不存在的对象属性,不会报错! undefined
person.haha
undefined
3、动态的删减属性,通过 delete 删除对象的属性
delete person.name //返回true
person //{age: 3, email: "[email protected]", score: 100}
4、动态的添加,直接给新的属性添加值即可
person.haha = "haha" //"haha"
person //{age: 3, email: "[email protected]", score: 100, haha: "haha"}
5、判断属性值是否在这个对象中? (xxx in xxx)
'age' in person //返回true
//继承
'toString' in person //返回true
6、 判断一个属性是否是这个对象自身拥有的 方法(hasOwnProperty())
person.hasOwnProperty('toString') //false
person.hasOwnProperty('age') //true
1.4、流程控制
1.4.1、条件判断
if判断
测试代码:
var age = 3;
if (age>3){ //第一个判断
alert("haha");
}else if(age<5) { //第二个判断
alert("heihei");
}else { //否则,,
alert("heihei");
}
1.4.2、循环
1、while循环
测试代码:
var age = 3;
while(age<100){
age = age + 1;
console.log(age)
}
do{
age = age + 1;
console.log(age)
}while(age<100)
2、do... while循环
测试代码:
do{
age = age + 1;
console.log(age)
}while(age<100);
3、for循环
测试代码:
for (let i = 0; i < 100 ; i++) {
console.log(i)
}
4、forEach 循环
5.1 引入
测试代码:
var age = [12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function (value) {
console.log(value)
})
5、for…in 循环
测试代码:
// 语法:for(var index in object){}
for(var num in age){
if (age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
}
1.5、Map 和 Set
ES6 标准新增的数据类型,可以根据浏览器的支持情况决定是否要使用。
1.5.1、Map
Map
是一组键值对的结构,具有极快的查找速度。
//ES6 Map
//学生的成绩,学生的名字
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value=100!
map.set('admin',123456); //新增或修改! Map(4) {"tom" => 100, "jack" => 90, "haha" => 80, "admin" => 123456}
map.delete("tom"); //true
map //Map(3) {"jack" => 90, "haha" => 80, "admin" => 123456}
由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉
测试代码:
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
1.5.2、set
Set
和Map
类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set
中,没有重复的key。
测试代码:
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
1、重复元素在Set
中自动被过滤:
测试代码:
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
注意:数字3和字符串‘3’是不同的元素
2、通过add(key)
方法可以添加元素到Set
中,可以重复添加,但不会有效果
测试代码:
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
3、通过delete(key)
方法可以删除元素:
测试代码:
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
1.6、iterable
es6 新特性
遍历
Array
可以采用下标循环,遍历Map
和Set
就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable
类型,Array
、Map
和Set
都属于iterable
类型。具有
iterable
类型的集合可以通过新的for ... of
循环来遍历
1、遍历数组
//通过for of / for in 下标
var arr = [3,4,5]
for (var x of arr){
console.log(x)
}
2、遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
console.log(x)
}
3、遍历set
var set = new Set([5,6,7]);
for (let x of set) {
console.log(x)
}