18.JS基础（四）

上一篇：17.JS基础（三）

ES5 Array 扩展

1. indexOf() 方法返回指定元素在数组中第一次出现的索引，不存在则返回 -1

   var arr1 = [12,26,8,35,7,35,2]
   
   var res1 = arr1.indexOf(35)
   
    console.log( res1 ) // 3
   
    if ( arr1.indexOf(135) !== -1 ) {
   
      console.log( '数组中有这个值' )
   
    } else {
   
     console.log( '没有这个值' )
   
   }
   

2. lastIndexOf() 方法返回指定元素在数组中最后一次出现的索引，不存在则返回 -1

   var arr1 = [12,26,8,35,7,35,2]
   
   var res2 = arr1.lastIndexOf(35)
   
   console.log( res2 ) // 5
   

3. forEach() 方法为每个元素执行对应的方法，无返回值

4. map() 方法对数组的每个元素进行一定操作后，返回一个新的数组

   var arr2 = ['a','b','c','d']
   
    var res4 = arr2.map(function (item,index,arr){
   
     return item+1
   
   })
   
   console.log( res4 )// ["a1", "b1", "c1", "d1"]
   

5. filter() 方法返回一个新的数组，通过检查指定数组中满足条件的所有元素并返回

   var arr3 = [
   
     {name:'laowang',age:38,sex:'女'},
   
     {name:'laozhang',age:26,sex:'女'},
   
     {name:'laotao',age:35,sex:'男'},
   
     {name:'xiaoli',age:17,sex:'男'},
   
     {name:'xiaofang',age:15,sex:'女'}
   
   ]
   
   var res5 = arr3.filter(function (item,index,arr){
   
     // return item.age < 18
   
     return item.sex == '女' || item.age < 18
   
   })
   
   console.log( res5 )
   

6. some() 用于检测数组中的元素是否满足指定条件，有一项满足条件就返回true ==>或||

   var arr3 = [
   
     {name:'laowang',age:38,sex:'女'},
   
     {name:'laozhang',age:26,sex:'女'},
   
     {name:'laotao',age:35,sex:'女'},
   
     {name:'xiaoli',age:17,sex:'女'},
   
     {name:'xiaofang',age:15,sex:'女'}
   
   ]
   
   var res6 = arr3.some(function (item){
   
     return item.sex == '男'
   
   })
   console.log( res6 )
   

7. every() 判断数组中每一项都是否满足条件，所有项都满足条件才返回true ==> 与&&

   var arr3 = [
   
     {name:'laowang',age:38,sex:'女'},
   
     {name:'laozhang',age:26,sex:'女'},
   
     {name:'laotao',age:35,sex:'女'},
   
     {name:'xiaoli',age:17,sex:'女'},
   
     {name:'xiaofang',age:15,sex:'女'}
   
   ]
   
   var res7 = arr3.every(function (item){
   
     return item.sex == '女'
   
   })
   
   console.log( res7 )
   

8. isArray() 判断对象是否为数组

   var a1 = {a:1,b:2}
   
   var a2 = function (){}
   
   var a3 = [1,2]
   
    console.log( Array.isArray(a1) )// false
   
   console.log( Array.isArray(a2) )// false
   
    console.log( Array.isArray(a3) )// true
   

9. reduce() 归并，方法会遍历数组的所有项，然后构建一个最终返回的值

• 方法接收两个参数：一个在每一项上调用的函数和作为归并基础的初始值（可选）
• 函数接收4个参数：前一个值、当前值、当前项的索引和数组对象
• 这个函数返回的任何值都会作为第一个参数自动传给下一项
• 语法：arr.reduce(function (previous,current,index,arr){ },initVal)
• 没有初始值的时候：
  • 第一次执行，previous是数组的第一个元素，current是数组的第二个元素值
  • 第二次执行，previous是上次的返回值，current是数组的第三个元素值
• 有初始值的时候：
  • 第一次执行，previous是初始值，current是数组的第一个元素值
  • 第二次执行，previous是上次的返回值，current是数组的第二个元素值

// 数组去重
var arr = [1,2,3,4,3,2,1]
var res = arr.reduce(function (pre,cur) {
    pre.indexOf(cur) === -1 && pre.push(cur)
    return pre
},[])
console.log(res); // [1, 2, 3, 4]

1. Array.isArray() 方法检查对象是否为数组

字符串 String

JavaScript的字符串就是用单引号或双引号括起来的字符

基本操作

• 创建字符串：

  • var str1 = ‘abc’
  • var str2 = new String(‘abc’)

• length 属性

  • str1.length 返回字符串的长度(字符的个数)

• 可以通过索引(下标)访问字符串中的某个字符：str1[0]、str1[1]

• 字符串之间使用 + 号进行拼接：‘hello’ + ’ world’ -> ‘hello world’

• 遍历字符串：

  • for 循环
  • for/in 循环

字符串常用API

API（Application Programming Interface,应用程序编程接口）是预先定义好的函数

1. toLowerCase() 方法将整个字符串转成小写字母

2. toUpperCase() 方法将整个字符串转成大写字母

3. indexOf() 方法返回字符串中子串第一处出现的索引值，没有匹配返回-1

4. lastIndexOf() 方法返回字符串中子串最后出现的索引值，没有匹配返回-1

5. substr() 方法返回一个从指定位置开始的指定长度的子串

   • var str = str1.substr(start,length);
   • 参数start必须，字符的起始位置，length参数可选，截取字符串的长度

6. substring() 方法返回字符串中介于两个指定下标之间的子串

   • var str = str1.substring(start,end);
   • 包含start处的字符，不包含end处的字符

7. slice() 方法返回字符串中的部分字符（支持负值）

   • var str = str1.slice(start,end);
   • 包括start处的字符，但不包括end处字符

8. split() 方法把一个字符串分割成字符串数组，返回数组

   • var str = str1.split(‘分割符’,length);
   • 第一个参数指定分割的符号，第二个参数可选，为返回数组的长度

9. concat() 方法将两个或多个字符串组合起来，返回一个新的字符串

10. charAt() 方法返回指定索引位置的字符

11. replace() 方法用于在字符串中用一些字符替换另一些字符，返回替换后的字符串

    • var newStr = str.replace(‘abc’,‘替换abc’);
    • var newStr = str.replace(‘敏感字’, function (str){ return ‘**’; })

12. search() 方法返回字符串中首次匹配项的索引，没有匹配返回 -1

    • str.search(regexp) 如果传入一个非正则表达式对象 obj，则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象

13. charCodeAt() 方法返回指定索引处字符的unicode编码值 (十进制)

14. String.fromCharCode(num1[,num2,…]) 方法根据unicode编码值返回字符串

    • var str = String.fromCharCode(65,66,67); // ‘ABC’

编码字符集

编码字符集：（简称字符集，如ASCII、GBK、Unicode）

• 编码字符集，用一个编码值来表示一个字符在库表中的位置，这个值称为字符对应于编码字符集的序号

ASCII码是一套编码规则，规定了常用符号用哪些二进制数来表示

• ASCII码占用一个字节，可以有0～255共256个取值。前128个为常用的字符如运算符，字母 ，数字等键盘上可以显示的，后 128个为特殊字符是键盘上找不到的字符。

ASCII编码主要针对的是英语，全世界有上百种语言，中国制定了GB2312编码，日本制定了Shift_JIS编码，韩国制定了Euc-kr编码…

各国有各国的标准，就会不可避免地出现冲突，结果就是，在多语言混合的文本中，显示出来会有乱码

Unicode编码把所有语言都统一到一套编码里，这样就不会再有乱码问题了!!

Unicode 编码是一个很大的集合，现在的规模可以容纳100多万个符号

Unicode 编码开头的 128 个和 ASCII 编码一样

编码字符集Unicode，有UTF-8、UTF-16、UTF-32等多种字符编码

ASCII 编码表

基本类型和引用类型

• 基本数据类型指的是简单的数据段
• 引用数据类型指的是有多个值构成的对象

基本类型：number、string 、boolean、null 和 undefined

• 基本数据类型是保存在栈内存中的简单数据段
• 基本类型是按值访问的，可以直接操作保存在变量中的实际值

var a = 10
var b = a   // 将a的值拷贝一份，赋值个变量b
b = 20      //a的值改变与b无关,b的改变对变量a没有影响
console.log(a)  //10
console.log(b)  //20

变量b只是保存了变量a复制的一个副本，所以变量b的改变，对变量a没有影响

引用类型：对象类型，如 Object 、Array 、Function 等等

• 引用数据类型是保存在堆内存中的对象
• 在JS中不可以直接操作堆内存中的对象，只能操作对象在栈内存中的引用地址

var obj1 = {name: '老王', age: 28}
var obj2 = obj1    // 将obj1的引用地址赋值给obj2
obj2.name = '老赵' // obj1去修改了相同的对象，所以，所有指向这个对象的变量都受影响
console.log(obj1.name)  //老王
console.log(obj2.name)  //老赵

var obj2 = obj1 在栈内存中把堆内存对象的引用地址复制一份给变量obj2

意味着 obj1和obj2 指向同一个堆内存对象

obj2.name = ‘老赵’ 实际上改变的是堆内存对象

所以，obj1.name和obj2.name 都是’老赵’(引用地址相同)

函数的值传递和引用传递
示例：

// 函数的值传递                    //函数的引用传递

var a = 10                       var obj = {name: '李四',age:24}

function fn1(a){                 function fn2(a){

  console.log( a )//10              console.log( a.age )//24

  a = 20                            a.age = 25

}                                }

fn1(a)//把变量a的值传递给形参a       fn2(obj)//将obj的引用地址传递给形参a

console.log( a )//10             console.log( obj.age )//25

关系运算符

适用于基本数据类型

== 不考虑数据类型，只比较值

=== 先比较数据类，再比较值

引用类型比较引用地址

var obj1 = {name:'老王',age:35}

var obj2 = {name:'老王',age:35}

var obj3 = obj2

console.log( obj1 == obj2 )//false

console.log( obj1 === obj2 )//false

console.log( {} === {} )//false

console.log( obj3 === obj2 )// true

基本包装类型

基本类型：Undefined，Null，Boolean，Number，String

var str = 'hello'; //string 基本类型
var s2 = str.charAt(0); //为什么它能召唤出一个 charAt() 的方法？

//在执行上面代码的时候，后台会自动完成以下动作 ：
var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象
var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回给s2.
_str = null; // 3 之后这个临时创建的对象就被销毁了

alert(s2);//h
alert(str);//hello  

基本包装类型：Boolean，Number，String

1. 所有引用类型都可以动态添加属性方法

2. 基本类型不可以动态添加属性方法

   例题

   var str = 'abc' // 基本类型
   
   var letter = str.charAt(2)
   
   console.log( letter )
   

   后台：

   var _str = new String('abc')//创建一个对象
   
   var letter = _str.charAt(2)//用对象调用方法
   
   // _str = null    //销毁这个临时的对象
   
   console.log( _str )
   

   包装的过程（装箱）

   当执行这句代码的时候 letter = str.charAt(2) 后台完成了以下3个工作：

   1.创建数据对应类型的对象 var _str = new String(‘abc’)

   2.使用该对象去调用charAt方法 var letter = _str.charAt(2)

   3.销毁这个临时对象_str _str = null

下一篇：19.JS基础（五）

🌸友情推荐：全栈大佬笔记     Android领域肥宅    要推荐可私聊